:root {
	/* IMAGE CORNER RADIUS - change this one value and every image on the
	   site follows: talent wall, division grids, model galleries, sliders,
	   lightbox, Instagram feed tiles and the photo that opens a page body.
	   Book covers and the half-page photos (Talent Management, Publishing)
	   stay square. Mobile steps it down via --ivy-image-radius below. */
	--ivy-image-radius: 14px;

	/* TALENT WALL GAP - drives the space between images in both
	   directions, so vertical always matches horizontal. */
	--ivy-wall-gap: 30px;

	/* Fonts */
	--font-base: 'Schibsted Grotesk', Arial, sans-serif;
	--font-alt: 'Butler', Georgia, serif;
}

/*
IVY :: FLOATING HEADER + HOME HERO
======================================================
Added 14/09/2026. Everything from here down is Ivy's own.
To go back to the theme's look, delete from this banner to
the end of the file. The theme's commented-out examples that
used to sit above were removed on 13/10/2026 (the copy in
the ff-dev-gn/ivy-syngency backup has them).
*/

/* Floating header - desktop only. Below 992px the theme's
   own mobile nav and toggle are left exactly as they were. */
@media (min-width: 992px) {

  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    margin-bottom: 0 !important;
    padding: 16px 0;
    transition: padding 0.3s ease;
  }
  .site-header .site-header-inner {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    background: #fff;
    border-radius: 14px;
    padding: 10px 16px 10px 28px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10);
    transition: padding 0.3s ease, box-shadow 0.3s ease;
  }
  .site-header .logo {
    max-width: 120px;
    padding: 0 !important;
    margin: 0;
    flex: 0 0 auto;
  }
  .site-header .logo img {
    max-height: 52px;
    width: auto;
    transition: max-height 0.3s ease;
  }
  .site-header .site-nav {
    text-align: right;
    flex: 0 0 auto;
    /* The theme carries an 8px bottom margin here, which lifts the links
       4px above the centre of the pill. Clearing it, plus align-items on
       the flex parent, centres them vertically at both sizes. */
    margin-bottom: 0 !important;
    display: flex;
    align-items: center;
  }
  .site-header .site-nav ul {
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: flex-end !important;
  }
  .site-header .site-nav li,
  .site-header .site-nav li a {
    display: flex;
    align-items: center;
  }
  .site-header .site-nav li + li {
    margin-left: 1.75rem;
  }

  /* Compact once the page has moved */
  .site-header.is-scrolled {
    padding: 8px 0;
  }
  .site-header.is-scrolled .site-header-inner {
    padding: 6px 14px 6px 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
  }
  .site-header.is-scrolled .logo img {
    max-height: 40px;
  }

  /* The header no longer occupies flow, so inner pages need
     clearance. Home doesn't - its hero supplies its own. */
  body.template-not-home .site-wrapper {
    padding-top: 108px;
  }

}

