/* ==========================================================================
   LocalBizGuru — Website Examples hub
   Plain CSS, no build step. Order: tokens → base → shared header/footer →
   layout primitives → sections → responsive (last).
   ========================================================================== */

/* 1. Tokens ================================================================ */

:root {
  /* Colour — Figma variables on Header 504:736 unless noted */
  --primary: #f0a22f; /* color/orange/56 */
  --white: #ffffff; /* color/white/solid */
  --base: #1f1f1f; /* lbg Colors/card-dark — mobile menu panel (live site --base) */
  --surface-header: #171717; /* lbg Colors/card-dark-alt — live header background */
  --primary-trans-40: #e6941d66; /* lbg Colors/accent-gold @ 40% — dropdown item hover */
  --accent-gold: #e6941d; /* Colors/accent-gold */
  --bg-surface: #ffffff; /* Colors/bg-surface */
  --surface-dark: #171717; /* page background — matches the hero PNG's baked edge colour */
  --card-dark: #1f1f1f; /* Colors/card-dark */
  --card-muted: #343434; /* Colors/card-muted */
  --card-bg: #f5eef7; /* Colors/card-bg — light text on cards */
  --neutral-400: #7f8b8f; /* Colors/neutral-400 */
  --violet-30: #3c187f; /* color/violet/30 */
  --violet-47: #860be5; /* color/violet/47 */
  --orange-49: #e29017; /* color/orange/49 */
  --orange-62: #faaf40; /* color/orange/62 */

  /* Spacing — lbg Spacing (same in all modes) */
  --space-xxs: 0.25rem; /* 4 */
  --space-xs: 0.5rem; /* 8 */
  --space-s: 0.75rem; /* 12 */
  --space-m: 1rem; /* 16 */
  --space-l: 1.5rem; /* 24 */
  --space-xl: 2rem; /* 32 */
  --space-xxl: 2.25rem; /* 36 */
  --space-xxxl: 3rem; /* 48 */
  --space-4xl: 4.25rem; /* 68 */
  --space-5xl: 5.75rem; /* 92 */

  /* Typography */
  --font-body: "Outfit", system-ui, sans-serif; /* font family/Font 1 */
  --text-nav: 1.125rem; /* font size/18 */
  --lh-nav: 1.8rem; /* line height/28_8 */
  --weight-regular: 400; /* font weight/400 */
  --weight-bold: 700; /* Typography/font-weight-bold */

  /* Fluid type: exact at the Figma Mobile (375) and Desktop (1440) modes */
  /* H1: desktop = font-size-xxxl 55 / line-height-relaxed 50. Mobile raised from the
     token's 23/32 to 32/36 — 23px read too small for a page title. */
  --text-h1: clamp(2rem, 1.4938rem + 2.1596vw, 3.4375rem); /* 32 → 55 */
  --lh-h1: clamp(2.25rem, 1.9419rem + 1.3146vw, 3.125rem); /* 36 → 50 */
  --text-lede: clamp(1.125rem, 1.0369rem + 0.3756vw, 1.375rem); /* 18 → 22 */
  --lh-lede: clamp(1.625rem, 1.581rem + 0.1878vw, 1.75rem); /* 26 → 28 */
  --text-body-m: 1rem; /* 16 */
  --lh-body-m: 1.6; /* line height/25_6 at 16 */
  --text-card-title: 1.4375rem; /* font-size-m 23 */
  --lh-card-title: 1.146; /* 26.36 */
  --text-overlay: 0.875rem; /* 14 */
  --text-h2: clamp(2.25rem, 2.0519rem + 0.8451vw, 2.8125rem); /* 36 → Display Medium 45 */
  --lh-h2: clamp(2.75rem, 2.574rem + 0.7512vw, 3.25rem); /* 44 → 52 */
  --text-footer-heading: clamp(1.125rem, 1.0369rem + 0.3756vw, 1.375rem); /* 18 → Title Large 22 */
  --lh-footer-heading: clamp(1.5rem, 1.412rem + 0.3756vw, 1.75rem); /* 24 → 28 */
  --weight-medium: 500;
  --lh-overlay: 1.125rem; /* 18 */
  --weight-semibold: 600;

  /* Masthead (411:632) — Figma desktop values, scaled down to 375 */
  --masthead-min-h: 31.25rem; /* frame height 500 */
  --masthead-pad-top: clamp(4rem, 1.8873rem + 9.0141vw, 10rem); /* 64 → 160 */
  --masthead-pad-bottom: clamp(2rem, 1.4938rem + 2.1596vw, 3.4375rem); /* 32 → 55 */
  --masthead-gap: clamp(3rem, 1.9437rem + 4.507vw, 6rem); /* 48 → 96 */
  --masthead-intro-gap: 1.125rem; /* 18 */

  /* Concepts (411:655) */
  --concepts-pad: clamp(3rem, 2.0317rem + 4.1315vw, 5.75rem); /* 48 → space-5xl 92 */
  --concepts-col-gap: var(--space-xxl); /* 36 */
  --card-radius: 1.25rem; /* 20 */
  --card-media-radius: 0.625rem; /* 10 */
  --card-pad: 1.25rem 1.25rem 2.5rem; /* 20 / 20 / 40 */
  --card-gap: var(--space-xl); /* 32 */
  --gradient-cta: linear-gradient(90deg, var(--violet-30), var(--violet-47));
  --gradient-accent: linear-gradient(to top, var(--orange-49), var(--orange-62));

  /* CTA (411:1244) */
  --cta-pad: clamp(3rem, 2.4366rem + 2.4038vw, 4rem); /* 48 → sds space-1600 64 */
  --cta-min-h: 31.25rem; /* inner container 500 */
  --radius-m: 0.75rem; /* Corner/Medium 12 */
  --radius-photo: 1.25rem; /* Corner/Large-increased 20 */

  /* Footer (411:1264) */
  --footer-col-gap: 2.75rem; /* bound to Typography/font-size-xxl 44 */
  --footer-link-gap: 0.8244rem; /* 35.59 row − 22.4 line */
  --footer-icon: 1.875rem; /* 30 */
  --footer-social-icon: 1.875rem; /* live 30px */

  /* Radius / shadow — live site values, no Figma equivalent */
  --radius-dropdown: 5px;
  --shadow-dropdown: 2px 2px 50px -2px #00000080;
  --shadow-mobile-menu: 0 3px 1px 0 #00000026;

  /* Layout */
  --content-max: 85.375rem; /* width/1366 */
  --gutter: 3.75rem; /* Header px 60 */
  --header-pad-block: 0.844rem; /* Header py 13.507 — not on the spacing scale */
  --logo-width: 15.625rem; /* width/250 */

  --transition: 0.3s ease;
}

