/* ================================================================
   LABEL: ROOT TOKENS
   Spec colors (do not change):
     Header background        : #000000
     Footer background        : #3B5A78
     Hero / CTA background    : #EFEFEF
     Content background       : #FFFFFF
     Subnav / hamburger panel : #FFFFFF
   --side / --vert drive section margins and are re-defined per
   breakpoint below, so every section just reads var(--side)/var(--vert).
   ================================================================ */
:root{
  --black:#000000;
  --white:#FFFFFF;
  --grey:#EFEFEF;
  --ink:#141414;
  --ink-soft:#5A5A5A;
  --line:#DADADA;
  --accent:#E2A33B;      /* Gold — hover states + callout button. Only ever placed on black/navy backgrounds, never on white (fails contrast there, 2.2:1) */
  --accent-ink:#241A06;
  /* Deep Gold — gold-on-white variant. No single gold clears WCAG AA (4.5:1)
     against white, black, AND #2B3A55 navy at once (white vs. dark backgrounds
     pull luminance in opposite directions). This darker gold sits right at the
     practical ceiling: ~3.4:1 against white, ~3.3:1 against navy (6.1:1
     against black) — enough for large text (18pt+/14pt bold+) and non-text
     UI components (3:1 minimum), not small body copy. Used as the resting
     background of the CTA-card buttons (.cta-card .pill-btn below), which
     sit on a white card where --accent alone only hits 2.2:1. */
  --accent-on-light:#BA7F1C;
  --cta-bg:#EAEBEE;      /* Soft Navy Tint — CTA section background, independent of --grey (shared with .hero) */

  /* LABEL: BLUE ACCENTS — secondary accents alongside --accent (gold).
     --blue-navy drives h1-h4 and h6 text and the contact callout background
     (header reverted to --black); --blue-petrol drives the footer background;
     --blue-steel drives h5, the project pages' eyebrow label, the Home +
     Landing H2 lede (.lede), and the home page's CTA-card H4s. */
  --blue-navy:#2B3A55;    /* Deep Indigo Navy */
  --blue-petrol:#3B5A78;  /* Petrol / Denim Blue */
  --blue-steel:#4A6C8C;   /* Muted Steel Blue */

  /* LABEL: GRAYSCALE PALETTE — White through Black, in 2.5/5/7.5/10%
     steps near white then 10% steps to black. Percentage = how far
     toward black the tone sits (e.g. 90% Gray is close to Black). */
  --white-000:#FFFFFF;      /* White */
  --gray-025:#F9F9F9;       /* 2.5% Gray */
  --gray-050:#F2F2F2;       /* 5% Gray */
  --gray-075:#ECECEC;       /* 7.5% Gray */
  --gray-100:#E6E6E6;       /* 10% Gray */
  --gray-200:#CCCCCC;       /* 20% Gray */
  --gray-300:#B2B2B2;       /* 30% Gray */
  --gray-400:#999999;       /* 40% Gray */
  --gray-500:#808080;       /* 50% Gray */
  --gray-600:#666666;       /* 60% Gray */
  --gray-700:#4C4C4C;       /* 70% Gray */
  --gray-800:#333333;       /* 80% Gray */
  --gray-900:#1A1A1A;       /* 90% Gray */
  --black-000:#000000;      /* Black */

  --font-primary:'Aleo', serif;
  --font-secondary:'Inter', sans-serif;

  --radius-pill:999px;

  /* LABEL: 12-COLUMN GRID SYSTEM — for laying out content INSIDE each
     section's existing --side margins (does not affect those margins).
     Column count scales per breakpoint; gutter is a constant 32px.
     Tablet's column count (6) wasn't specified in the brief — chosen
     as a natural midpoint between mobile's 2 and desktop's 12. */
  --grid-cols:2;
  --grid-gutter:32px;

  /* MOBILE (base) — < 768px */
  --side:16px;
  --vert:30px;
}

/* TABLET — 768px to 1023px */
@media (min-width:768px){
  :root{ --side:32px; --vert:60px; --grid-cols:12; }
}

/* DESKTOP — >= 1024px */
@media (min-width:1024px){
  :root{ --side:160px; --vert:60px; --grid-cols:12; }
}

