/* ==========================================================================
   GILLMAN & SOAME  —  the one stylesheet for the whole site
   --------------------------------------------------------------------------
   PART 1 (just below) is the bit you are most likely to change: colours,
   font, spacing. Change a value there and every page updates.

   PART 2 onwards is the layout of each kind of block. You shouldn't need to
   touch it, but each block is labelled so it can be found.
   ========================================================================== */


/* ==========================================================================
   PART 1 · BRAND SETTINGS  —  change these freely
   ========================================================================== */
:root {
  /* Colours */
  --gs-primary:   #293550;   /* navy               · headings, buttons, nav text        */
  --gs-secondary: #d0d9eb;   /* pale blue          · contact section background         */
  --gs-accent:    #b7afa2;   /* warm grey          · form field borders                 */
  --gs-warm:      #d1ccc1;   /* pastel grey orange · hero accent word, hover fills      */
  --gs-crimson:   #231e1f;   /* dark grey crimson  · photo overlays                     */
  --gs-stone:     #e8e6df;   /* stone              · alternating section background     */
  --gs-dark:      #1b2439;   /* deep navy          · footer, button hover               */
  --gs-body:      #555555;   /* body copy on light backgrounds                          */
  --gs-white:     #ffffff;

  /* Font (loaded from Google Fonts in layout.html) */
  --gs-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --gs-weight-light:  200;
  --gs-weight-normal: 400;
  --gs-weight-bold:   600;

  /* Shape and spacing */
  --gs-radius:        2px;     /* corner rounding on buttons, cards, images      */
  --gs-section-pad:   80px;    /* space above and below each section (desktop)   */
  --gs-section-pad-m: 48px;    /* same, on phones                                */
  --gs-gap:           28px;    /* gap between side-by-side columns               */
  --gs-max-width:     1280px;  /* content never gets wider than this             */
}


/* ==========================================================================
   PART 2 · BASICS  —  text, links, buttons
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--gs-font);
  font-weight: var(--gs-weight-light);
  color: var(--gs-primary);
  background: var(--gs-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings scale smoothly between phone and desktop */
h1, h2, h3, h4 {
  font-weight: var(--gs-weight-normal);
  margin: 0 0 16px;
  line-height: 1.25;
  color: inherit;
}
h1 { font-size: clamp(22px, 4.2vw, 34px); letter-spacing: .5px; }
h2 { font-size: clamp(20px, 3.2vw, 28px); }
h3 { font-size: clamp(17px, 2.2vw, 20px); }
h4 { font-size: clamp(15px, 1.8vw, 17px); }

p { line-height: 1.6; margin: 0 0 16px; color: var(--gs-body); }
p:last-child { margin-bottom: 0; }
ul, ol { line-height: 1.6; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, li { overflow-wrap: break-word; }

/* Buttons: <a class="gs-btn">. Add a second class for a variant. */
.gs-btn {
  display: inline-block;
  padding: 14px 32px;
  background: var(--gs-primary);
  color: var(--gs-white);
  font-weight: var(--gs-weight-normal);
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 1px solid var(--gs-primary);
  border-radius: var(--gs-radius);
  cursor: pointer;
  text-align: center;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.gs-btn:hover { background: var(--gs-dark); border-color: var(--gs-dark); color: var(--gs-white); }

.gs-btn--outline { background: transparent; color: var(--gs-primary); }
.gs-btn--outline:hover { background: var(--gs-primary); color: var(--gs-white); }

.gs-btn--light { background: var(--gs-white); color: var(--gs-primary); border-color: var(--gs-white); }
.gs-btn--light:hover { background: var(--gs-secondary); border-color: var(--gs-secondary); color: var(--gs-primary); }

.gs-btn--outline-light { background: transparent; border-color: var(--gs-white); color: var(--gs-white); }
.gs-btn--outline-light:hover { background: var(--gs-white); color: var(--gs-primary); }

/* Secondary button: white with a soft border, fills pastel grey orange on hover */
.gs-btn--warm { background: var(--gs-white); border-color: var(--gs-accent); color: var(--gs-primary); }
.gs-btn--warm:hover { background: var(--gs-warm); border-color: var(--gs-warm); color: var(--gs-primary); }

/* Intro section (#about) button hover → light grey blue */
#about .gs-btn:hover { background: var(--gs-secondary); border-color: var(--gs-secondary); color: var(--gs-primary); }
/* "A photography day" section: the primary (navy) button hovers to light grey blue */
#day .gs-btn:not(.gs-btn--warm):hover { background: var(--gs-secondary); border-color: var(--gs-secondary); color: var(--gs-primary); }

/* Reviews section (#reviews) button hover → stone */
#reviews .gs-btn--outline-light:hover { background: var(--gs-stone); border-color: var(--gs-stone); color: var(--gs-primary); }

/* Small underlined text link ("Learn More" on cards) */
.gs-link-more {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: var(--gs-weight-normal);
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* Text blocks: a button after a paragraph gets a little space above it */
.gs-text > .gs-btn { margin-top: 24px; }

/* A row of one or two buttons */
.gs-btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.gs-btn-row:empty { display: none; }
.gs-text > .gs-btn-row { margin-top: 24px; }


/* ==========================================================================
   PART 3 · SECTIONS AND COLUMNS  —  the page skeleton
   --------------------------------------------------------------------------
   <section class="gs-section gs-section--stone">      full-width band
     <div class="gs-container gs-cols gs-cols--2">     centred, 2 columns
   ========================================================================== */
.gs-section { padding: var(--gs-section-pad) 40px; }

.gs-section--white { background: var(--gs-white); }
.gs-section--stone { background: var(--gs-stone); }
.gs-section--blue  { background: var(--gs-secondary); }
/* Navy box (#293550): all text white, except the warm-stone heading accent. */
.gs-section--navy  { background: var(--gs-primary); color: var(--gs-white); }
.gs-section--navy p,
.gs-section--navy li,
.gs-section--navy h2,
.gs-section--navy footer { color: var(--gs-white); }
.gs-section--navy .gs-accent { color: var(--gs-warm); }

.gs-container { max-width: var(--gs-max-width); margin: 0 auto; }
.gs-container--narrow { max-width: 820px; }

.gs-cols { display: grid; gap: var(--gs-gap); align-items: start; }
.gs-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gs-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gs-cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gs-cols--middle { align-items: center; }
.gs-cols--gap-lg { gap: 72px; }   /* wide, consistent gap between the two columns */

.gs-section-heading { text-align: center; margin-bottom: 48px; }
.gs-section-heading h2 { margin-bottom: 0; }
.gs-section-heading p { margin-top: 14px; max-width: 62ch; margin-left: auto; margin-right: auto; }

/* Columns step down gently: 4 → 2 → 1, and the two-column rows stay
   side-by-side down to ~760px. */
@media (max-width: 1024px) {
  .gs-cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .gs-section { padding: var(--gs-section-pad-m) 20px; }
  .gs-cols--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gs-cols { gap: 32px; }
  .gs-cols--gap-lg { gap: 44px; }
  .gs-section-heading { margin-bottom: 28px; }
  .gs-text > .gs-btn { margin-top: 18px; }
}
@media (max-width: 760px) {
  .gs-cols--2 { grid-template-columns: 1fr; }
  .gs-cols--gap-lg { gap: 36px; }
}
@media (max-width: 560px) {
  .gs-cols--3, .gs-cols--4 { grid-template-columns: 1fr; }
}


/* ==========================================================================
   PART 4 · HEADER  —  logo, nav with dropdowns, mobile slide-in menu
   ========================================================================== */
.gs-header {
  background: var(--gs-white);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}
.gs-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 40px;
  max-width: var(--gs-max-width);
  margin: 0 auto;
}

/* HubSpot wraps the logo module in a <div>; .gs-header__brand is the flex item. */
.gs-header__brand { flex: 0 0 auto; }
.gs-header__logo { display: block; flex: 0 0 auto; }
.gs-header__logo img { display: block; width: auto; height: 40px; }
.gs-header__logo-text {
  font-weight: var(--gs-weight-bold);
  font-size: 22px;
  color: var(--gs-primary);
  white-space: nowrap;
}

/* Hamburger (hidden on desktop) */
.gs-header__toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  flex-direction: column;
  gap: 5px;
}
.gs-header__toggle span {
  display: block; width: 26px; height: 2px;
  background: var(--gs-primary);
  transition: transform .2s ease, opacity .2s ease;
}
.gs-header__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.gs-header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.gs-header__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Desktop nav */
.gs-nav__list { list-style: none; display: flex; align-items: center; gap: 36px; margin: 0; padding: 0; }
.gs-nav__item { position: relative; }
.gs-nav__link {
  display: block;
  padding: 10px 0;
  font-size: 14px;
  font-weight: var(--gs-weight-normal);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--gs-primary);
  white-space: nowrap;
}
.gs-nav__arrow { display: none; font-size: 11px; transition: transform .2s ease; }

