/* ==========================================================================
   Limegoat — phone and tablet layouts (below 1200px wide)
   Generated from src/css/*.css by src/build_css.py; edit the parts, then rebuild.
   ========================================================================== */

/* --------------------------------------------------------------------------
   00 · Foundation: scale, tokens, type, buttons, header + menu, heroes,
   footer, back-to-top, cookie panel, project viewer
   Desktop (1200px and up) is untouched; everything here is for smaller screens.
   1rem eases from 3.9px at 390px wide to ~9px at 1199px, so spacing written
   in design px shrinks in proportion. Type and touch targets are set in px.
   -------------------------------------------------------------------------- */

/* The menu button and mobile panel exist on every page but only show below 1200px */
.site-header__menu,
.mnav { display: none; }

@media (max-width: 1199px) {
  html { font-size: max(3.3px, calc(3.9px + (100vw - 390px) * 0.0063)); }   /* refined to clientWidth by JS */

  :root {
    --gutter: 40px;
    --gutter-r: 40px;
    --header-h: 112px;
    --logo-w: 86px;           /* the goat logo, much larger than a typical mobile mark */
    --solid-h: 66px;          /* the condensed bar once the hero has scrolled away */
    --t-hero: clamp(42px, 10.6vw, 84px);
    --t-hero-ir: clamp(36px, 9.2vw, 70px);
    --t-giant: clamp(66px, 19vw, 150px);
    --t-h2: clamp(31px, 7.2vw, 52px);
    --t-h2-sm: clamp(26px, 6vw, 40px);
    --t-h3: clamp(20px, 4.4vw, 26px);
    --t-lead: clamp(19px, 4.4vw, 24px);
    --t-body: 17px;
    --t-label: 12px;
  }
  body { font-size: 16px; }

  /* ---------- Shared type ---------- */
  .h2,
  .h2--lg,
  .h2--xl {
    font-size: var(--t-h2);
    line-height: 1.1;
    letter-spacing: -0.04em;
  }
  .h2--md { font-size: var(--t-h2-sm); line-height: 1.15; letter-spacing: -0.035em; }
  .h3 { font-size: var(--t-h3); line-height: 1.25; letter-spacing: -0.02em; }
  .copy { font-size: var(--t-body); line-height: 1.6; }
  .lead { font-size: var(--t-lead); line-height: 1.45; letter-spacing: -0.02em; }
  .bullets li { line-height: 1.6; }
  .bullets li::before { top: 0.72em; }
  .text-link { font-size: 15px; line-height: 2; }

  /* ---------- Buttons: real touch targets, width follows the label ---------- */
  .btn,
  .btn--auto {
    width: auto;
    height: auto;
    min-height: 48px;
    padding: 13px 26px;
    font-size: 12px;
    line-height: 1.35;
    white-space: normal;      /* long labels wrap instead of running off a phone screen */
    text-align: center;
  }
  .btn-row { flex-wrap: wrap; gap: 12px; }

  /* ---------- Header ---------- */
  .site-header {
    align-items: center;
    height: var(--header-h);
    padding: 0 var(--gutter);
  }
  .site-header::before { height: var(--header-h); }
  .site-nav,
  .site-header__cta,
  .site-header > .mega,
  .mega-scrim { display: none; }
  .site-header__logo .logo-goat { width: var(--logo-w); height: calc(var(--logo-w) * 110 / 114); }
  /* scrolled: the bar condenses and the logo shrinks into it */
  .site-header.is-solid::before { height: var(--solid-h); }
  .site-header.is-solid .site-header__logo {
    transform-origin: 0 50%;
    transform: translateY(calc((var(--solid-h) - var(--header-h)) / 2)) scale(0.54);
  }
  .site-header.is-solid .site-header__menu { transform: translateY(calc((var(--solid-h) - var(--header-h)) / 2)); }
  .site-header__menu { transition: transform 0.7s var(--ease-out); }
  /* the open menu always shows the full-size header */
  html.mnav-open .site-header::before { height: var(--header-h); opacity: 0; }
  html.mnav-open .site-header .site-header__logo,
  html.mnav-open .site-header .site-header__menu { transform: none; }

  .site-header__menu {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 48px;
    margin: 0 -10px 0 auto;
    padding: 0 10px;
    border: 0;
    background: none;
    color: #fff;
    font: 400 12px/1 var(--font-display);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .site-header__menu-icon { position: relative; width: 26px; height: 11px; }
  .site-header__menu-icon i {
    position: absolute;
    left: 0;
    right: 0;
    height: 1.5px;
    background: currentColor;
    transition: transform 0.5s var(--ease-out), top 0.5s var(--ease-out), bottom 0.5s var(--ease-out);
  }
  .site-header__menu-icon i:first-child { top: 0; }
  .site-header__menu-icon i:last-child { bottom: 0; }
  .site-header__menu[aria-expanded="true"] .site-header__menu-icon i:first-child { top: 4.75px; transform: rotate(45deg); }
  .site-header__menu[aria-expanded="true"] .site-header__menu-icon i:last-child { bottom: 4.75px; transform: rotate(-45deg); }

  /* ---------- Menu panel ---------- */
  .mnav {
    position: fixed;
    inset: 0;
    z-index: 49;                       /* under the header, so the logo and the close button stay on top */
    display: flex;
    flex-direction: column;
    padding: calc(var(--header-h) + 16px) var(--gutter) 32px;
    overflow-y: auto;
    overscroll-behavior: contain;
    color: var(--cream);
    background:
      radial-gradient(90% 60% at 0% 0%, rgba(223, 171, 122, 0.14), transparent 60%),
      radial-gradient(70% 50% at 100% 100%, rgba(105, 184, 150, 0.07), transparent 60%),
      #0d0c16;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s, visibility 0s linear 0.4s;
  }
  .mnav.is-open { opacity: 1; visibility: visible; transition: opacity 0.45s; }
  .mnav__list > li {
    border-top: 1px solid rgba(255, 241, 233, 0.12);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.2s, transform 0.3s;
  }
  .mnav__list > li:last-child { border-bottom: 1px solid rgba(255, 241, 233, 0.12); }
  .mnav.is-open .mnav__list > li { opacity: 1; transform: none; transition: opacity 0.6s, transform 0.9s var(--ease-out); }
  .mnav.is-open .mnav__list > li:nth-child(2) { transition-delay: 0.05s; }
  .mnav.is-open .mnav__list > li:nth-child(3) { transition-delay: 0.1s; }
  .mnav.is-open .mnav__list > li:nth-child(4) { transition-delay: 0.15s; }
  .mnav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
    font: 700 clamp(26px, 7vw, 34px)/1.1 var(--font-display);
    letter-spacing: -0.03em;
    color: var(--cream);
    text-decoration: none;
    list-style: none;
    cursor: pointer;
  }
  .mnav__link::-webkit-details-marker { display: none; }
  .mnav__link[aria-current="page"]::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tan);
  }
  .mnav__caret { display: grid; place-items: center; width: 32px; height: 32px; }
  .mnav__caret svg { width: 14px; height: 9px; transition: transform 0.5s var(--ease-out); }
  .mnav__group[open] .mnav__caret svg { transform: rotate(180deg); }
  .mnav__sub { padding: 0 0 18px; }
  .mnav__sub-link {
    display: block;
    padding: 11px 0 11px 16px;
    border-left: 1px solid rgba(255, 241, 233, 0.16);
    font: 400 17px/1.35 var(--font-body);
    color: rgba(255, 241, 233, 0.72);
    text-decoration: none;
  }
  .mnav__sub-link[aria-current="page"] { color: #fff; border-left: 2px solid var(--tan); }
  .mnav__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: auto;
    padding-top: 36px;
  }
  .mnav__phone {
    font: 400 14px/1 var(--font-display);
    letter-spacing: 0.12em;
    color: var(--cream);
    text-decoration: none;
  }
  html.mnav-open,
  html.mnav-open body { overflow: hidden; }

  /* ---------- Heroes: in normal flow, content at the bottom, always clear of the header ---------- */
  .hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
  }
  .hero--short { height: auto; min-height: 72vh; min-height: 72svh; }
  .hero__fg {
    position: relative;
    inset: auto;
    padding: calc(var(--header-h) + 64px) var(--gutter) 52px;
  }
  .hero__content,
  .ir-hero__content,
  .ir-hero__content--tagline,
  .about-hero__content {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    padding-left: 0;
  }
  .hero__title,
  .about-hero__title {
    margin-left: -0.03em;
    font-size: var(--t-hero);
    line-height: 1.02;
    letter-spacing: -0.055em;
    white-space: normal;
  }
  .ir-hero__title {
    margin-left: -0.03em;
    font-size: var(--t-hero-ir);
    line-height: 1.04;
    letter-spacing: -0.05em;
    text-wrap: balance;
  }
  .hero__lede,
  .hero__lede.ir-hero__lede {
    width: auto;
    max-width: 640px;
    margin: 18px 0 0;
    font-size: 16px;
    line-height: 1.55;
  }
  .ir-hero__tagline { margin: 16px 0 0; font-size: 15px; line-height: 1.6; white-space: normal; }
  .ir-hero__kicker { margin-bottom: 16px; font-size: 11px; }
  .hero__actions,
  .hero__actions.ir-hero__actions,
  .about-hero__actions { margin: 26px 0 0; gap: 12px; }
  .scroll-cue { display: none; }
  .hero__video--inner { top: 0; height: 100%; object-position: 50% 70%; }
  .hero__veil {
    background:
      linear-gradient(to bottom, rgba(12, 9, 7, 0.4) 0%, rgba(12, 9, 7, 0) 24%),
      linear-gradient(to top, rgba(12, 9, 7, 0.82) 0%, rgba(12, 9, 7, 0.5) 38%, rgba(12, 9, 7, 0) 70%);
  }
  .hero__veil--inner {
    background:
      linear-gradient(to bottom, rgba(10, 10, 20, 0.6) 0%, rgba(10, 10, 20, 0.12) 18%, rgba(10, 10, 20, 0) 30%),
      linear-gradient(to top, rgba(14, 10, 8, 0.9) 0%, rgba(14, 10, 8, 0.72) 34%, rgba(14, 10, 8, 0.3) 62%, rgba(14, 10, 8, 0) 82%);
  }
  .hero__veil--warm {
    background:
      linear-gradient(to bottom, rgba(96, 52, 36, 0.62) 0%, rgba(96, 52, 36, 0.16) 18%, rgba(96, 52, 36, 0) 30%),
      linear-gradient(to top, rgba(96, 52, 36, 0.95) 0%, rgba(96, 52, 36, 0.86) 36%, rgba(96, 52, 36, 0.4) 64%, rgba(96, 52, 36, 0) 84%);
  }

  /* ---------- Footer: in normal flow (a fixed footer can be taller than a phone screen) ---------- */
  .page { margin-bottom: 0; }
  .site-footer { position: relative; height: auto; overflow: visible; }
  .site-footer__inner { height: auto; will-change: auto; }
  .newsletter { height: auto; padding: 72px var(--gutter) 64px; }
  .newsletter__title {
    position: static;
    font-size: var(--t-h2);
    line-height: 1.08;
    letter-spacing: -0.045em;
    white-space: normal;
  }
  .newsletter__form {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    max-width: 560px;
    margin-top: 28px;
  }
  .field { width: 100%; }
  .field + .field { margin-top: 10px; }
  .field__input { height: 52px; padding-left: 0; font-size: 16px; }   /* 16px stops iOS zooming into the field */
  .btn.newsletter__submit { margin: 28px 0 0; }
  .newsletter__status { position: static; width: auto; margin-top: 14px; font-size: 14px; line-height: 1.5; }

  .footer-bar {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 32px 24px;
    height: auto;
    padding: 44px var(--gutter) 40px;
  }
  .footer-bar__logo { position: static; grid-column: 1; grid-row: 1; }
  .footer-bar .logo-goat { width: 62px; height: 60px; }
  .footer-bar__social { position: static; grid-column: 2; grid-row: 1; align-self: center; gap: 22px; }
  .footer-bar__social img { width: calc(var(--iw) * 1px); height: calc(var(--ih) * 1px); }
  .footer-bar__legal {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 28px;
  }
  .footer-bar__legal a,
  .footer-bar__copy,
  .footer-bar__cookies {
    position: static;
    width: auto;
    font-size: 12px;
    line-height: 1.5;
  }
  .footer-bar__cookies { grid-column: 1 / -1; grid-row: 3; justify-self: start; text-align: left; }
  .footer-bar__copy { grid-column: 1 / -1; grid-row: 4; text-align: left; color: rgba(0, 0, 0, 0.6); }

  /* ---------- Back to top: a small round button in the corner (the label stays for screen readers) ---------- */
  .to-top {
    right: 12px;
    bottom: 14px;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
  }
  .to-top__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .to-top__arrow { width: 8px; height: 20px; }

  /* ---------- Project viewer (Our Work) ---------- */
  .lightbox__stage { width: min(92vw, calc(70vh * 1047 / 829)); }
  .lightbox__img { padding: 16px; }
  .lightbox__cap { flex-direction: column; gap: 8px; margin-top: 16px; }
  .lightbox__cat { font-size: 11px; }
  .lightbox__title { font-size: 15px; }
  .lightbox__btn { width: 48px; height: 48px; }
  .lightbox__btn svg { width: 20px; height: 20px; }
  .lightbox__close { top: 14px; right: 14px; }
  .lightbox__prev,
  .lightbox__next { top: auto; bottom: 22px; }
  .lightbox__prev { left: calc(50% - 60px); }
  .lightbox__next { right: calc(50% - 60px); }
}