/* 2. Base ================================================================== */

@font-face {
  font-family: "Outfit";
  src: url("assets/fonts/Outfit-VariableFont_wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--surface-dark);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.u-uppercase {
  text-transform: uppercase;
}

.skip-link {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: var(--space-m);
  z-index: 100;
  padding: var(--space-xs) var(--space-m);
  background: var(--white);
  color: var(--base);
  transform: translateY(-120%);
}

.skip-link:focus {
  transform: none;
}

/* 3. Shared header (localbizguru.com) ====================================== */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  /* Hidden dropdown panels still count as scrollable overflow — clip sideways only,
     so panels can still drop below the bar */
  overflow-x: clip;
  padding-block: var(--header-pad-block);
  background: var(--surface-header);
  color: var(--white);
  font-size: var(--text-nav);
  line-height: var(--lh-nav);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-l);
}

/* Shrinks before it can overflow; never below 160px */
.site-header__logo {
  flex: 0 1 var(--logo-width);
  min-width: 10rem;
  max-width: var(--logo-width);
}

.site-header__logo img {
  width: 100%;
}

/* Hamburger — mobile only */
.site-header__burger {
  display: none;
}

/* Desktop nav: 70% of the 1366 container = the Figma 956px list (logo 250 + gap 159.81) */
.site-nav {
  flex: 0 1 70%;
  min-width: 0;
}

