/*
Theme Name: Urban Kakis
Theme URI: https://urbankakis.sg
Author: Urban Kakis
Description: A youth-led urban platform creating third spaces for stories, conversations, and civic life in Singapore.
Version: 3.0
License: GNU General Public License v2 or later
Text Domain: urban-kakis
*/

/* ============================================================
   FONT FACE DECLARATIONS
   —  Kuhlman (DJR)       → headings only  (woff2/woff)
   —  Parabolica (Dinamo) → everything else (otf / test licence)
============================================================ */

@font-face {
    font-family: "Kuhlman";
    src: url("assets/fonts/Kuhlman-Regular.woff2") format("woff2"),
         url("assets/fonts/Kuhlman-Regular.woff")  format("woff");
    font-weight: 400;
    font-style:  normal;
    font-display: swap;
}

@font-face {
    font-family: "Kuhlman Wide";
    src: url("assets/fonts/Kuhlman-Wide.woff2") format("woff2"),
         url("assets/fonts/Kuhlman-Wide.woff")  format("woff");
    font-weight: 400;
    font-style:  normal;
    font-display: swap;
}

@font-face {
    font-family: "Kuhlman Condensed";
    src: url("assets/fonts/Kuhlman-Condensed.woff2") format("woff2"),
         url("assets/fonts/Kuhlman-Condensed.woff")  format("woff");
    font-weight: 400;
    font-style:  normal;
    font-display: swap;
}

@font-face {
    font-family: "Kuhlman Narrow";
    src: url("assets/fonts/Kuhlman-Narrow.woff2") format("woff2"),
         url("assets/fonts/Kuhlman-Narrow.woff")  format("woff");
    font-weight: 400;
    font-style:  normal;
    font-display: swap;
}

@font-face {
    font-family: "Parabolica";
    src: url("assets/fonts/ParabolicaText-Regular.otf") format("opentype");
    font-weight: 400;
    font-style:  normal;
    font-display: swap;
}

@font-face {
    font-family: "Parabolica";
    src: url("assets/fonts/ParabolicaText-RegularOblique.otf") format("opentype");
    font-weight: 400;
    font-style:  italic;
    font-display: swap;
}

@font-face {
    font-family: "Parabolica";
    src: url("assets/fonts/ParabolicaText-Medium.otf") format("opentype");
    font-weight: 500;
    font-style:  normal;
    font-display: swap;
}

@font-face {
    font-family: "Parabolica";
    src: url("assets/fonts/ParabolicaText-MediumOblique.otf") format("opentype");
    font-weight: 500;
    font-style:  italic;
    font-display: swap;
}

@font-face {
    font-family: "Parabolica";
    src: url("assets/fonts/ParabolicaText-Bold.otf") format("opentype");
    font-weight: 700;
    font-style:  normal;
    font-display: swap;
}

/* ============================================================
   DESIGN TOKENS
============================================================ */
:root {
    /* ── Brand colours (exact from brand deck) ── */
    --uk-beige:    #e7d9d0;   /* dominant canvas */
    --uk-blue:     #658af4;
    --uk-charcoal: #463b35;
    --uk-magenta:  #f146a4;
    --uk-yellow:   #f6e14e;
    --uk-orange:   #f85a31;
    --uk-white:    #ffffff;
    --uk-black:    #1a1410;

    /* ── Surface tones ── */
    --uk-sand:     #f0e9e3;   /* slightly lighter beige for card surfaces */
    --uk-border:   rgba(70,59,53,0.14);
    --uk-rule:     rgba(70,59,53,0.22);
    --uk-text-dim: rgba(70,59,53,0.6);
    --uk-text-sub: rgba(70,59,53,0.4);

    /* ── Topic colours ── */
    --topic-third-spaces: #f85a31;
    --topic-housing:      #658af4;
    --topic-climate:      #f146a4;
    --topic-mindsets:     #f6e14e;

    /* ── Type stacks ── */
    --font-heading: "Kuhlman", sans-serif;        /* h1–h4 ONLY */
    --font-body:    "Parabolica", system-ui, sans-serif; /* everything else */

    /* ── Spacing (8pt grid) ── */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* ── Grid ── */
    --grid-max:    1280px;
    --grid-gutter: clamp(1rem, 4vw, 2.5rem);

    /* ── Rules ── */
    --rule-thin:  1px;
    --rule-mid:   2px;
    --rule-thick: 4px;
    --rule-heavy: 6px;
}