.gs-nav__sub {
  list-style: none;
  position: absolute;
  top: 100%; left: 0;
  background: var(--gs-white);
  min-width: 220px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .1);
  padding: 10px 0; margin: 0;
  opacity: 0; visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.gs-nav__item--parent:hover > .gs-nav__sub,
.gs-nav__item--parent:focus-within > .gs-nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }
.gs-nav__sub > li > a { display: block; padding: 10px 22px; font-size: 13px; color: var(--gs-primary); }
.gs-nav__sub > li > a:hover { background: var(--gs-stone); }

.gs-nav__cta {
  display: inline-block;
  background: var(--gs-primary);
  color: var(--gs-white);
  padding: 10px 24px;
  border-radius: var(--gs-radius);
  font-size: 14px;
  font-weight: var(--gs-weight-normal);
  text-transform: uppercase;
  letter-spacing: .5px;
  transition: background .2s ease;
  white-space: nowrap;
}
.gs-nav__cta:hover { background: var(--gs-secondary); color: var(--gs-primary); }

.gs-nav-overlay { display: none; }

@media (max-width: 1100px) and (min-width: 901px) {
  .gs-nav__list { gap: 22px; }
  .gs-nav__link, .gs-nav__cta { font-size: 13px; }
  .gs-header__inner { padding: 16px 24px; }
}

/* Mobile: slide-in panel with tap-to-open submenus */
@media (max-width: 900px) {
  .gs-header__inner { padding: 14px 20px; }
  .gs-header__logo img { height: 36px; }
  .gs-header__toggle { display: flex; }

  .gs-nav {
    position: fixed; top: 0; right: -100%;
    width: 82%; max-width: 340px; height: 100%;
    background: var(--gs-white);
    box-shadow: -6px 0 24px rgba(0, 0, 0, .12);
    padding: 90px 0 40px;
    overflow-y: auto;
    transition: right .25s ease;
    z-index: 99;
  }
  .gs-nav.is-open { right: 0; }

  .gs-nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: 0 24px; }
  .gs-nav__item { border-bottom: 1px solid var(--gs-stone); }
  .gs-nav__item--cta { border-bottom: none; }
  .gs-nav__link { padding: 16px 0; display: flex; justify-content: space-between; align-items: center; }

  .gs-nav__arrow { display: inline-block; }
  .gs-nav__item.is-open > .gs-nav__link .gs-nav__arrow { transform: rotate(180deg); }

  .gs-nav__sub {
    position: static; box-shadow: none;
    opacity: 1; visibility: visible; transform: none;
    max-height: 0; overflow: hidden; padding: 0;
    background: var(--gs-stone);
    transition: max-height .25s ease, padding .25s ease;
  }
  .gs-nav__item.is-open > .gs-nav__sub { max-height: 480px; padding: 6px 0 12px; }
  .gs-nav__sub > li > a { padding: 12px 16px; }

  .gs-nav__cta { margin-top: 20px; text-align: center; display: block; }

  .gs-nav-overlay { display: block; position: fixed; inset: 0; background: rgba(41, 53, 80, .4); z-index: 98; }
  .gs-nav-overlay[hidden] { display: none; }
  body.gs-nav-locked { overflow: hidden; }
}


/* ==========================================================================
   PART 5 · FOOTER  —  brand + paragraph + social, link columns, then a bar
   ========================================================================== */
.gs-footer { background: var(--gs-dark); color: var(--gs-white); }
.gs-footer__inner {
  max-width: var(--gs-max-width);
  margin: 0 auto;
  padding: 64px 40px;
}

.gs-footer__brand { max-width: 460px; margin-bottom: 52px; }
.gs-footer__logo { margin-bottom: 20px; }
.gs-footer__logo .gs-header__logo-text { color: var(--gs-white); }
.gs-footer__logo img { height: 44px; }
.gs-footer p { color: rgba(255, 255, 255, .72); font-size: 14px; }

.gs-footer__social { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.gs-footer__social a {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, transform .2s ease;
}
.gs-footer__social a:hover { background: rgba(255, 255, 255, .2); transform: translateY(-2px); }
.gs-footer__social svg { width: 15px; height: 15px; fill: var(--gs-white); }

.gs-footer__nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 36px 24px;
}
.gs-footer__heading {
  font-family: var(--gs-font);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--gs-warm);
  margin: 0 0 18px;
}
.gs-footer__col ul { list-style: none; margin: 0; padding: 0; }
.gs-footer__col li { margin-bottom: 12px; }
.gs-footer__col a { font-size: 14px; color: var(--gs-white); text-decoration: none; }
.gs-footer__col a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(255, 255, 255, .45);
  text-underline-offset: 3px;
}

.gs-footer__bar { border-top: 1px solid rgba(255, 255, 255, .12); }
.gs-footer__bar p {
  max-width: var(--gs-max-width);
  margin: 0 auto;
  padding: 22px 40px;
  font-size: 12px;
  color: rgba(255, 255, 255, .55);
  text-align: center;
}