.site-nav__list {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-m);
}

.site-nav__item {
  position: relative;
}

.site-nav__row {
  display: flex;
  align-items: center;
}

.site-nav__link {
  display: block;
  text-decoration: none;
  text-transform: capitalize;
  white-space: nowrap;
  transition: color var(--transition), background-color var(--transition);
}

.site-nav__list > .site-nav__item > .site-nav__link,
.site-nav__list > .site-nav__item > .site-nav__row > .site-nav__link {
  padding-block-end: 0.6em; /* Figma pb 10.8 */
}

/* Chevron = Figma asset (Component 1 / variant 21), recoloured via mask */
.site-nav__toggle {
  display: flex;
  padding-inline-start: 0.625rem; /* Figma pl 10 */
  padding-block-end: 0.625rem; /* Figma pb 10 */
  transition: color var(--transition);
}

.site-nav__toggle::after {
  content: "";
  width: 1.125rem; /* 18 */
  height: 1.125rem;
  background-color: currentColor;
  -webkit-mask: url("assets/icons/chevron-down.svg") center / contain no-repeat;
  mask: url("assets/icons/chevron-down.svg") center / contain no-repeat;
  transition: transform var(--transition);
}

.site-nav__item--current > .site-nav__link,
.site-nav__list > .site-nav__item:hover > .site-nav__link,
.site-nav__list > .site-nav__item:hover > .site-nav__row > * {
  color: var(--primary);
}

/* Dropdown panels */
.site-nav__sub {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  z-index: 10;
  min-width: max-content;
  padding: 0.75em;
  border-radius: var(--radius-dropdown);
  background: var(--white);
  box-shadow: var(--shadow-dropdown);
  color: var(--base);
  line-height: 1.2;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}

.site-nav__sub .site-nav__item {
  border-radius: var(--radius-dropdown);
  transition: background-color var(--transition);
}

.site-nav__sub .site-nav__item:hover {
  background: var(--primary-trans-40);
}

.site-nav__sub .site-nav__link,
.site-nav__sub .site-nav__toggle {
  padding: 0.75em;
}

.site-nav__sub .site-nav__row .site-nav__link {
  flex: 1;
}

/* Nested flyout opens to the side */
.site-nav__sub .site-nav__sub {
  inset-block-start: 0;
  inset-inline-start: 100%;
}

/* script.js flips a panel that would run past the viewport edge */
.site-nav__sub.is-flipped {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

.site-nav__sub .site-nav__sub.is-flipped {
  inset-inline-end: 100%;
}

.site-nav__sub .site-nav__toggle::after {
  transform: rotate(-90deg);
}

.site-nav__item--parent:hover > .site-nav__sub,
.site-nav__item--parent:focus-within > .site-nav__sub,
.site-nav__row:has(> [aria-expanded="true"]) + .site-nav__sub {
  opacity: 1;
  visibility: visible;
}

/* Shared footer ----------------------------------------------------------- */

.site-footer__main {
  padding-block: var(--space-xl) var(--space-xxxl); /* Figma pt 32; newsletter row removed */
  background: var(--surface-dark);
}

/* Figma uses 4 equal columns, but the 22px contact lines need ~330px — let that column size to its content */
.site-footer__grid {
  display: grid;
  grid-template-columns: max-content repeat(3, minmax(0, 1fr));
  gap: var(--footer-col-gap);
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.125rem; /* 18 */
  min-width: 0;
}

.site-footer__col--contact {
  gap: 0;
}

.site-footer__logo {
  width: 17.5rem; /* 280 */
  max-width: 100%;
}

.site-footer__logo img {
  width: 100%;
}

.site-footer__contact {
  display: flex;
  flex-direction: column;
  font-style: normal;
}

.site-footer__contact-link {
  display: flex;
  align-items: center;
  gap: 1.125rem; /* 18 */
  padding-block: var(--space-m);
  font-size: var(--text-lede);
  line-height: var(--lh-lede);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--transition);
}

.site-footer__contact-link:hover {
  color: var(--primary);
}