/* ============================================================
   BASE RESET
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    background-color: var(--uk-beige);   /* ← beige canvas everywhere */
    color: var(--uk-charcoal);
    overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
p { max-width: 65ch; }

/* ============================================================
   TYPOGRAPHY
   Kuhlman → headings only.  Parabolica → everything else.
   Sizes kept editorial-restrained (archi-magazine scale).
============================================================ */

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 400;
    text-transform: uppercase;
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.5rem, 5.5vw, 4.75rem);
    line-height: 1.0;
    letter-spacing: -0.01em;
}

h2 {
    font-size: clamp(1.875rem, 3.75vw, 3.25rem);
    line-height: 1.05;
    letter-spacing: -0.005em;
}

h3 {
    font-size: clamp(1.375rem, 2.5vw, 2rem);
    line-height: 1.1;
}

h4 {
    font-size: clamp(1.0625rem, 1.75vw, 1.5rem);
    line-height: 1.2;
}

/* Body text sizes — Parabolica */
.uk-text-lg  { font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); line-height: 1.7; }
.uk-text-xl  { font-size: clamp(1.1875rem, 2vw, 1.5rem);      line-height: 1.55; }
.uk-text-sm  { font-size: 0.875rem; }
.uk-text-xs  { font-size: 0.75rem; }

/* ── UI label — Parabolica, small, spaced ── */
.uk-label {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--uk-text-dim);
    line-height: 1;
    display: block;
    margin-bottom: var(--space-2);
}

/* ── Section marker — editorial index number ── */
.uk-section-marker {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--uk-text-sub);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}
.uk-section-marker::after {
    content: '';
    display: block;
    width: 2rem;
    height: var(--rule-thin);
    background: var(--uk-rule);
}

/* ============================================================
   LAYOUT PRIMITIVES
============================================================ */
.uk-container {
    width: 100%;
    max-width: var(--grid-max);
    margin-inline: auto;
    padding-inline: var(--grid-gutter);
}

.uk-page-wrap { display: flex; flex-direction: column; min-height: 100vh; }
.uk-main      { flex: 1; }

.section-spacing    { padding-block: clamp(var(--space-12), 8vw, var(--space-24)); }
.section-spacing-sm { padding-block: clamp(var(--space-8), 5vw, var(--space-16)); }

/* Horizontal rules */
.uk-rule        { border: none; border-top: var(--rule-thin) solid var(--uk-border); }
.uk-rule-thick  { border: none; border-top: var(--rule-thick) solid var(--uk-charcoal); }
.uk-rule-accent { border: none; border-top: var(--rule-mid)   solid var(--uk-blue); }

/* ============================================================
   HEADER / NAVIGATION
   Beige-toned, Parabolica, understated — site structure
   should fade behind the content, not compete with it.
============================================================ */
.uk-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--uk-beige);
    border-bottom: var(--rule-thin) solid var(--uk-rule);
}

.uk-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--space-3);
}

.uk-logo img {
    height: 2.5rem;
    width: auto;
    border-radius: 4px;
    object-fit: cover;
    transition: opacity 0.2s;
}
.uk-logo:hover img { opacity: 0.75; }

/* Desktop nav */
.uk-nav-links {
    display: none;
    align-items: center;
    gap: var(--space-8);
    list-style: none;
}

.uk-nav-links a {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--uk-charcoal);
    opacity: 0.55;
    transition: opacity 0.15s;
    padding-bottom: 3px;
    border-bottom: var(--rule-mid) solid transparent;
}
.uk-nav-links a:hover      { opacity: 1; }
.uk-nav-links a.active     { opacity: 1; border-bottom-color: var(--uk-charcoal); }

/* Mobile toggle */
.uk-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
    background: none;
    border: none;
    color: var(--uk-charcoal);
}

/* Mobile menu */
.uk-mobile-menu {
    display: none;
    flex-direction: column;
    gap: var(--space-4);
    padding-block: var(--space-6);
    border-top: var(--rule-thin) solid var(--uk-border);
    list-style: none;
}
.uk-mobile-menu.open { display: flex; }
.uk-mobile-menu a {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--uk-charcoal);
    opacity: 0.55;
    transition: opacity 0.15s;
}
.uk-mobile-menu a:hover,
.uk-mobile-menu a.active { opacity: 1; }