@media (max-width: 900px) {
  .gs-footer__inner { padding: 48px 20px; }
  .gs-footer__brand { max-width: none; margin-bottom: 40px; }
  .gs-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .gs-footer__bar p { padding: 20px; }
}


/* ==========================================================================
   PART 6 · HERO  —  full-width photo/video banner
   ========================================================================== */
.gs-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background: var(--gs-primary);
}
.gs-hero--full   { height: 88vh; min-height: 520px; }
.gs-hero--large  { height: 70vh; min-height: 440px; }
.gs-hero--medium { height: 52vh; min-height: 340px; }
.gs-hero--small  { height: 36vh; min-height: 240px; }
.gs-hero--middle { align-items: center; }

/* The picture and optional video sit inside .gs-hero__media. In HubSpot each is
   wrapped in an extra <div>, so these rules match by descendant, not by child. */
.gs-hero__media { position: absolute; inset: 0; z-index: 0; }
.gs-hero__media img, .gs-hero__media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.gs-hero__media video { z-index: 1; }

/* Dark gradient so white text stays readable over any photo */
.gs-hero__scrim {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to top, rgba(41, 53, 80, 1) 0%, rgba(41, 53, 80, .27) 35%, rgba(41, 53, 80, 0) 60%);
  opacity: .55;
}

.gs-hero__content {
  position: relative; z-index: 3;
  color: var(--gs-white);
  padding: 0 20px 56px;
  text-align: center;
  max-width: 900px;
}
.gs-hero--middle .gs-hero__content { padding-bottom: 20px; }

/* Small line above the headline */
.gs-hero__content .gs-hero__eyebrow {
  color: var(--gs-white);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: clamp(12px, 1.3vw, 14px);
  font-weight: var(--gs-weight-normal);
  margin: 0 0 18px;
}

/* Headline: Montserrat Bold, white, with the accent word in warm stone.
   Sizes: mobile 32-40px, tablet 36-48px, desktop 48-72px. */
.gs-hero__content h1 {
  font-family: var(--gs-font);
  font-weight: var(--gs-weight-normal);
  color: var(--gs-white);
  max-width: none;
  margin: 0 auto 28px;
  letter-spacing: .5px;
  line-height: 1.15;
  font-size: clamp(2rem, 1.4rem + 3vw, 2.5rem);
}
@media (min-width: 768px)  { .gs-hero__content h1 { font-size: clamp(2.25rem, 1rem + 3vw, 3rem); } }
@media (min-width: 1440px) { .gs-hero__content h1 { font-size: clamp(3rem, 0.5rem + 3vw, 4.5rem); } }

/* Compact hero: a shorter, panoramic banner proportioned for a large group
   photograph (about 36 x 20 inches, i.e. 9:5), with a headline tuned to sit on
   one line on desktop. Add "gs-hero--compact" to the hero <section>. */
.gs-hero.gs-hero--compact {
  width: 100%;
  height: clamp(340px, 40vw, 560px);
}
.gs-hero.gs-hero--compact .gs-hero__content { max-width: 1120px; }
.gs-hero.gs-hero--compact .gs-hero__content h1 {
  font-size: clamp(1.75rem, 1rem + 3vw, 3.1rem);
  letter-spacing: .3px;
}

/* Compact heroes (Schools, Universities) carry a still photo only, so the
   overlay does all the readability work. A Dark Grey Crimson (--gs-crimson,
   #231e1f) gradient, deepest at the foot where the headline sits and easing
   off towards the top. */
.gs-hero--compact .gs-hero__scrim {
  background: linear-gradient(to top,
    rgba(35, 30, 31, .80) 0%,
    rgba(35, 30, 31, .55) 40%,
    rgba(35, 30, 31, .25) 100%);
  opacity: 1;
}

.gs-accent { color: var(--gs-warm); }   /* the warm-stone word in a heading */
#about .gs-accent,
#day .gs-accent,
#contact .gs-accent { color: var(--gs-accent); }   /* headings on light sections use warm grey */

/* Every section heading sits the same 14px above its description */
#about .gs-text > h2,
#about .gs-lead > h2,
#day .gs-text > h2 { margin-bottom: 14px; }
#services .gs-section-heading > p:first-of-type { margin-top: 14px; }

.gs-hero__content h2 {
  color: var(--gs-white);
  font-size: clamp(17px, 2.6vw, 24px);
  max-width: 600px;
  margin: 0 auto 24px;
  letter-spacing: .5px;
}
.gs-hero__content p { color: var(--gs-white); margin-bottom: 24px; font-size: clamp(14px, 1.6vw, 16px); }

/* Hero button hover → warm stone */
.gs-hero .gs-btn--light:hover {
  background: var(--gs-warm);
  border-color: var(--gs-warm);
  color: var(--gs-primary);
}

@media (max-width: 900px) {
  .gs-hero--full   { height: 70vh; min-height: 420px; }
  .gs-hero--large  { height: 60vh; min-height: 380px; }
  .gs-hero--medium { height: 46vh; min-height: 300px; }
  .gs-hero--small  { height: 32vh; min-height: 220px; }
  .gs-hero__content { padding: 0 16px 36px; }
  .gs-hero__video { display: none; }   /* phones get the still photo, saves data */
}
@media (prefers-reduced-motion: reduce) { .gs-hero__video { display: none; } }


/* ==========================================================================
   PART 7 · IMAGE GRID  —  <div class="gs-image-grid gs-image-grid--2"> of <img>s
   ========================================================================== */
.gs-image-grid { display: grid; gap: 16px; width: 100%; }
.gs-image-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gs-image-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gs-image-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gs-image-grid__cell { min-width: 0; }
.gs-image-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;   /* gentle landscape rectangle, not square */
  object-fit: cover;
  border-radius: var(--gs-radius);
  background: var(--gs-stone);
}
@media (max-width: 900px) {
  .gs-image-grid { gap: 10px; }
  .gs-image-grid--3, .gs-image-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Single landscape photo beside a text column (Schools "A photography day").
   HubSpot wraps the image module in a <div>, so match by descendant. */
.gs-day__media { min-width: 0; }
.gs-day__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--gs-radius);
  background: var(--gs-stone);
}


/* ==========================================================================
   PART 8 · CARDS  —  <article class="gs-card"> image, title, text, link
   Cards in the same row match each other's height; the link sits at the bottom.
   ========================================================================== */
.gs-cols > .gs-card { height: 100%; }
.gs-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--gs-white);
  border-radius: var(--gs-radius);
}

/* Desktop only: cards lift and grow a touch on hover */
@media (hover: hover) and (min-width: 901px) {
  .gs-card { transition: transform .25s ease, box-shadow .25s ease; }
  .gs-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 18px 34px rgba(27, 36, 57, .15); }
}
.gs-card__media { margin-bottom: 20px; }
.gs-card__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--gs-radius);
  background: var(--gs-stone);
}
.gs-card h3 { font-size: clamp(16px, 1.6vw, 18px); margin-bottom: 10px; }
.gs-card p { font-size: 14px; flex: 1 1 auto; }
.gs-card .gs-link-more { align-self: flex-start; }