/* SMALL DESKTOP — 1024px to 1279px only: the 12-column grid caps at a
   960px centered container instead of stretching to the full width
   inside the fixed 160px margin. Margins shrink to fit as needed (as
   low as a 32px floor at exactly 1024px), growing back up toward 160px
   as the viewport approaches 1280px, where the flat desktop rule above
   takes back over unchanged. Gutter stays the standard 32px. */
@media (min-width:1024px) and (max-width:1279px){
  :root{ --side:max(32px, calc((100vw - 960px) / 2)); }
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--white);
  color:var(--gray-800); /* body text on light backgrounds — #333333 */
  font-family:var(--font-secondary);
  font-weight:400;
  font-size:18px;
  line-height:27px;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
/* LABEL: TYPE SCALE
   H1–H3 share one style (same values given for both Desktop and Mobile,
   so no breakpoint override is needed). H4–H6, Eyebrow, Body, Caption,
   and the two Nav styles are shared across all breakpoints per spec. */
h1{
  font-family:var(--font-primary);
  font-weight:700;
  font-size:32px;
  line-height:48px;
  color:var(--blue-navy);
  margin:0;
}
h2{
  font-family:var(--font-primary);
  font-weight:700;
  font-size:28px;
  line-height:42px;
  color:var(--blue-navy);
  margin:0;
}
h3{
  font-family:var(--font-primary);
  font-weight:700;
  font-size:26px;
  line-height:39px;
  color:var(--blue-navy);
  margin:0;
}
h4{
  font-family:var(--font-primary);
  font-weight:700;
  font-size:24px;
  line-height:36px;
  color:var(--blue-navy);
  margin:0;
}
h5{
  font-family:var(--font-primary);
  font-weight:700;
  font-size:22px;
  line-height:33px;
  color:var(--blue-steel);
  margin:0;
}
h6{
  font-family:var(--font-primary);
  font-weight:700;
  font-size:20px;
  line-height:30px;
  color:var(--blue-navy);
  margin:0;
}

/* LABEL: GLOBAL FOCUS INDICATOR — two-tone ring (black touching the
   element, white just outside it) rather than a single accent color.
   The site has both black (header/footer) and white/light (content,
   CTA) section backgrounds, and no single color hits the WCAG 3:1
   non-text-contrast minimum against all of them — the accent gold
   used previously only passed against black (9.54:1), failing badly
   against white (2.20:1) and the grey CTA section (1.92:1). Black and
   white are each other's maximum-contrast pair (21:1), and each one
   individually clears 3:1 against every section background this site
   actually uses — so whichever ring lands on the page's own color,
   it stays clearly visible, and the two rings define a crisp edge
   against each other everywhere else. */
:focus-visible{
  outline:2px solid var(--white);
  outline-offset:2px;
  box-shadow:0 0 0 4px var(--black);
}

/* Eyebrow label — small utility tag used above headings (e.g. Project Title section) */
.eyebrow{
  display:block;
  font-family:var(--font-secondary);
  font-weight:700;
  font-size:22px;
  line-height:28px;
  color:var(--blue-steel);
  margin-bottom:14px;
}

/* Pill buttons — used in CTA cards and the contact callout */
.pill-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 28px;
  background:var(--black);
  color:var(--white);
  border:none;
  border-radius:var(--radius-pill);
  font-weight:600;
  font-size:18px;
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
.pill-btn:hover{ background:var(--accent); color:var(--accent-ink); transform:translateY(-2px); }
/* Variant used on the navy callout card — --accent-on-light by default so it
   matches the CTA-card buttons (3.34:1 against navy, --accent-ink text at 5.0:1) */
.pill-btn--accent{ background:var(--accent-on-light); color:var(--accent-ink); }
.pill-btn--accent:hover{ background:var(--white); color:var(--blue-navy); }

/* ================================================================
   LABEL: HEADER SECTION — bg #000000
   ================================================================ */
.site-header{
  background:var(--black);
  padding:14px var(--side);
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:60;
}
.logo{
  display:inline-flex;
  align-items:center;
  transition:opacity .18s ease;
}
.logo-img{
  display:block;
  height:32px;
  width:auto;
}
/* LABEL: logo hover state */
.logo:hover{ opacity:0.7; }
/* Non-clickable logo (landing.html uses a <span>, not <a>) — no hover cue, since there's nothing to click */
span.logo:hover{ opacity:1; }