@media (min-width: 768px) {
    .uk-nav-links     { display: flex; }
    .uk-mobile-toggle { display: none; }
}

/* ============================================================
   HERO — type-first, split composition
   Left column: text.  Right column: images in carousel.
   Beige background so the heading breathes.
============================================================ */
.uk-hero-section {
    position: relative;
    overflow: hidden;
    background-color: var(--uk-beige);
}

/* Carousel */
.uk-carousel {
    position: relative;
    overflow: hidden;
    background: var(--uk-beige);
}

.uk-carousel-inner {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.uk-carousel-slide {
    min-width: 100%;
    position: relative;
    height: clamp(480px, 70vh, 720px);
}
.uk-carousel-slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
}

/* Flat overlay — no gradient */
.uk-carousel-overlay {
    position: absolute;
    inset: 0;
    background: var(--uk-charcoal);
    opacity: 0.42;
}

/* Text panel */
.uk-carousel-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(var(--space-8), 5vw, var(--space-16));
    padding-bottom: clamp(var(--space-10), 6vw, var(--space-20));
    z-index: 10;
    pointer-events: none;
    max-width: 760px;
}

.uk-hero-eyebrow {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--uk-yellow);
    margin-bottom: var(--space-4);
    opacity: 0.9;
}

.uk-hero-title {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: clamp(2.5rem, 5.5vw, 5rem);
    text-transform: uppercase;
    line-height: 1.0;
    letter-spacing: -0.01em;
    color: var(--uk-white);
    margin-bottom: var(--space-6);
}

.uk-hero-subtitle {
    font-family: var(--font-body);
    font-size: clamp(0.9375rem, 1.5vw, 1.125rem);
    line-height: 1.65;
    color: rgba(255,255,255,0.78);
    max-width: 44ch;
}

/* Carousel controls */
.uk-carousel-controls {
    position: absolute;
    bottom: var(--space-6);
    right: var(--space-8);
    display: flex;
    gap: var(--space-2);
    z-index: 20;
}
.uk-carousel-btn {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.1);
    border: var(--rule-thin) solid rgba(255,255,255,0.25);
    border-radius: 0;
    color: var(--uk-white);
    transition: background 0.2s;
}
.uk-carousel-btn:hover { background: rgba(255,255,255,0.22); }

/* ============================================================
   STATS BAND
   Four equal colour blocks — each brand colour gets one stat.
   Kuhlman number, Parabolica label.
============================================================ */
.uk-stats-band {
    /* No single background — each cell is its own colour */
    border-top: var(--rule-thick) solid var(--uk-charcoal);
}

.uk-stats-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
    .uk-stats-row { grid-template-columns: repeat(4, 1fr); }
}

/* Each stat cell is a full-bleed colour block */
.uk-stat-item {
    padding: clamp(var(--space-8), 4vw, var(--space-12)) var(--space-8);
    border-right: var(--rule-thin) solid rgba(0,0,0,0.1);
    border-bottom: var(--rule-thin) solid rgba(0,0,0,0.1);
    position: relative;
}
.uk-stat-item:nth-child(2n) { border-right: none; }
@media (min-width: 768px) {
    .uk-stat-item              { border-bottom: none; }
    .uk-stat-item:nth-child(2n){ border-right: var(--rule-thin) solid rgba(0,0,0,0.1); }
    .uk-stat-item:last-child   { border-right: none; }
}

/* Assign a brand colour per cell position */
.uk-stat-item:nth-child(1) { background: var(--uk-blue);    color: var(--uk-white); }
.uk-stat-item:nth-child(2) { background: var(--uk-magenta); color: var(--uk-white); }
.uk-stat-item:nth-child(3) { background: var(--uk-yellow);  color: var(--uk-charcoal); }
.uk-stat-item:nth-child(4) { background: var(--uk-orange);  color: var(--uk-white); }

.uk-stat-number {
    font-family: var(--font-heading);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(2.25rem, 4.5vw, 3.75rem);
    line-height: 1;
    letter-spacing: -0.02em;
    display: block;
    margin-bottom: var(--space-2);
    /* colour is inherited from .uk-stat-item */
    color: inherit;
}