/* Phones */
@media (max-width: 767px) {
  :root {
    --gutter: 20px;
    --gutter-r: 20px;
    --header-h: 98px;
    --logo-w: 72px;
    --solid-h: 62px;
    --t-body: 16px;
  }
  .hero__fg { padding-bottom: 40px; }
  /* Inner-page headlines flow as one balanced block on phones instead of the desktop's set line breaks */
  .ir-hero__title .line,
  .ir-hero__title .line__inner { display: inline; }
}

/* --------------------------------------------------------------------------
   10 · Home: One Stop Shop, AI, Work carousel, AI assistant, Let's Get Started
   (AI, Work, Assistant and Let's Get Started also appear on About and inner pages)
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {

  /* ---------- One Stop Shop: sky + headline, then the mountains, then the copy ---------- */
  .oss { height: auto; padding-top: 88px; }
  .oss__heading {
    position: relative;
    inset: auto;
    padding: 0 var(--gutter);
  }
  .oss__title {
    position: static;
    width: auto;
    font-size: 17.5vw;
    line-height: 0.9;
    letter-spacing: -0.055em;
  }
  .oss__tagline {
    position: static;
    margin-top: 18px;
    font-size: clamp(20px, 5vw, 32px);
    line-height: 1.25;
    letter-spacing: -0.01em;
    white-space: normal;
  }
  /* The mountains are shown twice as wide as the screen and centred: the station,
     the towers and both goats stay in view, peaks rising behind the headline */
  .oss__fore {
    position: relative;
    top: auto;
    height: auto;
    margin-top: -26vw;
    /* below the painting (121.35vw tall) the dark foreground continues behind the copy */
    background: linear-gradient(to bottom, rgba(14, 10, 11, 0) 0, rgba(14, 10, 11, 0) 100vw, #0e0a0b 121vw);
  }
  .oss__mountains {
    position: relative;
    display: block;
    width: 200vw;
    max-width: none;
    height: auto;
    margin-left: -50vw;
  }
  .oss__life {
    --u: calc(200vw / 192);
    inset: auto;
    left: -50vw;
    top: 0;
    width: 200vw;
    height: calc(200vw * 1165 / 1920);
  }
  .has-motion .oss__life .oss__beacon,
  .has-motion .oss__life .oss__lamp {
    left: calc(var(--x) * var(--u));
    top: calc(var(--y) * var(--u));
  }
  .oss__copy {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    max-width: 720px;
    margin: -22vw auto 0;
    padding: 0 var(--gutter) 80px;
    text-align: left;
    font-size: var(--t-body);
    line-height: 1.6;
  }
  .oss__copy p + p { margin-top: 1.2em; }
  .oss__actions { margin: 32px 0 0; }

  /* ---------- Light band backgrounds ---------- */
  .light__lines { left: 10vw; top: 40px; width: 240vw; }

  /* ---------- AI ---------- */
  .ai,
  .ai--flow {
    flex-direction: column;
    height: auto;
    min-height: 0;
    padding: 72px var(--gutter) 64px;
  }
  .ai__mark { width: auto; padding: 0; }
  .ai__word { margin: -0.16em 0 -0.2em; font-size: clamp(150px, 42vw, 300px); letter-spacing: -0.05em; }
  .ai__sub,
  .ai__sub--wrap {
    width: auto;
    margin: 22px 0 0 0.04em;
    font-size: clamp(22px, 5.4vw, 30px);
    line-height: 1.25;
    white-space: normal;
  }
  .ai__sub::after { white-space: normal; }
  .ai__body { width: auto; max-width: 680px; padding-top: 26px; }
  .ai__text { font-size: var(--t-body); line-height: 1.6; }
  .ai__toolbar { width: auto; max-width: 600px; margin: 34px 0 0; }
  .ai__tools { flex-wrap: wrap; gap: 18px 24px; height: auto; justify-content: flex-start; }
  .ai__tools img { width: calc(var(--iw) * 0.72px); height: calc(var(--ih) * 0.72px); }
  .ai__tools li::after { display: none; }

  /* ---------- Work carousel ---------- */
  .work { height: auto; padding: 48px 0 64px; }
  .work__title {
    margin: 0 var(--gutter);
    font-size: var(--t-h2);
    line-height: 1.1;
    letter-spacing: -0.045em;
  }
  .work__track { margin-top: 26px; scroll-padding-left: var(--gutter); }
  .work__list { gap: 14px; padding: 0 var(--gutter); }
  .card { width: min(84vw, 520px); height: auto; aspect-ratio: 621 / 471; }
  .card--sample .card__img { padding: 16px 18px 58px; }
  .card__tag.btn { left: 14px; bottom: 14px; height: 36px; min-height: 0; padding: 0 16px; font-size: 11px; white-space: nowrap; }
  .work__foot { height: auto; margin-top: 18px; padding: 0 var(--gutter); }
  .work__all { font-size: 15px; }
  .work__arrows { gap: 4px; }
  .work__arrow { width: 44px; height: 44px; }
  .work__arrow svg { width: 9px; height: 16px; }

  /* ---------- AI assistant ---------- */
  .assistant {
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 56px var(--gutter) 72px;
  }
  .assistant__text { width: auto; max-width: 680px; padding: 0; }
  .assistant__title {
    margin-left: 0;
    font-size: var(--t-h2);
    line-height: 1.1;
    letter-spacing: -0.045em;
  }
  .assistant__lede { width: auto; margin-top: 16px; font-size: var(--t-body); line-height: 1.55; }
  .btn.assistant__btn { display: inline-flex; margin: 26px 0 0; }
  .assistant__shot {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 760px;
    height: auto;
    aspect-ratio: 4 / 3;
    margin-top: 36px;
  }

  /* ---------- Let's Get Started: the valley video rises behind the section above ---------- */
  .cta {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: auto;
    min-height: 66vw;
    padding: 34vw var(--gutter) 52px;
  }
  .cta__img { top: -24vw; height: calc(100% + 24vw); }
  .cta__title {
    position: relative;
    left: auto;
    top: auto;
    font-size: 18.5vw;
    line-height: 0.92;
    letter-spacing: -0.055em;
    white-space: normal;
  }
  .cta__btn { position: relative; left: auto; top: auto; align-self: flex-start; margin-top: 28px; }
  .cta--after { margin-top: 24vw; }
}

