/* ============================================================
   BrianBartram.com — style.css
   Structure:
   1. Google Fonts import
   2. Custom properties (design tokens)
   3. Reset & box model
   4. Base typography
   5. Layout utilities
   6. Header & navigation
   7. Hero section
   8. Content sections & cards
   9. Buttons & calls to action
   10. Forms
   11. Footer
   12. Utility classes
   13. Media queries (desktop)
   ============================================================ */


/* ============================================================
   1. GOOGLE FONTS
   We load Inter from Google Fonts. The &display=swap means
   the browser shows your system font first, then swaps in
   Inter once it loads — no invisible text while loading.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');


/* ============================================================
   2. CUSTOM PROPERTIES (design tokens)
   These are CSS variables — the single source of truth for
   your colours, sizes, and spacing. Change a value here and
   it updates everywhere that variable is used.

   Naming convention:  --category-role
   e.g. --color-accent, --space-lg, --radius-md
   ============================================================ */

:root {

  /* Colours */
  --color-bg:           #f7f8fc;   /* page background — off-white, cool tint */
  --color-surface:      #ffffff;   /* cards, nav, sections on top of bg */
  --color-text:         #1c1c2e;   /* primary text — deep cool ink, not pure black */
  --color-text-muted:   #5a5a7a;   /* secondary text — subtitles, captions */
  --color-accent:       #3a7d6e;   /* teal-green — CTAs, links, active states */
  --color-accent-dark:  #2c6057;   /* darker teal for hover states */
  --color-accent-light: #e8f4f1;   /* very light teal for subtle backgrounds */
  --color-purple:       #6b5b95;   /* muted purple — secondary highlight */
  --color-purple-light: #f0ecfa;   /* light purple for subtle backgrounds */
  --color-border:       #dde1ee;   /* borders, dividers */

  /* Typography */
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  2rem;      /* 32px */
  --text-4xl:  2.5rem;    /* 40px */

  /* Spacing
     A consistent scale means spacing always feels proportional.
     Most layouts only need 4–6 of these. */
  --space-xs:  0.25rem;   /* 4px */
  --space-sm:  0.5rem;    /* 8px */
  --space-md:  1rem;      /* 16px */
  --space-lg:  1.5rem;    /* 24px */
  --space-xl:  2rem;      /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 4rem;      /* 64px */
  --space-4xl: 6rem;      /* 96px */

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Max content width — keeps long lines readable */
  --max-width:      1100px;
  --max-width-text:  680px;   /* narrower for body-copy columns */

  /* Transitions */
  --transition: 150ms ease;
}


/* ============================================================
   3. RESET & BOX MODEL
   Browsers have their own default styles that vary between
   Chrome, Firefox, Safari, etc. This reset smooths them out
   so you start from a predictable baseline.
   ============================================================ */

*,
*::before,
*::after {
  /* border-box means padding and border are included in the
     element's total width/height — much easier to reason about */
  box-sizing: border-box;

  /* Remove default margins and padding on everything.
     We'll add back only what we need, deliberately. */
  margin: 0;
  padding: 0;
}

html {
  /* Prevents font size from changing when rotating a phone */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text);
  background-color: var(--color-bg);

  /* Improves font rendering on macOS/Windows */
  -webkit-font-smoothing: antialiased;
}

/* Images should never overflow their container */
img {
  max-width: 100%;
  display: block;
}

/* Remove default list styling when a list is inside a nav.
   We style lists ourselves when we need to. */
ul, ol {
  list-style: none;
}

/* Remove underline from links by default.
   We'll add styles back on specific link contexts. */
a {
  color: inherit;
  text-decoration: none;
}

/* Make buttons easier to work with */
button {
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  border: none;
  background: none;
}


