/* ==========================================================================
   base.css: colours, fonts, reset, buttons and helpers used everywhere.

   The palette: the CDA cornerstone logo is the company colour (sand stone
   and charcoal), with the light leaf green of the Cornerstone tree, and the
   soft green, brown and gold of the CDA header and footer. Change the
   colours here and the whole site follows.
   ========================================================================== */

:root {
    /* CDA logo: charcoal (outline of the stone), for text and strong buttons */
    --forest-950: #141310;
    --forest-900: #1f1d1a;
    --forest-800: #33312c;
    --forest-700: #46433c;
    --forest-600: #6b7f2a;
    --forest-100: #ebe8da;

    /* Cornerstone tree: leaf green, the accent */
    --leaf-500: #aeb047;     /* light leaf green */
    --leaf-400: #c8cc78;
    --leaf-600: #8f9a2f;
    --leaf-700: #4f6420;     /* deep leaf green: buttons, titles, links */
    --leaf-100: #eff1d8;

    /* CDA header and footer colours */
    --sage-100:  #e1eddb;   /* soft green: header background */
    --sage-50:   #eef5ea;
    --brown-500: #76664f;   /* brown: buttons, text on light */
    --brown-700: #4d4332;   /* dark brown: footer, text on gold */
    --brown-900: #3a3226;
    --gold-400:  #ddc57d;   /* gold: hover, highlights */
    --gold-200:  #efe2b8;

    /* Stone greys and creams */
    --stone-300: #ccc9b6;
    --stone-200: #e2ddc0;
    --stone-100: #f1eedf;
    --stone-50:  #f9f7ef;
    --ink:       #1c1a16;
    --ink-soft:  #35322b;   /* still dark enough to read on sand */
    --white:     #ffffff;

    --bg: var(--stone-50);
    --surface: var(--white);
    --line: #e4dfcc;

    --success: #2f6b3a;
    --error: #a3361f;

    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-title: 'Fraunces', Georgia, 'Times New Roman', serif;

    --radius-sm: 8px;
    --radius: 16px;
    --radius-lg: 24px;
    --shadow-sm: 0 2px 6px rgba(51, 49, 44, .06);
    --shadow: 0 10px 30px -12px rgba(51, 49, 44, .22);
    --shadow-lg: 0 24px 50px -20px rgba(31, 29, 26, .35);
    --ease: cubic-bezier(.22, .61, .36, 1);
    --container: 1200px;
    --header-h: 80px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.7;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--forest-700); text-decoration: none; transition: color .2s; }
a:hover { color: var(--leaf-700); }
button { font: inherit; cursor: pointer; }
ul, ol { padding: 0; margin: 0; list-style: none; }
address { font-style: normal; }
dialog { padding: 0; }
[hidden] { display: none !important; }

/* ---------- Typography ---------- */
h1, h2, h3, .h3 {
    font-family: var(--font-title);
    color: var(--forest-900);
    line-height: 1.2;
    margin: 0 0 .6em;
    font-weight: 700;
}
h1 { font-size: clamp(2.3rem, 5vw, 3.8rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
h3, .h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
.lead { font-size: 1.15rem; font-weight: 600; color: var(--ink-soft); }
.lead-center { max-width: 760px; margin: 0 auto 3rem; text-align: center; }
.center { text-align: center; }
.small-label {
    font-family: var(--font-body);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--leaf-700);
    margin: 1.6rem 0 .8rem;
}
.small-print { font-size: .875rem; font-weight: 600; color: var(--ink-soft); }

/* Eyebrow: the label at the top of each section that says what it shows */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    max-width: 100%;
    padding: .55rem 1.15rem .55rem .9rem;
    border-radius: 999px;
    background: var(--leaf-100);
    border: 1px solid rgba(79, 100, 32, .22);
    font-family: var(--font-body);
    font-size: clamp(.95rem, 1.3vw, 1.1rem);
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--leaf-700);
    margin-bottom: 1.1rem;
}
.eyebrow::before { content: ''; flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--gold-400); box-shadow: 0 0 0 4px rgba(221, 197, 125, .35); }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: clamp(4rem, 8vw, 6.5rem) 0; position: relative; }
.section-soft { background: var(--sage-50); }
.section-stone { background: linear-gradient(180deg, var(--stone-200), var(--stone-100)); overflow: hidden; }

.section-head { max-width: 720px; margin-bottom: 3rem; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 3rem; }
.section-head-row .section-head { margin-bottom: 0; }

.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split-wide { grid-template-columns: 2fr 3fr; align-items: start; }

@media (max-width: 960px) {
    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .split, .split-wide { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .container { padding: 0 16px; }
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .9rem 1.6rem;
    border-radius: 999px;
    border: 2px solid transparent;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s, border-color .25s;
    white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn .icon { transition: transform .25s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
.btn-sm { padding: .6rem 1.2rem; font-size: .95rem; }

.btn-primary { background: var(--forest-800); color: var(--white); box-shadow: var(--shadow); }
.btn-primary:hover { background: var(--forest-700); color: var(--white); }
.btn-accent { background: var(--brown-500); color: var(--white); box-shadow: 0 10px 24px -10px rgba(77, 67, 50, .6); }
.btn-accent:hover, .btn-accent.active { background: var(--gold-400); color: var(--brown-700); box-shadow: 0 5px 0 var(--brown-500); }
.btn-outline { border-color: var(--brown-500); color: var(--brown-700); }
.btn-outline:hover { background: var(--brown-500); border-color: var(--brown-500); color: var(--white); }

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    color: var(--forest-700);
    background: none;
    border: 0;
    padding: 0;
}
.link-arrow .icon { transition: transform .25s var(--ease); }
.link-arrow:hover { color: var(--leaf-700); }
.link-arrow:hover .icon, a:hover .link-arrow .icon { transform: translateX(4px); }

/* ---------- Accessibility ---------- */
.skip-link {
    position: absolute;
    left: 1rem;
    top: -100px;
    z-index: 200;
    background: var(--forest-800);
    color: var(--white);
    padding: .7rem 1.2rem;
    border-radius: var(--radius-sm);
}
.skip-link:focus { top: 1rem; color: var(--white); }
:focus-visible { outline: 3px solid var(--leaf-500); outline-offset: 3px; border-radius: 4px; }

/* ---------- Reveal on scroll (js/main.js adds .is-visible) ---------- */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
    transition-delay: var(--delay, 0ms);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .js [data-reveal] { opacity: 1; transform: none; }
}