/* Home hero */
.ivy-hero {
  background: var(--color-accent-primary, #005545);
  color: #fff;
  text-align: center;
  padding: 150px 0 80px;
}
.ivy-hero-title {
  font-family: 'Butler', Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.1rem, 5.6vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: #fff;
  margin: 0 0 2.25rem;
}
.ivy-hero-title em {
  font-style: normal;
  color: var(--color-accent-secondary, #c7eedb);
}
/* Subtitle under the heading: the first paragraph of Website > Pages >
   Home, printed by the Home template (fix 51, 14/10/2026). */
.ivy-hero-sub {
  max-width: 40rem;
  margin: -1rem auto 2.25rem;
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}
@media (max-width: 575.98px) {
  .ivy-hero-sub {
    margin-top: -1.25rem;
    font-size: 1rem;
  }
}
.ivy-hero-btn {
  display: inline-block;
  background: #fff;
  color: var(--color-accent-primary, #005545) !important;
  border-radius: 14px;
  padding: 15px 40px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
              background-color 0.45s ease;
}
.ivy-hero-btn:hover,
.ivy-hero-btn:focus {
  background: var(--color-accent-secondary, #c7eedb);
  transform: translateY(-2px);
}

@media (min-width: 992px) {
  .ivy-hero {
    padding: 210px 0 110px;
  }
}

/* Talent wall: a fixed window the images travel through, rather than a
   column you scroll past. Without a height the duplicated marquee content
   stacks and the page runs to ~26,000px. */
.ivy-talent-wall {
  position: relative;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  padding: 0 !important;
}
.ivy-talent-wall .row,
.ivy-talent-wall .banner-column {
  height: 100%;
}

/* Slower, softer motion on the floating header */
.site-header,
.site-header .site-header-inner,
.site-header .logo img {
  transition-duration: 0.55s !important;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

/* Talent wall images fill their column (corners: see the radius block below) */
.ivy-talent-wall img {
  display: block;
  width: 100%;
  height: auto;
}

/* Mobile (below 992px)
   ======================================================
   The theme's own mobile nav is a full-screen overlay and its hamburger
   is absolutely positioned, so the bar only needs position: relative to
   anchor it. The overlay itself is left completely alone. */
@media (max-width: 991.98px) {

  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    margin-bottom: 0 !important;
    padding: 10px 0;
  }
  .site-header .container {
    padding-left: 12px;
    padding-right: 12px;
  }
  .site-header .site-header-inner {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    text-align: left !important;
    background: #fff;
    border-radius: 14px;
    padding: 10px 56px 10px 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  }
  .site-header .logo {
    max-width: 86px;
    padding: 0 !important;
    margin: 0;
  }
  .site-header .logo img {
    max-height: 38px;
    width: auto;
  }

  body.template-not-home .site-wrapper {
    padding-top: 84px;
  }

  /* Hero clears the floating bar */
  .ivy-hero {
    padding: 128px 0 66px;
  }

  /* Talent wall: three columns, tighter gutters, smaller radius */
  .ivy-talent-wall .banner-column:nth-child(n + 4) {
    display: none;
  }
  :root {
    --ivy-wall-gap: 10px;
    --ivy-image-radius: 10px;
  }

}

/* Image corner radius, applied sitewide
   ======================================================
   The division grid and model galleries use CSS background images on
   divs rather than <img>, so both are covered here. All of it reads from
   --ivy-image-radius at the top of this file. */
.ivy-talent-wall img,
a.model .headshot,
a.model .headshot-image,
.headshot,
.headshot-image,
.model-gallery .image,
.image-gallery .image,
.slider-gallery .image,
.lightbox-gallery .image,
.link-gallery .image,
.synsocial-instagram .ig-video,
.rte > figure:first-child img {
  border-radius: var(--ivy-image-radius, 14px);
  overflow: hidden;
}

/* The hover overlay has to match, or its square corners show through */
a.model .overlay,
a.model .headshot .overlay {
  border-radius: var(--ivy-image-radius, 14px);
}

/* Hamburger alignment, mobile menu type, parallax fade
   ====================================================== */

/* The theme sets top: calc(50% - 10px) AND transform: translateY(-50%),
   which double-corrects and sits the icon 10px above centre - in both the
   closed (bars) and open (X) states, since it is the same element. */
.nav-toggle {
  top: 50% !important;
}

@media (max-width: 991.98px) {

  /* Menu items inside the open overlay */
  .site-nav .nav-container > ul > li > a {
    font-size: 1.75rem !important;
    line-height: 1.25;
    letter-spacing: 0.02em;
  }
  .site-nav .nav-container > ul > li + li {
    margin-top: 0.5rem;
  }

}

/* Parallax fades in from the hero rather than starting hard.
   The wall already has overflow: hidden, so the overlay is clipped to it. */
.ivy-talent-wall::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Tune the fade here: --ivy-fade-height for how far it reaches.
     It stays fully opaque only at the very top so the seam with the
     hero stays clean, then falls away quickly. */
  height: var(--ivy-fade-height, 136px);
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    var(--color-accent-primary, #005545) 0%,
    rgba(0, 85, 69, 0.7) 29%,
    rgba(0, 85, 69, 0.3) 63%,
    rgba(0, 85, 69, 0) 100%
  );
}

@media (max-width: 991.98px) {
  .ivy-talent-wall::before {
    height: 86px;
  }
}

/* Talent wall spacing: vertical gap matched to horizontal
   ======================================================
   The markup separates images with <br><br>, which gave 48px vertically
   against 30px horizontally. The breaks are dropped and both directions
   now read from --ivy-wall-gap. */
.ivy-talent-wall .row {
  margin-left: calc(var(--ivy-wall-gap, 30px) / -2);
  margin-right: calc(var(--ivy-wall-gap, 30px) / -2);
}
.ivy-talent-wall .banner-column {
  padding-left: calc(var(--ivy-wall-gap, 30px) / 2);
  padding-right: calc(var(--ivy-wall-gap, 30px) / 2);
}
.ivy-talent-wall .inner-wrapper br {
  display: none;
}
.ivy-talent-wall .inner-wrapper img {
  margin-bottom: var(--ivy-wall-gap, 30px);
}

/* ---------------------------------------------------------------
   IVY :: FEED HEADING
   Placeholder heading above the Instagram feed on the homepage.
--------------------------------------------------------------- */
.ivy-feed-heading {
  font-family: 'Butler', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--color-accent-primary, #005545);
  margin-top: 1rem;
  margin-bottom: 1.75rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* ---------------------------------------------------------------
   IVY :: HEADSHOT OVERLAY + SOCIAL COUNTERS
   Lighter hover wash so the portrait still reads, with a stronger
   band at the base so the follower counts stay legible.
   Applies to division grids and sent packages.
--------------------------------------------------------------- */
.headshot .overlay {
  background-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.62) 0%,
    rgba(0, 0, 0, 0.34) 26%,
    rgba(0, 0, 0, 0) 58%
  ) !important;
}

.ivy-socials {
  flex-wrap: wrap;
  margin-top: 0.4rem;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.ivy-socials .fab {
  opacity: 0.9;
}

/* Keep each icon glued to its number; wrap between counters, not inside one. */
.ivy-socials span {
  white-space: nowrap;
}

/* ---------------------------------------------------------------
   IVY :: SOCIAL COUNTERS ON MOBILE
   There is no hover on touch, so below the theme md breakpoint the
   overlay is always on and carries the follower counts only.
   Cards without socials keep the plain headshot.
--------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .headshot .overlay:has(.ivy-socials) {
    display: flex !important;
    opacity: 1 !important;
  }

  /* Measurements stay hidden on small screens, as they were before. */
  .headshot .overlay .measurements > li:not(.ivy-socials) {
    display: none !important;
  }

  .headshot .overlay .ivy-socials {
    margin-top: 0;
    font-size: 0.75rem;
  }

  .headshot .overlay .ivy-socials .mr-3 {
    margin-right: 0.5rem !important;
  }
}

/* ---------------------------------------------------------------
   IVY :: HERO ACTIONS
   Two buttons side by side under the hero headline.
--------------------------------------------------------------- */
.ivy-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
}

.ivy-hero-btn-alt {
  background: transparent !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75);
}