/* ============================================================
   4. BASE TYPOGRAPHY
   We set a heading scale that works on both mobile and desktop.
   The desktop scale gets larger in the media queries at the
   bottom of this file.
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  line-height: 1.25;
  font-weight: 600;
  color: var(--color-text);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl);  }
h4 { font-size: var(--text-lg);  }

p {
  max-width: var(--max-width-text);  /* Keeps lines readable — ~65 characters */
  color: var(--color-text);
}

/* Inline links within body copy */
.prose a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose a:hover {
  color: var(--color-accent-dark);
}

/* A subtle horizontal rule */
hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-2xl) 0;
}


/* ============================================================
   5. LAYOUT UTILITIES
   A small set of reusable layout classes. The goal is to
   avoid writing the same flexbox or centering code over and
   over in every page.
   ============================================================ */

/* .container centres content and constrains its width.
   Every major section will use this. */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;     /* auto left+right margins = centred */
  padding-inline: var(--space-lg);  /* breathing room on small screens */
}

/* A section is a full-width row with vertical breathing room.
   Most page sections will be a <section class="section"> */
.section {
  padding-block: var(--space-3xl);  /* top and bottom padding */
}

/* Alternate background for visual separation between sections */
.section--alt {
  background-color: var(--color-surface);
}

/* A simple two-column grid for features, service cards, etc.
   On mobile this stacks to one column. */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

/* Flex row with wrapping — handy for tag lists, button groups */
.flex-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* Visually hidden but available to screen readers.
   Use on labels, landmark descriptions, skip links. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ============================================================
   6. HEADER & NAVIGATION
   ============================================================ */

.site-header {
  position: sticky;       /* Stays at top when scrolling */
  top: 0;
  z-index: 100;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

/* Site name / logo link */
.site-logo {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.site-logo:hover {
  color: var(--color-accent);
}

/* Nav links */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.site-nav a {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  transition: color var(--transition);
}

.site-nav .btn--primary {
  color: #ffffff;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--color-accent);
}

/* Mobile nav — hidden on small screens, toggled via JS */
.nav-toggle {
  display: none;  /* shown on mobile in media query */
  flex-direction: column;
  gap: 5px;
  padding: var(--space-sm);
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-text);
  border-radius: 2px;
  transition: transform var(--transition);
}

/* Mobile nav: hidden by default, shown when .nav--open is toggled by JS.
   On small screens the nav drops down below the header as a stacked list. */
@media (max-width: 1023px) {
  .site-nav {
    display: none;
    position: absolute;
    top: 64px;        /* height of the header */
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-md) var(--space-lg);
    z-index: 99;
  }

  .site-nav.nav--open {
    display: flex;
  }

  .site-nav a {
    padding: var(--space-sm) 0;
    width: 100%;
    font-size: var(--text-base);
    border-bottom: 1px solid var(--color-border);
  }

  .site-nav a:last-child {
    border-bottom: none;
    margin-top: var(--space-sm);
  }

  .nav-toggle {
    display: flex;
  }
}


/* ============================================================
   7. HERO SECTION
   The main banner at the top of a page. Designed to be
   simple — heading, subtext, and a CTA.
   ============================================================ */

.hero {
  padding-block: var(--space-4xl);
  background-color: var(--color-surface);
}

.hero__label {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-md);
}

.hero__title {
  font-size: var(--text-3xl);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-lg);
  max-width: 680px;
}

.hero__subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  margin-bottom: var(--space-xl);
  max-width: 560px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}


/* ============================================================
   8. CONTENT SECTIONS & CARDS
   ============================================================ */

/* Section header — the title + optional intro above a grid */
.section-header {
  margin-bottom: var(--space-2xl);
}

.section-header__label {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-sm);
}

.section-header__title {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-md);
}

.section-header__body {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}

/* Service / feature card */
.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  transition: box-shadow var(--transition), transform var(--transition);
}

.card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
  transform: translateY(-2px);
}

.card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background-color: var(--color-accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-lg);
  color: var(--color-accent);
  font-size: 20px;
}

.card__title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-sm);
}

.card__body {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}