/* Figma icons export upside-down (flipped -scale-y in the file) — flip back */
.site-footer__icon {
  flex-shrink: 0;
  width: var(--footer-icon);
  height: var(--footer-icon);
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  transform: scaleY(-1);
}

.site-footer__icon--location { --icon: url("assets/icons/location.svg"); }
.site-footer__icon--phone { --icon: url("assets/icons/phone.svg"); }
.site-footer__icon--mail { --icon: url("assets/icons/mail.svg"); }

.site-footer__heading {
  margin: 0;
  font-size: var(--text-footer-heading);
  font-weight: var(--weight-medium);
  line-height: var(--lh-footer-heading);
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--footer-link-gap);
  font-size: var(--text-body-m);
  line-height: 1.4;
}

.site-footer__link {
  text-decoration: none;
  transition: color var(--transition);
}

.site-footer__link:hover {
  color: var(--primary);
}

.site-footer__bar {
  padding-block: 1.125rem; /* 18 */
  background: var(--gradient-cta);
}

.site-footer__bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m) var(--space-xl);
}

.site-footer__copyright {
  margin: 0;
  font-size: var(--text-footer-heading);
  line-height: var(--lh-footer-heading);
}

.site-footer__social {
  display: flex;
  align-items: center;
  gap: var(--space-xl); /* 32 */
  min-height: 3rem; /* 48 */
}

.site-footer__social-link {
  display: block;
  width: var(--footer-social-icon);
  height: var(--footer-social-icon);
  background-color: var(--white);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  transition: transform var(--transition), background-color var(--transition);
}

.site-footer__social-link:hover {
  background-color: var(--primary);
  transform: translateY(-5px);
}

.site-footer__social-link--square-facebook { --icon: url("assets/icons/square-facebook.svg"); }
.site-footer__social-link--x-twitter { --icon: url("assets/icons/x-twitter.svg"); }
.site-footer__social-link--instagram { --icon: url("assets/icons/instagram.svg"); }
.site-footer__social-link--linkedin-in { --icon: url("assets/icons/linkedin-in.svg"); }

/* 4. Layout primitives ===================================================== */

.lbg-section {
  position: relative;
  width: 100%;
  padding-inline: var(--gutter);
}

.lbg-container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: 0;
}

/* 5. Sections ============================================================== */

/* Masthead (411:632) ------------------------------------------------------ */

.masthead {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--masthead-min-h);
  padding-block: var(--masthead-pad-top) var(--masthead-pad-bottom);
  overflow: hidden;
  background: var(--surface-dark);
  color: var(--bg-surface);
}

/* Figma: left 51.69%, top 0.07%, height 107.13% of the section — bottom edge is cropped */
.masthead__image {
  position: absolute;
  inset-block-start: 0.07%;
  inset-inline-start: 51.69%;
  width: auto;
  max-width: none;
  height: 107.13%;
  pointer-events: none;
}

.masthead__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--masthead-gap);
}

.masthead__intro {
  display: flex;
  flex-direction: column;
  gap: var(--masthead-intro-gap);
}

.masthead__title {
  margin: 0;
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  line-height: var(--lh-h1);
}

.masthead__title-line {
  display: block;
}

.masthead__title-line--accent {
  color: var(--accent-gold);
}

.masthead__lede {
  margin: 0;
  font-size: var(--text-lede);
  line-height: var(--lh-lede);
}

/* Breadcrumbs (411:647) */
.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-xs);
  min-height: 1.8rem; /* 28.8 */
  font-size: var(--text-body-m);
  line-height: 1;
}

.breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.breadcrumbs__item + .breadcrumbs__item::before {
  content: "»";
  font-size: 1.375rem; /* 22 */
  line-height: 1.75rem; /* 28 */
}

.breadcrumbs__link {
  text-decoration: none;
  transition: color var(--transition);
}

.breadcrumbs__link:hover {
  color: var(--accent-gold);
}

.breadcrumbs__current {
  color: var(--accent-gold);
}

/* Concepts (411:655) ---------------------------------------------------- */

.concepts {
  padding-block: var(--concepts-pad);
}