.ivy-hero-btn-alt:hover,
.ivy-hero-btn-alt:focus {
  background: #fff !important;
  color: var(--color-accent-primary, #005545) !important;
}

@media (max-width: 575.98px) {
  .ivy-hero-actions {
    gap: 0.6rem;
  }

  .ivy-hero-actions .ivy-hero-btn {
    flex: 1 1 100%;
    text-align: center;
  }
}

/* ---------------------------------------------------------------
   IVY :: ENQUIRY TYPE TOGGLE
   Brand / Talent switch at the top of the contact form.
--------------------------------------------------------------- */
.ivy-enquiry-toggle {
  display: flex;
  gap: 0.5rem;
}

.ivy-enquiry-option {
  flex: 1 1 0;
  margin: 0;
  padding: 0.55rem 0.75rem;
  text-align: center;
  cursor: pointer;
  border: 1px solid rgba(51, 64, 73, 0.35);
  background: #fff;
  color: #334049;
  font-size: 0.95rem;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ivy-enquiry-option:hover {
  border-color: var(--color-accent-primary, #005545);
}

.ivy-enquiry-option.is-active {
  background: var(--color-accent-primary, #005545);
  border-color: var(--color-accent-primary, #005545);
  color: #fff;
}

/* The radio itself is only there to carry the value into the submission. */
.ivy-enquiry-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------------
   IVY :: OFFICE MAPS
   Brisbane / Melbourne / Sydney switcher on the contact page.
   Shares the look of the enquiry-type toggle above the form.
--------------------------------------------------------------- */
.ivy-office-toggle {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.ivy-office-option {
  flex: 1 1 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(51, 64, 73, 0.35);
  background: #fff;
  color: #334049;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ivy-office-option:hover {
  border-color: var(--color-accent-primary, #005545);
}

.ivy-office-option.is-active {
  background: var(--color-accent-primary, #005545);
  border-color: var(--color-accent-primary, #005545);
  color: #fff;
}

/* Fixed ratio so swapping offices never shifts the page. */
.ivy-office-map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--ivy-image-radius, 14px);
  background: #C7EEDB;
}

.ivy-office-map-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  /* The Embed API has no styling options, so mute it from the outside:
     pull saturation down and nudge the hue toward the Ivy green. */
  filter: saturate(0.68) contrast(0.97) hue-rotate(-8deg) sepia(0.08);
  transition: filter 0.35s ease;
}

/* Hand back true colour once someone is actually reading the map. */
.ivy-office-map-frame:hover iframe,
.ivy-office-map-frame:focus-within iframe {
  filter: none;
}

@media (max-width: 767.98px) {
  .ivy-office-maps {
    margin-bottom: 2rem;
  }

  .ivy-office-map-frame {
    aspect-ratio: 3 / 2;
  }
}

/* ---------------------------------------------------------------
   IVY :: ABOUT
   Full-bleed split: photo holds the left half of the viewport,
   copy sits in the right half. Stacks on tablet and below.
--------------------------------------------------------------- */
.ivy-about-split {
  /* Break out of the theme container to reach both screen edges. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Inner pages are normally pushed clear of the fixed header. About is the
   exception: the photo runs to the very top and the header floats over it. */
body:has(.ivy-about-split) .site-wrapper {
  padding-top: 0 !important;
}

.ivy-about-media {
  position: relative;
}

.ivy-about-media img {
  display: block;
  width: 100%;
  height: auto;
}

/* Soft white fade along the bottom 15% of the photo, all breakpoints:
   on desktop it meets the page below, on mobile it meets the copy. */
.ivy-about-media::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 15%;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.35) 45%,
    rgba(255, 255, 255, 0.8) 80%,
    #ffffff 100%
  );
}

@media (min-width: 992px) {
  .ivy-about-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    min-height: 620px;
  }

  /* Fill the half regardless of how long the copy runs. */
  .ivy-about-media {
    height: 100%;
  }

  /* Soft white edge where the photo meets the copy column, so the two halves
     blend rather than butt. Same idea as the homepage wall fade, turned 90deg. */
  .ivy-about-media::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 15%;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.35) 45%,
      rgba(255, 255, 255, 0.8) 80%,
      #ffffff 100%
    );
  }

  .ivy-about-media img {
    height: 100%;
    object-fit: cover;
    object-position: 50% 32%;
  }

  /* Heading and copy centre together as one block. */
  .ivy-about-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    max-width: none;
    /* Extra top padding keeps the copy clear of the floating header. */
    padding: clamp(7rem, 13vh, 10rem) clamp(2rem, 5vw, 5.5rem) 4rem;
  }

  .ivy-about-heading,
  .ivy-about-body .page.content {
    width: 100%;
    max-width: 34rem;
  }
}