/* --- Desktop primary nav (>=1024px only, see breakpoint block) --- */
.primary-nav{ display:none; }
.primary-nav > ul{ display:flex; align-items:center; gap:48px; }
.primary-nav a.nav-link{
  font-family:var(--font-primary);
  font-size:18px;
  font-weight:500;
  line-height:normal;
  color:var(--white);
  position:relative;
  padding:4px 0;
  transition:color .18s ease;
}
/* LABEL: nav link hover state */
.primary-nav a.nav-link:hover{ color:var(--accent); }
/* LABEL: nav link ACTIVE state — bolder weight + persistent underline,
   marks the nav item for whatever page/section the user is currently on */
.primary-nav a.nav-link.active{ font-weight:700; }
.primary-nav a.nav-link.active::after{ width:100%; }
.primary-nav a.nav-link::after{
  content:"";
  position:absolute;
  left:0; bottom:-2px;
  width:0; height:2px;
  background:var(--accent);
  transition:width .2s ease;
}
.primary-nav a.nav-link:hover::after,
.primary-nav .has-dropdown:hover a.nav-link::after,
.primary-nav .has-dropdown:focus-within a.nav-link::after{ width:100%; }

/* "My Work" mega dropdown — LABEL: WORK SUBNAV (12 subpages), bg #FFFFFF */
.has-dropdown{ position:relative; }
.dropdown-caret{
  display:inline-block;
  width:6px; height:6px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
  margin-left:8px;
  transition:transform .2s ease;
}
.has-dropdown:hover .dropdown-caret,
.has-dropdown:focus-within .dropdown-caret{ transform:rotate(225deg); }

.work-dropdown{
  position:absolute;
  top:calc(100% + 22px);
  right:0;
  width:640px;
  background:var(--white);
  border-radius:14px;
  padding:24px;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:4px 32px;
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  box-shadow:0 20px 44px rgba(0,0,0,0.28);
}
.has-dropdown:hover .work-dropdown,
.has-dropdown:focus-within .work-dropdown{
  opacity:1; visibility:visible; transform:translateY(0);
}
.work-dropdown a{
  font-family:var(--font-secondary);
  font-size:16px;
  font-weight:400;
  line-height:normal;
  padding:8px 6px;
  border-radius:6px;
  color:var(--ink);
  transition:background .15s ease, color .15s ease;
}
/* LABEL: subnav link hover state */
.work-dropdown a:hover{ background:var(--grey); color:var(--accent-ink); }
/* LABEL: subnav link ACTIVE state — the current project's own entry */
.work-dropdown a.active{ font-weight:700; color:var(--accent-ink); }

/* --- Hamburger trigger (tablet + mobile, <1024px) --- */
.hamburger{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  background:transparent;
  border:1.5px solid var(--white);
  border-radius:50%;
  transition:border-color .18s ease;
}
.hamburger span{
  display:block; position:relative;
  width:18px; height:2px; background:var(--white);
}
.hamburger span::before, .hamburger span::after{
  content:""; position:absolute; left:0; width:18px; height:2px; background:var(--white);
  transition:transform .2s ease;
}
.hamburger span::before{ top:-6px; }
.hamburger span::after{ top:6px; }
.hamburger:hover{ border-color:var(--accent); }
.hamburger[aria-expanded="true"] span{ background:transparent; }
.hamburger[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg); background:var(--white); }
.hamburger[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg); background:var(--white); }

/* Mobile / tablet nav panel — LABEL: MOBILE NAV PANEL, bg #FFFFFF
   NOTE: padding lives on .mobile-nav-inner, not this element — padding
   can't be compressed below its own size by max-height, so keeping it
   here would leave a visible white sliver even when "closed". */