@media (max-width: 900px) {
  .gs-card { padding: 18px; }
  .gs-card__media { margin-bottom: 14px; }
}
/* Once cards go full width, a square photo is too tall — use a landscape crop */
@media (max-width: 560px) {
  .gs-card__img { aspect-ratio: 16 / 10; }
}


/* ==========================================================================
   PART 8b · FOCUS LIST  —  <div class="gs-focus-list"> of numbered points
   A brochure-style numbered list (1, 2, 3) with a bold title and a short
   paragraph. Used beside "Our Focus" on the Schools page. Numbers count
   themselves, so adding or removing a point renumbers the rest.
   ========================================================================== */
.gs-focus-list { counter-reset: gs-focus; }
.gs-focus-list__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  padding: 22px 0;
  border-top: 1px solid var(--gs-stone);
}
.gs-focus-list__item:first-child { padding-top: 0; border-top: 0; }
.gs-focus-list__item:last-child { padding-bottom: 0; }
.gs-focus-list__item::before {
  counter-increment: gs-focus;
  content: counter(gs-focus) ".";
  font-family: var(--gs-font);
  font-weight: var(--gs-weight-normal);
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.1;
  color: var(--gs-warm);
}
.gs-focus-list h3 {
  font-size: clamp(15px, 1.5vw, 17px);
  font-weight: var(--gs-weight-bold);
  margin-bottom: 6px;
  color: var(--gs-primary);
}
.gs-focus-list p { font-size: 14px; margin: 0; }


/* ==========================================================================
   PART 8c · EXPANDING PANELS  —  <div class="gs-panels"> of photo panels
   Each .gs-panels__item is a photo tile. Click anywhere on a closed tile to
   open it: the panel widens and its description + tag list slide up over the
   photo, while the others close. site.js drives the "is-open" class and the
   whole-tile click. On phones the panels stack into a photo accordion.
   ========================================================================== */
/* This section's intro: full width, and its two lines sit close like one block */
#services .gs-section-heading p { max-width: none; margin: 0; }

.gs-panels { display: flex; gap: 12px; }

.gs-panels__item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 460px;
  overflow: hidden;
  border-radius: var(--gs-radius);
  background: var(--gs-primary);
  cursor: pointer;
  transition: flex-grow .45s ease;
}
.gs-panels__item.is-open { flex-grow: 2.8; cursor: default; }

/* HubSpot wraps the image module in an extra <div>, so match by descendant */
.gs-panels__media { position: absolute; inset: 0; z-index: 0; }
.gs-panels__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.gs-panels__scrim {
  position: absolute; inset: 0; z-index: 1;
  /* dark grey crimson (--gs-crimson #231e1f): a light wash for mood; the text
     gets its own darker bed from .gs-panels__content below */
  background: linear-gradient(to top, rgba(35, 30, 31, .4) 0%, rgba(35, 30, 31, .12) 45%, rgba(35, 30, 31, 0) 80%);
}

/* Closed tile: photo lifts and title warms on hover, so it reads as clickable */
@media (hover: hover) and (min-width: 769px) {
  .gs-panels__item:not(.is-open):hover .gs-panels__media img { transform: scale(1.05); }
  .gs-panels__item:not(.is-open):hover .gs-panels__toggle { color: var(--gs-warm); }
}

/* The title + description live in one block anchored to the bottom. Closed, only
   the title (bottom 84px) shows; opening slides the whole block up so the
   description rises into view. The panel box itself never changes height. */
.gs-panels__content {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  background: linear-gradient(to top, rgba(35, 30, 31, .96) 0%, rgba(35, 30, 31, .93) 34%, rgba(35, 30, 31, .5) 100%);
  transform: translateY(calc(100% - 84px));
  transition: transform .5s ease;
}
.gs-panels__item.is-open .gs-panels__content { transform: translateY(0); }

.gs-panels__title { margin: 0; }   /* the <h3> wrapping the toggle button */
.gs-panels__toggle {
  display: flex; align-items: flex-end;
  width: 100%; height: 84px;
  padding: 0 20px 16px;
  background: none; border: 0;
  color: var(--gs-white);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color .25s ease;
}
.gs-panels__label {
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: var(--gs-weight-bold);
  letter-spacing: .3px;
  line-height: 1.25;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}

.gs-panels__body {
  padding: 0 20px 22px;
  color: var(--gs-white);
  opacity: 0;
  transition: opacity .3s ease;
}
.gs-panels__item.is-open .gs-panels__body { opacity: 1; transition: opacity .35s ease .12s; }
.gs-panels__body p { color: rgba(255, 255, 255, .94); font-size: 14px; margin-bottom: 14px; }
.gs-panels__body ul {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.gs-panels__body li {
  font-size: 12px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--gs-white);
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, .42);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
/* Hover: fills with pastel grey orange (--gs-warm), text goes navy. Works
   whether the tag is plain text or a link ("- [Label](/address)" in the words
   file makes it a link). */
@media (hover: hover) {
  .gs-panels__body li:hover {
    background: var(--gs-warm);
    border-color: var(--gs-warm);
    color: var(--gs-primary);
    cursor: pointer;
  }
}
.gs-panels__body li a { color: inherit; display: block; margin: -7px -12px; padding: 7px 12px; }

@media (max-width: 768px) {
  .gs-panels { flex-direction: column; gap: 10px; }
  .gs-panels__item { flex: none; height: auto; min-height: 76px; transition: none; }
  .gs-panels__content { position: relative; transform: none; }
  .gs-panels__toggle { height: auto; min-height: 76px; padding: 18px 20px; align-items: center; }
  .gs-panels__body { opacity: 1; }
  .gs-panels__item:not(.is-open) .gs-panels__body { display: none; }
  .gs-panels__item:not(.is-open) .gs-panels__media img { filter: brightness(.7); }
}


/* ==========================================================================
   PART 8d1 · OCCASION ROWS  —  <div class="gs-occasions"> of alternating
   photo / text rows. Used for the Universities "Every Occasion" section
   (the Schools page uses the expanding panels above instead).
   ========================================================================== */
.gs-occasions { display: grid; gap: 36px; }
.gs-occasions__row {
  display: grid;
  grid-template-columns: minmax(0, 560px) 1fr;
  gap: 56px;
  align-items: center;
}
.gs-occasions__row:nth-child(even) { grid-template-columns: 1fr minmax(0, 560px); }
.gs-occasions__row:nth-child(even) .gs-occasions__text { order: 1; }
.gs-occasions__row:nth-child(even) .gs-occasions__media { order: 2; }

/* One landscape photo, or two upright photos that fill the same rectangle when
   a row supplies "image2". */
