/* ============================================================
   DESIGN TOKENS
   Every colour, size and timing used by the template lives here.
   Change a value once and it updates across all pages.
   Values were measured from the reference site's computed styles.
   ============================================================ */

:root {
  /* ---- Brand palette ---- */
  --gold:            #bd9c3c;   /* primary brand gold  (rgb 189,156,60) */
  --gold-light:      #cdc168;   /* button / accent gold */
  --gold-soft:       #d8c480;   /* gradient top stop */
  --gold-deep:       #9c7d28;   /* gradient bottom stop / hover */
  --teal:            #11414b;   /* headings & dark text (rgb 17,65,75) */
  --teal-light:      #2e6a76;
  --slate:           #546e7a;   /* muted body copy */
  --ink:             #1c1c1c;
  --white:           #ffffff;
  --paper:           #f7f7f7;   /* footer band */
  --header-bg:       #f4f4f4;   /* header band */
  --body-bg:         #eeeeee;   /* page background behind sections */
  --line:            #e2e2e2;   /* hairline dividers */
  --dark-band:       #232323;   /* video section background */

  /* ---- Overlays ---- */
  --overlay-hero:    rgba(0, 0, 0, .22);   /* measured: black @ 22% */
  --overlay-band:    rgba(0, 0, 0, .35);
  --overlay-pillar:  rgba(17, 65, 75, .62);

  /* ---- Typography ---- */
  --font-display: "El Messiri", "Roboto Slab", Georgia, "Times New Roman", serif;
  --font-body:    "El Messiri", "Source Sans Pro", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-hero-sub:   30px;   /* "Welcome to" */
  --fs-hero:       80px;   /* main hero headline */
  --fs-h1:         72px;   /* section headline over image */
  --fs-h2:         35px;   /* section headline on white */
  --fs-h3:         23px;   /* card / pillar heading */
  --fs-lead:       18px;
  --fs-body:       16px;
  --fs-small:      14px;

  --lh-tight:  1.1;
  --lh-normal: 1.5;
  --lh-loose:  1.65;

  /* ---- Layout ---- */
  --container:      1200px;  /* measured content width */
  --gutter:         24px;
  --header-h:       98px;    /* desktop header height */
  --header-h-sm:    72px;
  --radius-pill:    50px;
  --radius-sm:      4px;
  --grid-gap:       10px;    /* gallery masonry gap */

  /* ---- Section rhythm ---- */
  --section-y:      96px;
  --section-y-sm:   56px;

  /* ---- Effects ---- */
  --shadow-card:    0 6px 24px rgba(17, 65, 75, .08);
  --shadow-header:  0 1px 0 rgba(0, 0, 0, .06);
  --ease:           cubic-bezier(.22, .61, .36, 1);
  --dur:            .55s;
}

/* Slightly smaller display type on narrow screens */
@media (max-width: 900px) {
  :root {
    --fs-hero-sub: 20px;
    --fs-hero:     40px;
    --fs-h1:       36px;
    --fs-h2:       28px;
    --fs-h3:       20px;
    --fs-lead:     16px;
    --section-y:   var(--section-y-sm);
  }
}