/* 3-up column width from Figma; empty tracks collapse so a short list stays centred */
.concepts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, calc((100% - 2 * var(--concepts-col-gap)) / 3)));
  justify-content: center;
  gap: var(--concepts-col-gap);
}

.concept {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  padding: var(--card-pad);
  border: 1px solid var(--card-muted);
  border-radius: var(--card-radius);
  background: var(--card-dark);
}

/* Full-page screenshot, width-fitted and cropped to the top of a 391.33 x 440 frame.
   Hover/focus scrolls it to the bottom. */
.concept__media {
  position: relative;
  aspect-ratio: 391.33 / 440;
  overflow: hidden;
  border-radius: var(--card-media-radius);
  background: var(--surface-dark);
}

.concept__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  transition: object-position 1.2s ease-in-out;
}

.concept__overlay {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-s);
  height: 12.25rem; /* 196 */
  padding: 0 var(--space-l) var(--space-l); /* Figma 25 / 20 offsets inside a 5px bleed */
  background: linear-gradient(to bottom, #00000000, #000000cc);
  color: var(--card-bg);
  font-size: var(--text-overlay);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-overlay);
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}

.concept__overlay-icon {
  flex-shrink: 0;
  width: 0.8222rem; /* 13.155 */
  height: 0.775rem; /* 12.401 */
}

.concept:hover .concept__overlay,
.concept:focus-within .concept__overlay {
  opacity: 1;
}

.concept:hover .concept__image,
.concept:focus-within .concept__image {
  object-position: 50% 100%;
  transition-duration: 8s;
  transition-timing-function: linear;
}

.concept__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs); /* Figma 8.375 */
}

.concept__eyebrow,
.concept__industry {
  margin: 0;
  font-size: var(--text-body-m);
  line-height: var(--lh-body-m);
}

.concept__eyebrow {
  color: var(--accent-gold);
}

.concept__title {
  margin: 0;
  color: var(--bg-surface);
  font-size: var(--text-card-title);
  font-weight: var(--weight-bold);
  line-height: var(--lh-card-title);
}

.concept__industry {
  color: var(--neutral-400);
}

.concept__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 8.75rem; /* 140 */
  margin-block-start: auto;
  padding: 1.125rem 1.6875rem; /* 18 / 27 */
  border-radius: var(--card-media-radius);
  background: var(--gradient-cta);
  color: var(--card-bg);
  font-size: var(--text-nav);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition: filter var(--transition), box-shadow var(--transition);
}

.concept__cta:hover {
  filter: brightness(1.15);
  box-shadow: 0 0.5rem 1.5rem -0.5rem #860be580;
}

/* CTA (411:1244) --------------------------------------------------------- */

.cta {
  overflow: hidden;
  padding-block: var(--cta-pad);
  background: var(--card-dark);
}

.cta__inner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--cta-min-h);
}

.cta__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 50%;
  padding-block: var(--space-5xl);
}

.cta__title {
  margin: 0;
  font-size: var(--text-h2);
  font-weight: var(--weight-regular);
  line-height: var(--lh-h2);
}

.cta__title-accent {
  color: var(--accent-gold);
  font-weight: var(--weight-medium);
}

.cta__lede {
  margin: 0;
  font-size: var(--text-lede);
  line-height: var(--lh-lede);
}

.cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 8.75rem; /* 140 */
  margin-block-start: 1.125rem; /* 18 */
  padding: 1.125rem 1.75rem; /* 18 / 28 */
  border-radius: var(--radius-m);
  background: var(--gradient-cta);
  color: var(--card-bg);
  font-size: var(--text-body-m);
  line-height: 1;
  text-decoration: none;
  transition: filter var(--transition), box-shadow var(--transition);
}

.cta__button:hover {
  filter: brightness(1.15);
  box-shadow: 0 0.5rem 1.5rem -0.5rem #860be580;
}

/* Collage: Figma box is 683 x 500 from 60% to 110% of the container. Every piece is
   placed in % of that box so the composition scales as one unit. */
.cta__collage {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: max(-10%, (100% - 100vw) / 2); /* bleed right, never past the viewport */
  width: 50%;
  aspect-ratio: 683 / 500;
  transform: translateY(-50%);
}