.gs-occasions__media {
  min-width: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  aspect-ratio: 4 / 3;
}
.gs-occasions__media > * { min-width: 0; height: 100%; }
.gs-occasions__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--gs-radius);
  background: var(--gs-stone);
}
.gs-occasions__text h3 { font-size: clamp(18px, 2vw, 22px); margin-bottom: 14px; }
.gs-occasions__text p { color: var(--gs-body); font-size: 15px; margin-bottom: 18px; }
/* Secondary buttons: Grey Orange outline, no fill; fills Grey Orange on hover */
.gs-occasions__text ul {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.gs-occasions__text li {
  font-size: 11px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--gs-primary);
  border: 1px solid var(--gs-accent);
  transition: background .2s ease;
}
.gs-occasions__text li,
.gs-occasions__text li a { display: block; padding: 8px 13px; color: inherit; }
.gs-occasions__text li:has(a) { padding: 0; }
@media (hover: hover) {
  .gs-occasions__text li:hover { background: var(--gs-accent); cursor: pointer; }
}
@media (max-width: 760px) {
  .gs-occasions { gap: 28px; }
  .gs-occasions__row,
  .gs-occasions__row:nth-child(even) { grid-template-columns: 1fr; gap: 16px; }
  .gs-occasions__row:nth-child(even) .gs-occasions__media { order: 0; }
}


/* ==========================================================================
   PART 8d2 · UNIVERSITIES-ONLY SECTION LAYOUTS
   The Universities page reuses the same words as Schools but presents three
   sections differently so the two pages don't look identical:
     .gs-lead + .gs-focus-band  — "Our Place in University Life"
     .gs-feature                — "A Graduation Day"
     .gs-reviews--solo          — the quote section
   ========================================================================== */

/* Lead paragraph + a full-width band of numbered points under one rule */
.gs-lead { max-width: 680px; }
.gs-lead > .gs-btn { margin-top: 22px; }

.gs-focus-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 48px;
  margin-top: 48px;
  counter-reset: gs-fb;
}
.gs-focus-band__item {
  border-top: 1px solid var(--gs-accent);
  padding-top: 20px;
}
.gs-focus-band__item::before {
  counter-increment: gs-fb;
  content: counter(gs-fb, decimal-leading-zero);
  display: block;
  font-size: 30px;
  font-weight: var(--gs-weight-light);
  color: var(--gs-accent);
  line-height: 1;
  margin-bottom: 16px;
}
.gs-focus-band__item h3 { font-size: clamp(16px, 1.7vw, 19px); margin-bottom: 10px; }
.gs-focus-band__item p { font-size: 14px; color: var(--gs-body); margin: 0; }

/* Wide photo, then the copy told across two columns beneath it */
.gs-feature__media img {
  width: 100%;
  aspect-ratio: 16 / 7;
  max-height: 460px;
  object-fit: cover;
  border-radius: var(--gs-radius);
  background: var(--gs-stone);
}
.gs-feature__body { max-width: 640px; margin: 40px auto 0; text-align: center; }
.gs-feature__body h2 { margin-bottom: 14px; }
.gs-feature__prose { margin-bottom: 26px; text-align: left; }
.gs-feature__prose p { font-size: 14px; }
.gs-feature__body > .gs-btn-row { justify-content: center; }

@media (max-width: 760px) {
  .gs-focus-band { grid-template-columns: 1fr; gap: 4px; margin-top: 32px; }
  .gs-focus-band__item { padding-top: 18px; }
  .gs-feature__body { margin-top: 28px; }
  .gs-feature__prose { columns: 1; }
}


/* ==========================================================================
   PART 8d3 · PHOTOGRAPHY SERVICE PAGES  —  gs-page-head + gs-showcase
   Plain H1 (no hero photo), then the topics as ONE consistent module (photo +
   heading + text + a hairline list). Shown as tabs (one at a time) or, on
   Complete School Groups, stacked beside a sticky index. Every panel is in the
   markup, so search engines and AI answer engines read them all.
   ========================================================================== */

.gs-page-head { background: var(--gs-stone); padding: 60px 40px 44px; }
.gs-page-head__inner { max-width: 1040px; margin: 0 auto; }
.gs-page-head h1 { font-size: clamp(1.9rem, 1.1rem + 2.6vw, 2.8rem); letter-spacing: .3px; margin-bottom: 16px; }
.gs-page-head p { font-size: clamp(15px, 1.7vw, 17px); max-width: 62ch; margin: 0; }

/* Complete School Groups banner: a wide 36:20 photograph of a real
   whole-school group shown in full, then the page title + intro on a stone
   band. Deliberately unlike the tall text-over-photo heroes on other pages. */
.gs-groupbanner { background: var(--gs-stone); }
.gs-groupbanner__media img {
  width: 100%; aspect-ratio: 36 / 20; max-height: 78vh;
  object-fit: cover; display: block;
}
.gs-groupbanner__inner { max-width: 1040px; margin: 0 auto; padding: 32px 40px 44px; }
.gs-groupbanner__inner h1 {
  font-size: clamp(1.9rem, 1.1rem + 2.6vw, 2.8rem); letter-spacing: .3px; margin-bottom: 16px;
}
.gs-groupbanner__inner p { font-size: clamp(15px, 1.7vw, 17px); max-width: 62ch; margin: 0; }
@media (max-width: 768px) {
  .gs-groupbanner__inner { padding: 24px 20px 32px; }
}

.gs-showcase { max-width: 1040px; margin: 0 auto; scroll-margin-top: 96px; }
.gs-showcase + .gs-showcase { margin-top: 60px; }

/* Tab strip */
.gs-showcase__nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 44px; }
.gs-showcase__group-label {
  width: 100%; font-family: var(--gs-font); font-weight: var(--gs-weight-normal);
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--gs-primary); margin: 16px 0 2px;
}
.gs-showcase__group-label:first-child { margin-top: 0; }
.gs-showcase__tab {
  background: none; border: 1px solid var(--gs-accent);
  padding: 9px 14px; font-family: var(--gs-font);
  font-size: 11px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--gs-primary); cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.gs-showcase__tab:hover { background: var(--gs-stone); }
.gs-showcase__tab.is-active { background: var(--gs-primary); color: var(--gs-white); border-color: var(--gs-primary); }

/* The one section module */
.gs-showcase__panel {
  display: grid; grid-template-columns: minmax(0, 440px) 1fr;
  gap: 52px; align-items: start; scroll-margin-top: 120px;
}
.gs-showcase__panel[hidden] { display: none; }
.gs-showcase__media img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--gs-radius); background: var(--gs-stone);
}
/* Upright crop for portrait topics (e.g. Portraiture, Graduation, Matriculation) */
.gs-showcase__media--portrait img { aspect-ratio: 3 / 4; }
.gs-showcase__text h2 { font-size: clamp(1.4rem, 1rem + 1.7vw, 2rem); margin-bottom: 14px; }
.gs-showcase__text p { color: var(--gs-body); font-size: 14px; margin-bottom: 14px; }
.gs-showcase__text > p:first-of-type { font-size: clamp(15px, 1.7vw, 17px); color: var(--gs-primary); }
.gs-showcase__text ul { list-style: none; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--gs-accent); }
.gs-showcase__text li { font-size: 13px; color: var(--gs-body); padding: 9px 0; border-bottom: 1px solid var(--gs-stone); }
.gs-showcase__text .gs-showcase__note { margin-top: 16px; font-style: italic; font-size: 13px; color: var(--gs-primary); }
.gs-showcase__text > .gs-btn { margin-top: 22px; }