/* Tablets: a little more room */
@media (min-width: 768px) and (max-width: 1199px) {
  .oss__title { font-size: 15.5vw; }
  .cta__title { font-size: 15vw; }
  .cta { min-height: 56vw; padding-top: 28vw; }
}

/* Tablets: the painting needs less enlarging to keep the station and goats in view */
@media (min-width: 768px) and (max-width: 1199px) {
  .oss__fore {
    margin-top: -18vw;
    background: linear-gradient(to bottom, rgba(14, 10, 11, 0) 0, rgba(14, 10, 11, 0) 75vw, #0e0a0b 91vw);
  }
  .oss__mountains { width: 150vw; margin-left: -25vw; }
  .oss__life { --u: calc(150vw / 192); left: -25vw; width: 150vw; height: calc(150vw * 1165 / 1920); }
  .oss__copy { margin-top: -16vw; }
}

/* --------------------------------------------------------------------------
   20 · About: Expert Design, showcase panel, IR websites block, IR band
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .expert {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 64px var(--gutter) 48px;
  }
  .expert__title { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -0.045em; }
  .expert__text { max-width: 680px; margin-top: 20px; font-size: var(--t-body); line-height: 1.6; }

  /* Linen panel at full width; laptop and phones keep their places on it */
  .showcase { height: auto; padding: 0 var(--gutter); }
  .showcase__panel {
    position: relative;
    left: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1310 / 675;
  }
  .showcase__laptop { left: -4.16%; top: 18.07%; width: 77.18%; }
  .showcase__phones {
    left: calc(var(--gutter) + (100% - 2 * var(--gutter)) * 0.7149);
    top: 16.15%;
    width: calc((100% - 2 * var(--gutter)) * 0.2336);
  }

  .irsites {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 64px var(--gutter) 64px;
  }
  .irsites__title {
    font-size: var(--t-h2);
    line-height: 1.1;
    letter-spacing: -0.045em;
    white-space: normal;
  }
  .irsites__lead { width: auto; max-width: 680px; margin-top: 22px; font-size: var(--t-lead); line-height: 1.4; letter-spacing: -0.02em; }
  .irsites__body { max-width: 680px; margin-top: 20px; }
  .irsites__text { font-size: var(--t-body); line-height: 1.6; }
  .btn.irsites__btn { display: inline-flex; margin: 26px 0 0; }

  /* Dark linen band with the website mockups: a swipeable row */
  .irband { height: auto; }
  .irband__ticker { left: -20vw; top: -10vw; width: 160vw; }
  .irband__track { position: relative; inset: auto; }
  .irband__list { align-items: center; padding: 56px var(--gutter) 88px; }
  .irband__item--jones { width: 78vw; margin-top: 0; }
  .irband__item--biostem { width: 88vw; margin-left: -10vw; }
  .irband__item--essa { width: 84vw; margin-left: 8vw; margin-top: 0; }
  .irband__arrows { top: auto; right: calc(var(--gutter) - 10px); bottom: 20px; }
}