.cta__photo {
  position: absolute;
  height: auto;
  border-radius: var(--radius-photo);
  object-fit: cover;
}

.cta__photo--a {
  inset-block-start: 20%;
  inset-inline-start: 16.08%;
  width: 43.92%; /* 300 */
  aspect-ratio: 300 / 168.75;
}

.cta__photo--b {
  inset-block-start: 5%;
  inset-inline-start: 52.79%;
  width: 32.21%; /* 220 */
  aspect-ratio: 220 / 123.75;
}

.cta__photo--c {
  inset-block-start: 50%;
  inset-inline-end: 0;
  width: 32.21%; /* 220 */
  aspect-ratio: 220 / 110;
}

.cta__photo--d {
  inset-block-start: 80%;
  inset-inline-start: 45.72%;
  width: 29.28%; /* 200 */
  aspect-ratio: 200 / 100;
}

.cta__accent {
  position: absolute;
  border-radius: var(--radius-m);
  background: var(--gradient-accent);
}

/* 220 x 90, half off the section's right edge */
.cta__accent--corner {
  inset-block-start: 1.25rem; /* 20 */
  inset-inline-end: -6.875rem; /* -110 */
  width: 13.75rem;
  height: 5.625rem;
}

/* 90 x 40 tab under photo A: left 120, bottom -20 of the 300 x 168.75 photo */
.cta__accent--photo {
  inset-block-start: calc(20% + 29.75%); /* photo top + (168.75 - 20) / 500 */
  inset-inline-start: calc(16.08% + 17.57%); /* photo left + 120 / 683 */
  width: 13.18%; /* 90 */
  aspect-ratio: 90 / 40;
}

/* 6. Responsive — Bricks breakpoints 1279 / 991 / 767 / 478 ================ */

@media (max-width: 991px) {
  :root {
    --gutter: var(--space-m);
  }

  .site-header__burger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
  }

  /* Slider-style hamburger → X */
  .site-header__burger-lines,
  .site-header__burger-lines::before,
  .site-header__burger-lines::after {
    display: block;
    width: 2.5rem;
    height: 4px; /* live --x-burger-line-height */
    background: var(--white);
    border-radius: 4px;
    transition: transform var(--transition), opacity var(--transition);
  }

  .site-header__burger-lines {
    position: relative;
  }

  .site-header__burger-lines::before,
  .site-header__burger-lines::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
  }

  .site-header__burger-lines::before {
    inset-block-start: -10px;
  }

  .site-header__burger-lines::after {
    inset-block-start: 10px;
  }

  .site-header__burger[aria-expanded="true"] .site-header__burger-lines {
    background: transparent;
  }

  .site-header__burger[aria-expanded="true"] .site-header__burger-lines::before {
    transform: translateY(10px) rotate(45deg);
  }

  .site-header__burger[aria-expanded="true"] .site-header__burger-lines::after {
    transform: translateY(-10px) rotate(-45deg);
  }

  /* Slide-down panel */
  .site-nav {
    display: none;
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    width: auto;
    max-height: min(700px, calc(100dvh - 100%));
    overflow-y: auto;
    padding-block: 1.875rem; /* live 3rem @ 62.5% root */
    background: var(--base);
    box-shadow: var(--shadow-mobile-menu);
  }

  .site-nav.is-open {
    display: block;
  }

  .site-nav__list {
    display: block;
  }

  .site-nav__list > .site-nav__item {
    margin-inline: 5%;
  }

  .site-nav__row {
    position: relative;
  }

  .site-nav__link,
  .site-nav__list > .site-nav__item > .site-nav__link,
  .site-nav__list > .site-nav__item > .site-nav__row > .site-nav__link {
    flex: 1;
    margin-block-end: 1.5625rem; /* 25px */
    padding-block-end: 0.9375rem; /* live 1.5rem @ 62.5% root */
    border-block-end: 2px solid var(--primary);
    font-weight: var(--weight-bold);
    white-space: normal;
  }

  .site-nav__item--current > .site-nav__link,
  .site-nav__list > .site-nav__item:hover > .site-nav__link,
  .site-nav__list > .site-nav__item:hover > .site-nav__row > .site-nav__link {
    color: inherit;
  }

  .site-nav__list > .site-nav__item:hover > .site-nav__row > .site-nav__toggle {
    color: var(--primary);
  }

  .site-nav__list > .site-nav__item--current > .site-nav__link {
    color: var(--primary);
  }

  .site-nav__toggle,
  .site-nav__sub .site-nav__toggle {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    padding: 0 0.625rem;
    color: var(--primary);
    font-size: 1.875rem; /* live 30px icon */
  }

  .site-nav__toggle::after,
  .site-nav__sub .site-nav__toggle::after {
    width: 1em;
    height: 1em;
    transform: none;
  }

  .site-nav__toggle[aria-expanded="true"]::after {
    transform: rotateX(180deg);
  }

  .site-nav__sub,
  .site-nav__sub .site-nav__sub {
    display: none;
    position: static;
    min-width: 0;
    margin-block-end: 1.5625rem;
    padding: 0 0 0 5%;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--white);
    line-height: inherit;
    opacity: 1;
    visibility: visible;
  }

  .site-nav__item--parent:hover > .site-nav__sub,
  .site-nav__item--parent:focus-within > .site-nav__sub {
    display: none;
  }

  .site-nav__row:has(> [aria-expanded="true"]) + .site-nav__sub {
    display: block;
  }

  .site-nav__sub .site-nav__item:hover {
    background: none;
  }

  .site-nav__sub .site-nav__link {
    padding: 0 0 0.625rem;
    border-block-end-color: var(--white);
    font-weight: var(--weight-regular);
    text-transform: none;
  }
}