.card__link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  transition: gap var(--transition);
}

.card__link:hover {
  gap: var(--space-sm);
  color: var(--color-accent-dark);
}

/* A highlighted "pull quote" or callout box */
.callout {
  border-left: 4px solid var(--color-accent);
  padding: var(--space-lg) var(--space-xl);
  background-color: var(--color-accent-light);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.callout p {
  font-size: var(--text-lg);
  color: var(--color-text);
  margin: 0;
}

/* Purple variant callout */
.callout--purple {
  border-left-color: var(--color-purple);
  background-color: var(--color-purple-light);
}


/* ============================================================
   9. BUTTONS & CALLS TO ACTION
   Two button styles:
   - .btn--primary  : filled, for the main action
   - .btn--outline  : bordered, for secondary actions
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.65rem 1.4rem;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
  cursor: pointer;
  text-decoration: none;
}

.btn:focus-visible {
  /* Visible keyboard focus ring — important for accessibility */
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

.btn--primary {
  background-color: var(--color-accent);
  color: #ffffff;
  border: 2px solid var(--color-accent);
}

.btn--primary:hover {
  background-color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
}

.btn--outline {
  background-color: transparent;
  color: var(--color-accent);
  border: 2px solid var(--color-accent);
}

.btn--outline:hover {
  background-color: var(--color-accent-light);
}

.btn:active {
  transform: scale(0.98);
}


/* ============================================================
   10. FORMS
   The contact form. Built for accessibility:
   - Labels are always visible (never just placeholder text)
   - Focus states are clear
   - Error states are handled with colour + text
   ============================================================ */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  max-width: 560px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.65rem 0.875rem;
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;  /* removes browser default styling on selects */
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(58, 125, 110, 0.15);
}

.form-textarea {
  resize: vertical;
  min-height: 140px;
}

/* Hint text below a field */
.form-hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}


/* ============================================================
   11. FOOTER
   ============================================================ */

.site-footer {
  background-color: var(--color-text);
  color: rgba(255, 255, 255, 0.75);
  padding-block: var(--space-2xl);
}

.site-footer .container {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.footer-brand {
  font-size: var(--text-lg);
  font-weight: 600;
  color: #ffffff;
}

.footer-tagline {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.55);
  max-width: none;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-xl);
}

.footer-nav a {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.65);
  transition: color var(--transition);
}

.footer-nav a:hover {
  color: #ffffff;
}

.footer-bottom {
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.4);
}


/* ============================================================
   12. IMAGE SYSTEM
   Three patterns cover almost every image use case on the site.

   PATTERN 1 — .img-frame
   A container that clips its image to a fixed aspect ratio.
   The image fills the frame and crops rather than stretching.
   Use this any time you need an image in a defined space.

   PATTERN 2 — .hero--split
   A two-column hero: text on the left, image on the right.
   Stacks to a single column on mobile (image moves below text,
   or is hidden — your choice per page).

   PATTERN 3 — .logo-strip
   A horizontal row of client/partner logos.
   Greyscale by default; full colour on hover.
   ============================================================ */


/* --- PATTERN 1: Image frame -------------------------------- */

.img-frame {
  overflow: hidden;           /* clips the image to the frame's shape */
  border-radius: var(--radius-lg);
  background-color: var(--color-border); /* placeholder colour while loading */
}

/*
  The img inside a frame always fills the frame completely.
  object-fit: cover = scale and crop to fill, never distort.
  This is the CSS equivalent of background-size: cover,
  but for a real <img> element (which is better for accessibility
  because it can carry alt text).
*/
.img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top; /* favour the top of the image — keeps
                                   faces visible when cropping portraits */
  display: block;
}

/*
  Aspect ratio variants.
  aspect-ratio reserves the space before the image loads,
  preventing layout shift (the page "jumping" as images arrive).

  3/4  = portrait — tall, good for headshots
  16/9 = landscape — wide, good for workshop photos, screenshots
  1/1  = square — versatile, good for cards
*/
.img-frame--portrait  { aspect-ratio: 3 / 4; }
.img-frame--landscape { aspect-ratio: 16 / 9; }
.img-frame--square    { aspect-ratio: 1 / 1; }