/* Heading now lives beside the photo, so it leads the copy, not the page. */
.ivy-about-heading {
  text-align: left;
  margin-bottom: 1.5rem;
  /* Outrank the section headings it now sits alongside. */
  font-size: clamp(2.2rem, 3.2vw, 3.1rem);
  line-height: 1.05;
}

@media (max-width: 991.98px) {
  /* Stacked: photo first, then the copy back inside a normal gutter. */
  .ivy-about-media img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 50% 28%;
  }

  .ivy-about-body {
    padding: 2rem 1.25rem 0;
  }
}

/* ---------------------------------------------------------------
   IVY :: LEAD CAPTURE
   Inline enquiry band. Home page (Talent / Brand toggle) and talent
   portfolio pages (brand-side, no toggle). Two fields per row from
   tablet up, one per row on phones.
--------------------------------------------------------------- */
.ivy-lead {
  background: #C7EEDB;
  padding: 2.5rem 1.5rem;
  margin-top: 3rem;
}

.ivy-lead-home {
  /* Butts straight up to the talent wall, no gap, and sits last on the
     page, so no gap beneath it either. */
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.ivy-lead-home .container,
.ivy-lead-talent {
  max-width: 860px;
}

.ivy-lead-talent {
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--ivy-image-radius, 14px);
}

.ivy-lead-title {
  font-family: 'Butler', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  line-height: 1.1;
  color: var(--color-accent-primary, #005545);
  margin: 0 0 0.35rem;
}

.ivy-lead-sub {
  margin: 0 0 1.25rem;
  color: #5d6a72;
}

.ivy-lead .ivy-enquiry-toggle {
  max-width: 320px;
  margin-bottom: 1.25rem;
}

.ivy-lead-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 1rem;
}

.ivy-lead-grid .form-group {
  margin-bottom: 1rem;
}

.ivy-lead-grid label {
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  margin-bottom: 0.3rem;
}

.ivy-req {
  color: #a8342c;
}

.ivy-lead-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-top: 0.25rem;
}

.ivy-lead-legend {
  margin: 0;
  font-size: 0.8rem;
  color: #5d6a72;
}

