@isavia-sut/dd-cdn-npm 1.0.0

package/CSS/base-style.css

@@ -0,0 +1,2664 @@
+/* =============================================================================
+   KEF BRAND STYLE SYSTEM
+   Design Tokens · Typography · Grid · Components
+   =============================================================================
+
+   TABLE OF CONTENTS
+   ─────────────────────────────────────────────────────────────────────────────
+    1.  DESIGN TOKENS
+         1a. Color Primitives
+         1b. Brand Color Aliases
+         1c. Semantic Tokens — Background
+         1d. Semantic Tokens — Foreground
+         1e. Semantic Tokens — Border
+         1f. Semantic Tokens — Form
+         1g. Semantic Tokens — Overlay
+         1h. Spacing & Size
+         1i. Border Radius
+         1j. Transition & Motion
+         1k. Shadows
+         1l. Typography
+         1m. Grid
+         1n. Z-Index
+
+    2.  TYPOGRAPHY UTILITIES
+
+    3.  SHADOW UTILITIES
+
+    4.  GRID & LAYOUT
+
+    5.  BUTTONS
+         Base · Primary · Hero · Utility · Link
+         Icon · Nav · Play · Square · History · Chat · Share
+
+    6.  FORMS
+         Form Group · Input · Textarea · Select
+         Checkbox · Radio · Search · Switch · File Upload
+         Date Select · Date Picker
+         Flight Lookup · Newsletter · reCAPTCHA
+
+    7.  FEEDBACK
+         Alert (+ Small, Banner variants)
+         Progress Bar · Status Label · Badge
+
+    8.  MODAL
+
+    9.  CARDS
+         Standard · Compact · Overlay
+         Merchant Card · Flight Card · Micro Card
+
+   10.  TAGS
+
+   11.  NAVIGATION
+         Nav Menu · Secondary Nav · Language Selector
+         Breadcrumbs · Tabs · Filter · Accordion
+
+   12.  TABLE
+
+   13.  SECTION HEADING
+
+   14.  SITE HEADER
+
+   15.  SITE FOOTER
+   ─────────────────────────────────────────────────────────────────────────────
+*/
+
+
+/* =============================================================================
+   FONT
+   ============================================================================= */
+
+@font-face {
+  font-family: 'KEF Oasis';
+  src: url('../Resources/Fonts/KefFont.woff2') format('woff2');
+  font-weight: 300 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+
+/* =============================================================================
+   1. DESIGN TOKENS
+   ============================================================================= */
+
+:root {
+
+  /* ── 1a. Color Primitives ── */
+
+  /* Leifur Black */
+  --color-leifur-black-900: #101010;
+  --color-leifur-black-800: #232323;
+  --color-leifur-black-700: #353535;
+  --color-leifur-black-600: #484848;
+  --color-leifur-black-500: #404040;
+  --color-leifur-black-400: #5f5f5f;
+  --color-leifur-black-300: #919191;
+  --color-leifur-black-200: #b5b5b5;
+  --color-leifur-black-100: #e7e7e7;
+
+  /* Hrímfaxi White */
+  --color-hrimfaxi-white-900: #ffffff;
+  --color-hrimfaxi-white-800: #f5f5f5;
+  --color-hrimfaxi-white-700: #ebebeb;
+  --color-hrimfaxi-white-600: #e0e0e0;
+  --color-hrimfaxi-white-500: #d6d6d6;
+  --color-hrimfaxi-white-400: #cccccc;
+  --color-hrimfaxi-white-300: #c2c2c2;
+  --color-hrimfaxi-white-200: #b8b8b8;
+  --color-hrimfaxi-white-100: #adadad;
+
+  /* Geysir Blue */
+  --color-geysir-blue-900: #0037ad;
+  --color-geysir-blue-800: #002e94;
+  --color-geysir-blue-700: #003ea0;
+  --color-geysir-blue-600: #0044c6;
+  --color-geysir-blue-500: #004df4;
+  --color-geysir-blue-400: #4d80f6;
+  --color-geysir-blue-300: #85aafc;
+  --color-geysir-blue-200: #b3cafd;
+  --color-geysir-blue-100: #e6edfe;
+
+  /* Gullfaxi Gold */
+  --color-gullfaxi-gold-900: #5c4220;
+  --color-gullfaxi-gold-800: #6b4e27;
+  --color-gullfaxi-gold-700: #85632d;
+  --color-gullfaxi-gold-600: #a0752f;
+  --color-gullfaxi-gold-500: #bb8b3f;
+  --color-gullfaxi-gold-400: #d4a65a;
+  --color-gullfaxi-gold-300: #e8c98e;
+  --color-gullfaxi-gold-200: #f2ddb4;
+  --color-gullfaxi-gold-100: #faf2e2;
+
+  /* Gljáfaxi Green */
+  --color-gljafaxi-green-900: #075e1a;
+  --color-gljafaxi-green-800: #0a7c22;
+  --color-gljafaxi-green-700: #0d9935;
+  --color-gljafaxi-green-600: #3aad49;
+  --color-gljafaxi-green-500: #68c070;
+  --color-gljafaxi-green-400: #96d49a;
+  --color-gljafaxi-green-300: #bde4bf;
+  --color-gljafaxi-green-200: #d9f0da;
+  --color-gljafaxi-green-100: #f0faf0;
+
+  /* Hekla Red */
+  --color-hekla-red-900: #7a0f05;
+  --color-hekla-red-800: #9c1508;
+  --color-hekla-red-700: #b81c0c;
+  --color-hekla-red-600: #c9220f;
+  --color-hekla-red-500: #db2a12;
+  --color-hekla-red-400: #e55238;
+  --color-hekla-red-300: #ef8070;
+  --color-hekla-red-200: #fbeae7;
+  --color-hekla-red-100: #fdf4f3;
+
+  /* ── 1b. Brand Color Aliases ── */
+
+  --color-leifur-black:   var(--color-leifur-black-900);
+  --color-hrimfaxi-white: var(--color-hrimfaxi-white-900);
+  --color-geysir-blue:    var(--color-geysir-blue-500);
+  --color-gullfaxi-gold:  var(--color-gullfaxi-gold-500);
+  --color-gljafaxi-green: var(--color-gljafaxi-green-500);
+  --color-hekla-red:      var(--color-hekla-red-500);
+  --color-amber:          #db8112;
+
+  --color-primary:        var(--color-geysir-blue);
+  --color-primary-active: var(--color-geysir-blue-900);
+  --color-secondary:      var(--color-leifur-black-900);
+
+  /* ── 1c. Semantic Tokens — Background ── */
+
+  --bg:                        var(--color-hrimfaxi-white-900);   /* page / app background */
+  --bg-surface:                var(--color-hrimfaxi-white-900);   /* card / panel surface */
+  --bg-surface-brand:          var(--color-geysir-blue-500);      /* branded surface */
+
+  --bg-fill:                   var(--color-hrimfaxi-white-900);
+  --bg-fill-inverse:           var(--color-leifur-black-900);
+  --bg-fill-brand:             var(--color-geysir-blue-500);
+  --bg-fill-brand-minimal:     var(--color-geysir-blue-100);
+  --bg-fill-brand-contrast:    var(--color-geysir-blue-900);
+  --bg-fill-emphasis:          var(--color-gullfaxi-gold-500);
+  --bg-fill-emphasis-contrast: var(--color-gullfaxi-gold-700);
+  --bg-fill-warning:           var(--color-amber);
+  --bg-fill-urgent:            var(--color-hekla-red);
+  --bg-fill-urgent-minimal:    var(--color-hekla-red-200);
+  --bg-fill-success:           var(--color-gljafaxi-green);
+  --bg-fill-neutral:           var(--color-leifur-black-100);
+  --bg-fill-light:             var(--color-hrimfaxi-white-800);
+
+  /* ── 1d. Semantic Tokens — Foreground ── */
+
+  --fg:           var(--color-leifur-black-900);   /* primary text */
+  --fg-secondary: var(--color-leifur-black-500);   /* secondary text */
+  --fg-tertiary:  var(--color-leifur-black-400);   /* placeholder / hint */
+  --fg-invert:    var(--color-hrimfaxi-white-900); /* text on dark backgrounds */
+  --fg-brand:     var(--color-geysir-blue-500);    /* brand-coloured text */
+  --fg-urgent:    var(--color-hekla-red);          /* error / urgent text */
+  --fg-neutral:   var(--color-leifur-black-300);   /* muted text */
+
+  /* ── 1e. Semantic Tokens — Border ── */
+
+  --border:                var(--color-leifur-black-100);
+  --border-brand:          var(--color-geysir-blue-500);
+  --border-brand-contrast: var(--color-geysir-blue-900);
+  --border-contrast:      var(--color-leifur-black-900);
+  --border-inverse:        var(--color-hrimfaxi-white-900);
+
+  /* ── 1f. Semantic Tokens — Form ── */
+
+  --form-bg-surface:        var(--color-hrimfaxi-white-800);
+  --form-bg-surface-active: var(--color-hrimfaxi-white-900);
+  --form-border:            var(--color-leifur-black-100);
+  --form-border-active:     var(--color-leifur-black-200);
+  --form-border-error:      var(--color-hekla-red);
+
+  /* ── 1g. Semantic Tokens — Overlay ── */
+
+  --overlay: rgba(0, 0, 0, 0.25);
+
+  /* ── 1h. Spacing & Size ── */
+
+  --space-050:  4px;
+  --space-100:  8px;
+  --space-150:  12px;
+  --space-200:  16px;
+  --space-250:  20px;
+  --space-300:  24px;
+  --space-400:  32px;
+  --space-500:  40px;
+  --space-600:  48px;
+  --space-700:  56px;
+  --space-800:  64px;
+  --space-900:  72px;
+  --space-1000: 80px;
+
+  --size-100: 8px;
+  --size-200: 16px;
+  --size-300: 24px;
+  --size-400: 32px;
+  --size-500: 40px;
+  --size-600: 48px;
+  --size-700: 56px;
+  --size-800: 64px;
+  --size-tag:  26px;
+  --size-badge: 18px;
+
+  /* ── 1i. Border Radius ── */
+
+  --radius-025:  2px;
+  --radius-050:  4px;
+  --radius-100:  8px;
+  --radius-150:  12px;
+  --radius-200:  16px;
+  --radius-full: 360px;
+
+  /* ── 1j. Transition & Motion ── */
+
+  --duration-fast:   0.15s;
+  --duration-normal: 0.2s;
+  --duration-slow:   0.3s;
+  --ease:            ease;
+  --ease-in:         ease-in;
+  --ease-out:        ease-out;
+  --ease-in-out:     ease-in-out;
+
+  /* ── 1k. Shadows ── */
+
+  --shadow-large:  0px 26px 40px 0px rgba(0, 0, 0, 0.12);
+  --shadow-medium: 0px 2px 10px 0px rgba(0, 0, 0, 0.10),
+                   0px 12px 40px 0px rgba(0, 0, 0, 0.08);
+  --shadow-sm:     0 1px 4px rgba(0, 0, 0, 0.08);
+  --shadow-md:     0 4px 16px rgba(0, 0, 0, 0.10);
+  --shadow-lg:     0 8px 32px rgba(0, 0, 0, 0.12);
+  --shadow-xl:     0 16px 56px rgba(0, 0, 0, 0.14);
+
+  /* ── 1l. Typography ── */
+
+  --font-family-main: 'KEF Oasis', Arial, sans-serif;
+
+  --font-header-1-size:       96px;
+  --font-header-1-weight:     700;
+  --font-header-1-lineheight: 100px;
+
+  --font-header-2-size:       76px;
+  --font-header-2-weight:     700;
+  --font-header-2-lineheight: 78px;
+
+  --font-header-3-size:       58px;
+  --font-header-3-weight:     700;
+  --font-header-3-lineheight: 61px;
+
+  --font-header-4-size:       44px;
+  --font-header-4-weight:     700;
+  --font-header-4-lineheight: 50px;
+
+  --font-header-5-size:       32px;
+  --font-header-5-weight:     700;
+  --font-header-5-lineheight: 34px;
+
+  --font-header-6-size:       20px;
+  --font-header-6-weight:     700;
+  --font-header-6-lineheight: 24px;
+
+  --font-intro-size:       32px;
+  --font-intro-weight:     300;
+  --font-intro-lineheight: 40px;
+
+  --font-callout-bold-size:       24px;
+  --font-callout-bold-weight:     700;
+  --font-callout-bold-lineheight: 32px;
+
+  --font-callout-regular-size:       24px;
+  --font-callout-regular-weight:     300;
+  --font-callout-regular-lineheight: 32px;
+
+  --font-body-large-size:         18px;
+  --font-body-large-weight:       400;
+  --font-body-large-lineheight:   24px;
+  --font-body-large-bold-weight:  700;
+  --font-body-large-light-weight: 300;
+
+  --font-body-normal-size:       16px;
+  --font-body-normal-weight:     400;
+  --font-body-normal-lineheight: 22px;
+
+  --font-body-small-size:       14px;
+  --font-body-small-weight:     400;
+  --font-body-small-lineheight: 18px;
+
+  --font-body-tiny-size:       11px;
+  --font-body-tiny-weight:     400;
+  --font-body-tiny-lineheight: 15px;
+  --font-badge-size:           10px;
+
+  /* ── 1m. Grid ── */
+
+  --grid-columns:   12;
+  --grid-gutter:    32px;
+  --grid-margin:    32px;
+  --grid-max-width: 1512px;
+
+  /* ── 1n. Z-Index ── */
+
+  --z-base:     0;     /* normal document flow */
+  --z-raised:   100;   /* sticky tabs, slightly raised elements */
+  --z-dropdown: 200;   /* nav dropdowns */
+  --z-popup:    300;   /* date pickers, language selectors */
+  --z-floating: 400;   /* floating action buttons */
+  --z-header:   500;   /* sticky site header */
+  --z-modal:    1000;  /* modal overlays */
+}
+
+
+/* =============================================================================
+   DARK THEME TOKENS
+   The same overrides apply when the page is in dark mode (html[data-theme])
+   or when an element is explicitly placed inside a `.ds-context--dark` scope
+   (used by the style-guide token table to render dark swatches in light mode).
+   ============================================================================= */
+
+html[data-theme="dark"],
+.ds-context--dark {
+  color-scheme: dark;
+
+  /* Comfortable dark surfaces inspired by editor UI, avoiding near-black. */
+  --bg:                        var(--color-leifur-black-800);
+  --bg-surface:                var(--color-leifur-black-700);
+  --bg-surface-brand:          var(--color-geysir-blue-800);
+
+  --bg-fill:                   var(--color-leifur-black-700);
+  --bg-fill-inverse:           var(--color-hrimfaxi-white-800);
+  --bg-fill-brand:             var(--color-geysir-blue-500);
+  --bg-fill-brand-minimal:     var(--color-geysir-blue-900);
+  --bg-fill-brand-contrast:    var(--color-geysir-blue-300);
+  --bg-fill-emphasis:          var(--color-gullfaxi-gold-500);
+  --bg-fill-emphasis-contrast: var(--color-gullfaxi-gold-300);
+  --bg-fill-warning:           var(--color-amber);
+  --bg-fill-urgent:            var(--color-hekla-red-500);
+  --bg-fill-urgent-minimal:    var(--color-hekla-red-900);
+  --bg-fill-success:           var(--color-gljafaxi-green-500);
+  --bg-fill-neutral:           var(--color-leifur-black-600);
+  --bg-fill-light:             var(--color-leifur-black-600);
+
+  --fg:                        var(--color-hrimfaxi-white-800);
+  --fg-secondary:              var(--color-hrimfaxi-white-500);
+  --fg-tertiary:               var(--color-hrimfaxi-white-300);
+  --fg-invert:                 var(--color-leifur-black-900);
+  --fg-brand:                  var(--color-hrimfaxi-white-900);
+  --fg-urgent:                 var(--color-hekla-red-500);
+  --fg-neutral:                var(--color-hrimfaxi-white-200);
+
+  --border:                    var(--color-leifur-black-500);
+  --border-brand:              var(--color-geysir-blue-400);
+  --border-brand-contrast:     var(--color-geysir-blue-300);
+  --border-contrast:           var(--color-hrimfaxi-white-100);
+  --border-inverse:            var(--color-hrimfaxi-white-900);
+
+  --form-bg-surface:           var(--color-leifur-black-700);
+  --form-bg-surface-active:    var(--color-leifur-black-600);
+  --form-border:               var(--color-leifur-black-500);
+  --form-border-active:        var(--color-leifur-black-400);
+  --form-border-error:         var(--color-hekla-red-400);
+
+  --overlay: rgba(0, 0, 0, 0.45);
+}
+
+
+/* =============================================================================
+   LIGHT CONTEXT SCOPE
+   Mirror of the :root light tokens, applied via class. Lets the style-guide
+   token table render light swatches even when the page is in dark mode.
+   ============================================================================= */
+
+.ds-context--light {
+  color-scheme: light;
+
+  --bg:                        var(--color-hrimfaxi-white-900);
+  --bg-surface:                var(--color-hrimfaxi-white-900);
+  --bg-surface-brand:          var(--color-geysir-blue-500);
+
+  --bg-fill:                   var(--color-hrimfaxi-white-900);
+  --bg-fill-inverse:           var(--color-leifur-black-900);
+  --bg-fill-brand:             var(--color-geysir-blue-500);
+  --bg-fill-brand-minimal:     var(--color-geysir-blue-100);
+  --bg-fill-brand-contrast:    var(--color-geysir-blue-900);
+  --bg-fill-emphasis:          var(--color-gullfaxi-gold-500);
+  --bg-fill-emphasis-contrast: var(--color-gullfaxi-gold-700);
+  --bg-fill-warning:           var(--color-amber);
+  --bg-fill-urgent:            var(--color-hekla-red);
+  --bg-fill-urgent-minimal:    var(--color-hekla-red-200);
+  --bg-fill-success:           var(--color-gljafaxi-green);
+  --bg-fill-neutral:           var(--color-leifur-black-100);
+  --bg-fill-light:             var(--color-hrimfaxi-white-800);
+
+  --fg:           var(--color-leifur-black-900);
+  --fg-secondary: var(--color-leifur-black-500);
+  --fg-tertiary:  var(--color-leifur-black-400);
+  --fg-invert:    var(--color-hrimfaxi-white-900);
+  --fg-brand:     var(--color-geysir-blue-500);
+  --fg-urgent:    var(--color-hekla-red);
+  --fg-neutral:   var(--color-leifur-black-300);
+
+  --border:                var(--color-leifur-black-100);
+  --border-brand:          var(--color-geysir-blue-500);
+  --border-brand-contrast: var(--color-geysir-blue-900);
+  --border-contrast:       var(--color-leifur-black-900);
+  --border-inverse:        var(--color-hrimfaxi-white-900);
+
+  --form-bg-surface:        var(--color-hrimfaxi-white-800);
+  --form-bg-surface-active: var(--color-hrimfaxi-white-900);
+  --form-border:            var(--color-leifur-black-100);
+  --form-border-active:     var(--color-leifur-black-200);
+  --form-border-error:      var(--color-hekla-red);
+
+  --overlay: rgba(0, 0, 0, 0.25);
+}
+
+
+/* =============================================================================
+   2. TYPOGRAPHY UTILITIES
+   ============================================================================= */
+
+.header-1 {
+  font-family: var(--font-family-main);
+  font-size: var(--font-header-1-size);
+  font-weight: var(--font-header-1-weight);
+  line-height: var(--font-header-1-lineheight);
+}
+
+.header-2 {
+  font-family: var(--font-family-main);
+  font-size: var(--font-header-2-size);
+  font-weight: var(--font-header-2-weight);
+  line-height: var(--font-header-2-lineheight);
+}
+
+.header-3 {
+  font-family: var(--font-family-main);
+  font-size: var(--font-header-3-size);
+  font-weight: var(--font-header-3-weight);
+  line-height: var(--font-header-3-lineheight);
+}
+
+.header-4 {
+  font-family: var(--font-family-main);
+  font-size: var(--font-header-4-size);
+  font-weight: var(--font-header-4-weight);
+  line-height: var(--font-header-4-lineheight);
+}
+
+.header-5 {
+  font-family: var(--font-family-main);
+  font-size: var(--font-header-5-size);
+  font-weight: var(--font-header-5-weight);
+  line-height: var(--font-header-5-lineheight);
+}
+
+.header-6 {
+  font-family: var(--font-family-main);
+  font-size: var(--font-header-6-size);
+  font-weight: var(--font-header-6-weight);
+  line-height: var(--font-header-6-lineheight);
+}
+
+.intro {
+  font-family: var(--font-family-main);
+  font-size: var(--font-intro-size);
+  font-weight: var(--font-intro-weight);
+  line-height: var(--font-intro-lineheight);
+}
+
+.callout-bold {
+  font-family: var(--font-family-main);
+  font-size: var(--font-callout-bold-size);
+  font-weight: var(--font-callout-bold-weight);
+  line-height: var(--font-callout-bold-lineheight);
+}
+
+.callout-regular {
+  font-family: var(--font-family-main);
+  font-size: var(--font-callout-regular-size);
+  font-weight: var(--font-callout-regular-weight);
+  line-height: var(--font-callout-regular-lineheight);
+}
+
+.body-large {
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-large-size);
+  font-weight: var(--font-body-large-weight);
+  line-height: var(--font-body-large-lineheight);
+}
+
+.body-large-bold {
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-large-size);
+  font-weight: var(--font-body-large-bold-weight);
+  line-height: var(--font-body-large-lineheight);
+}
+
+.body-large-light {
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-large-size);
+  font-weight: var(--font-body-large-light-weight);
+  line-height: var(--font-body-large-lineheight);
+}
+
+.body-normal {
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-normal-size);
+  font-weight: var(--font-body-normal-weight);
+  line-height: var(--font-body-normal-lineheight);
+}
+
+.body-small {
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-small-size);
+  font-weight: var(--font-body-small-weight);
+  line-height: var(--font-body-small-lineheight);
+}
+
+.body-tiny {
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-tiny-size);
+  font-weight: var(--font-body-tiny-weight);
+  line-height: var(--font-body-tiny-lineheight);
+}
+
+/* Mobile — typography (scales down to Figma mobile spec) */
+@media (max-width: 600px) {
+  .header-1                        { font-size: 52px; line-height: normal; }
+  .header-2                        { font-size: 44px; line-height: 46px; }
+  .header-3                        { font-size: 38px; line-height: 40px; }
+  .header-4                        { font-size: 32px; line-height: 34px; }
+  .header-5                        { font-size: 26px; line-height: 28px; }
+  .header-6                        { font-size: 18px; line-height: 22px; }
+  .intro                           { font-size: 28px; line-height: 32px; }
+  .callout-bold                    { font-size: 20px; line-height: 28px; }
+  .callout-regular                 { font-size: 20px; line-height: 28px; }
+  .body-large, .body-large-bold,
+  .body-large-light                { font-size: 16px; line-height: 22px; }
+  .body-normal                     { font-size: 14px; line-height: 22px; }
+  .body-small                      { font-size: 14px; line-height: 18px; }
+  .body-tiny                       { font-size: 11px; line-height: 15px; }
+}
+
+
+/* =============================================================================
+   3. SHADOW UTILITIES
+   ============================================================================= */
+
+.shadow-large  { box-shadow: var(--shadow-large); }
+.shadow-medium { box-shadow: var(--shadow-medium); }
+
+
+/* =============================================================================
+   4. GRID & LAYOUT
+   ============================================================================= */
+
+.container {
+  width: 100%;
+  max-width: var(--grid-max-width);
+  margin-inline: auto;
+  padding-inline: var(--grid-margin);
+  box-sizing: border-box;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(var(--grid-columns), 1fr);
+  gap: var(--grid-gutter);
+}
+
+.col-1  { grid-column: span 1; }
+.col-2  { grid-column: span 2; }
+.col-3  { grid-column: span 3; }
+.col-4  { grid-column: span 4; }
+.col-5  { grid-column: span 5; }
+.col-6  { grid-column: span 6; }
+.col-7  { grid-column: span 7; }
+.col-8  { grid-column: span 8; }
+.col-9  { grid-column: span 9; }
+.col-10 { grid-column: span 10; }
+.col-11 { grid-column: span 11; }
+.col-12 { grid-column: span 12; }
+
+/* Mobile — 4-column grid */
+@media (max-width: 768px) {
+  :root {
+    --grid-columns: 4;
+    --grid-gutter:  20px;
+    --grid-margin:  20px;
+  }
+
+  .col-1, .col-2, .col-3 { grid-column: span 2; }
+
+  .col-4,  .col-5,  .col-6,
+  .col-7,  .col-8,  .col-9,
+  .col-10, .col-11, .col-12 { grid-column: span 4; }
+}
+
+
+/* =============================================================================
+   5. BUTTONS
+   ============================================================================= */
+
+/* Base */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-100);
+  height: var(--size-600);
+  padding-inline: var(--space-300);
+  border: none;
+  border-radius: var(--radius-full);
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-large-size);
+  font-weight: var(--font-body-large-bold-weight);
+  line-height: 1;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color var(--duration-fast) var(--ease),
+              color            var(--duration-fast) var(--ease),
+              box-shadow       var(--duration-fast) var(--ease);
+}
+
+.btn:disabled,
+.btn[aria-disabled="true"] {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Primary */
+.btn.primary { background-color: var(--color-primary); color: var(--fg-invert); }
+.btn.primary:hover  { background-color: var(--color-primary-active); }
+.btn.primary:active { background-color: var(--color-primary-active); }
+
+/* Optional left-arrow helper variants for text buttons.
+   .arrow: always visible
+   .arrow-hover: appears on hover/focus */
+.btn.arrow,
+.btn.arrow-hover {
+  position: relative;
+  overflow: hidden;
+  transition: padding-left var(--duration-fast) var(--ease),
+              background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease),
+              box-shadow var(--duration-fast) var(--ease);
+}
+
+.btn.arrow::before,
+.btn.arrow-hover::before {
+  content: "\2192";
+  position: absolute;
+  left: var(--space-200);
+  top: 50%;
+  transform: translate(0, -50%);
+  opacity: 1;
+  transition: transform var(--duration-fast) var(--ease), opacity var(--duration-fast) var(--ease);
+}
+
+.btn.arrow-hover::before {
+  transform: translate(-8px, -50%);
+  opacity: 0;
+}
+
+.btn.arrow-hover:hover::before,
+.btn.arrow-hover:focus-visible::before {
+  opacity: 1;
+  transform: translate(0, -50%);
+}
+
+.btn.arrow,
+.btn.arrow-hover:hover,
+.btn.arrow-hover:focus-visible {
+  padding-left: calc(var(--space-300) + 16px);
+}
+
+/* Hero */
+.btn.hero {
+  background-color: var(--bg-fill-brand);
+  color: var(--fg-invert);
+  height: var(--size-600);
+  font-size: var(--font-callout-bold-size);
+  font-weight: var(--font-callout-bold-weight);
+  padding-inline: var(--space-400);
+  border-radius: 0;
+}
+
+.btn.hero:hover  { background-color: var(--bg-fill-brand-contrast); }
+.btn.hero:active { background-color: var(--color-primary-active); }
+
+/* Utility (outlined) */
+.btn.utility {
+  background-color: var(--color-hrimfaxi-white);
+  color: var(--color-leifur-black);
+  border: 1.5px solid var(--border-contrast);
+}
+
+.btn.utility:hover  { background-color: var(--bg-fill-light); }
+.btn.utility:active { background-color: var(--bg-fill-neutral); }
+
+/* Link */
+.btn.link {
+  background-color: transparent;
+  color: var(--fg-brand);
+  border-radius: var(--radius-050);
+  padding-inline: var(--space-100);
+  height: auto;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.btn.link:hover  { color: var(--color-geysir-blue-700); }
+.btn.link:active { color: var(--color-geysir-blue-800); }
+
+/* Size modifiers (apply to .btn and the independent icon/play shapes) */
+.btn.large    { height: var(--size-700); }
+.btn.small    { height: var(--size-500); }
+.btn-icon.small  { width: var(--size-500); height: var(--size-500); }
+.btn-icon.large  { width: var(--size-800); height: var(--size-800); }
+.btn-play.small  { width: 70px;  height: 70px; }
+.btn-play.large  { width: 160px; height: 160px; }
+
+/* Icon (circular) */
+.btn-icon {
+  position: relative;
+  width: var(--size-700);
+  height: var(--size-700);
+  padding: 0;
+  border-radius: var(--radius-full);
+  background-color: var(--color-leifur-black);
+  color: var(--fg-invert);
+}
+
+.btn-icon:hover  { background-color: var(--color-leifur-black-700); }
+.btn-icon:active { background-color: var(--color-leifur-black-800); }
+
+.btn-icon svg,
+.btn-icon img {
+  width: var(--size-300);
+  height: var(--size-300);
+  display: block;
+}
+
+/* Nav */
+.btn-nav {
+  background-color: transparent;
+  color: var(--fg);
+  border-radius: var(--radius-050);
+  padding-inline: var(--space-150);
+  font-weight: var(--font-body-normal-weight);
+  position: relative;
+  block-size: 100%;
+}
+
+.btn-nav::before { 
+  content: "";
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline: 0;
+  block-size: 8px;
+  opacity: 0;
+  background-color: var(--color-geysir-blue);
+  transition: opacity .3s cubic-bezier(.5,1,.89,1);
+}
+
+.btn-nav:hover::before, .btn-nav[aria-current="page"]::before { opacity: 1; }
+
+.btn-nav.active,
+.btn-nav[aria-current="page"] {
+  font-weight: var(--font-body-large-bold-weight);
+  color: var(--color-secondary);
+}
+
+/* Play (circular media button — 120px default, 70px mobile, .small/.large modifiers) */
+.btn-play {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 120px;
+  height: 120px;
+  border-radius: var(--radius-full);
+  background-color: var(--bg-fill-brand);
+  color: var(--fg-invert);
+  border: none;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background-color var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
+}
+
+.btn-play:hover  { background-color: var(--bg-fill-brand-contrast); transform: scale(1.05); }
+.btn-play:active { transform: scale(0.97); }
+
+.btn-play svg,
+.btn-play img {
+  width: var(--size-600);
+  height: var(--size-600);
+  display: block;
+}
+
+@media (max-width: 600px) {
+  .btn-play { width: 70px; height: 70px; }
+  .btn-play svg,
+  .btn-play img { width: var(--size-400); height: var(--size-400); }
+}
+
+/* Square tile (icon + label shortcut) */
+.btn-square {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  width: 72px;
+  height: 80px;
+  border-radius: var(--radius-100);
+  background-color: var(--bg-fill-light);
+  border: 1px solid var(--border);
+  color: var(--fg);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background-color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
+}
+
+.btn-square:hover  { background-color: var(--bg-fill-neutral); border-color: var(--border-contrast); }
+.btn-square:active { background-color: var(--bg-fill-neutral); }
+
+.btn-square svg,
+.btn-square img {
+  width: var(--size-300);
+  height: var(--size-300);
+  display: block;
+  flex-shrink: 0;
+}
+
+.btn-square span {
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-tiny-size);
+  font-weight: var(--font-body-normal-weight);
+  color: var(--fg);
+  line-height: 1;
+  text-align: center;
+}
+
+/* History (back navigation) */
+.btn-history {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-100);
+  height: var(--size-500);
+  padding-inline: var(--space-150);
+  border-radius: var(--radius-050);
+  background-color: transparent;
+  border: none;
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-normal-size);
+  color: var(--fg-secondary);
+  cursor: pointer;
+  transition: color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease);
+}
+
+.btn-history:hover { color: var(--fg); background-color: var(--bg-fill-light); }
+
+.btn-history svg,
+.btn-history img {
+  width: var(--size-300);
+  height: var(--size-300);
+  flex-shrink: 0;
+}
+
+/* Chat (fixed floating action button) */
+.btn-chat {
+  position: fixed;
+  bottom: var(--space-400);
+  right: var(--space-400);
+  z-index: var(--z-floating);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-700);
+  height: var(--size-700);
+  border-radius: var(--radius-full);
+  background-color: var(--color-leifur-black);
+  color: var(--fg-invert);
+  border: none;
+  box-shadow: var(--shadow-large);
+  cursor: pointer;
+  transition: background-color var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
+}
+
+.btn-chat:hover { background-color: var(--color-leifur-black-700); transform: scale(1.06); }
+
+.btn-chat svg,
+.btn-chat img {
+  width: var(--size-300);
+  height: var(--size-300);
+  display: block;
+}
+
+/* ── Dark-mode override: buttons with filled/dark backgrounds always use white text ── */
+html[data-theme="dark"] .btn.primary,
+html[data-theme="dark"] .btn.hero,
+html[data-theme="dark"] .btn-icon,
+html[data-theme="dark"] .btn-play,
+html[data-theme="dark"] .btn-chat { color: #ffffff; }
+
+/* Share */
+.btn-share {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-100);
+  height: var(--size-500);
+  padding-inline: var(--space-200);
+  border-radius: var(--radius-full);
+  background-color: transparent;
+  border: 1.5px solid var(--border);
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-normal-size);
+  color: var(--fg);
+  cursor: pointer;
+  transition: border-color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease);
+}
+
+.btn-share:hover { border-color: var(--border-contrast); background-color: var(--bg-fill-light); }
+
+.share-sheet {
+  display: flex;
+  align-items: center;
+  gap: var(--space-150);
+  flex-wrap: wrap;
+}
+
+.share-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-500);
+  height: var(--size-500);
+  border-radius: var(--radius-full);
+  background-color: var(--bg-fill-neutral);
+  color: var(--fg);
+  text-decoration: none;
+  transition: background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
+}
+
+.share-link:hover { background-color: var(--color-leifur-black); color: var(--fg-invert); }
+
+.share-link svg,
+.share-link img {
+  width: 20px;
+  height: 20px;
+  display: block;
+}
+
+
+/* =============================================================================
+   6. FORMS
+   ============================================================================= */
+
+/* Form Group — wraps a label, control, helper, and error */
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-100);
+}
+
+.form-label {
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-normal-size);
+  font-weight: var(--font-body-large-bold-weight);
+  color: var(--fg);
+  line-height: var(--font-body-normal-lineheight);
+}
+
+.form-helper {
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-small-size);
+  color: var(--fg-secondary);
+  line-height: var(--font-body-small-lineheight);
+}
+
+.form-error {
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-small-size);
+  color: var(--fg-urgent);
+  line-height: var(--font-body-small-lineheight);
+}
+
+/* Input */
+.input {
+  width: 100%;
+  height: var(--size-700);
+  padding-inline: var(--space-300);
+  background-color: var(--form-bg-surface);
+  border: 1.5px solid var(--form-border);
+  border-radius: var(--radius-100);
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-large-size);
+  color: var(--fg);
+  box-sizing: border-box;
+  outline: none;
+  transition: border-color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease);
+}
+
+.input::placeholder { color: var(--fg-tertiary); }
+.input:focus        { background-color: var(--form-bg-surface-active); border-color: var(--form-border-active); }
+.input:disabled     { opacity: 0.4; cursor: not-allowed; }
+.input.error        { border-color: var(--form-border-error); }
+
+/* Textarea */
+.textarea {
+  width: 100%;
+  min-height: 120px;
+  padding: var(--space-300);
+  background-color: var(--form-bg-surface);
+  border: 1.5px solid var(--form-border);
+  border-radius: var(--radius-100);
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-large-size);
+  color: var(--fg);
+  box-sizing: border-box;
+  resize: vertical;
+  outline: none;
+  transition: border-color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease);
+}
+
+.textarea::placeholder { color: var(--fg-tertiary); }
+.textarea:focus        { background-color: var(--form-bg-surface-active); border-color: var(--form-border-active); }
+.textarea:disabled     { opacity: 0.4; cursor: not-allowed; }
+.textarea.error        { border-color: var(--form-border-error); }
+
+/* Select */
+.select {
+  width: 100%;
+  height: var(--size-700);
+  padding-inline: var(--space-300) var(--space-600);
+  background-color: var(--form-bg-surface);
+  border: 1.5px solid var(--form-border);
+  border-radius: var(--radius-100);
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-large-size);
+  color: var(--fg);
+  box-sizing: border-box;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23232323' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right var(--space-300) center;
+  cursor: pointer;
+  outline: none;
+  transition: border-color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease);
+}
+
+.select:focus    { background-color: var(--form-bg-surface-active); border-color: var(--form-border-active); }
+.select:disabled { opacity: 0.4; cursor: not-allowed; }
+.select.error    { border-color: var(--form-border-error); }
+
+/* Checkbox */
+.checkbox-group {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-150);
+  cursor: pointer;
+}
+
+.checkbox-group input[type="checkbox"] {
+  appearance: none;
+  width: var(--size-300);
+  height: var(--size-300);
+  min-width: var(--size-300);
+  border: 1.5px solid var(--form-border-active);
+  border-radius: var(--radius-050);
+  background-color: var(--form-bg-surface);
+  cursor: pointer;
+  position: relative;
+  transition: background-color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
+}
+
+.checkbox-group input[type="checkbox"]:checked {
+  background-color: var(--color-leifur-black);
+  border-color: var(--color-leifur-black);
+}
+
+.checkbox-group input[type="checkbox"]:checked::after {
+  content: "";
+  position: absolute;
+  left: 5px;
+  top: 2px;
+  width: 5px;
+  height: 9px;
+  border: 2px solid var(--fg-invert);
+  border-top: none;
+  border-left: none;
+  transform: rotate(45deg);
+}
+
+.checkbox-group input[type="checkbox"]:focus-visible {
+  outline: 2px solid var(--border-brand);
+  outline-offset: 2px;
+}
+
+.checkbox-group input[type="checkbox"]:disabled { opacity: 0.4; cursor: not-allowed; }
+
+.checkbox-label {
+  display: inline-flex;
+  align-items: center;
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-normal-size);
+  color: var(--fg);
+  line-height: var(--font-body-normal-lineheight);
+}
+
+/* Radio */
+.radio-group {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-150);
+  cursor: pointer;
+}
+
+.radio-group input[type="radio"] {
+  appearance: none;
+  width: var(--size-300);
+  height: var(--size-300);
+  min-width: var(--size-300);
+  border: 1.5px solid var(--form-border-active);
+  border-radius: var(--radius-full);
+  background-color: var(--form-bg-surface);
+  cursor: pointer;
+  position: relative;
+  transition: background-color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
+}
+
+.radio-group input[type="radio"]:checked {
+  border-color: var(--color-leifur-black);
+  border-width: 5px;
+  background-color: var(--form-bg-surface-active);
+}
+
+.radio-group input[type="radio"]:focus-visible {
+  outline: 2px solid var(--border-brand);
+  outline-offset: 2px;
+}
+
+.radio-group input[type="radio"]:disabled { opacity: 0.4; cursor: not-allowed; }
+
+.radio-label {
+  display: inline-flex;
+  align-items: center;
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-normal-size);
+  color: var(--fg);
+  line-height: var(--font-body-normal-lineheight);
+}
+
+/* Search */
+.search-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.search-wrapper .search-icon {
+  position: absolute;
+  left: var(--space-200);
+  width: var(--size-300);
+  height: var(--size-300);
+  color: var(--fg-secondary);
+  pointer-events: none;
+}
+
+.search-input {
+  width: 100%;
+  height: var(--size-700);
+  padding-inline: var(--space-300) var(--space-200);
+  background-color: var(--form-bg-surface);
+  border: 1.5px solid var(--form-border);
+  border-radius: var(--radius-full);
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-large-size);
+  color: var(--fg);
+  box-sizing: border-box;
+  outline: none;
+  transition: border-color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease);
+}
+
+.search-input::placeholder { color: var(--fg-tertiary); }
+.search-input:focus        { background-color: var(--form-bg-surface-active); border-color: var(--form-border-active); }
+
+/* Switch */
+.switch-group {
+  display: flex;
+  align-items: center;
+  gap: var(--space-150);
+  cursor: pointer;
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 48px;
+  height: var(--size-300);
+  flex-shrink: 0;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+  position: absolute;
+}
+
+.switch-track {
+  position: absolute;
+  inset: 0;
+  background-color: var(--border);
+  border-radius: var(--radius-full);
+  transition: background-color var(--duration-normal) var(--ease);
+}
+
+.switch input:checked + .switch-track       { background-color: var(--color-leifur-black); }
+.switch input:disabled + .switch-track      { opacity: 0.4; cursor: not-allowed; }
+.switch input:focus-visible + .switch-track { outline: 2px solid var(--border-brand); outline-offset: 2px; }
+
+.switch-track::before {
+  content: "";
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  left: 3px;
+  top: 3px;
+  background-color: var(--fg-invert);
+  border-radius: var(--radius-full);
+  transition: transform var(--duration-normal) var(--ease);
+}
+
+.switch input:checked + .switch-track::before { transform: translateX(24px); }
+
+.switch-label {
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-normal-size);
+  color: var(--fg);
+  line-height: var(--font-body-normal-lineheight);
+}
+
+/* File Upload */
+.file-upload {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-100);
+  width: 100%;
+  min-height: 120px;
+  padding: var(--space-400);
+  background-color: var(--form-bg-surface);
+  border: 1.5px dashed var(--form-border);
+  border-radius: var(--radius-100);
+  box-sizing: border-box;
+  text-align: center;
+  cursor: pointer;
+  transition: border-color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease);
+}
+
+.file-upload:hover { border-color: var(--form-border-active); background-color: var(--form-bg-surface-active); }
+
+.file-upload-label { font-family: var(--font-family-main); font-size: var(--font-body-normal-size); color: var(--fg-secondary); }
+.file-upload-link  { color: var(--fg-brand); text-decoration: underline; cursor: pointer; }
+
+/* Date Select (select with calendar icon) */
+.date-select-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-100);
+}
+
+.date-select {
+  width: 100%;
+  height: var(--size-700);
+  padding-inline: var(--space-200) var(--space-600);
+  background-color: var(--form-bg-surface);
+  border: 1.5px solid var(--form-border);
+  border-radius: var(--radius-100);
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-large-size);
+  color: var(--fg);
+  box-sizing: border-box;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23232323' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right var(--space-200) center;
+  cursor: pointer;
+  outline: none;
+  transition: border-color var(--duration-fast) var(--ease);
+}
+
+.date-select:focus    { background-color: var(--form-bg-surface-active); border-color: var(--form-border-active); }
+.date-select:disabled { opacity: 0.4; cursor: not-allowed; }
+.date-select.error    { border-color: var(--form-border-error); }
+
+/* Date Picker (calendar popup) */
+.date-picker {
+  min-width: 320px;
+  background-color: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-200);
+  box-shadow: var(--shadow-medium);
+  z-index: var(--z-popup);
+  box-sizing: border-box;
+}
+
+.date-picker-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-200);
+}
+
+.date-picker-month {
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-large-size);
+  font-weight: var(--font-body-large-bold-weight);
+  color: var(--fg);
+}
+
+.date-picker-nav {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-400);
+  height: var(--size-400);
+  border-radius: var(--radius-050);
+  background: transparent;
+  border: none;
+  color: var(--fg-secondary);
+  cursor: pointer;
+  transition: background-color var(--duration-fast) var(--ease);
+}
+
+.date-picker-nav:hover { background-color: var(--bg-fill-light); }
+
+.date-picker-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: var(--space-050);
+}
+
+.date-picker-weekday {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--size-400);
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-small-size);
+  font-weight: var(--font-body-large-bold-weight);
+  color: var(--fg-secondary);
+}
+
+.date-picker-day {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--size-500);
+  border-radius: var(--radius-050);
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-normal-size);
+  color: var(--fg);
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  transition: background-color var(--duration-fast) var(--ease);
+}
+
+.date-picker-day:hover          { background-color: var(--bg-fill-light); }
+.date-picker-day.today          { font-weight: var(--font-body-large-bold-weight); border: 1.5px solid var(--border-contrast); }
+.date-picker-day.selected       { background-color: var(--color-leifur-black); color: var(--fg-invert); }
+.date-picker-day.selected:hover { background-color: var(--color-leifur-black-700); }
+.date-picker-day:disabled,
+.date-picker-day.disabled       { color: var(--fg-neutral); cursor: not-allowed; pointer-events: none; }
+
+/* Range selection states */
+.date-picker-day.in-range     { background-color: var(--color-geysir-blue-100); border-radius: 0; }
+.date-picker-day.range-start,
+.date-picker-day.range-end    { background-color: var(--color-leifur-black); color: var(--fg-invert); border-radius: var(--radius-050); }
+
+/* Flight Lookup (KEF-specific flight search form) */
+.flight-lookup {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-200);
+  padding: var(--space-400);
+  background-color: var(--bg-surface);
+  border-radius: var(--radius-200);
+  box-shadow: var(--shadow-medium);
+}
+
+.flight-lookup-row {
+  display: flex;
+  gap: var(--space-200);
+  align-items: flex-end;
+}
+
+.flight-lookup-field {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-100);
+  min-width: 0;
+}
+
+.flight-lookup-direction { display: flex; gap: var(--space-150); }
+
+.flight-lookup-direction .radio-group {
+  flex: 1;
+  justify-content: center;
+  padding: var(--space-150) var(--space-200);
+  border: 1.5px solid var(--form-border);
+  border-radius: var(--radius-100);
+  cursor: pointer;
+  transition: border-color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease);
+}
+
+.flight-lookup-direction .radio-group:has(input:checked) {
+  border-color: var(--color-leifur-black);
+  background-color: var(--bg-fill-neutral);
+}
+
+.flight-lookup-swap {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-500);
+  height: var(--size-700);
+  flex-shrink: 0;
+  border: none;
+  background: transparent;
+  color: var(--fg-secondary);
+  cursor: pointer;
+  transition: color var(--duration-fast) var(--ease);
+}
+
+.flight-lookup-swap:hover { color: var(--fg); }
+
+@media (max-width: 768px) {
+  .flight-lookup-row  { flex-direction: column; }
+  .flight-lookup-swap { transform: rotate(90deg); align-self: center; height: var(--size-500); }
+}
+
+/* Newsletter */
+.newsletter {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-300);
+}
+
+.newsletter-title {
+  font-family: var(--font-family-main);
+  font-size: var(--font-header-5-size);
+  font-weight: var(--font-header-5-weight);
+  line-height: var(--font-header-5-lineheight);
+  color: var(--fg);
+}
+
+.newsletter-description {
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-normal-size);
+  color: var(--fg-secondary);
+  line-height: var(--font-body-normal-lineheight);
+}
+
+.newsletter-form {
+  display: flex;
+  gap: var(--space-150);
+}
+
+.newsletter-input {
+  flex: 1;
+  height: var(--size-700);
+  padding-inline: var(--space-300);
+  background-color: var(--form-bg-surface);
+  border: 1.5px solid var(--form-border);
+  border-radius: var(--radius-100);
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-large-size);
+  color: var(--fg);
+  min-width: 0;
+  box-sizing: border-box;
+  outline: none;
+  transition: border-color var(--duration-fast) var(--ease);
+}
+
+.newsletter-input::placeholder { color: var(--fg-tertiary); }
+.newsletter-input:focus        { border-color: var(--form-border-active); }
+
+.newsletter-consent {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-150);
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-small-size);
+  color: var(--fg-secondary);
+  line-height: var(--font-body-small-lineheight);
+}
+
+@media (max-width: 600px) {
+  .newsletter-form { flex-direction: column; }
+}
+
+/* reCAPTCHA */
+.recaptcha-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-100);
+}
+
+.recaptcha-container {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-150);
+  padding: var(--space-200) var(--space-300);
+  background-color: var(--form-bg-surface);
+  border: 1.5px solid var(--form-border);
+  border-radius: var(--radius-100);
+  min-height: 78px;
+  box-sizing: border-box;
+}
+
+.recaptcha-container > div { overflow: hidden; border-radius: var(--radius-050); }
+
+.recaptcha-helper {
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-small-size);
+  color: var(--fg-tertiary);
+  line-height: var(--font-body-small-lineheight);
+}
+
+.recaptcha-notice {
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-tiny-size);
+  color: var(--fg-neutral);
+  line-height: 1.4;
+}
+
+.recaptcha-notice a { color: var(--fg-brand); text-decoration: underline; }
+
+
+/* =============================================================================
+   7. FEEDBACK
+   ============================================================================= */
+
+/* Alert */
+.alert {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-200);
+  padding: var(--space-200) var(--space-300);
+  border-radius: var(--radius-100);
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left: var(--space-050) solid transparent;
+  font-family: var(--font-family-main);
+}
+
+.alert-icon {
+  flex-shrink: 0;
+  width: var(--size-300);
+  height: var(--size-300);
+}
+
+.alert-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-050);
+}
+
+.alert-title {
+  font-size: var(--font-body-large-size);
+  font-weight: var(--font-body-large-bold-weight);
+  line-height: var(--font-body-large-lineheight);
+}
+
+.alert-body {
+  font-size: var(--font-body-normal-size);
+  font-weight: var(--font-body-normal-weight);
+  line-height: var(--font-body-normal-lineheight);
+}
+
+/* Alert — colour variants */
+.alert.info    { background-color: var(--color-geysir-blue-100);    border-left-color: var(--border-brand);         color: var(--color-geysir-blue-700); }
+.alert.success { background-color: var(--color-gljafaxi-green-100); border-left-color: var(--color-gljafaxi-green); color: var(--color-gljafaxi-green-800); }
+.alert.warning { background-color: var(--bg-fill-warning);          border-left-color: var(--color-amber);          color: var(--color-leifur-black); }
+.alert.error   { background-color: var(--color-hekla-red-200);      border-left-color: var(--color-hekla-red);      color: var(--color-hekla-red-700); }
+.alert.neutral { background-color: var(--bg-fill-light);            border-left-color: var(--border);               color: var(--fg); }
+
+/* Alert — small size (max 620px, from Figma) */
+.alert.small                  { padding: var(--space-100) var(--space-200); max-width: 620px; }
+.alert.small .alert-title     { font-size: var(--font-body-normal-size); }
+.alert.small .alert-body      { font-size: var(--font-body-small-size); }
+
+/* Alert — dismissible (flex row with close button) */
+.alert.dismissible {
+  align-items: center;
+  justify-content: space-between;
+}
+
+/* Alert — full-width banner (56px, no left border, coloured bottom border) */
+.alert.banner {
+  width: 100%;
+  min-height: var(--size-700);
+  padding: 0 var(--space-400);
+  margin: 0;
+  border-radius: 0;
+  border-left: none;
+  border-bottom: 3px solid transparent;
+  justify-content: center;
+  align-items: center;
+}
+
+.alert.banner.info    { border-bottom-color: var(--border-brand); }
+.alert.banner.success { border-bottom-color: var(--bg-fill-success); }
+.alert.banner.warning { border-bottom-color: var(--bg-fill-warning); }
+.alert.banner.error   { border-bottom-color: var(--bg-fill-urgent); }
+
+/* Progress Bar */
+.progress-bar {
+  width: 100%;
+  height: var(--size-100);
+  background-color: var(--bg-fill-neutral);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+}
+
+.progress-bar-fill {
+  height: 100%;
+  background-color: var(--color-leifur-black);
+  border-radius: var(--radius-full);
+  transition: width var(--duration-slow) var(--ease);
+}
+
+.progress-bar.brand   .progress-bar-fill { background-color: var(--bg-fill-brand); }
+.progress-bar.success .progress-bar-fill { background-color: var(--bg-fill-success); }
+.progress-bar.warning .progress-bar-fill { background-color: var(--bg-fill-warning); }
+.progress-bar.urgent  .progress-bar-fill { background-color: var(--bg-fill-urgent); }
+
+/* Status */
+.status {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-100);
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-normal-size);
+  font-weight: var(--font-body-large-bold-weight);
+  line-height: var(--font-body-normal-lineheight);
+}
+
+.status::before {
+  content: "";
+  display: block;
+  width: var(--size-100);
+  height: var(--size-100);
+  border-radius: var(--radius-full);
+  flex-shrink: 0;
+}
+
+.status.default::before  { background-color: var(--fg-neutral); }
+.status.active::before   { background-color: var(--bg-fill-success); }
+.status.warning::before  { background-color: var(--bg-fill-warning); }
+.status.error::before    { background-color: var(--bg-fill-urgent); }
+.status.inactive::before { background-color: var(--fg-tertiary); }
+
+/* Badge */
+.badge {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(35%, -35%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--size-badge);
+  height: var(--size-badge);
+  padding-inline: var(--space-050);
+  border-radius: var(--radius-full);
+  background-color: var(--bg-fill-urgent);
+  color: var(--fg-invert);
+  font-family: var(--font-family-main);
+  font-size: var(--font-badge-size);
+  font-weight: var(--font-body-large-bold-weight);
+  line-height: 1;
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+
+/* =============================================================================
+   8. MODAL
+   ============================================================================= */
+
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: var(--overlay);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--z-modal);
+  padding: var(--space-400);
+  box-sizing: border-box;
+}
+
+.modal {
+  background-color: var(--bg-surface);
+  border-radius: var(--radius-200);
+  box-shadow: var(--shadow-large);
+  width: 100%;
+  max-width: 560px;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-300) var(--space-400);
+  border-bottom: 1px solid var(--border);
+}
+
+.modal-title {
+  font-family: var(--font-family-main);
+  font-size: var(--font-header-5-size);
+  font-weight: var(--font-header-5-weight);
+  line-height: var(--font-header-5-lineheight);
+  color: var(--fg);
+}
+
+.modal-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-500);
+  height: var(--size-500);
+  border: none;
+  background: transparent;
+  border-radius: var(--radius-050);
+  cursor: pointer;
+  color: var(--fg-secondary);
+  transition: background-color var(--duration-fast) var(--ease);
+}
+
+.modal-close:hover { background-color: var(--bg-fill-light); }
+
+.modal-body {
+  padding: var(--space-400);
+  flex: 1;
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-normal-size);
+  color: var(--fg);
+  line-height: var(--font-body-normal-lineheight);
+}
+
+.modal-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--space-150);
+  padding: var(--space-300) var(--space-400);
+  border-top: 1px solid var(--border);
+}
+
+/* Mobile — bottom sheet */
+@media (max-width: 600px) {
+  .modal-overlay { align-items: flex-end; padding: 0; }
+  .modal         { max-width: 100%; border-radius: var(--radius-200) var(--radius-200) 0 0; max-height: 85vh; }
+}
+
+
+/* =============================================================================
+   9. CARDS
+   ============================================================================= */
+
+/* Standard Card */
+.card {
+  background-color: var(--bg-surface);
+  border-radius: var(--radius-200);
+  box-shadow: var(--shadow-medium);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  transition: box-shadow var(--duration-normal) var(--ease), transform var(--duration-normal) var(--ease);
+}
+
+.card:hover { box-shadow: var(--shadow-large); transform: translateY(-2px); }
+
+.card-image {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  object-fit: cover;
+  display: block;
+}
+
+.card-body {
+  padding: var(--space-300);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-100);
+  flex: 1;
+}
+
+.card-title {
+  font-family: var(--font-family-main);
+  font-size: var(--font-header-6-size);
+  font-weight: var(--font-header-6-weight);
+  line-height: var(--font-header-6-lineheight);
+  color: var(--fg);
+}
+
+.card-description {
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-normal-size);
+  color: var(--fg-secondary);
+  line-height: var(--font-body-normal-lineheight);
+}
+
+.card-footer {
+  padding: var(--space-200) var(--space-300);
+  border-top: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-200);
+}
+
+/* Compact Card */
+.card.compact .card-body  { padding: var(--space-200); }
+.card.compact .card-image { aspect-ratio: 4 / 3; }
+
+/* Overlay Card (3:4 portrait with gradient overlay) */
+.card.overlay {
+  position: relative;
+  border-radius: var(--radius-200);
+  overflow: hidden;
+  transition: box-shadow var(--duration-normal) var(--ease);
+}
+
+.card.overlay:hover { box-shadow: var(--shadow-large); }
+
+.card-overlay-image {
+  width: 100%;
+  aspect-ratio: 3 / 4;
+  object-fit: cover;
+  display: block;
+}
+
+.card-overlay-content {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: var(--space-300);
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
+  color: var(--fg-invert);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-050);
+}
+
+.card-overlay-title {
+  font-family: var(--font-family-main);
+  font-size: var(--font-header-6-size);
+  font-weight: var(--font-header-6-weight);
+  line-height: var(--font-header-6-lineheight);
+}
+
+.card-overlay-description {
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-normal-size);
+  opacity: 0.85;
+  line-height: var(--font-body-normal-lineheight);
+}
+
+/* Merchant Card (391 × 587 desktop / 280 × 420 mobile) */
+.card.merchant {
+  position: relative;
+  border-radius: var(--radius-200);
+  overflow: hidden;
+  transition: box-shadow var(--duration-normal) var(--ease);
+}
+
+.card.merchant:hover { box-shadow: var(--shadow-large); }
+
+.card-merchant-image {
+  width: 100%;
+  aspect-ratio: 391 / 587;
+  object-fit: cover;
+  display: block;
+}
+
+.card-merchant-content {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: var(--space-300);
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, transparent 100%);
+  color: var(--fg-invert);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-100);
+}
+
+/* Merchant Card Compact (391 × 487 desktop / 280 × 362 mobile) */
+.card.merchant.compact .card-merchant-image { aspect-ratio: 391 / 487; }
+
+/* Flight Card (square 1:1 — 391px desktop / 280px mobile) */
+.card.flight {
+  position: relative;
+  border-radius: var(--radius-200);
+  overflow: hidden;
+  aspect-ratio: 1 / 1;
+  transition: box-shadow var(--duration-normal) var(--ease);
+}
+
+.card.flight:hover { box-shadow: var(--shadow-large); }
+
+.card-flight-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.card-flight-content {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: var(--space-300);
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, transparent 100%);
+  color: var(--fg-invert);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-050);
+}
+
+.card-flight-airline {
+  display: flex;
+  align-items: center;
+  gap: var(--space-150);
+  margin-bottom: var(--space-100);
+}
+
+.card-flight-airline-logo {
+  width: var(--size-400);
+  height: var(--size-400);
+  object-fit: contain;
+  border-radius: var(--radius-050);
+  background-color: var(--bg);
+  padding: 2px;
+  box-sizing: border-box;
+}
+
+.card-flight-route {
+  font-family: var(--font-family-main);
+  font-size: var(--font-header-6-size);
+  font-weight: var(--font-header-6-weight);
+  line-height: var(--font-header-6-lineheight);
+}
+
+.card-flight-info {
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-normal-size);
+  opacity: 0.85;
+}
+
+/* Micro Card */
+.card.micro {
+  display: flex;
+  align-items: center;
+  gap: var(--space-200);
+  padding: var(--space-200);
+  background-color: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-100);
+  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
+}
+
+.card.micro:hover { border-color: var(--border-brand); box-shadow: var(--shadow-medium); }
+
+.card-micro-image {
+  width: var(--size-700);
+  height: var(--size-700);
+  object-fit: cover;
+  border-radius: var(--radius-100);
+  flex-shrink: 0;
+}
+
+.card-micro-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-050);
+  flex: 1;
+  min-width: 0;
+}
+
+.card-micro-title {
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-normal-size);
+  font-weight: var(--font-body-large-bold-weight);
+  color: var(--fg);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.card-micro-description {
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-small-size);
+  color: var(--fg-secondary);
+}
+
+
+/* =============================================================================
+   10. TAGS
+   ============================================================================= */
+
+.tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-050);
+  height: var(--size-tag);
+  padding-inline: var(--space-150);
+  border-radius: var(--radius-full);
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-tiny-size);
+  font-weight: var(--font-body-large-bold-weight);
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.tag.large {
+  height: var(--size-800);
+  padding-inline: var(--space-300);
+  font-size: var(--font-body-large-size);
+}
+
+@media (max-width: 600px) {
+  .tag.large { height: var(--size-600); font-size: var(--font-body-normal-size); }
+}
+
+/* Tag colour variants */
+.tag.default { background-color: var(--bg-fill-neutral);    color: var(--fg); }
+.tag.light   { background-color: var(--bg-fill-light);      color: var(--fg-secondary);       border: 1px solid var(--border); }
+.tag.gold    { background-color: var(--bg-fill-emphasis);   color: var(--color-leifur-black); }
+.tag.white   { background-color: var(--bg);                 color: var(--fg);                 border: 1px solid var(--border); }
+.tag.brand   { background-color: var(--bg-fill-brand);      color: var(--fg-invert); }
+.tag.warning { background-color: var(--bg-fill-warning);    color: var(--color-leifur-black); }
+.tag.urgent  { background-color: var(--bg-fill-urgent);     color: var(--fg-invert); }
+.tag.black   { background-color: var(--color-leifur-black); color: var(--fg-invert); }
+.tag.success { background-color: var(--color-gljafaxi-green-100); color: var(--color-gljafaxi-green-800); }
+
+
+/* =============================================================================
+   11. NAVIGATION
+   ============================================================================= */
+
+/* Nav Menu (primary horizontal nav) */
+.nav-menu {
+  display: flex;
+  align-items: center;
+  gap: var(--space-050);
+}
+
+.nav-menu-item { position: relative; }
+
+.nav-menu-link {
+  display: flex;
+  align-items: center;
+  gap: var(--space-100);
+  height: var(--size-500);
+  padding-inline: var(--space-200);
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-normal-size);
+  font-weight: var(--font-body-normal-weight);
+  color: var(--fg);
+  text-decoration: none;
+  border-radius: var(--radius-050);
+  white-space: nowrap;
+  transition: background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
+}
+
+.nav-menu-link:hover { background-color: var(--bg-fill-light); }
+
+.nav-menu-link.active,
+.nav-menu-link[aria-current="page"] { font-weight: var(--font-body-large-bold-weight); }
+
+.nav-menu-dropdown {
+  position: absolute;
+  top: calc(100% + var(--space-100));
+  left: 0;
+  background-color: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-100);
+  box-shadow: var(--shadow-medium);
+  min-width: 200px;
+  padding: var(--space-100) 0;
+  z-index: var(--z-dropdown);
+}
+
+.nav-menu-dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-150);
+  padding: var(--space-150) var(--space-200);
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-normal-size);
+  color: var(--fg);
+  text-decoration: none;
+  transition: background-color var(--duration-fast) var(--ease);
+}
+
+.nav-menu-dropdown-item:hover { background-color: var(--bg-fill-light); }
+
+/* Secondary Navigation (icon-only bar, 32px items) */
+.nav-secondary {
+  display: flex;
+  align-items: center;
+  gap: var(--space-100);
+}
+
+.nav-secondary-item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-400);
+  height: var(--size-400);
+  border-radius: var(--radius-050);
+  background-color: transparent;
+  border: none;
+  color: var(--fg-secondary);
+  cursor: pointer;
+  text-decoration: none;
+  transition: background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
+}
+
+.nav-secondary-item:hover              { background-color: var(--bg-fill-light); color: var(--fg); }
+.nav-secondary-item.active,
+.nav-secondary-item[aria-current="page"] { background-color: var(--bg-fill-neutral); color: var(--fg); }
+
+.nav-secondary-item svg,
+.nav-secondary-item img {
+  width: var(--size-300);
+  height: var(--size-300);
+  display: block;
+}
+
+/* Language Selector */
+.nav-language { position: relative; }
+
+.nav-language-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-100);
+  height: var(--size-400);
+  padding-inline: var(--space-150);
+  border-radius: var(--radius-050);
+  background-color: transparent;
+  border: none;
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-normal-size);
+  color: var(--fg);
+  cursor: pointer;
+  transition: background-color var(--duration-fast) var(--ease);
+}
+
+.nav-language-trigger:hover { background-color: var(--bg-fill-light); }
+
+.nav-language-flag {
+  width: 20px;
+  height: 14px;
+  object-fit: cover;
+  border-radius: 2px;
+  display: block;
+}
+
+.nav-language-dropdown {
+  position: absolute;
+  top: calc(100% + var(--space-100));
+  right: 0;
+  width: 140px;
+  background-color: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-100);
+  box-shadow: var(--shadow-medium);
+  padding: var(--space-100) 0;
+  z-index: var(--z-popup);
+}
+
+.nav-language-option {
+  display: flex;
+  align-items: center;
+  gap: var(--space-150);
+  padding: var(--space-150) var(--space-200);
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-normal-size);
+  color: var(--fg);
+  text-decoration: none;
+  transition: background-color var(--duration-fast) var(--ease);
+}
+
+.nav-language-option:hover  { background-color: var(--bg-fill-light); }
+.nav-language-option.active { font-weight: var(--font-body-large-bold-weight); }
+
+/* Breadcrumbs */
+.breadcrumbs {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--space-100);
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.breadcrumb-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-100);
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-small-size);
+  color: var(--fg-secondary);
+  line-height: var(--font-body-small-lineheight);
+}
+
+.breadcrumb-item a       { color: var(--fg-secondary); text-decoration: none; transition: color var(--duration-fast) var(--ease); }
+.breadcrumb-item a:hover { color: var(--fg); text-decoration: underline; }
+
+.breadcrumb-item:last-child,
+.breadcrumb-item[aria-current="page"] {
+  color: var(--fg);
+  font-weight: var(--font-body-large-bold-weight);
+  pointer-events: none;
+}
+
+.breadcrumb-separator { color: var(--fg-neutral); font-size: 12px; }
+
+/* Tabs */
+.tabs { display: flex; flex-direction: row; }
+
+.tabs-list {
+  display: flex;
+  gap: 0;
+  border-bottom: 1px solid var(--border);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.tabs-list::-webkit-scrollbar { display: none; }
+
+.tabs-list-sticky {
+  position: sticky;
+  top: 0;
+  z-index: var(--z-raised);
+  background-color: var(--bg-surface);
+}
+
+.tab {
+  display: flex;
+  align-items: center;
+  gap: var(--space-100);
+  height: 92px;
+  padding-inline: var(--space-300);
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-normal-size);
+  font-weight: var(--font-body-normal-weight);
+  color: var(--fg-secondary);
+  white-space: nowrap;
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  cursor: pointer;
+  transition: color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
+}
+
+.tab:hover { color: var(--fg); }
+
+.tab.active,
+.tab[aria-selected="true"] {
+  color: var(--fg);
+  font-weight: var(--font-body-large-bold-weight);
+  border-bottom-color: var(--color-leifur-black);
+}
+
+.tab-panel { padding-top: var(--space-300); }
+
+@media (max-width: 768px) {
+  .tab { height: 72px; }
+}
+
+/* Filter Bar */
+.filter-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-150);
+  flex-wrap: wrap;
+}
+
+.filter-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-100);
+  height: var(--size-500);
+  padding-inline: var(--space-200);
+  background-color: var(--bg);
+  border: 1.5px solid var(--border);
+  border-radius: var(--radius-full);
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-normal-size);
+  color: var(--fg);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: border-color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease);
+}
+
+.filter-chip:hover  { border-color: var(--border-contrast); }
+.filter-chip.active { background-color: var(--color-leifur-black); border-color: var(--color-leifur-black); color: var(--fg-invert); }
+
+/* Accordion */
+
+.accordion {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-100);
+}
+
+.accordion-item {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-100);
+  overflow: hidden;
+}
+
+.accordion-item:hover > summary { color: var(--color-primary); }
+
+.accordion-item > summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: var(--space-200) var(--space-300);
+  cursor: pointer;
+  list-style: none;
+  font-weight: var(--font-body-large-bold-weight);
+  background: var(--bg-surface);
+}
+
+/* Custom marker on the right */
+.accordion-item > summary::after {
+  content: "↓";
+  font-size: 1.2em;
+  flex-shrink: 0;
+  transition: transform 0.2s ease;
+}
+
+/* Rotate when open */
+.accordion-item[open] > summary::after {
+  transform: rotate(-180deg);
+}
+
+.accordion-item[open] > summary {
+  border-bottom: 1px solid var(--border);
+}
+
+.accordion-body {
+  padding: var(--space-200) var(--space-300);
+}
+
+/* Accordion — Airline Logo variant (88px row height, from Figma) */
+.accordion-airline > .accordion-item > summary {
+  gap: var(--space-300);
+  height: 88px;
+  padding-inline: var(--space-300);
+}
+
+.accordion-airline-logo {
+  flex-shrink: 0;
+  width: var(--size-700);
+  height: var(--size-500);
+  object-fit: contain;
+}
+
+@media (max-width: 768px) {
+  .accordion-airline > .accordion-item > summary { height: 124px; }
+}
+
+
+/* =============================================================================
+   12. TABLE
+   ============================================================================= */
+
+.table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+  border-radius: var(--radius-100);
+  border: 1px solid var(--border);
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-normal-size);
+}
+
+.table thead { background-color: var(--bg-fill-light); border-bottom: 1px solid var(--border); }
+
+.table th {
+  padding: var(--space-150) var(--space-200);
+  text-align: left;
+  font-weight: var(--font-body-large-bold-weight);
+  color: var(--fg);
+  white-space: nowrap;
+}
+
+.table td {
+  padding: var(--space-150) var(--space-200);
+  color: var(--fg-secondary);
+  border-bottom: 1px solid var(--border);
+  vertical-align: middle;
+}
+
+.table tbody tr:last-child td { border-bottom: none; }
+.table tbody tr:hover td      { background-color: var(--bg-fill-light); }
+
+
+/* =============================================================================
+   13. SECTION HEADING
+   ============================================================================= */
+
+.section-heading {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-100);
+}
+
+.section-heading-eyebrow {
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-small-size);
+  font-weight: var(--font-body-large-bold-weight);
+  color: var(--fg-brand);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  line-height: var(--font-body-small-lineheight);
+}
+
+.section-heading-title {
+  font-family: var(--font-family-main);
+  font-size: var(--font-header-3-size);
+  font-weight: var(--font-header-3-weight);
+  line-height: var(--font-header-3-lineheight);
+  color: var(--fg);
+}
+
+.section-heading-description {
+  font-family: var(--font-family-main);
+  font-size: var(--font-intro-size);
+  font-weight: var(--font-intro-weight);
+  line-height: var(--font-intro-lineheight);
+  color: var(--fg-secondary);
+}
+
+@media (max-width: 600px) {
+  .section-heading-title       { font-size: var(--font-header-4-size); line-height: var(--font-header-4-lineheight); }
+  .section-heading-description { font-size: var(--font-body-large-size); }
+}
+
+
+/* =============================================================================
+   14. SITE HEADER
+   ============================================================================= */
+
+.site-header {
+  position: sticky;
+  top: 0;
+  z-index: var(--z-header);
+  width: 100%;
+  background-color: var(--bg-surface);
+  border-bottom: 1px solid var(--border);
+}
+
+.site-header-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-inline: var(--grid-margin);
+  max-width: var(--grid-max-width);
+  margin-inline: auto;
+  box-sizing: border-box;
+}
+
+.site-header-logo {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.site-header-logo img { height: var(--size-400); display: block; }
+
+.site-header-nav {
+  display: flex;
+  align-items: center;
+  gap: var(--space-050);
+  block-size: clamp(75px, 10vh, 100px);
+}
+
+.site-header-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-150);
+}
+
+@media (max-width: 768px) {
+  .site-header-nav { display: none; }
+}
+
+
+/* =============================================================================
+   15. SITE FOOTER
+   ============================================================================= */
+
+.site-footer {
+  width: 100%;
+  background-color: var(--color-leifur-black);
+  color: var(--fg-invert);
+  padding-block: var(--space-800);
+}
+
+.site-footer-inner {
+  max-width: var(--grid-max-width);
+  margin-inline: auto;
+  padding-inline: var(--grid-margin);
+  box-sizing: border-box;
+}
+
+.site-footer-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--space-400);
+}
+
+.site-footer-logo     { display: flex; align-items: center; margin-bottom: var(--space-300); }
+.site-footer-logo img { height: var(--size-400); display: block; filter: brightness(0) invert(1); }
+
+.site-footer-heading {
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-normal-size);
+  font-weight: var(--font-body-large-bold-weight);
+  color: var(--fg-invert);
+  margin-bottom: var(--space-150);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.site-footer-links {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-100);
+}
+
+.site-footer-link {
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-normal-size);
+  color: var(--color-leifur-black-300);
+  text-decoration: none;
+  transition: color var(--duration-fast) var(--ease);
+}
+
+.site-footer-link:hover { color: var(--fg-invert); }
+
+.site-footer-divider {
+  border: none;
+  border-top: 1px solid var(--color-leifur-black-700);
+  margin-block: var(--space-400);
+}
+
+.site-footer-bottom {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-200);
+  flex-wrap: wrap;
+  font-family: var(--font-family-main);
+  font-size: var(--font-body-small-size);
+  color: var(--color-leifur-black-300);
+}
+
+@media (max-width: 768px) {
+  .site-footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-300); }
+}
+
+@media (max-width: 480px) {
+  .site-footer-grid { grid-template-columns: 1fr; }
+}
+
+
+/* =============================================================================
+   REDUCED MOTION
+   ============================================================================= */
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    transition-duration:        0.01ms !important;
+    animation-duration:         0.01ms !important;
+    animation-iteration-count:  1      !important;
+  }
+}