/* Tabbed: one panel at a time, gentle fade */
.gs-showcase.is-tabbed .gs-showcase__panel { animation: gs-showcase-in .4s ease; }
@keyframes gs-showcase-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Not tabbed: panels stack, a rule between them */
.gs-showcase:not(.is-tabbed) .gs-showcase__panel + .gs-showcase__panel {
  margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--gs-stone);
}

/* Indexed (Complete School Groups): a sticky list of names beside the sections */
.gs-showcase--indexed { display: grid; grid-template-columns: 190px 1fr; gap: 48px; align-items: start; }
.gs-showcase--indexed .gs-showcase__panel { grid-template-columns: minmax(0, 320px) 1fr; gap: 40px; }
.gs-showcase__list { min-width: 0; }
.gs-showcase__index { position: sticky; top: 100px; display: flex; flex-direction: column; }
.gs-showcase__index a {
  font-size: 13px; line-height: 1.35; color: var(--gs-body);
  padding: 9px 0 9px 16px; border-left: 2px solid var(--gs-stone);
  transition: color .2s ease, border-color .2s ease;
}
.gs-showcase__index a:hover { color: var(--gs-primary); }
.gs-showcase__index a.is-current { color: var(--gs-primary); font-weight: var(--gs-weight-bold); border-left-color: var(--gs-primary); }

@media (max-width: 900px) {
  .gs-showcase--indexed { grid-template-columns: 1fr; gap: 22px; }
  .gs-showcase__index { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .gs-showcase__index a {
    border-left: 1px solid var(--gs-accent); padding: 8px 13px;
    font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  }
  .gs-showcase__index a.is-current { background: var(--gs-primary); color: var(--gs-white); border-color: var(--gs-primary); }
}
@media (max-width: 760px) {
  .gs-page-head { padding: 44px 20px 32px; }
  .gs-showcase__nav { margin-bottom: 28px; }
  .gs-showcase__panel,
  .gs-showcase--indexed .gs-showcase__panel { grid-template-columns: 1fr; gap: 20px; }
  .gs-showcase__media { max-width: 420px; }
}

/* Closing "we can accommodate most ideas" block */
.gs-cando { max-width: 700px; margin: 0 auto; text-align: center; }
.gs-cando h2 { margin-bottom: 12px; }
.gs-cando p { color: var(--gs-body); margin-bottom: 22px; }

/* Social Media Content — closing feature on Marketing Photography */
.gs-social-offer { max-width: 1000px; margin: 0 auto; }
.gs-social-offer h2 { color: var(--gs-white); font-size: clamp(1.4rem, 1rem + 1.8vw, 2rem); margin-bottom: 16px; }
.gs-social-offer p { color: rgba(255, 255, 255, .85); font-size: 15px; margin-bottom: 12px; max-width: 62ch; }
.gs-social-offer strong { color: var(--gs-warm); font-weight: var(--gs-weight-bold); }
.gs-social-offer .gs-btn { margin-top: 14px; }


/* ==========================================================================
   PART 8d · FAQ  —  <div class="gs-faq"> of <details class="gs-faq__item">
   A plain, quiet accordion. No JS: <details> opens natively and its answer
   stays in the page markup whether open or closed.
   ========================================================================== */
.gs-faq__item { border-top: 1px solid var(--gs-stone); }
.gs-faq__item:last-child { border-bottom: 1px solid var(--gs-stone); }

.gs-faq__item summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 20px 44px 20px 0;
  font-weight: var(--gs-weight-bold);
  font-size: clamp(15px, 1.6vw, 17px);
  color: var(--gs-primary);
}
.gs-faq__item summary::-webkit-details-marker { display: none; }
.gs-faq__item summary::after {
  content: "";
  position: absolute; right: 8px; top: 26px;
  width: 9px; height: 9px;
  border-right: 2px solid var(--gs-accent);
  border-bottom: 2px solid var(--gs-accent);
  transform: rotate(45deg);
  transition: transform .25s ease;
}
.gs-faq__item[open] summary::after { transform: rotate(225deg); top: 30px; }
.gs-faq__item summary:hover { color: var(--gs-body); }

.gs-faq__a { padding: 0 44px 22px 0; }
.gs-faq__a p { color: var(--gs-body); font-size: 14px; margin-bottom: 12px; }
.gs-faq__a ul { margin: 0; padding-left: 20px; }
.gs-faq__a li { color: var(--gs-body); font-size: 14px; margin-bottom: 6px; }


/* ==========================================================================
   PART 9 · REVIEWS SLIDER  —  cross-fading quotes with arrow buttons
   ========================================================================== */
.gs-reviews {
  position: relative;
  background: rgba(255, 255, 255, .06);
  padding: 40px;
  border-radius: var(--gs-radius);
}
.gs-reviews__viewport { position: relative; min-height: 150px; }

.gs-reviews__slide {
  margin: 0;
  opacity: 0; visibility: hidden;
  position: absolute; inset: 0;
  transition: opacity .35s ease, visibility .35s ease;
}
.gs-reviews__slide.is-active { opacity: 1; visibility: visible; position: relative; }

.gs-reviews__slide p {
  font-size: clamp(15px, 1.8vw, 18px);
  font-style: italic;
  line-height: 1.6;
  color: var(--gs-white);
  margin-bottom: 0;
}
.gs-reviews__slide footer {
  margin-top: 20px;
  font-weight: var(--gs-weight-normal);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gs-white);
}
.gs-reviews__slide footer::before { content: "\2014\00a0"; }

.gs-reviews__nav { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.gs-reviews__btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, .4);
  width: 36px; height: 36px; min-width: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-family: var(--gs-font);
  font-size: 15px;
  line-height: 1;
  color: inherit;
  transition: background .2s ease;
}
.gs-reviews__btn:hover { background: rgba(255, 255, 255, .15); }

@media (max-width: 900px) {
  .gs-reviews { padding: 24px; }
  .gs-reviews__viewport { min-height: 170px; }
  .gs-reviews__btn { width: 44px; height: 44px; min-width: 44px; }
}
@media (prefers-reduced-motion: reduce) { .gs-reviews__slide { transition: none; } }


/* ==========================================================================
   PART 10 · CONTACT  —  logo, blurb, social icons, and the HubSpot form
   ========================================================================== */
.gs-contact__logo { font-weight: var(--gs-weight-bold); font-size: 22px; margin-bottom: 20px; }
.gs-contact__logo img { height: 38px; width: auto; }

/* Landscape image above the "We are here to help" heading */
.gs-contact__media { margin-bottom: 28px; }
.gs-contact__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--gs-radius);
  background: var(--gs-stone);
}