/* Syngency wraps the submit with a reCAPTCHA badge holder that would otherwise
   take a flex gap of its own. Let its (fixed-position) child stand alone. */
.ivy-lead-actions > div:not(.form-group) {
  display: contents;
}

/* A field that should take the full row (the contact page message). */
.ivy-lead-span {
  grid-column: 1 / -1;
}

/* Contact page: the band sits inside the right-hand column, so it keeps
   the rounded card treatment and no outer top margin. */
.ivy-lead-contact {
  margin-top: 0;
  border-radius: var(--ivy-image-radius, 14px);
}

@media (min-width: 768px) {
  .ivy-lead-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Contact column is narrower than the home band; only go two-up from lg. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .ivy-lead-contact .ivy-lead-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------
   IVY :: FOOTER SPACING
   The theme stacks main padding, footer margin and footer padding into
   roughly 120px of white above the social icon. Pull it in on every page.
--------------------------------------------------------------- */
main.flex-fill {
  padding-bottom: 2rem !important;
}

.site-footer {
  margin-top: 0 !important;
  padding-top: 2rem !important;
}

/* ---------------------------------------------------------------
   IVY :: POLICY PAGES
   Numbered clauses are plain paragraphs with a depth class so the
   editor can't mangle nested lists. Indent by depth.
--------------------------------------------------------------- */
.rte .ivy-policy-updated {
  color: #5d6a72;
  font-size: 0.9rem;
  margin-bottom: 2rem;
}

.rte h2 + p.c2,
.rte h2 + p {
  margin-top: 0.75rem;
}

.rte p.c2 { padding-left: 2.25rem; text-indent: -2.25rem; }
.rte p.c3 { padding-left: 4.75rem; text-indent: -2.5rem; }
.rte p.c4 { padding-left: 6.5rem;  text-indent: -1.75rem; }

.rte .ivy-policy-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  margin-top: 1rem;
}

.rte .ivy-policy-table th,
.rte .ivy-policy-table td {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid rgba(51, 64, 73, 0.14);
  vertical-align: top;
  word-break: break-word;
}

.rte .ivy-policy-table th {
  font-weight: 600;
  border-bottom-color: rgba(51, 64, 73, 0.3);
}

/* ---------------------------------------------------------------
   IVY :: BRAND TYPE
   Headings in Butler Bold, uppercase (Ivy style guide p.9). Body
   copy in Schibsted Grotesk Regular, with Bold for emphasis (group
   rule 3.1). The theme asks for weight 300, which isn't loaded, so
   browsers already fall back to 400. Headings that carry the
   theme's .h5 or .h6 class (the home section heading and the talent
   names on the Talent page) keep the theme's small caps style.
--------------------------------------------------------------- */
body,
.form-control {
  font-weight: 400;
}

:is(h1, h2, h3, h4):not(.h5, .h6),
.h1, .h2, .h3, .h4 {
  font-family: var(--font-alt, 'Butler', Georgia, serif);
  font-weight: 700;
  text-transform: uppercase;
}

b,
strong {
  font-weight: 700;
}

/* ---------------------------------------------------------------
   IVY :: MOBILE SIDEWAYS SCROLL (fix 49, 14/10/2026)
   On the home page the Instagram feed's grid row (.row.xs-gutters,
   -5px side margins) sits outside a container, so it pokes 5px past
   both edges at phone width and iOS lets the page slide sideways.
   Matching padding on the feed wrapper keeps the row inside the screen.
--------------------------------------------------------------- */
.template-home .instagram-feed .synsocial-instagram {
  padding-left: 5px;
  padding-right: 5px;
}

/* Feed band in the same grey as the Work with Ivy band (George,
   14/10/2026). Padding replaces the section's top margin so the grey
   starts above the heading. */
.template-home .instagram-feed {
  background: #C7EEDB;
  margin-top: 3rem !important;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

/* The theme gives the line-heading text a white box to hide the rule
   behind it; on the grey band it takes the band colour instead. */
.template-home .instagram-feed .line-heading span {
  background-color: #C7EEDB;
}

/* Talent wall: fade out at the bottom into the Work with Ivy band, the
   mirror of the green fade at the top (fix 55, 14/10/2026). Uses the same
   height as the top fade. */
.ivy-talent-wall::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--ivy-fade-height, 136px);
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    to top,
    #C7EEDB 0%,
    rgba(199, 238, 219, 0.7) 29%,
    rgba(199, 238, 219, 0.3) 63%,
    rgba(199, 238, 219, 0) 100%
  );
}