.uk-stat-label {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.65;
}

/* ============================================================
   TOPIC CARDS
   Beige card + bold left-edge colour rule per topic.
   Architectural restraint: structure signals meaning.
============================================================ */
.uk-topics-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border: var(--rule-thin) solid var(--uk-border);
}
@media (min-width: 640px) {
    .uk-topics-grid { grid-template-columns: repeat(2, 1fr); }
}

.uk-topic-card {
    padding: clamp(var(--space-8), 4vw, var(--space-12));
    border-right:  var(--rule-thin) solid var(--uk-border);
    border-bottom: var(--rule-thin) solid var(--uk-border);
    position: relative;
    overflow: hidden;
    background: var(--uk-beige);
    border-left: var(--rule-heavy) solid transparent; /* colour set inline */
}
/* override bg so colour shows through border-left */
.uk-topic-card:nth-child(2n)  { border-right: none; }
.uk-topic-card:nth-child(n+3) { border-bottom: none; }

/* Topic number — top-right, very faint */
.uk-topic-card::before {
    content: attr(data-num);
    position: absolute;
    top: var(--space-4);
    right: var(--space-6);
    font-family: var(--font-body);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    opacity: 0.2;
}

.uk-topic-card .uk-label { margin-bottom: var(--space-4); }

.uk-topic-card h3 {
    font-size: clamp(1.25rem, 2.25vw, 1.875rem);
    margin-bottom: var(--space-4);
    color: var(--uk-charcoal);
}

.uk-topic-card p {
    font-size: 0.9375rem;
    line-height: 1.7;
    max-width: 40ch;
    color: var(--uk-charcoal);
    opacity: 0.75;
}

/* ============================================================
   PRESS SECTION
   Editorial numbered list — archi magazine / newspaper style.
   Thin rules, index numbers, monospaced publication names.
============================================================ */
.uk-press-grid {
    display: grid;
    grid-template-columns: 1fr;
    border-top: var(--rule-thin) solid var(--uk-border);
}
@media (min-width: 640px) {
    .uk-press-grid { grid-template-columns: repeat(2, 1fr); }
}

.uk-press-card {
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: var(--space-8);
    border-right:  var(--rule-thin) solid var(--uk-border);
    border-bottom: var(--rule-thin) solid var(--uk-border);
    text-decoration: none;
    background: var(--uk-white);
    transition: background 0.15s;
    position: relative;
}
.uk-press-card:hover { background: var(--uk-sand); }
.uk-press-card:nth-child(2n)  { border-right: none; }
@media (max-width: 639px) {
    .uk-press-card:last-child { border-bottom: none; }
}

/* Index number — absolute top-right */
.uk-press-card::before {
    content: counter(press-item, decimal-leading-zero);
    counter-increment: press-item;
    position: absolute;
    top: var(--space-8);
    right: var(--space-8);
    font-family: var(--font-body);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--uk-text-sub);
}

.uk-press-grid { counter-reset: press-item; }

.uk-press-pub {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--uk-blue);
    margin-bottom: var(--space-3);
}

.uk-press-headline {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: clamp(0.9375rem, 1.5vw, 1.125rem);
    line-height: 1.35;
    color: var(--uk-charcoal);
    margin-bottom: var(--space-4);
}

.uk-press-date {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    color: var(--uk-text-sub);
}

/* ============================================================
   EVENTS GRID
============================================================ */
.uk-events-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
}
@media (min-width: 640px) { .uk-events-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .uk-events-grid { grid-template-columns: repeat(3, 1fr); } }

.uk-event-card {
    border: var(--rule-thin) solid var(--uk-border);
    overflow: hidden;
    background: var(--uk-white);
    transition: border-color 0.15s;
    display: block;
    text-decoration: none;
}
.uk-event-card:hover { border-color: var(--uk-charcoal); }
.uk-event-card img   { width: 100%; height: 200px; object-fit: cover; }