.gs-contact__social { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.gs-contact__social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--gs-primary);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, transform .2s ease;
}
.gs-contact__social a:hover { background: var(--gs-dark); transform: translateY(-2px); }
.gs-contact__social svg { width: 16px; height: 16px; fill: var(--gs-white); }

@media (max-width: 900px) {
  .gs-contact__social a { width: 44px; height: 44px; }
  .gs-contact__social svg { width: 18px; height: 18px; }
}

/* Placeholder box shown until the HubSpot form embed code is pasted in */
.gs-form-placeholder {
  border: 2px dashed var(--gs-accent);
  border-radius: var(--gs-radius);
  padding: 40px 24px;
  text-align: center;
  font-size: 14px;
  color: var(--gs-body);
  line-height: 1.6;
}
.gs-form-placeholder strong { display: block; font-weight: var(--gs-weight-normal); color: var(--gs-primary); margin-bottom: 6px; }

/* Embedded HubSpot form — no frame around the form, no border around the
   fields. Fields stay readable on the pale-blue section by sitting on white.
   (The newer HubSpot form uses .hsfc-* class names; older embeds use .hs-form.
   Anything the form sets itself is overridden in HubSpot: Marketing > Forms >
   the form > Style.) */
.hs-form-frame,
.hs-form-frame iframe,
.hs-form-frame form,
.hsfc-Form,
.hsfc-Step,
.hsfc-FieldSet,
.hsfc-PropertyFieldset {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0;
}

/* HubSpot's embedded form, restyled to match. These class names are HubSpot's. */
.hs-form { display: flex; flex-direction: column; gap: 14px; }
.hs-form fieldset { max-width: none !important; border: 0; padding: 0; margin: 0; }
.hs-form .hs-form-field { margin: 0; }
.hs-form .hs-form-field > label { display: block; font-size: 13px; font-weight: var(--gs-weight-normal); margin-bottom: 6px; color: var(--gs-primary); }
.hs-form .hs-input,
.hs-form textarea,
.hs-form select {
  width: 100% !important;
  font-family: var(--gs-font);
  font-weight: var(--gs-weight-light);
  font-size: 14px;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: var(--gs-radius);
  background: var(--gs-white);
  color: var(--gs-primary);
}
.hs-form .hs-input:focus, .hs-form textarea:focus, .hs-form select:focus { outline: none; border-color: var(--gs-primary); }
.hs-form textarea { min-height: 110px; resize: vertical; }
.hs-form .hs-input[type="checkbox"], .hs-form .hs-input[type="radio"] { width: auto !important; margin-right: 8px; }
.hs-form .hs-button {
  font-family: var(--gs-font);
  font-weight: var(--gs-weight-normal);
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--gs-primary);
  color: var(--gs-white);
  border: 1px solid var(--gs-primary);
  border-radius: var(--gs-radius);
  padding: 14px;
  cursor: pointer;
  width: 100%;
  transition: background .2s ease;
}
.hs-form .hs-button:hover { background: var(--gs-dark); border-color: var(--gs-dark); }
.hs-form .hs-error-msg, .hs-form .hs-error-msgs label { color: #c0392b; font-size: 12px; font-weight: var(--gs-weight-normal); }
.hs-form ul.hs-error-msgs { list-style: none; margin: 4px 0 0; padding: 0; }

@media (max-width: 600px) {
  .hs-form .hs-input, .hs-form textarea, .hs-form select { font-size: 16px; } /* stops iOS zooming in */
  .gs-btn { padding: 12px 22px; font-size: 12px; }
}


/* ==========================================================================
   PART 10b · REGISTRATION  —  the Smart Registration technology page
   --------------------------------------------------------------------------
   A more product-style page. Only src/pages/registration.html uses these.
   Blocks, top to bottom: split hero (white, words + demo video), claims strip,
   feature grid, two step tracks, comparison table (white card on the pale-blue
   band), safeguards list on the navy band.
   ========================================================================== */

/* --- Split hero: words left, demo video right, on the white band --- */
.gs-prodhero { overflow: hidden; }
.gs-prodhero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 64px;
  align-items: center;
}
.gs-prodhero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
  color: var(--gs-accent);
  margin-bottom: 18px;
}
.gs-prodhero .gs-accent { color: var(--gs-accent); }   /* Grey Orange on the white hero */
.gs-prodhero__text h1 { margin-bottom: 20px; }
.gs-prodhero__text p { max-width: 46ch; }
.gs-prodhero__text .gs-btn-row { margin-top: 30px; }
/* Primary button hover: fill Light Grey Blue instead of the default deep navy */
.gs-prodhero .gs-btn:hover {
  background: var(--gs-secondary);
  border-color: var(--gs-secondary);
  color: var(--gs-primary);
}
/* The video frame. Keeps its shape even before a demo is added. */
.gs-prodhero__shot {
  aspect-ratio: 16 / 10;
  border-radius: var(--gs-radius);
  overflow: hidden;
  background: var(--gs-stone);
}
.gs-prodhero__shot video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 900px) {
  .gs-prodhero__inner { grid-template-columns: 1fr; gap: 34px; }
  .gs-prodhero__shot { order: -1; }
}

/* --- Claims strip under the hero --- */
.gs-promise__lead { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.gs-promise__lead p { margin-top: 14px; }
.gs-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  border-top: 1px solid var(--gs-accent);
  padding-top: 40px;
}
.gs-metric { text-align: center; }
.gs-metric__value {
  display: block;
  font-size: clamp(20px, 2.6vw, 26px);
  color: var(--gs-primary);
  margin-bottom: 8px;
}
.gs-metric__label { font-size: 13px; color: var(--gs-body); line-height: 1.5; }
@media (max-width: 760px) {
  .gs-metrics { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
}

/* --- Feature grid --- */
.gs-featuregrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}
.gs-feature-card {
  background: var(--gs-white);
  border: 1px solid var(--gs-stone);
  border-radius: var(--gs-radius);
  padding: 32px;
  box-shadow: 0 10px 24px rgba(41, 53, 80, .06);
}
.gs-feature-card__icon {
  display: inline-flex;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: var(--gs-radius);
  background: var(--gs-secondary);
  color: var(--gs-primary);
  margin-bottom: 18px;
}
.gs-feature-card__icon svg { width: 22px; height: 22px; }
.gs-feature-card h3 { margin-bottom: 10px; }
.gs-feature-card p { font-size: 14px; }
@media (max-width: 760px) {
  .gs-featuregrid { grid-template-columns: 1fr; gap: 16px; }
  .gs-feature-card { padding: 26px; }
}

/* --- Two numbered step tracks --- */
.gs-tracks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
}
.gs-track__title {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--gs-body);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gs-accent);
  margin-bottom: 0;
}
.gs-track__steps { list-style: none; margin: 0; padding: 0; counter-reset: gs-step; }
.gs-track__step {
  position: relative;
  padding: 24px 0 24px 54px;
  border-bottom: 1px solid var(--gs-accent);
}
.gs-track__step:last-child { border-bottom: 0; padding-bottom: 0; }
.gs-track__step::before {
  counter-increment: gs-step;
  content: counter(gs-step);
  position: absolute;
  left: 0;
  top: 22px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gs-primary);
  border-radius: var(--gs-radius);
  font-size: 14px;
  color: var(--gs-primary);
}
.gs-track__step h4 { margin-bottom: 6px; }
.gs-track__step p { font-size: 14px; }
@media (max-width: 760px) {
  .gs-tracks { grid-template-columns: 1fr; gap: 32px; }
}