@media (max-width: 991.98px) {
  .ivy-talent-wall::after {
    height: 86px;
  }
}

/* ---------------------------------------------------------------
   IVY :: HOME COPY HALF PAGE (fix 55, 14/10/2026)
   Same treatment as Talent Management, mirrored: the copy on the left,
   the team photo filling the right half, square, with white fades on
   its inner edge and bottom. The grey of the Work with Ivy band fades
   in across the top. Stacks below 992px (photo first).
--------------------------------------------------------------- */
.ivy-home-split {
  position: relative;
}

.ivy-home-split::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 86px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    #C7EEDB 0%,
    rgba(199, 238, 219, 0.7) 29%,
    rgba(199, 238, 219, 0.3) 63%,
    rgba(199, 238, 219, 0) 100%
  );
}

.ivy-home-media {
  position: relative;
  margin: 0;
}

.ivy-home-media img {
  display: block;
  width: 100%;
  height: auto;
}

.ivy-home-media::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 15%;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.35) 45%,
    rgba(255, 255, 255, 0.8) 80%,
    #ffffff 100%
  );
}

@media (min-width: 992px) {
  .ivy-home-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    min-height: 620px;
  }

  .ivy-home-media {
    order: 2;
    height: 100%;
  }

  .ivy-home-media img {
    height: 100%;
    object-fit: cover;
    object-position: 50% 40%;
  }

  .ivy-home-media::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 15%;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(
      to left,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.35) 45%,
      rgba(255, 255, 255, 0.8) 80%,
      #ffffff 100%
    );
  }

  .ivy-home-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    padding: 6rem clamp(2rem, 5vw, 5.5rem) 4rem;
  }

  .ivy-home-body .page.content {
    width: 100%;
    max-width: 34rem;
  }
}

@media (max-width: 991.98px) {
  .ivy-home-media img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 50% 40%;
  }

  .ivy-home-body {
    padding: 2rem 1.25rem 0;
  }
}

/* Publishing (fix 55, 14/10/2026): the Page template puts the body's
   first figure (the books photo) in the Talent Management split, so the
   .ivy-about-* rules above apply. The figure's own margin goes, and on
   phones the landscape photo keeps its shape instead of the 4:5 crop. */
.ivy-pub-split .ivy-about-media figure {
  margin: 0 !important;
  height: 100%;
}

@media (min-width: 992px) {
  .ivy-pub-split .ivy-about-media img {
    object-position: 55% 50%;
  }
}

@media (max-width: 991.98px) {
  .ivy-pub-split .ivy-about-media img {
    aspect-ratio: 3 / 2;
    object-position: 50% 50%;
  }
}

/* Publishing (George, 14/10/2026): the mirror of Talent Management, so
   the books photo sits on the right with its fade on the left edge. */
@media (min-width: 992px) {
  .ivy-pub-split .ivy-about-media {
    order: 2;
  }

  .ivy-pub-split .ivy-about-media::after {
    right: auto;
    left: 0;
    background: linear-gradient(
      to left,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.35) 45%,
      rgba(255, 255, 255, 0.8) 80%,
      #ffffff 100%
    );
  }

  .ivy-pub-split .ivy-about-body {
    align-items: flex-end;
  }
}

/* ---------------------------------------------------------------
   IVY :: FOOTER ON PHONES (George, 14/10/2026)
   One left-aligned column, like the athena.com.au footer: each link
   group stacked under the last, then the contact lines, the
   Acknowledgement and the bottom line, all on the same left edge.
--------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .site-footer .content {
    text-align: left !important;
  }

  .site-footer .social {
    margin-left: -0.5rem;
  }

  .site-footer .footer-links .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 1.75rem !important;
  }

  .site-footer .agency-details span {
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .site-footer .acknowledgement-of-country {
    margin-left: 0 !important;
  }

  .site-footer .site-attribution span {
    margin-left: 0 !important;
    margin-right: 1rem !important;
  }
}

/* ---------------------------------------------------------------
   IVY :: TALENT CARD CAPTION + CATEGORY CHIPS, COMBO (fix 54, 14/10/2026)
   Division grids. Over the bottom of the photo, always visible on
   desktop and touch screens: the main social handle with its network
   icon, then the follower counts (a count shows only when Syngency
   has a number for it). Under the talent name: up to three category
   chips in brand green, then a "+2" style chip for the rest. Plain
   text, not links, because the whole card already links to the
   talent page. The counts move here from the hover overlay, which
   keeps its fade.
--------------------------------------------------------------- */
a.model .headshot .ivy-card-caption {
  /* The fade sits in the top padding only, so every line of text is
     on at least 66% black, whatever the photo behind it. */
  --ivy-caption-fade: 2.5rem;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: var(--ivy-caption-fade) 1rem 0.8rem;
  color: #fff;
  background-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.66) calc(100% - var(--ivy-caption-fade)),
    rgba(0, 0, 0, 0) 100%
  );
  border-radius: 0 0 var(--ivy-image-radius, 14px) var(--ivy-image-radius, 14px);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