.mobile-nav-panel{
  display:block;
  position:absolute;
  top:100%; left:0; right:0;
  background:var(--white);
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
  box-shadow:0 20px 44px rgba(0,0,0,0.28);
}
.mobile-nav-panel.open{ max-height:640px; overflow-y:auto; }
.mobile-nav-inner{ padding:8px var(--side) 24px; }
.mobile-nav-panel a.nav-link,
.mobile-work-toggle{
  display:flex; align-items:center; justify-content:space-between;
  width:100%;
  background:transparent;
  border:none;
  font-family:var(--font-primary);
  font-size:18px;
  font-weight:500;
  line-height:normal;
  color:var(--ink);
  padding:16px 0;
  border-bottom:1px solid var(--line);
  transition:color .15s ease;
}
/* LABEL: mobile nav link hover state */
.mobile-nav-panel a.nav-link:hover,
.mobile-work-toggle:hover{ color:var(--accent-ink); }
.mobile-work-toggle::after{
  content:"+";
  font-size:1.2rem;
}
.mobile-work-toggle[aria-expanded="true"]::after{ content:"–"; }
.mobile-work-list{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.mobile-work-list.open{ max-height:600px; }
.mobile-work-list a{
  display:block;
  font-family:var(--font-secondary);
  font-size:16px;
  font-weight:400;
  line-height:normal;
  padding:12px 0 12px 14px;
  color:var(--ink-soft);
  border-bottom:1px solid var(--line);
  transition:color .15s ease;
}
.mobile-work-list a:hover{ color:var(--accent-ink); }
/* LABEL: subnav link ACTIVE state — the current project's own entry */
.mobile-work-list a.active{ font-weight:700; color:var(--ink); }
/* LABEL: "my Work" toggle ACTIVE state — bolder when the user is on any project page */
.mobile-work-toggle.active{ font-weight:700; }

/* ================================================================
   LABEL: PROJECT TITLE SECTION — bg #FFFFFF (Project page only)
   Eyebrow + H1 + H2, standard section margins
   ================================================================ */
.project-title{
  background:var(--white);
  padding:var(--vert) var(--side);
}
.project-title h1{
  margin-bottom:18px;
}
.project-title h2{
  color:var(--ink-soft);
  max-width:60ch;
  margin-bottom:0;
}

/* ================================================================
   LABEL: HERO CAROUSEL SECTION — bg #EFEFEF, 0px margins
   ================================================================ */
.hero{
  margin:0;
  padding:0;
  background:var(--grey);
  overflow:hidden;
}
.hero-track-wrap{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
}
.hero-track{
  display:flex;
  height:100%;
  transition:transform .6s cubic-bezier(.65,0,.35,1);
  will-change:transform;
}
.hero-slide{ flex:0 0 100%; height:100%; position:relative; }
.hero-slide a{ display:block; width:100%; height:100%; }
.hero-slide img{ width:100%; height:100%; object-fit:cover; }

/* LABEL: HERO SLIDE SCRIM — 75% black overlay above the image, below the caption */
.hero-slide-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.40);
  pointer-events:none;
  z-index:1;
}
.hero-slide-caption{
  position:absolute;
  left:var(--side);
  right:var(--side);
  bottom:20px;
  z-index:2;
  color:var(--gray-100);
  font-family:var(--font-secondary);
  font-size:15px;
  font-weight:400;
  line-height:22px;
  text-transform:capitalize;
  text-shadow:0 2px 12px rgba(0,0,0,0.45);
  pointer-events:none;
}