.uk-event-body  { padding: var(--space-6); }
.uk-event-date  {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--uk-blue);
    margin-bottom: var(--space-3);
}
.uk-event-title {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 1.0625rem;
    line-height: 1.3;
    color: var(--uk-charcoal);
    margin-bottom: var(--space-3);
}
.uk-event-desc  { font-size: 0.9375rem; color: var(--uk-text-dim); line-height: 1.6; }

/* ============================================================
   TEAM GRID
============================================================ */
.uk-team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}
@media (min-width: 640px)  { .uk-team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .uk-team-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .uk-team-grid { grid-template-columns: repeat(5, 1fr); } }

.uk-member-card {
    position: relative;
    aspect-ratio: 1;
    background: var(--uk-sand);
    border: var(--rule-thin) solid var(--uk-border);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.uk-member-card svg { transition: transform 0.4s; }
.uk-member-card:hover svg { transform: scale(1.06); }
.uk-member-card img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}
.uk-member-card:hover img { transform: scale(1.04); }

.uk-member-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(70,59,53,0.88) 0%, transparent 55%);
    z-index: 1;
}
.uk-member-info {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: var(--space-4);
    z-index: 2;
}
.uk-member-name {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--uk-white);
    margin-bottom: 2px;
}
.uk-member-role {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
}

/* Team group title */
.uk-team-section-title {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--uk-text-dim);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: var(--rule-thin) solid var(--uk-border);
    display: flex;
    align-items: center;
    gap: var(--space-4);
}
.uk-team-section-title::before {
    content: '';
    display: block;
    width: var(--rule-thick);
    height: 1.25em;
    background: var(--uk-charcoal);
    flex-shrink: 0;
}

/* ============================================================
   FORMS
   Square, sharp, minimal — no rounding anywhere.
============================================================ */
.uk-form-group  { display: flex; flex-direction: column; }
.uk-form-grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 640px) { .uk-form-grid-2 { grid-template-columns: repeat(2, 1fr); } }

.uk-form-group > .uk-label { margin-bottom: var(--space-2); }

.uk-input,
.uk-textarea,
.uk-select {
    width: 100%;
    padding: 0.6875rem var(--space-4);
    border: var(--rule-thin) solid var(--uk-border);
    border-radius: 0;
    background: var(--uk-white);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--uk-charcoal);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    -webkit-appearance: none;
}
.uk-input:focus,
.uk-textarea:focus,
.uk-select:focus {
    border-color: var(--uk-charcoal);
    box-shadow: 0 0 0 2px rgba(70,59,53,0.1);
}
.uk-textarea { resize: none; min-height: 7rem; }

/* ── Buttons — Parabolica, no rounding ── */
.uk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6875rem var(--space-8);
    border-radius: 0;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    border: var(--rule-mid) solid transparent;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    text-decoration: none;
    white-space: nowrap;
}
.uk-btn:active   { transform: scale(0.98); }
.uk-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.uk-btn-blue    { background: var(--uk-blue);     color: var(--uk-white);    }
.uk-btn-blue:hover    { background: var(--uk-charcoal); }
.uk-btn-magenta { background: var(--uk-magenta);  color: var(--uk-white);    }
.uk-btn-magenta:hover { background: var(--uk-charcoal); }
.uk-btn-charcoal{ background: var(--uk-charcoal); color: var(--uk-white);    }
.uk-btn-charcoal:hover{ background: var(--uk-black);    }
.uk-btn-yellow  { background: var(--uk-yellow);   color: var(--uk-charcoal); }
.uk-btn-yellow:hover  { background: var(--uk-orange); color: var(--uk-white); }
.uk-btn-orange  { background: var(--uk-orange);   color: var(--uk-white);    }
.uk-btn-orange:hover  { background: var(--uk-charcoal); }

.uk-btn-outline { background: transparent; border-color: var(--uk-charcoal); color: var(--uk-charcoal); }
.uk-btn-outline:hover { background: var(--uk-charcoal); color: var(--uk-white); }
.uk-btn-outline-white { background: transparent; border-color: rgba(255,255,255,0.45); color: var(--uk-white); }
.uk-btn-outline-white:hover { background: var(--uk-white); color: var(--uk-charcoal); }

.uk-btn-full { width: 100%; }