/*
  A softer, rounder frame — useful for portrait headshots
  to distinguish them from rectangular content images.
  Not fully circular (that would crop too much of a portrait),
  just noticeably rounded.
*/
.img-frame--rounded {
  border-radius: 40% 60% 55% 45% / 45% 50% 55% 50%;
}


/* --- PATTERN 2: Split hero --------------------------------- */

/*
  .hero--split overrides the default single-column hero.
  On mobile: stacked (image below text, or hidden).
  On desktop: side by side, text left, image right.

  We define the mobile layout here and the desktop version
  in the media query at the bottom of the file.
*/
.hero--split .hero__content {
  /* The text column */
}

.hero--split .hero__image {
  /* Hidden on mobile by default — the text content is what matters
     on a small screen and the image can crowd it.
     We show it again at the desktop breakpoint below. */
  display: none;
}


/* --- PATTERN 3: Logo strip --------------------------------- */

.logo-strip {
  display: flex;
  flex-wrap: wrap;            /* wraps to multiple rows on small screens */
  gap: var(--space-xl) var(--space-2xl);
  align-items: center;
}

.logo-strip img {
  height: 36px;               /* fixed height, auto width preserves ratio */
  width: auto;
  opacity: 0.55;              /* subtle greyscale default */
  filter: grayscale(100%);
  transition: opacity var(--transition), filter var(--transition);
}

.logo-strip img:hover {
  opacity: 1;
  filter: grayscale(0%);      /* full colour on hover */
}


/* ============================================================
   13. FEATURE ROW
   An image-and-text pair, used for individual workshop and
   service descriptions. On mobile: stacked (image above text).
   On desktop: side by side, equal columns.

   .feature-row--reversed flips the order on desktop only,
   so alternating rows create visual rhythm. On mobile the
   order is always the same — image above text — because
   column reversal doesn't make sense in a single column.
   ============================================================ */

.feature-row {
  display: grid;
  grid-template-columns: 1fr;   /* single column on mobile */
  gap: var(--space-2xl);
  align-items: center;
  padding-block: var(--space-2xl);
}

/* On desktop: two equal columns */
@media (min-width: 768px) {
  .feature-row {
    grid-template-columns: 1fr 1fr;
  }

  /*
    --reversed: swap column order.
    order: -1 on the image pulls it to the right visually
    even though it comes first in the HTML.
    We keep the HTML order the same (image, then content)
    so that screen readers and keyboard users always get
    image → content, regardless of visual layout.
  */
  .feature-row--reversed .feature-row__image {
    order: 1;    /* push image to the second visual column */
  }

  .feature-row--reversed .feature-row__content {
    order: -1;   /* pull content to the first visual column */
  }
}


/* ============================================================
   14. DETAIL LIST
   A key/value layout for at-a-glance workshop info:
   Duration, Format, Audience, etc.

   Uses a <dl> (description list) — the correct semantic
   element for term/value pairs. Each row is a <div>
   wrapping a <dt> (term) and <dd> (description).

   On mobile: stacked, label above value.
   On desktop: inline, label left, value right.
   ============================================================ */

.detail-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--color-border);
}

.detail-list__row {
  display: flex;
  flex-direction: column;       /* stacked on mobile */
  gap: var(--space-xs);
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 768px) {
  .detail-list__row {
    flex-direction: row;        /* side by side on desktop */
    gap: var(--space-xl);
    align-items: baseline;
  }
}

.detail-list__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  min-width: 90px;              /* aligns all values into a column */
  flex-shrink: 0;
}

.detail-list__value {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;                    /* <dd> has a browser default margin — reset it */
}