/* No tablet/mobile frames for 411:632 or 411:655 — reflow below is our own */
@media (max-width: 1279px) {
  :root {
    --logo-width: 12.5rem; /* 200 — frees room for the nav between 992 and 1279 */
  }

  .masthead__image {
    inset-inline-start: auto;
    inset-inline-end: -8%;
  }

  .site-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: var(--space-xxxl);
  }

  .site-footer__col--contact {
    grid-column: 1 / -1;
  }

  .site-footer__contact {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: var(--space-xl);
  }
}

@media (max-width: 991px) {
  .masthead__image {
    inset-inline-end: -25%;
    opacity: 0.3;
  }

  .concepts__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-l);
  }

  /* CTA: text only, like the live site on mobile — collage hidden, corner block kept */
  .cta {
    padding-block: 7.5rem var(--space-5xl); /* clears the 20 + 90 corner block */
  }

  .cta__inner {
    min-height: 0;
  }

  .cta__content {
    width: 100%;
    max-width: 40rem;
    padding-block: 0;
  }

  .cta__lede {
    margin-block-start: var(--space-s);
  }

  .cta__button {
    margin-block-start: var(--space-xl);
    padding: 1.25rem 2rem;
    font-size: var(--text-nav);
  }

  .cta__collage {
    display: none;
  }
}

@media (max-width: 767px) {
  .masthead__image {
    display: none;
  }

  .concepts__grid {
    grid-template-columns: minmax(0, 27rem); /* card stays near its 431px design width */
    justify-content: center;
  }

  .cta__button {
    align-self: stretch;
  }

  .site-footer__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-xl);
  }

  .site-footer__contact {
    flex-direction: column;
  }

  .site-footer__bar {
    padding-block: var(--space-l);
  }

  .site-footer__bar-inner {
    flex-direction: column-reverse;
    text-align: center;
  }

  .site-footer__copyright {
    font-size: var(--text-body-m);
  }

  .site-footer__social {
    gap: 2.5rem; /* live 40px */
  }
}

@media (max-width: 478px) {
  :root {
    --logo-width: 12.5rem; /* live 200px */
  }

  .site-nav__list > .site-nav__item {
    margin-inline: 10%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }

  .concept:hover .concept__image,
  .concept:focus-within .concept__image {
    object-position: 50% 0;
  }
}