/* LABEL: CAROUSEL ARROWS */
.hero-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px; height:48px;
  border-radius:50%;
  background:rgba(255,255,255,0.5);
  border:none;
  display:flex; align-items:center; justify-content:center;
  z-index:20;
  transition:background .18s ease, transform .18s ease;
}
.hero-arrow:hover{ background:#fff; transform:translateY(-50%) scale(1.06); }
.hero-arrow svg{ width:24px; height:24px; }
.hero-arrow.prev{ left:24px; }
.hero-arrow.next{ right:24px; }

/* LABEL: CAROUSEL PAGINATION DOTS */
.hero-dots{
  position:absolute;
  bottom:60px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
  z-index:20;
}
.hero-dot{
  width:9px; height:9px;
  border-radius:50%;
  background:rgba(0,0,0,0.28);
  border:none;
  padding:0;
  transition:background .2s ease, transform .2s ease;
}
.hero-dot[aria-current="true"]{ background:var(--black); transform:scale(1.3); }

/* LABEL: CAROUSEL PLAY/PAUSE BUTTON — bottom-right corner, matches the
   arrows' 48px circular style. Two icons are both in the markup; which
   one shows is controlled by the .paused class toggled in JS. This is
   a genuine stop (WCAG 2.2.2), not the temporary 9s pause the arrows/
   dots already trigger — once paused here, autoplay stays off until
   the user presses it again. */
.hero-playpause{
  position:absolute;
  bottom:24px;
  right:24px;
  width:48px; height:48px;
  border-radius:50%;
  background:rgba(255,255,255,0.5);
  border:none;
  display:flex; align-items:center; justify-content:center;
  z-index:20;
  transition:background .18s ease, transform .18s ease;
}
.hero-playpause:hover{ background:#fff; transform:scale(1.06); }
.hero-playpause svg{ width:20px; height:20px; }
.hero-playpause .icon-play{ display:none; }
.hero-playpause.paused .icon-pause{ display:none; }
.hero-playpause.paused .icon-play{ display:block; }

@media (prefers-reduced-motion:reduce){
  .hero-track{ transition:none; }
}

/* ================================================================
   LABEL: CALL-TO-ACTION SECTION — bg #EAEBEE
   ================================================================ */
.cta-section{
  background:var(--cta-bg);
  padding:var(--vert) var(--side);
}
.cta-grid{
  display:grid;
  grid-template-columns:repeat(var(--grid-cols), 1fr);
  gap:var(--grid-gutter);
}
.cta-card{
  grid-column:span 2; /* mobile: fills both of the 2 columns (stacked) */
  background:var(--white);
  border-radius:18px;
  padding:30px;
  display:flex;
  flex-direction:column;
  gap:14px;
  box-shadow:4px 4px 12px rgba(0,0,0,0.08);
}
.cta-card h4{ color:var(--blue-steel); }
.cta-card p{ color:var(--gray-800); margin:0; flex-grow:1; }
.cta-card .pill-btn{ align-self:flex-start; }
/* These buttons sit on a white card (unlike the callout's gold button, which
   sits on the navy callout and already clears AA with --accent) — the plain
   --accent only hits 2.2:1 against that white card, failing the 3:1
   non-text/UI-component minimum. --accent-on-light clears ~3.3:1 here while
   keeping --accent-ink text comfortably above 4.5:1 (5.26:1), so it's the
   resting state now, not just the hover state. Hover flips to navy/white
   (originally black/white) rather than the callout button's white hover —
   white-on-white would vanish here since this card's own background is
   white, unlike the navy callout. */
.cta-card .pill-btn{ background:var(--accent-on-light); color:var(--accent-ink); }
.cta-card .pill-btn:hover{ background:var(--blue-navy); color:var(--white); }

/* ================================================================
   LABEL: CONTENT SECTION — bg #FFFFFF
   ================================================================ */
.content-section{
  background:var(--white);
  padding:var(--vert) var(--side);
  display:grid;
  grid-template-columns:repeat(var(--grid-cols), 1fr);
  gap:var(--grid-gutter);
}
.content-section .content-main{ grid-column:1 / -1; } /* full width by default (mobile + tablet); desktop override below */
.content-section .callout{ grid-column:1 / -1; }
.content-main h1{
  margin-bottom:18px;
}
.content-main h2{
  color:var(--ink-soft);
  margin-bottom:22px;
}
/* Home + Landing — both pages share this exact bio-section markup/copy */
.content-main h2.lede{ color:var(--blue-steel); }
/* Project pages only — every proj-*.html's "Project Summary" H2 sits inside
   .content-section.single-column, a class Home/Landing never use */
.content-section.single-column .content-main h2{ color:var(--blue-petrol); }
.content-main p{
  color:var(--gray-800);
  margin:0 0 18px 0;
}
.content-main p:last-child{ margin-bottom:0; }

/* ================================================================
   LABEL: SCREEN GALLERY BLOCKS (Desktop/Mobile/Tablet Screens)
   Three full-width blocks sitting under .content-main, each holding
   a heading + a grid of screenshot images with captions underneath.
   Column spans differ per block/breakpoint — see comments on each.
   ================================================================ */
.screens-block{
  grid-column:1 / -1; /* always full width, at every --grid-cols value */
  padding:30px 0;
}
.screens-block h5{ margin-bottom:24px; }
.screens-grid{
  display:grid;
  grid-template-columns:repeat(var(--grid-cols), 1fr);
  gap:var(--grid-gutter);
}
.screen-item{ margin:0; }
.screen-item img{
  width:100%;
  height:auto;
  display:block;
  border-radius:8px;
  /* drop-shadow (not box-shadow) follows the image's actual visible
     pixels, not its rectangular bounding box — this matters for
     Mobile/Tablet Screens, whose images have transparent rounded
     corners around a device silhouette; box-shadow would otherwise
     draw a rectangle straight through that transparency, making the
     white page background peeking through look like a solid card. */
  filter:drop-shadow(8px 8px 12px rgba(0,0,0,0.08));
}
/* Desktop/Mobile Wireframes (FluMist Spanish Minisite page): no drop
   shadow, overriding the shared .screen-item img default above */
.desktop-wireframes .screen-item img,
.mobile-wireframes .screen-item img{
  filter:none;
}
/* Floor Plans (Wayfinding Signage Systems page): same 2px stroke as
   Storyboards, no drop shadow */
.floor-plans .screen-item img{
  border:2px solid var(--gray-100);
  border-radius:0;
  filter:none;
}
/* Desktop Screens + Desktop Wireframes (same values): 1px, 10% gray
   stroke around each image (removed from Tablet Screens globally) */
.desktop-screens .screen-item img,
.desktop-wireframes .screen-item img{
  border:1px solid var(--gray-100);
}
/* Storyboards (Ratings Video Storyboards page): thicker 2px stroke,
   no drop shadow — overrides the shared .screen-item img defaults above */
.storyboards .screen-item img{
  border:2px solid var(--gray-100);
  filter:none;
}
/* Sketches (Pettistudio Interactive Holiday Card page): duplicated from
   Desktop Screens' style values, but always full-width/stacked at every
   breakpoint (grid-column:1/-1 is breakpoint-agnostic, so no tablet/desktop
   overrides are needed the way other galleries require), no drop shadow,
   and only the 2nd figure keeps its stroke — the 1st has none. */
.sketches .screen-item{ grid-column:1 / -1; }
.sketches .screen-item img{
  border:1px solid var(--gray-100);
  filter:none;
}
.sketches .screen-item:first-child img{ border:none; }

/* Tablet Landscape Wireframes (Complera iPad Sales Aid page): duplicated
   from Tablet Screens as an independent class, but with its own custom
   spans — full-width/stacked on mobile, half-width (2 per row) on both
   tablet and desktop. Since tablet and desktop now share the same
   12-column grid, "half width at both" is just one rule (span 6) that
   naturally carries through from the tablet breakpoint up — no separate
   desktop override needed. No drop shadow, no stroke. */
.tablet_land-wireframes .screen-item{ grid-column:1 / -1; }
.tablet_land-wireframes .screen-item img{ filter:none; }
.sketches .screen-item:nth-child(2) img{ border:2px solid var(--gray-100); }
.screen-item figcaption{
  margin-top:12px;
  font-family:var(--font-secondary);
  font-size:15px;
  font-weight:400;
  line-height:22px;
  color:var(--gray-800);
}

/* Mobile (base): Desktop Screens gallery stacks 1-per-row (full width);
   Mobile/Tablet Screens galleries show 2-per-row (each spans 1 of 2). */
.desktop-screens .screen-item,
.desktop-wireframes .screen-item,
.floor-plans .screen-item{ grid-column:1 / -1; }
.mobile-screens .screen-item,
.mobile-wireframes .screen-item,
.tablet-screens .screen-item,
.storyboards .screen-item{ grid-column:span 1; }
/* Page-specific override: the Ratings Video Storyboards page wants its
   Storyboards gallery to stack full-width on mobile like Desktop Screens
   does, instead of the usual 2-per-row — scoped to .full-width-mobile
   so other pages' Tablet Views galleries are unaffected. */
.full-width-mobile .screen-item{ grid-column:1 / -1; }

/* Modifier: content section with no callout aside (Project page) —
   .content-main already spans the full row by default above, so this
   just widens its readable measure; no column override needed. */
.content-section.single-column .content-main{ max-width:none; }
.content-section.single-column .content-main p{ max-width:none; }

/* Callout — LABEL: CONTACT CALLOUT, bg #2B3A55 */
.callout{
  background:var(--blue-navy);
  color:var(--white);
  border-radius:20px;
  padding:30px;
}
.callout h4{ color:var(--white); margin-bottom:14px; }
.callout p{ color:var(--gray-100); margin:0 0 26px 0; }

/* When a callout sits alone inside the CTA section (Project page,
   no 3-card grid), center it and cap its width for readability. */
.cta-section > .callout{ max-width:640px; margin:0 auto; }

/* ================================================================
   LABEL: FOOTER SECTION — bg #3B5A78
   Mobile/Tablet: logo above centered nav (default below).
   ================================================================ */
.site-footer{
  background:var(--blue-petrol);
  color:var(--white);
  padding:30px var(--side);
  text-align:center;
}
.footer-top-row{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  margin-bottom:22px;
}
.footer-nav ul{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; row-gap:10px; }
.footer-nav a.nav-link{
  font-family:var(--font-primary);
  font-size:18px;
  font-weight:500;
  line-height:normal;
  color:var(--white);
  transition:color .18s ease;
}
/* LABEL: footer nav link hover state */
.footer-nav a.nav-link:hover{ color:var(--accent); }

/* LABEL: FOOTER SOCIAL — vertical divider + LinkedIn icon after the nav links.
   Mobile gap matches .footer-nav ul's 16px so all items (nav links + divider
   + icon) read as one evenly-spaced row and fit on a single line; restored
   to 48px at tablet+ below, where there's room to spare. */
.footer-social{
  display:flex;
  align-items:center;
  gap:16px;
}
.footer-divider{
  display:inline-block;
  width:2px;
  height:28px;
  background:rgba(255,255,255,0.35);
}
.footer-social-link{
  display:flex;
  align-items:center;
  transition:opacity .18s ease;
}
.footer-social-link:hover{ opacity:0.7; }
.footer-social-icon{
  display:block;
  width:24px;
  height:24px;
}
.footer-copy{
  font-family:var(--font-secondary);
  font-size:15px;
  font-weight:400;
  line-height:22px;
  color:var(--white);
  text-align:center;
  margin:0;
}

/* ================================================================
   BREAKPOINT: TABLET — 768px and up
   ================================================================ */
@media (min-width:768px){
  .footer-nav ul{ gap:48px; justify-content:center; }
  .footer-social{ gap:48px; }

  /* Tablet Landscape Wireframes: half-width (span 6 of 12), 2 per row —
     applies from here through desktop since both use --grid-cols:12 */
  .tablet_land-wireframes .screen-item{ grid-column:span 6; }

  /* LABEL: Screen galleries at tablet — each block uses its OWN
     column count (independent of the shared --grid-cols, now 12) so the
     fractions below are exact rather than approximated:
     Desktop Screens: 1/2 width each (2-col grid) — 4 images stack into 2 rows
     Mobile Screens: 1/4 width each (4-col grid) — 4 images fit one row, wraps if more are added
     Tablet Screens: 1/3 width each (3-col grid) — 3 images fit one row, wraps if more are added */
  .desktop-screens .screens-grid,
  .desktop-wireframes .screens-grid,
  .floor-plans .screens-grid{ grid-template-columns:repeat(2, 1fr); }
  .mobile-screens .screens-grid,
  .mobile-wireframes .screens-grid{ grid-template-columns:repeat(4, 1fr); }
  .tablet-screens .screens-grid,
  .storyboards .screens-grid{ grid-template-columns:repeat(3, 1fr); }
  .desktop-screens .screen-item,
  .desktop-wireframes .screen-item,
  .floor-plans .screen-item,
  .mobile-screens .screen-item,
  .mobile-wireframes .screen-item,
  .tablet-screens .screen-item,
  .storyboards .screen-item{ grid-column:span 1; }
  .cta-card{ grid-column:span 6; } /* tablet: 2 cards side by side, 6+6 of 12 columns */
  .logo-img{ height:32px; }

  /* LABEL: TYPE SCALE — Desktop & Tablet H1–H3 sizes (same at both breakpoints) */
  h1{ font-size:36px; line-height:54px; }
  h2{ font-size:32px; line-height:48px; }
  h3{ font-size:28px; line-height:42px; }

  /* Project page's standalone callout: full-width, text left / button right
     (Home page's callout, nested in .content-section, is unaffected). Applies
     from tablet up through desktop. */
  .cta-section > .callout{
    max-width:none;
    margin:0;
    position:static;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:48px;
  }
  .callout-text{ max-width:65ch; }
  .callout-text p{ margin-bottom:0; }
  .cta-section > .callout .pill-btn{ flex-shrink:0; }
}

/* ================================================================
   BREAKPOINT: DESKTOP — 1024px and up
   ================================================================ */
@media (min-width:1024px){

  /* LABEL: Restore original padding on callout/CTA cards at desktop —
     the 30px value above is scoped to tablet + mobile only. */
  .callout{ padding:40px; }
  .cta-card{ padding:32px; grid-column:span 6; } /* desktop: 2 cards side by side, 6+6 of 12 columns */

  /* Header: show full nav row, hide hamburger */
  .primary-nav{ display:flex; }
  .hamburger, .mobile-nav-panel{ display:none; }
  .logo-img{ height:36px; }
  .site-header{ padding-top:24px; padding-bottom:24px; }

  /* Content: main copy + sticky callout side by side (Home page) —
     8 of 12 columns for the copy, 4 of 12 for the callout. Scoped to
     exclude .single-column (Project page), which keeps the full-width
     span from the base rule above. Callout is centered vertically
     against the copy's height; still sticky, so it "sticks" at top:40px
     once scrolling would carry its centered position above that point. */
  .content-section{ align-items:center; }
  .content-section:not(.single-column) .content-main{ grid-column:span 8; }
  .content-section:not(.single-column) .callout{ grid-column:span 4; }
  .callout{ position:sticky; top:40px; }

  /* Project page: text now spans 10 of 12 columns instead of the
     full-width default from the base rule above. */
  .content-section.single-column .content-main{ grid-column:span 10; }

  /* LABEL: Screen galleries at desktop (12 columns total) — resets
     grid-template-columns back to the shared 12-col grid, since the
     tablet rule above gives each block its own fixed column count.
     Desktop Screens: span 6 = 2 per row (6+6=12)
     Mobile Screens: span 3 = 4 per row (3×4=12)
     Tablet Screens: span 4 = 3 per row (4×3=12) */
  .desktop-screens .screens-grid,
  .desktop-wireframes .screens-grid,
  .floor-plans .screens-grid,
  .mobile-screens .screens-grid,
  .mobile-wireframes .screens-grid,
  .tablet-screens .screens-grid,
  .storyboards .screens-grid{ grid-template-columns:repeat(var(--grid-cols), 1fr); }
  .desktop-screens .screen-item,
  .desktop-wireframes .screen-item,
  .floor-plans .screen-item{ grid-column:span 6; }
  .mobile-screens .screen-item,
  .mobile-wireframes .screen-item{ grid-column:span 3; }
  .tablet-screens .screen-item,
  .storyboards .screen-item{ grid-column:span 4; }
  .content-section.single-column .callout{ position:static; }

  /* Footer: logo left, nav right */
  .site-footer{ text-align:left; }
  .footer-top-row{ flex-direction:row; justify-content:space-between; margin-bottom:22px; }
  .footer-nav ul{ justify-content:flex-start; }
  .site-footer{ display:block; }
}

/* ================================================================
   LABEL: BACK TO TOP BUTTON
   Fixed circular button, bottom-right. Hidden until the page is
   scrolled down (toggled via JS adding/removing .visible), then
   fades and slides in. Shared across all pages/site.
   ================================================================ */
.back-to-top{
  position:fixed;
  right:24px;
  bottom:24px;
  width:48px;
  height:48px;
  border-radius:50%;
  background:rgba(0,0,0,0.6);
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:50;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s, background .18s ease;
}
.back-to-top.visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.back-to-top:hover{ background:var(--accent-on-light); }
.back-to-top svg{ width:20px; height:20px; }