/* Form notices */
.uk-notice {
    padding: var(--space-3) var(--space-4);
    margin-top: var(--space-4);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    border-left: var(--rule-thick) solid;
}
.uk-notice-success { background: #e8f5e9; color: #1b5e20; border-color: #4caf50; }
.uk-notice-error   { background: #fce4ec; color: #880e4f; border-color: #e91e63; }

/* Newsletter form — inline on wider screens */
.uk-newsletter-form { display: flex; flex-direction: column; gap: var(--space-3); }
@media (min-width: 540px) {
    .uk-newsletter-form-inline { flex-direction: row; }
    .uk-newsletter-form-inline .uk-input { flex: 1; }
}

/* ============================================================
   CONTACT CARDS
============================================================ */
.uk-contact-card {
    padding: var(--space-6);
    border: var(--rule-thin) solid var(--uk-border);
    background: var(--uk-white);
    transition: border-color 0.15s;
}
.uk-contact-card:hover { border-color: var(--uk-charcoal); }
.uk-contact-card-inner { display: flex; align-items: flex-start; gap: var(--space-4); }
.uk-contact-icon {
    padding: var(--space-3);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.uk-contact-title {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--uk-text-sub);
    margin-bottom: var(--space-2);
}
.uk-contact-detail { font-size: 0.9375rem; color: var(--uk-charcoal); transition: color 0.15s; }
.uk-contact-detail:hover { color: var(--uk-blue); }

/* ============================================================
   TWO-COLUMN GRID
============================================================ */
.uk-grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--space-12); }
@media (min-width: 900px) { .uk-grid-2 { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   COLOUR-BLOCK BANDS
============================================================ */
.uk-band-beige    { background: var(--uk-beige);    }
.uk-band-sand     { background: var(--uk-sand);     }
.uk-band-white    { background: var(--uk-white);    }
.uk-band-charcoal { background: var(--uk-charcoal); color: var(--uk-white); }
.uk-band-black    { background: var(--uk-black);    color: var(--uk-white); }
.uk-band-yellow   { background: var(--uk-yellow);   color: var(--uk-charcoal); }
.uk-band-blue     { background: var(--uk-blue);     color: var(--uk-white); }
.uk-band-magenta  { background: var(--uk-magenta);  color: var(--uk-white); }
.uk-band-orange   { background: var(--uk-orange);   color: var(--uk-white); }

/* ============================================================
   BADGE / TAG
============================================================ */
.uk-badge {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: var(--space-1) var(--space-3);
    border: var(--rule-thin) solid currentColor;
}

/* ============================================================
   FOOTER
   Charcoal canvas, yellow top border, Parabolica throughout.
   Clean four-column grid — restrained and structured.
============================================================ */
.uk-footer {
    background: var(--uk-charcoal);
    color: rgba(231,217,208,0.7);    /* beige-tinted white */
    border-top: var(--rule-heavy) solid var(--uk-yellow);
}

.uk-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    padding-block: var(--space-16);
}
@media (min-width: 768px) { .uk-footer-grid { grid-template-columns: repeat(4, 1fr); } }

.uk-footer-logo img {
    height: 3rem;
    width: auto;
    border-radius: 4px;
    object-fit: cover;
    margin-bottom: var(--space-4);
    opacity: 0.85;
}
.uk-footer-desc { font-size: 0.9375rem; line-height: 1.65; }

.uk-footer-heading {
    font-family: var(--font-body);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(231,217,208,0.35);
    display: block;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-3);
    border-bottom: var(--rule-thin) solid rgba(231,217,208,0.1);
}

.uk-footer-links { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.uk-footer-links a { font-size: 0.9375rem; color: rgba(231,217,208,0.65); transition: color 0.15s; }
.uk-footer-links a:hover { color: var(--uk-beige); }

.uk-footer-connect { display: flex; flex-direction: column; gap: var(--space-4); }
.uk-footer-connect-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 0.9375rem;
    color: rgba(231,217,208,0.65);
    transition: color 0.15s;
}
.uk-footer-connect-item:hover { color: var(--uk-beige); }