/* --- Comparison table: a plain white card sitting on the pale-blue band --- */
.gs-compare-wrap {
  overflow-x: auto;
  background: var(--gs-white);
  border: 1px solid var(--gs-stone);
  border-radius: var(--gs-radius);
  box-shadow: 0 12px 30px rgba(41, 53, 80, .07);
}
.gs-compare {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
}
.gs-compare th,
.gs-compare td {
  text-align: left;
  padding: 18px 22px;
  font-size: 14px;
  line-height: 1.55;
  vertical-align: top;
  border-bottom: 1px solid var(--gs-stone);
}
.gs-compare thead th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gs-body);
  border-bottom-color: var(--gs-primary);
}
.gs-compare tbody th {
  font-weight: var(--gs-weight-normal);
  color: var(--gs-primary);
  width: 22%;
}
.gs-compare td { color: var(--gs-body); }
/* The Smart Registration column: navy band down the card, white text */
.gs-compare .is-new { background: var(--gs-primary); color: var(--gs-white); border-bottom-color: rgba(255, 255, 255, .16); }
.gs-compare thead .is-new { font-weight: var(--gs-weight-bold); border-bottom-color: var(--gs-primary); }
.gs-compare tbody tr:last-child th,
.gs-compare tbody tr:last-child td { border-bottom: 0; }

/* --- Safeguards list on the navy band --- */
.gs-safeguards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 44px;
}
.gs-safeguard { display: flex; gap: 16px; }
.gs-safeguard__icon { flex: 0 0 auto; width: 28px; height: 28px; color: var(--gs-warm); }
.gs-safeguard__icon svg { width: 28px; height: 28px; }
.gs-safeguard h3 { font-size: 16px; margin-bottom: 6px; }
.gs-safeguard p { font-size: 14px; }
.gs-safeguards__cta { margin-top: 44px; justify-content: center; }
@media (max-width: 760px) {
  .gs-safeguards { grid-template-columns: 1fr; gap: 24px; }
}


/* ==========================================================================
   PART 10c · STAGING SAFETY  —  builds on PART 10b
   --------------------------------------------------------------------------
   Only src/pages/staging-safety.html uses these. It borrows the split hero
   from the Registration page (PART 10b) and adds three blocks of its own: a
   "then and now" pair of photographs, one dark "safety" section (a numbered
   grid of points), and a grid of embedded Instagram clips.
   ========================================================================== */

/* --- Then and now: two captioned photographs side by side --- */
.gs-thennow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin-top: 8px;
}
.gs-thennow__item { margin: 0; }
.gs-thennow__year {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--gs-body);
  margin-bottom: 12px;
}
.gs-thennow__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--gs-radius);
  overflow: hidden;
  background: var(--gs-stone);
}
.gs-thennow__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gs-thennow figcaption { font-size: 13px; color: var(--gs-body); margin-top: 12px; }
@media (max-width: 760px) {
  .gs-thennow { grid-template-columns: 1fr; gap: 26px; }
}

/* --- Safety section: centred heading, then the points as a numbered grid on
       the navy band. Numbered rather than icon-carded, so it does not echo the
       Registration page. --- */
.gs-safety__list {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  counter-reset: gs-pt;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 48px;
}
.gs-safety__item {
  counter-increment: gs-pt;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .22);
}
.gs-safety__item::before {
  content: counter(gs-pt, decimal-leading-zero);
  display: block;
  font-size: 13px;
  letter-spacing: 1.5px;
  color: var(--gs-warm);
  margin-bottom: 14px;
}
.gs-safety__item h3 { font-size: clamp(16px, 1.8vw, 18px); margin-bottom: 8px; }
.gs-safety__item p { font-size: 14px; max-width: 46ch; }
.gs-safety__cta { margin-top: 44px; justify-content: center; }
@media (max-width: 700px) {
  .gs-safety__list { grid-template-columns: 1fr; gap: 26px; }
}

/* --- Instagram clip grid. Instagram's script sets its own inline widths on
       each block, so the overrides below keep them inside the grid cells. --- */
.gs-reels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
.gs-reels .instagram-media {
  margin: 0 auto !important;
  min-width: 0 !important;
  width: 100% !important;
}
@media (max-width: 900px) { .gs-reels { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .gs-reels { grid-template-columns: 1fr; } }


/* ==========================================================================
   PART 10d · SCHOOL ARCHIVE  —  builds on PART 10b
   --------------------------------------------------------------------------
   Only src/pages/school-archive.html uses these. It borrows the split hero from
   the Registration page (PART 10b) and adds two blocks of its own: a pair of
   wide points ("What Is Imagebank?") and the dark "Our Vintage Archives" band
   (a row of four brand logos plus a search box).
   ========================================================================== */

/* --- Hero: a photograph fills the frame instead of a video --- */
.gs-prodhero__shot img { width: 100%; height: 100%; object-fit: cover; }

/* --- "What Is Imagebank?": two wide points, no card boxes, each under a
       hairline rule (same weight as the rules on the rest of the site).
       Deliberately unlike the Registration feature grid (PART 10b). --- */
.gs-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
}
.gs-pair__item {
  padding-top: 22px;
  border-top: 1px solid var(--gs-accent);
}
.gs-pair__item h3 { font-size: clamp(17px, 1.9vw, 20px); margin-bottom: 10px; }
.gs-pair__item p { font-size: 14px; }
@media (max-width: 640px) {
  .gs-pair { grid-template-columns: 1fr; gap: 34px; }
}

/* --- Our Vintage Archives: a row of four brand logos on the navy band.
       Each # BRAND is an editable image; until real logos are added they show
       the dashed placeholder from src/images/logo-placeholder.svg. --- */
.gs-brands {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 24px;
  align-items: center;
  justify-items: center;
  margin-bottom: 56px;
}
.gs-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 84px;
  padding: 12px;
}
.gs-brand img { max-height: 72px; width: auto; }
@media (max-width: 860px) {
  .gs-brands { grid-template-columns: repeat(2, 1fr); gap: 24px; margin-bottom: 44px; }
}
@media (max-width: 460px) {
  .gs-brands { grid-template-columns: 1fr; }
}

/* --- Button under the logo row, links out to the archive search --- */
.gs-archive__cta { justify-content: center; }


/* ==========================================================================
   PART 11 · ACCESSIBILITY
   ========================================================================== */
:focus-visible { outline: 2px solid var(--gs-primary); outline-offset: 2px; }
.gs-section--navy :focus-visible, .gs-hero :focus-visible { outline-color: var(--gs-white); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}