/* --------------------------------------------------------------------------
   30 · Section components used on the IR, Services, Contact and legal pages.
   The pattern: multi-column grids become one column (two on tablets where the
   items are short), fixed design widths give way to the screen, and section
   padding moves onto the shared gutter.
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {

  /* Widths and side padding written inline on a few elements give way on small screens */
  .lead[style*="width"],
  .h2[style*="width"],
  .copy[style*="width"] { width: auto !important; max-width: 680px; }
  .ir-price[style*="padding"] { padding: 64px var(--gutter) !important; }

  /* ---------- Heading left, copy right ---------- */
  .ir-split {
    grid-template-columns: 1fr;
    row-gap: 22px;
    padding: 64px var(--gutter) 56px;
  }
  .ir-split__title { max-width: 680px; }
  .ir-split__body { max-width: 680px; }
  .ir-split__body .btn { margin-top: 26px; }
  .ir-split__media { margin-top: 12px; }

  /* ---------- Centred intro ---------- */
  .ir-intro { padding: 64px var(--gutter) 32px; }
  .ir-intro .h2 { max-width: 760px; }
  .ir-intro .copy { width: auto; max-width: 680px; margin-top: 20px; }

  /* ---------- Showcase panel with a small slider (IR Websites) ---------- */
  .ir-show { height: auto; padding: 0 var(--gutter) 64px; }
  .ir-show__panel,
  .ir-show__stage {
    position: relative;
    left: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1310 / 675;
  }
  .ir-show__stage { position: absolute; left: var(--gutter); right: var(--gutter); top: 0; width: auto; }
  .ir-show__slide {
    left: calc(var(--x) / 1310 * 100%);
    top: calc(var(--y) / 675 * 100%);
    width: calc(var(--w) / 1310 * 100%);
  }
  .ir-show__arrows { left: auto; right: calc(var(--gutter) - 10px); top: auto; bottom: 8px; }

  /* ---------- Everything Investors Need ---------- */
  .ir-feat {
    grid-template-columns: 1fr;
    row-gap: 36px;
    padding: 64px var(--gutter) 40px;
  }
  .ir-feat__bg { left: -20vw; top: 0; width: 220vw; }
  .ir-feat__title,
  .ir-feat__lead,
  .ir-feat__copy { width: auto; max-width: 680px; }
  .ir-feat__lead,
  .ir-feat__copy { margin-top: 18px; }
  .ir-feat__text .btn { margin-top: 26px; }
  .ir-feat__grid { grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .ir-feat__item { padding: 18px 0 16px; }
  .ir-feat__item h3,
  .ir-feat__item p { margin-right: 0; }
  .ir-feat__icon { width: 24px; height: 24px; margin-left: 0; }
  .ir-feat__item h3 { margin-top: 10px; font-size: 17px; line-height: 1.3; }
  .ir-feat__item p { margin-top: 4px; font-size: 15px; line-height: 1.45; }
  .ir-feat__item--title { padding-bottom: 18px; }

  /* ---------- Automated content band: chips above the devices on small screens ---------- */
  .ir-auto { min-height: 0; padding: 64px var(--gutter) 64px; }
  .ir-auto__text,
  .ir-auto__title { width: auto; max-width: 680px; }
  .ir-auto .copy { width: auto; max-width: 680px; margin: 20px 0 0; }
  .ir-feed {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    margin-top: 34px;
  }
  .ir-feed__pills {
    position: relative;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
  }
  .ir-feed__pill { width: auto; height: 38px; gap: 10px; padding: 0 16px; border-radius: 19px; font-size: 14px; }
  .ir-feed__pill svg { width: 16px; height: 16px; }
  .ir-feed__devices { position: relative; left: auto; top: auto; width: 100%; max-width: 720px; margin-top: 28px; }
  .ir-feed__lines { display: none; }

  /* ---------- No Templates ---------- */
  .ir-notemp {
    grid-template-columns: 1fr;
    row-gap: 24px;
    padding: 72px var(--gutter) 0;
  }
  .ir-notemp__bg { left: -30vw; top: 40px; width: 240vw; }
  .ir-notemp__big {
    margin-top: 0;
    font-size: clamp(64px, 19vw, 130px);
    line-height: 0.95;
    letter-spacing: -0.055em;
  }
  .ir-notemp__text .copy { width: auto; max-width: 680px; margin: 18px 0 0; }
  .ir-notemp__text .btn { margin: 26px 0 0; }

  /* Short-rule points */
  .ir-points {
    grid-template-columns: 1fr 1fr;
    gap: 28px 28px;
    margin-top: 40px;
    padding-bottom: 36px;
  }
  .ir-points li { padding: 20px 0 0; font-size: 16px; line-height: 1.5; }
  .ir-points li::before { width: 64px; }
  .ir-points--3 { grid-template-columns: 1fr 1fr; row-gap: 32px; margin-top: 36px; }
  .ir-points--3 li { max-width: none; }
  .ir-points--3 li::before { width: 100%; }
  .ir-points__icon { width: 24px; height: 24px; margin: 0 0 12px; }

  /* ---------- Integration options: illustrated cards ---------- */
  .ir-options { padding: 56px var(--gutter) 64px; }
  .ir-options__title,
  .ir-options .copy { width: auto; max-width: 680px; }
  .ir-options .copy { margin-top: 16px; }
  .ir-options__list { grid-template-columns: repeat(3, 1fr); column-gap: 20px; row-gap: 40px; margin-top: 32px; }
  .ir-option__img { height: auto; aspect-ratio: 512 / 373; }
  .ir-option h2,
  .ir-option h3 { margin-top: 16px; font-size: 18px; line-height: 1.3; }
  .ir-option p { width: auto; margin-top: 6px; font-size: 15px; line-height: 1.5; }

  /* ---------- Security band with stat tiles ---------- */
  .ir-secure {
    grid-template-columns: 1fr;
    row-gap: 32px;
    padding: 64px var(--gutter) 56px;
  }
  .ir-secure__title,
  .ir-secure .copy { width: auto; max-width: 680px; }
  .ir-secure .copy { margin: 18px 0 0; }
  .ir-tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 0; max-width: 560px; }
  .ir-tile { height: auto; min-height: 92px; padding: 14px 16px 12px; }
  .ir-tile__value { font-size: 24px; line-height: 1.15; letter-spacing: -0.04em; white-space: normal; }
  .ir-tile--big { padding-top: 12px; }
  .ir-tile--big .ir-tile__value { font-size: 32px; line-height: 1.15; letter-spacing: -0.04em; }
  .ir-tile__label { margin-top: 6px; font-size: 12px; line-height: 1.35; }
  .ir-tile__dot { width: 6px; height: 6px; margin: 0 6px 3px; }
  .ir-tiles--text { grid-template-columns: 1fr 1fr; max-width: none; }
  .ir-tiles--text .ir-tile { gap: 12px; min-height: 0; padding: 16px; font-size: 15px; line-height: 1.45; }
  .ir-tile__icon { width: 22px; height: 22px; }

  /* ---------- Tabs over the desert photo ---------- */
  .ir-tabs { min-height: 0; padding: 64px var(--gutter) 64px; }
  .ir-tabs__inner { width: auto; }
  .ir-tabs__list { flex-wrap: wrap; gap: 8px; }
  .ir-tabs__list .btn { height: 42px; min-height: 0; padding: 0 18px; font-size: 11px; white-space: nowrap; }
  .ir-tabs__panels { margin-top: 32px; }
  .ir-tabs__title { margin-left: 0; font-size: var(--t-h2); line-height: 1.1; letter-spacing: -0.045em; }
  .ir-tabs__panel .copy { margin-top: 18px; max-width: 680px; }
  .ir-tabs__panel .btn { margin-top: 24px; }
  .ir-steps { grid-template-columns: 1fr 1fr; gap: 24px 24px; margin-top: 24px; }
  .ir-steps li { padding-top: 14px; font-size: 15px; line-height: 1.5; }
  .ir-steps li::before { margin-bottom: 8px; font-size: 26px; }

  /* ---------- Q&A ---------- */
  .ir-faq {
    grid-template-columns: 1fr;
    row-gap: 18px;
    padding: 64px var(--gutter) 24px;
  }
  .ir-faq__aside { padding-right: 0; }
  .ir-faq__title { width: auto; max-width: 680px; }
  .ir-faq__contact { font-size: 15px; }
  .ir-faq__aside .copy { margin-top: 16px; max-width: 680px; }
  .ir-faq__aside .btn { margin-top: 22px; }
  .qa { margin-top: 8px; }
  .qa__item { padding: 22px 0 20px; font-size: var(--t-body); line-height: 1.55; }

  /* ---------- Process timeline ---------- */
  .ir-process { padding: 64px var(--gutter) 56px; }
  .ir-process__title { margin-left: 0; font-size: var(--t-h2); letter-spacing: -0.045em; }
  .ir-process__list { margin: 26px 0 0; }
  .ir-step { grid-template-columns: 76px 1fr; }
  .ir-step + .ir-step { margin-top: 18px; }
  .ir-step__num { font-size: 60px; line-height: 64px; text-align: left; }
  .ir-step__body { padding-top: 6px; }
  .ir-step__body--text { padding-top: 18px; }
  .ir-step__title { font-size: 20px; line-height: 1.3; }
  .ir-step__text { margin-top: 6px; font-size: 16px; line-height: 1.5; }
  .ir-step__seg { left: 19px; top: 70px; bottom: -14px; }
  .ir-step__seg i { height: 22px; }

  /* ---------- Grow: copy + buttons, image ---------- */
  .ir-grow,
  .ir-grow--center {
    grid-template-columns: 1fr;
    row-gap: 32px;
    padding: 56px var(--gutter) 24px;
  }
  .ir-grow .copy,
  .ir-grow--center .copy { width: auto; max-width: 680px; margin: 18px 0 0; }
  .ir-grow__sub { margin: 24px 0 0; }
  .ir-grow .btn-row { margin: 26px 0 0; gap: 12px; }
  .ir-grow__media { height: auto; margin-top: 0; aspect-ratio: 759 / 488; }

  /* ---------- Mockup / work-sample rows ---------- */
  .ir-mockrow { height: auto; padding-bottom: 72px; }
  .ir-mockrow__list { height: auto; padding: 0 var(--gutter); }
  .ir-mockrow__item--essa { width: 74vw; margin-top: 4vw; }
  .ir-mockrow__item--curiosity { width: 60vw; margin: 7vw 0 0 3vw; }
  .ir-mockrow__item--jones { width: 74vw; margin-left: 6vw; }
  .ir-mockrow__item--biostem { width: 80vw; margin: 8vw 0 0 6vw; }
  .ir-mockrow__item--sample { height: 54vw; width: calc(54vw * var(--ar)); max-width: 84vw; margin: 0 0 0 6vw; }
  .ir-mockrow--samples { padding: 24px 0 80px; }
  .ir-mockrow__arrows,
  .ir-mockrow--samples .ir-mockrow__arrows { top: auto; right: calc(var(--gutter) - 10px); bottom: 14px; }

  /* ---------- Long dark list (Features) ---------- */
  .ir-list { padding: 64px var(--gutter) 56px; }
  .ir-list__title,
  .ir-list__intro { width: auto; max-width: 680px; }
  .ir-list__intro { margin: 18px 0 0; }
  .ir-list__items { width: auto; max-width: 720px; margin: 24px 0 0; }
  .ir-list__item { padding: 20px 0 22px; }
  .ir-list__item + .ir-list__item::before { left: 0; width: 100%; }
  .ir-list__item h3 { font-size: 18px; line-height: 1.35; }
  .ir-list__progress { left: calc(var(--gutter) * -0.5); }

  /* ======================================================================
     Copy-only page components
     ====================================================================== */
  .ir-state,
  .ir-state--center {
    grid-template-columns: 1fr;
    padding: 64px var(--gutter) 56px;
  }
  .ir-state .lead { width: auto; max-width: 680px; margin-top: 20px; }
  .ir-state .copy,
  .ir-state--center .copy { margin-top: 18px; max-width: 680px; }
  .ir-state .btn { margin-top: 24px; }
  .ir-state__bg { left: -30vw; width: 240vw; }

  /* Price cards */
  .ir-price { padding: 64px var(--gutter); }
  .ir-price__head .copy { width: auto; max-width: 680px; margin-top: 18px; }
  .ir-price__cards { grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 36px; }
  .ir-price__card { padding: 30px 26px 30px; background-size: 192vw auto; }
  .ir-price__amount { font-size: clamp(64px, 11vw, 104px); letter-spacing: -0.05em; }
  .ir-price__amount small { letter-spacing: 0; margin-right: 4px; }
  .ir-price__label { margin-top: 16px; }
  .ir-price__card .copy { margin-top: 12px; }
  .ir-price__note { width: auto; max-width: 680px; margin-top: 28px; }

  /* Check lists */
  .ir-checks { column-gap: 28px; }
  .ir-checks li { padding: 18px 0 18px 40px; font-size: 16px; line-height: 1.5; }
  .ir-checks svg { left: 0; top: 18px; width: 24px; height: 24px; }

  /* Heading left + list right */
  .ir-pair,
  .ir-pair--center {
    grid-template-columns: 1fr;
    row-gap: 28px;
    padding: 64px var(--gutter) 56px;
  }
  .ir-pair__text { padding-right: 0; max-width: 680px; }
  .ir-pair__text .copy,
  .ir-pair__text .lead { margin-top: 18px; }
  .ir-pair__text .btn { margin-top: 24px; }
  .ir-pair__after { margin-top: 24px; }
  .ir-pair__bg { left: -20vw; width: 220vw; }

  /* Numbered items */
  .ir-numbered { grid-template-columns: 1fr 1fr; gap: 30px 28px; }
  .ir-numbered li { max-width: none; padding-top: 18px; font-size: 17px; line-height: 1.4; }
  .ir-numbered__n { margin-bottom: 10px; font-size: 34px; }

  /* Heading + intro across, list underneath */
  .ir-block { padding: 64px var(--gutter); }
  .ir-block__head { grid-template-columns: 1fr; row-gap: 18px; }
  .ir-block__head .copy { max-width: 680px; }
  .ir-block__body { margin-top: 32px; }
  .ir-block__foot { margin-top: 32px; max-width: 680px; }

  /* Two lists side by side */
  .ir-duo { padding: 64px var(--gutter); }
  .ir-duo__cols { grid-template-columns: 1fr; gap: 48px; }
  .ir-duo__col .ir-checks { margin-top: 20px; }

  /* Photo band */
  .ir-photo { padding: 80px var(--gutter); }
  .ir-photo__inner { width: auto; max-width: 720px; }
  .ir-photo__inner .copy { width: auto; margin-top: 18px; }
  .ir-photo__inner .btn { margin-top: 26px; }

  /* Big statistic */
  .ir-stat { padding: 0; }
  .ir-stat__value { font-size: clamp(96px, 27vw, 190px); letter-spacing: -0.06em; }
  .ir-stat__label { margin-top: 10px; font-size: 12px; }
  .ir-stat__row { flex-wrap: wrap; gap: 24px 40px; margin-top: 32px; }
  .ir-stat__row .ir-stat__value { font-size: 44px; letter-spacing: -0.05em; }
  .ir-stat__row .ir-stat__label { font-size: 12px; margin-top: 6px; }
  .ir-stat__row > div { min-width: 0; }

  /* Closing call to action */
  .ir-closer { padding: 80px var(--gutter) 24px; }
  .ir-closer .copy { width: auto; max-width: 640px; margin-top: 18px; }
  .ir-closer .btn-row { margin-top: 28px; gap: 12px; }

  .ir-panel-media { padding: 28px 20px; }

  /* Short-rule points on their own */
  .ir-ptsec { padding: 64px var(--gutter); }
  .ir-ptsec__head { grid-template-columns: 1fr; row-gap: 16px; }
  .ir-ptsec__head .copy { max-width: 680px; margin-top: 0; }

  /* ---------- Guide / legal / article layout: the index sits above the text ---------- */
  .ir-guide,
  .ir-guide--legal {
    grid-template-columns: 1fr;
    row-gap: 8px;
    padding: 40px var(--gutter) 64px;
  }
  .ir-guide__index { position: static; padding-top: 0; }
  .ir-guide__label { font-size: 11px; }
  .ir-guide__index ol { margin-top: 12px; }
  .ir-guide__index ol a { gap: 12px; padding: 9px 0 9px 16px; font-size: 15px; }
  .ir-guide__index ol a span { min-width: 22px; }
  .ir-guide__index ol a.is-current { padding-left: 16px; }
  .ir-guide__contact { max-width: 520px; margin-top: 24px; }
  .ir-guide__step { padding: 44px 0 44px; }
  .ir-guide__num { font-size: 64px; }
  .ir-guide__step .h2 { margin-top: -16px; }
  .ir-guide__step .copy { margin-top: 18px; }
  .ir-guide__step--plain { padding-top: 16px; }
  .legal-list li { grid-template-columns: 40px 1fr; padding: 18px 0 20px; font-size: 16px; }
  .legal-list li::after { font-size: 15px; }
  .legal-list + .ir-guide__step--plain { padding-top: 36px; }
  .article__copy .article__h3 { font-size: 20px; }
  .ir-guide--article .ir-guide__index ol a { font-size: 14px; }
  .article__related { font-size: 15px; }
  .article__back { margin-top: 40px; font-size: 15px; }

  /* Interactive checklist */
  .ir-checklist { padding: 64px var(--gutter); }
  .ir-checklist__head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .ir-checklist__count { font-size: 12px; }
  .ir-checklist__list { grid-template-columns: 1fr; margin-top: 28px; }
  .ir-checklist__btn { gap: 16px; padding: 18px 0; font-size: 16px; line-height: 1.5; }
  .ir-checklist__box { width: 24px; height: 24px; }
  .ir-checklist__box svg { inset: 3px; width: 16px; height: 16px; }
  .ir-checklist__foot { flex-wrap: wrap; gap: 12px; margin-top: 28px; }

  /* ---------- Contact ---------- */
  .ir-contact {
    grid-template-columns: 1fr;
    row-gap: 48px;
    padding: 64px var(--gutter) 64px;
  }
  .ir-contact .copy { margin-top: 18px; max-width: 680px; }
  .ir-contact__info { margin-top: 32px; }
  .ir-contact__info .h3 { font-size: 20px; line-height: 1.3; }
  .ir-contact__info dl { margin-top: 12px; }
  .ir-contact__info dt { margin-top: 16px; font-size: 11px; }
  .ir-contact__info dd { margin-top: 6px; font-size: 16px; }
  .cform { grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 20px; }
  .cform__label { font-size: 11px; line-height: 1.3; }
  .cform__input { height: 50px; margin-top: 4px; font-size: 16px; }
  textarea.cform__input { height: 140px; padding-top: 12px; }
  select.cform__input { background-size: 12px auto; }
  .cselect__caret { width: 12px; }
  .cselect__list { max-height: 320px; }
  .cselect__opt { padding: 13px 18px; font-size: 16px; }
  .cselect__opt.is-active { padding-left: 22px; }
  .cform__file { font-size: 14px; }
  .cform__file::file-selector-button { padding: 10px 16px; font-size: 11px; }
  .cform__consent { gap: 12px; font-size: 14px; }
  .cform__consent input { width: 18px; height: 18px; margin-top: 2px; }
  .cform__foot { flex-wrap: wrap; gap: 16px; }
  .cform__status { font-size: 15px; }

  /* "Stop by" band: the map above, the card over its darker lower half */
  .visit {
    display: block;
    height: auto;
    margin-top: 32px;
    padding: 62vw var(--gutter) 28px;
  }
  .visit__static > img { object-position: 68.23% 50%; }
  .visit__map::after {
    background:
      linear-gradient(to bottom, rgba(23, 21, 20, 0.1) 0%, rgba(23, 21, 20, 0) 30%, rgba(23, 21, 20, 0.75) 62%, rgba(23, 21, 20, 0.95) 100%);
  }
  .visit__pin i { left: -8px; top: -8px; width: 16px; height: 16px; }
  .visit__pin b { left: 18px; top: -18px; height: 36px; gap: 8px; padding: 0 14px 0 10px; border-radius: 18px; font-size: 11px; }
  .visit__pin b img { width: 18px; }
  .visit__place { font-size: 10px; }
  .visit__card { width: auto; max-width: 560px; margin-left: 0; }
  .visit__tag { left: 14px; bottom: 14px; padding: 8px 12px; font-size: 10px; }
  .visit__body { padding: 26px 22px 28px; }
  .visit__body .copy { margin-top: 14px; }
  .visit__addr { margin-top: 18px; font-size: 16px; }
  .visit__actions { gap: 18px; margin-top: 24px; }
  .visit__phone { font-size: 15px; }
  .visit__zoom { display: none; }
  .visit__credit { top: 12px; right: var(--gutter); bottom: auto; font-size: 10px; }

  /* ---------- Our Work ---------- */
  .work-browse { padding: 56px var(--gutter) 48px; }
  .work-filter { gap: 8px; margin-top: 26px; }
  .work-filter__btn { height: 40px; gap: 8px; padding: 0 16px; font-size: 11px; }
  .work-grid { grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
  .work-card__img { padding: 14px 14px 52px; }
  .work-card__tag.btn { left: 12px; bottom: 12px; height: 32px; min-height: 0; padding: 0 12px; font-size: 10px; white-space: nowrap; }
  .work-card::after { top: 12px; right: 12px; width: 34px; height: 34px; opacity: 1; transform: none; }

  /* ---------- Insights list ---------- */
  .insights { padding: 48px var(--gutter) 40px; }
  .insight { grid-template-columns: 1fr; row-gap: 0; padding: 30px 0 34px; }
  .insight__meta { grid-row: auto; display: flex; flex-wrap: wrap; gap: 4px 16px; padding-top: 0; font-size: 11px; }
  .insight__title { margin-top: 14px; }
  .insight__text { margin-top: 12px; }
  .insight__more { margin-top: 16px; font-size: 15px; }
}

/* Phones: one column for the remaining grids */
@media (max-width: 767px) {
  .ir-feat__grid,
  .ir-points,
  .ir-points--3,
  .ir-options__list,
  .ir-tiles--text,
  .ir-steps,
  .ir-price__cards,
  .ir-numbered,
  .work-grid { grid-template-columns: 1fr; }
  .ir-checks { grid-template-columns: 1fr; }
  .cform { grid-template-columns: 1fr; }
  .ir-options__list { row-gap: 36px; }
  .ir-intro { text-align: left; }
  .ir-intro .h2,
  .ir-intro .copy { margin-left: 0; }
  .ir-closer { text-align: left; }
  .ir-closer .h2,
  .ir-closer .copy { margin-left: 0; }
  .ir-closer .btn-row { justify-content: flex-start; }
  .ir-price { text-align: left; }
  .ir-price__head .copy,
  .ir-price__note { margin-left: 0; }
  .visit { padding-top: 86vw; }
}