/* ============================================================
   16. PROCESS LIST
   A numbered sequence of steps — used on the consulting page
   to show how an engagement unfolds.

   CSS COUNTERS explained:
   Instead of writing "1.", "2." in the HTML, we use a CSS
   counter that increments automatically on each list item.
   The ::before pseudo-element displays the current count
   as a styled number badge.

   Benefits:
   - Add or remove a step without renumbering
   - The number style (size, colour, shape) is fully in CSS
   - Screen readers still announce it as an ordered list
   ============================================================ */

/*
  counter-reset creates a named counter on the <ol>.
  We call ours "step" — the name is arbitrary.
*/
.process-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
}

.process-list__item {
  position: relative;
  padding-left: 3.5rem;       /* space for the number badge */
  padding-bottom: var(--space-2xl);
}

/*
  A vertical line connecting the steps — drawn as a left border
  on the item. It stops short of the last item.
*/
.process-list__item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 1.1rem;               /* centre it under the number circle */
  top: 2.5rem;                /* start below the number */
  bottom: 0;
  width: 1px;
  background-color: var(--color-border);
}

/*
  The number badge. counter-increment moves the count forward;
  counter() retrieves the current value for display.
*/
.process-list__item::before {
  counter-increment: step;
  content: counter(step);

  position: absolute;
  left: 0;
  top: 0.1rem;

  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: var(--color-accent);
  color: #ffffff;

  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 2rem;          /* vertically centres the number */
  text-align: center;
}

.process-list__title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-sm);
  /* Align the title with the top of the number circle */
  padding-top: 0.1rem;
}

.process-list__body {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: none;            /* override the global p max-width */
}


/* ============================================================
   15. UTILITY CLASSES
   Small single-purpose helpers. Use sparingly.
   ============================================================ */

.text-muted  { color: var(--color-text-muted); }
.text-accent { color: var(--color-accent); }
.text-sm     { font-size: var(--text-sm); }
.text-lg     { font-size: var(--text-lg); }
.text-center { text-align: center; }

.mt-sm  { margin-top: var(--space-sm); }
.mt-md  { margin-top: var(--space-md); }
.mt-lg  { margin-top: var(--space-lg); }
.mt-xl  { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }

.mb-sm  { margin-bottom: var(--space-sm); }
.mb-md  { margin-bottom: var(--space-md); }
.mb-lg  { margin-bottom: var(--space-lg); }
.mb-xl  { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }


/* ============================================================
   13. MEDIA QUERIES — DESKTOP
   Our mobile styles are the default. These rules only apply
   when the viewport is 768px or wider.

   "min-width" = "at least this wide" = desktop upgrade.
   ============================================================ */

@media (min-width: 768px) {

  /* Larger heading scale on desktop */
  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-2xl); }

  /* Hero gets more breathing room */
  .hero__title    { font-size: var(--text-4xl); }
  .hero__subtitle { font-size: var(--text-xl);  }

  /*
    Split hero: two columns on desktop.
    Text on the left, image on the right.
    The image is hidden on mobile (see section 12 above)
    and revealed here.
  */
  .hero--split .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
  }

  .hero--split .hero__image {
    display: block;
  }

  .hero--split .hero__image .img-frame {
    max-height: 520px;
  }

  /* Two-column grid activates */
  .grid-2 { grid-template-columns: repeat(2, 1fr); }

  /* Three-column grid activates */
  .grid-3 { grid-template-columns: repeat(3, 1fr); }

  /* Contact page: wider form column, narrower sidebar */
  .grid-contact { grid-template-columns: 2fr 1fr; }

  /* Process section: steps left, callouts right */
  .grid-process { grid-template-columns: 3fr 2fr; }

  /* Footer: switch to horizontal layout */
  .site-footer .container {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
  }
}

@media (min-width: 1024px) {

  /* Nav is always visible on large screens */
  .site-nav {
    display: flex !important;  /* overrides JS-toggled hide */
  }

  .nav-toggle {
    display: none !important;
  }
}