.uk-footer-bottom {
    padding-block: var(--space-6);
    border-top: var(--rule-thin) solid rgba(231,217,208,0.1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
}
@media (min-width: 640px) {
    .uk-footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}
.uk-footer-copy {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    letter-spacing: 0.07em;
    color: rgba(231,217,208,0.3);
}
.uk-footer-legal { display: flex; gap: var(--space-6); }
.uk-footer-legal a {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    letter-spacing: 0.07em;
    color: rgba(231,217,208,0.3);
    transition: color 0.15s;
}
.uk-footer-legal a:hover { color: rgba(231,217,208,0.7); }

/* Footer newsletter form (dark-mode inputs) */
.uk-newsletter-footer .uk-input {
    background: rgba(231,217,208,0.07);
    border-color: rgba(231,217,208,0.15);
    color: var(--uk-beige);
}
.uk-newsletter-footer .uk-input::placeholder { color: rgba(231,217,208,0.3); }
.uk-newsletter-footer .uk-input:focus {
    border-color: var(--uk-yellow);
    box-shadow: none;
}

/* ============================================================
   FIELD NOTES — decorative shapes (beige page, kept as-is)
============================================================ */
.uk-decor {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}
.uk-decor-blob1 {
    bottom: -4rem; left: -3rem;
    width: 18rem; height: 18rem;
    background: var(--uk-yellow);
    clip-path: polygon(0 40%, 30% 0, 100% 20%, 85% 100%, 0 90%);
    opacity: 0.55;
}
.uk-decor-blob2 {
    top: -3rem; right: -2rem;
    width: 14rem; height: 14rem;
    background: var(--uk-blue);
    clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
    opacity: 0.4;
}
/* Star/asterisk decorative marks — brand element */
.uk-decor-star1,
.uk-decor-star2 {
    width: 3rem; height: 3rem;
}
.uk-decor-star1 {
    top: 20%; right: 18%;
    color: var(--uk-magenta);
    opacity: 0.6;
}
.uk-decor-star2 {
    bottom: 25%; left: 12%;
    color: var(--uk-blue);
    opacity: 0.45;
}

/* ============================================================
   UTILITY CLASSES
============================================================ */
.uk-text-blue     { color: var(--uk-blue);     }
.uk-text-magenta  { color: var(--uk-magenta);  }
.uk-text-charcoal { color: var(--uk-charcoal); }
.uk-text-dim      { color: var(--uk-text-dim); }
.uk-text-sub      { color: var(--uk-text-sub); }
.uk-text-white    { color: var(--uk-white);    }
.uk-text-yellow   { color: var(--uk-yellow);   }
.uk-text-center   { text-align: center; }
.uk-text-left     { text-align: left;   }

.uk-max-prose { max-width: 65ch; }
.uk-max-3xl   { max-width: 48rem; margin-inline: auto; }
.uk-max-4xl   { max-width: 56rem; margin-inline: auto; }
.uk-max-full  { max-width: none;  }

.uk-relative        { position: relative; }
.uk-overflow-hidden { overflow: hidden;   }
.uk-border-b  { border-bottom: var(--rule-thin) solid var(--uk-border); }
.uk-border-t  { border-top:    var(--rule-thin) solid var(--uk-border); }

/* Spacing helpers */
.uk-mt-4  { margin-top:    var(--space-4);  }
.uk-mt-6  { margin-top:    var(--space-6);  }
.uk-mt-8  { margin-top:    var(--space-8);  }
.uk-mt-12 { margin-top:    var(--space-12); }
.uk-mb-2  { margin-bottom: var(--space-2);  }
.uk-mb-4  { margin-bottom: var(--space-4);  }
.uk-mb-6  { margin-bottom: var(--space-6);  }
.uk-mb-8  { margin-bottom: var(--space-8);  }
.uk-mb-10 { margin-bottom: var(--space-10); }
.uk-mb-12 { margin-bottom: var(--space-12); }
.uk-mb-16 { margin-bottom: var(--space-16); }
.uk-pb-4  { padding-bottom: var(--space-4); }
.uk-pt-4  { padding-top:    var(--space-4); }

/* Stack children */
.uk-stack-4  > * + * { margin-top: var(--space-4);  }
.uk-stack-6  > * + * { margin-top: var(--space-6);  }
.uk-stack-8  > * + * { margin-top: var(--space-8);  }
.uk-stack-16 > * + * { margin-top: var(--space-16); }
.uk-stack-20 > * + * { margin-top: var(--space-20); }

/* ============================================================
   VISUALLY HIDDEN (accessibility)
============================================================ */
.uk-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}