a.model .ivy-card-caption p {
  margin: 0;
}

a.model .ivy-card-caption .ivy-card-handle {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
}

/* The icon stays with the handle. A handle too long for a narrow
   phone card ends in "..." on one line instead of breaking mid-word;
   screen readers still get the whole handle. */
a.model .ivy-card-caption .ivy-card-handle .fab {
  flex: none;
}

a.model .ivy-card-caption .ivy-card-at {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.model .ivy-card-caption .ivy-card-counts {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.75rem;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  line-height: 1.35;
  letter-spacing: 0.02em;
}

a.model .ivy-card-caption .ivy-card-count {
  white-space: nowrap;
}

a.model .ivy-card-caption .fab {
  margin-right: 0.3em;
  opacity: 0.9;
}

a.model .ivy-card-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem;
  margin: -0.15rem 0 0;
}

a.model .ivy-chip {
  display: inline-block;
  max-width: 100%;
  padding: 0.2em 0.7em;
  /* A pill on one line; a long category that has to wrap on a phone
     becomes a rounded box instead of a capsule. */
  border-radius: 1em;
  background: #005645;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* The "+2" chip: same pill and green, drawn as an outline so it
   doesn't read as another category. */
a.model .ivy-chip-more {
  background: #fff;
  color: #005645;
  box-shadow: inset 0 0 0 1px #005645;
}

@media (max-width: 767.98px) {
  a.model .headshot .ivy-card-caption {
    --ivy-caption-fade: 1.75rem;
    padding: var(--ivy-caption-fade) 0.5rem 0.55rem;
  }

  a.model .ivy-card-caption .ivy-card-handle {
    font-size: 0.75rem;
  }

  a.model .ivy-card-caption .ivy-card-counts {
    column-gap: 0.5rem;
  }

  a.model .ivy-card-chips {
    gap: 0.25rem;
  }
}

/* ---------------------------------------------------------------
   IVY :: INNER PAGE SPACING AND CONTACT FORM (George, 14/10/2026)
   The h1 on inner pages sat 20px under the floating bar on desktop
   and 16px on phones, so inner pages get more clearance. The 404
   page drops its own extra top padding so it lines up with the rest.
--------------------------------------------------------------- */
@media (min-width: 992px) {
  body.template-not-home .site-wrapper {
    padding-top: 144px;
  }

  .ivy-about-body {
    padding-top: 9rem;
  }
}

@media (max-width: 991.98px) {
  body.template-not-home .site-wrapper {
    padding-top: 112px;
  }
}

body.template-404 .error-404 {
  padding-top: 0 !important;
}

/* Contact: the Get in touch heading, its line and the Talent/Brand
   switch sit centred in the card. */
.ivy-lead-contact .ivy-lead-title,
.ivy-lead-contact .ivy-lead-sub {
  text-align: center;
}

.ivy-lead-contact .ivy-enquiry-toggle {
  margin-left: auto;
  margin-right: auto;
}

/* Contact: fields, switches and buttons take half the image radius.
   The card and the map keep the full radius. */
.ivy-lead-contact .form-control,
.ivy-lead-contact .ivy-enquiry-option,
.ivy-lead-contact .btn,
.ivy-office-option {
  border-radius: calc(var(--ivy-image-radius, 14px) / 2);
}

/* Home: the feed band runs straight into the footer. No white strip
   and no footer top line under it (George, 14/10/2026). */
body.template-home main.flex-fill {
  padding-bottom: 0 !important;
}

body.template-home .site-footer {
  border-top: 0;
}

/* Footer links from 768px: three equal columns with their headings and
   links centred (George, 14/10/2026). Phones keep the one left-aligned
   column. The theme's right margin and padding on footer links would
   pull the centred text left, so they go too. */
@media (min-width: 768px) {
  .site-footer .footer-links .row > div {
    flex: 0 0 14rem;
    max-width: 14rem;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    text-align: center;
  }

  .site-footer .footer-links li {
    margin-right: 0;
  }

  .site-footer .footer-links li a {
    padding-right: 0;
  }
}

/* Home hero, scaled down (George, 14/10/2026): the heading, subtitle,
   buttons and padding come down together so the talent wall shows
   above the fold and the heading still leads. */
.ivy-hero {
  padding: 112px 0 48px;
}

.ivy-hero-title {
  font-size: clamp(1.85rem, 4vw, 3.25rem);
  margin-bottom: 1.75rem;
}

.ivy-hero-sub {
  font-size: 1.0625rem;
  margin: -0.75rem auto 1.75rem;
}

.ivy-hero-btn {
  padding: 12px 32px;
  font-size: 0.72rem;
}

@media (min-width: 992px) {
  .ivy-hero {
    padding: 150px 0 64px;
  }
}

@media (max-width: 575.98px) {
  .ivy-hero-sub {
    margin-top: -0.75rem;
    font-size: 0.95rem;
  }
}

/* Forms and buttons everywhere take half the image radius, as on
   Contact: the Home and talent-page enquiry forms and the hero buttons
   (George, 15/10/2026). */
.ivy-lead .form-control,
.ivy-lead .ivy-enquiry-option,
.ivy-lead .btn,
.ivy-hero-btn {
  border-radius: calc(var(--ivy-image-radius, 14px) / 2);
}

/* On Contact and talent pages the form heading sits below the page's
   h1 (32px), so it drops to 24px (George, 15/10/2026). */
.ivy-lead-contact .ivy-lead-title,
.ivy-lead-talent .ivy-lead-title {
  font-size: 1.5rem;
}

/* Contact on desktop: more white space around the h1, the office
   details and inside the form card (George, 15/10/2026). */
@media (min-width: 992px) {
  body:has(.ivy-lead-contact) .page-heading {
    margin-bottom: 4.5rem !important;
  }

  body:has(.ivy-lead-contact) .page.content .rte p {
    margin-bottom: 1.5rem;
  }

  body:has(.ivy-lead-contact) .ivy-office-maps {
    margin-top: 2.5rem !important;
  }

  .ivy-lead-contact {
    padding: 3.5rem 3.25rem 3rem;
  }

  .ivy-lead-contact .ivy-lead-title {
    margin-bottom: 0.75rem;
  }

  .ivy-lead-contact .ivy-lead-sub {
    margin: 0 auto 2.25rem;
  }

  .ivy-lead-contact .ivy-enquiry-toggle {
    margin-bottom: 2.5rem;
  }

  .ivy-lead-contact .ivy-lead-grid {
    column-gap: 1.5rem;
  }

  .ivy-lead-contact .ivy-lead-grid .form-group {
    margin-bottom: 1.4rem;
  }
}

/* Home feed: a compact grid of four across and three down, centred,
   not full width; tiles at 75% of the page-width size (George,
   15/10/2026). Phones keep three across. */
.template-home .instagram-feed .synsocial-instagram {
  max-width: 870px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

@media (min-width: 768px) {
  .template-home .instagram-feed .synsocial-instagram .row > [class*="col-"] {
    flex: 0 0 25%;
    max-width: 25%;
  }
}

/* Fix 17 (15/10/2026): photos as img elements, so only what is near the
   screen downloads. Each img fills the box its background image used to
   fill, with the same crop.
   ======================================================
   Talent gallery slider (Model template): every slide photo is an img
   inside its link. The link keeps its padding-top height. */
.model-gallery.image-gallery .slider .image-container .image {
  position: relative;
}
.model-gallery.image-gallery .slider .image-container .image img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}
/* The slider fades between stacked slides, so every slide sits on screen
   and lazy loading alone would fetch them all. Photos in slides other than
   the first, the current one and its two neighbours stay out of the
   layout; each one loads as its slide becomes a neighbour. */
.model-gallery.image-gallery .slider .swiper-slide:not(:first-child):not(.swiper-slide-active):not(.swiper-slide-prev):not(.swiper-slide-next) .image img {
  display: none;
}

/* Division grid (Division template): the headshot is an img inside
   .headshot-image, which keeps its padding-top height and hover zoom. */
a.model .headshot-image > img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}
a.model .headshot-image {
  position: relative;
}

/* Instagram feed tiles (scripts-custom.js): the tile link keeps its
   square padding-top box. */
.synsocial-instagram .ig-item a.ig-video {
  position: relative;
}
.synsocial-instagram .ig-item a.ig-video > img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}