/* ============================================================
   IDEA CZAR — SQUARESPACE CUSTOM STYLES
   Hosted via Cloudflare Pages, loaded in Squarespace header injection.

   To update: edit this file → push to GitHub → Cloudflare deploys
   automatically → changes live on site within ~60 seconds.

   Table of contents:
     1.  Custom fonts (Propaganda, Molot, Fyodor)
     2.  Headings & nav typography
     3.  Active nav underline
     4.  Featured Work list — hover overlay (section 69a1ab39...)
     5.  Featured Work list — card hover lift & shadow
     6.  Featured Work list — padding adjustment
     7.  Hero — "Get a Quote" text & vertical divider
     8.  About — Ken image flush with section divider
     9.  Global orange square — bold sub-headline accent
    10.  Primary button border color
    11.  List-section title gold underline
   ============================================================ */


/* ----------------------------------------------------------
   1. CUSTOM FONTS
   ---------------------------------------------------------- */

@font-face {
  font-family: 'Propaganda';
  src: url('https://static1.squarespace.com/static/69a1a889960bd65e0c70be09/t/69baa128fb1b2c01de89a28f/1773838632045/propaganda.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Molot';
  src: url('https://static1.squarespace.com/static/69a1a889960bd65e0c70be09/t/69d3e801acb9fd688f13d044/1775495169829/Molot.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fyodor';
  src: url('https://static1.squarespace.com/static/69a1a889960bd65e0c70be09/t/69baa23976194c4acbcf7fbf/1773838905486/Fyodor-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* ============================================================
   1b. PORTED FROM SQUAREKICKER
   ============================================================
   Everything SquareKicker was injecting, rewritten as plain CSS so
   the plugin can be removed. Ported verbatim (same selectors, same
   values) so the site looks identical — with two mechanical changes:

     1. Palette variables resolved to literal hex.
        --sk-color-7c4  #000000FC   near-black
        --sk-color-29d  #F4A825     brand gold
        --sk-color-3c0  #336653A5   green @ 65% (About overlay)
        --sk-color-2cc  #EEE3D5     beige (section backgrounds)
        (--sk-color-936 / -260 / -d8a were defined but never used.)

     2. Preset CLASSES resolved to the block IDs they were applied to.
        This is the important one: SquareKicker adds .sk-preset-*
        classes via JavaScript at runtime. Once the plugin is gone
        those classes never appear, so any rule depending on them
        would silently stop working.
          .sk-preset-8185753453162701 -> #block-a28e50ebf0b3bc6df216
          .sk-preset-4652941237684623 -> #block-yui_3_17_2_1_1772202649113_937
                                         #block-yui_3_17_2_1_1778599065713_1044
          .sk-preset-5479024868514497 -> #block-yui_3_17_2_1_1772202127116_2470

   This block sits EARLY in the file on purpose: several of our own
   rules further down were written to override SquareKicker, and at
   equal specificity the later rule wins. Keep it above them.
   ============================================================ */

/* --- Hero "Get a Quote" text block --- */
#block-5477d88409637e58f501 p:not(.sqsrte-large):not(.sqsrte-small),
#block-5477d88409637e58f501 p:not(.sqsrte-large):not(.sqsrte-small) span[class^='sqsrte-text-color'] {
  font-size: calc(clamp(0px, calc((var(--normal-text-size-value) - 1) * 1.2vw + 1rem), calc(var(--normal-text-size-value) * 1rem)) * 0.76) !important;
  font-weight: 400;
  line-height: calc(var(--body-font-line-height) * 1.26);
}
#block-5477d88409637e58f501 p:not(.sqsrte-large):not(.sqsrte-small) strong,
#block-5477d88409637e58f501 p:not(.sqsrte-large):not(.sqsrte-small) strong span[class^='sqsrte-text-color'] {
  font-size: 1.56em !important;
  color: #000000FC;
  font-weight: 400;
}

/* --- Home hero sub-headline --- */
#block-yui_3_17_2_1_1772202127116_2965 p.sqsrte-large,
#block-yui_3_17_2_1_1772202127116_2965 p.sqsrte-large span[class^='sqsrte-text-color'] {
  font-size: calc(clamp(0px, calc((var(--large-text-size-value) - 1) * 1.2vw + 1rem), calc(var(--large-text-size-value) * 1rem)) * 1.15) !important;
}

/* --- About section heading + bold text --- */
#block-yui_3_17_2_1_1772213491145_49717 p:not(.sqsrte-large):not(.sqsrte-small) strong,
#block-yui_3_17_2_1_1772213491145_49717 p:not(.sqsrte-large):not(.sqsrte-small) strong span[class^='sqsrte-text-color'] {
  font-size: 0.8em !important;
}
#block-yui_3_17_2_1_1772213491145_49717 h2,
#block-yui_3_17_2_1_1772213491145_49717 h2 span[class^='sqsrte-text-color'] {
  -webkit-text-stroke: #000000FC 3px;
}

/* --- Home hero H1 (0.95 size multiplier + gold stroke) --- */
#block-yui_3_17_2_1_1772202127116_2470 h1,
#block-yui_3_17_2_1_1772202127116_2470 h1 span[class^='sqsrte-text-color'] {
  font-size: calc(clamp(0px, calc((var(--heading-1-size-value) - 1) * 1.2vw + 1rem), calc(var(--heading-1-size-value) * 1rem)) * 0.95) !important;
  -webkit-text-stroke: #F4A825 3px;
}

/* --- Home hero paragraph (was .sk-preset-5479024868514497) --- */
#block-yui_3_17_2_1_1772202127116_2470 p:not(.sqsrte-large):not(.sqsrte-small),
#block-yui_3_17_2_1_1772202127116_2470 p:not(.sqsrte-large):not(.sqsrte-small) span[class^='sqsrte-text-color'] {
  font-size: calc(clamp(0px, calc((var(--normal-text-size-value) - 1) * 1.2vw + 1rem), calc(var(--normal-text-size-value) * 1rem)) * 0.8) !important;
  font-weight: 400;
  letter-spacing: 0.12em;
}

/* --- About section: green overlay on the background image --- */
#siteWrapper section[data-section-id="69a1e248a45af16353a9dffd"] .section-background:before {
  background: #336653A5;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}
#siteWrapper section[data-section-id="69a1e248a45af16353a9dffd"] .content-wrapper {
  z-index: 1;
}

/* --- About social icons: gold fill, black border --- */
#block-yui_3_17_2_1_1773840435644_1939 a {
  background: #F4A825;
}
#block-yui_3_17_2_1_1773840435644_1939 .sqs-use--mask {
  fill: none;
}
#block-yui_3_17_2_1_1773840435644_1939 a .sqs-use--icon {
  fill: #000000FC;
}
#siteWrapper #block-yui_3_17_2_1_1773840435644_1939 a {
  border-color: hsl(var(--black-hsl));
  border-width: 3px;
  box-sizing: border-box;
  box-shadow: none;
  border-style: solid;
  padding: 3px;
}
#block-yui_3_17_2_1_1773840435644_1939 .sqs-svg-icon--wrapper > div {
  transform: scale(1);
}

/* --- Gold top/bottom rules on a block --- */
#siteWrapper #block-yui_3_17_2_1_1773845080377_2202 {
  border-color: #F4A825;
  border-width: 15px;
  box-sizing: border-box;
  border-style: solid;
  border-left-width: 0px !important;
  border-right-width: 0px !important;
}

/* --- About hero H1 stroke (width overridden to 3px further down) --- */
#block-yui_3_17_2_1_1775502237673_443 h1,
#block-yui_3_17_2_1_1775502237673_443 h1 span[class^='sqsrte-text-color'] {
  -webkit-text-stroke: #F4A825 4px;
}

/* --- Home contact-section social icons --- */
#block-yui_3_17_2_1_1775497994544_29883 a {
  background: #F4A825;
}
#block-yui_3_17_2_1_1775497994544_29883 .sqs-use--mask {
  fill: none;
}
#block-yui_3_17_2_1_1775497994544_29883 a .sqs-use--icon {
  fill: hsl(var(--lightAccent-hsl));
}

/* --- Services list section: beige background --- */
#siteWrapper section[data-section-id="69a1e3b70627ef1961c0ec2b"].has-background .section-background:before {
  background: #EEE3D5;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}
#siteWrapper section[data-section-id="69a1e3b70627ef1961c0ec2b"].has-background .content-wrapper {
  z-index: 1;
}

/* --- Home contact form (field bg/colour overridden further down) --- */
#siteWrapper #block-yui_3_17_2_1_1775494432162_2715 .form-button-wrapper .button {
  background: #F4A825 !important;
}
#siteWrapper #block-yui_3_17_2_1_1775494432162_2715 .field input[type="text"],
#siteWrapper #block-yui_3_17_2_1_1775494432162_2715 .field input[type="email"],
#siteWrapper #block-yui_3_17_2_1_1775494432162_2715 .field textarea {
  border: 0;
  background-color: rgba(0, 0, 0, 0.2);
  color: inherit;
}
#siteWrapper #block-yui_3_17_2_1_1775494432162_2715 .field input[type="text"]::placeholder,
#siteWrapper #block-yui_3_17_2_1_1775494432162_2715 .field input[type="email"]::placeholder {
  color: inherit;
  opacity: 1;
}

/* --- Work page: faded section background ---
   Ken read this as "the background no longer tiles, it's one enlarged
   image." It was never tiled: Squarespace renders a section background
   as a single object-fit: cover <img>, and this rule fades it to 23% so
   it reads as a quiet paper texture instead of a bold photo. When the
   section was rebuilt the rule stopped matching (see the note in
   section 12 below) and the texture came through at 100%.

   Two things changed on the rebuilt section, so both are covered here:
     - the section ID rotated  -> anchor on the grid, not the ID
     - Squarespace now wraps the image in .sqs-section-background,
       not .section-background -> match either class name */
#siteWrapper section.page-section:has(.portfolio-grid-overlay) :is(.section-background, .sqs-section-background) > * {
  opacity: 23%;
}

/* --- Contact page social icons (mask fill set to #bc132d further down) --- */
#block-e5c2d1d2d2614afd3a5f a {
  background: hsl(var(--accent-hsl));
}
#block-e5c2d1d2d2614afd3a5f .sqs-use--mask {
  fill: none;
}
#block-e5c2d1d2d2614afd3a5f a .sqs-use--icon {
  fill: hsl(var(--lightAccent-hsl));
}

/* --- Contact page form (field bg/colour overridden further down) --- */
#siteWrapper #block-82ce350e3c90e7e3e03b .form-button-wrapper .button {
  background: #F4A825 !important;
}
#siteWrapper #block-82ce350e3c90e7e3e03b .field input[type="text"],
#siteWrapper #block-82ce350e3c90e7e3e03b .field input[type="email"],
#siteWrapper #block-82ce350e3c90e7e3e03b .field textarea {
  border: 0;
  background-color: rgba(0, 0, 0, 0.2);
  color: inherit;
}
#siteWrapper #block-82ce350e3c90e7e3e03b .field input[type="text"]::placeholder,
#siteWrapper #block-82ce350e3c90e7e3e03b .field input[type="email"]::placeholder {
  color: inherit;
  opacity: 1;
}

/* --- Services hero H1: SquareKicker's 0.9 size multiplier and 4px
       stroke lived here, keyed to a block that has since been
       rebuilt in the editor (new ID). Removed rather than
       re-pointed: the global H1 scale and the global gold-outline
       baseline now cover this, and they survive block swaps. --- */

/* --- Services page: beige section backgrounds --- */
#siteWrapper section[data-section-id="69fa4ac868d01d7b5dfeed24"] .section-background {
  background: #EEE3D5 !important;
}
#siteWrapper section[data-section-id="69fa4ac868d01d7b5dfeed24"],
#siteWrapper section[data-section-id="69fa4ac868d01d7b5dfeed24"] .section-border {
  background: none;
}
#siteWrapper section[data-section-id="69fa4ea2679405554d5f74dd"] .section-background {
  background: #EEE3D5 !important;
}
#siteWrapper section[data-section-id="69fa4ea2679405554d5f74dd"],
#siteWrapper section[data-section-id="69fa4ea2679405554d5f74dd"] .section-border {
  background: none;
}

/* --- Gold buttons with black border
       (was .sk-preset-4652941237684623, applied to two blocks) --- */
#siteWrapper #block-yui_3_17_2_1_1772202649113_937 .sqs-block-button-element,
#siteWrapper #block-yui_3_17_2_1_1778599065713_1044 .sqs-block-button-element {
  background: #F4A825;
}
#siteWrapper #block-yui_3_17_2_1_1772202649113_937 .sqs-block-button-container a,
#siteWrapper #block-yui_3_17_2_1_1778599065713_1044 .sqs-block-button-container a {
  border-color: #000000FC;
  border-width: 3px;
  box-sizing: border-box;
  border-style: solid;
}
#siteWrapper #block-yui_3_17_2_1_1772202649113_937 .sqs-block-button-container a::before,
#siteWrapper #block-yui_3_17_2_1_1778599065713_1044 .sqs-block-button-container a::before {
  border: none;
}


/* ============================================================
   1c. RESPONSIVE TYPE SCALE — width-driven
   ============================================================
   Squarespace sizes headings with:
     clamp(0px, (SIZE - 1) * 1.2vmax + 1rem, SIZE * 1rem)

   The problem is vmax: it resolves to whichever viewport dimension
   is LARGER. On any portrait screen — i.e. every phone and every
   tablet held upright — that's the HEIGHT, so headings get sized
   off a number that has nothing to do with the space they have to
   fit into.

   Measured on this site at 500x900 (a normal phone):
     rendered via vmax .... 60.3px
     correct for the width  40.6px
     ~48% oversized
   It also means rotating a phone to landscape makes the headline
   SHRINK, despite there being more width. Backwards.

   Fix: identical formula with vw instead of vmax, so type scales
   with available WIDTH. Desktop is unchanged (above ~1333px the
   clamp was already pinned to its max), and a floor is added so
   headings stay legible on small screens instead of trending to
   near-nothing.

   The same swap has been applied to the per-block rules ported
   from SquareKicker, so block-level size multipliers still work
   but are now width-driven too.
   ============================================================ */

/* The 0.95 multiplier matches the Home hero, which is the reference
   for H1 size across the site. It originally came from a SquareKicker
   per-block override on Home only, which left About and Services ~5%
   larger (81.6px vs 77.5px at 1440). Folding it into the global scale
   makes every H1 match Home instead of Home being the odd one out.
   The floor stays at 2rem so small screens aren't scaled down twice. */
h1, h1 span[class^="sqsrte-text-color"] {
  font-size: clamp(
    2rem,
    calc(((var(--heading-1-size-value) - 1) * 1.2vw + 1rem) * 0.95),
    calc(var(--heading-1-size-value) * 1rem * 0.95)
  ) !important;
}

/* NOTE: deliberately NOT doing this for h2/h3.
   A blanket "h2 { font-size: ... !important }" looks tidy but is
   destructive: Squarespace sizes H2/H3 contextually — Featured Work
   item titles and the service-area headings are 24px by design —
   and an !important global forces every one of them to the theme's
   H2 maximum (64px). That shipped briefly and blew those titles up
   ~2.7x.

   The vmax->vw problem is worth solving on the hero H1, where the
   type is large enough for the difference to matter. For H2/H3 the
   cost of overriding Squarespace's per-context sizing far outweighs
   the benefit, so those keep their native sizing. */


/* ----------------------------------------------------------
   2. HEADINGS & NAV TYPOGRAPHY
   ---------------------------------------------------------- */

/* All headings use Molot, uppercase, with open tracking */
h1, h2, h3 {
  font-family: 'Molot', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Nav links, primary buttons, h4, list-section titles, project
   pagination titles, and the "Get a Quote" block use Fyodor
   bold uppercase. The .item-pagination-title is an h2 by default
   so we override the h1/h2/h3 Molot rule above by listing it
   explicitly here (later rule wins on equal specificity). */
nav a,
.header-nav-item a,
.sqs-button-element--primary,
h4,
.list-section-title,
.item-pagination-title,
h2.item-pagination-title,
#block-5477d88409637e58f501 {
  font-family: 'Fyodor', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}


/* ----------------------------------------------------------
   3. NAV UNDERLINE — active + hover
   Active nav item: solid gold underline (#F5A724, brand gold).
   Non-active items: on hover, the same gold underline animates
   in from left to right. Hover underline is disabled on the
   active item (it already has one).
   ---------------------------------------------------------- */

/* Active state — solid gold line */
body:not(.header--menu-open) .header-nav-item--active > a:not(.header-nav-folder-title) {
  background-image: linear-gradient(#F5A724, #F5A724) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 3px !important;
  background-position: 0 calc(100% - 0.05em) !important;
}

/* Position context for the animated hover underline */
.header-nav-item > a:not(.header-nav-folder-title) {
  position: relative;
}

/* Non-active nav links: animated gold underline on hover */
.header-nav-item:not(.header-nav-item--active) > a:not(.header-nav-folder-title)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background-color: #F5A724;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
  pointer-events: none;
}

.header-nav-item:not(.header-nav-item--active) > a:not(.header-nav-folder-title):hover::after,
.header-nav-item:not(.header-nav-item--active) > a:not(.header-nav-folder-title):focus-visible::after {
  transform: scaleX(1);
}

/* Same animated gold underline on portfolio project pagination
   titles (Previous / Next links at the bottom of a project page).
   Structure: a.item-pagination-link > div > h2.item-pagination-title */
.item-pagination-title {
  position: relative;
  display: inline-block;      /* hug the text so underline only spans the title */
}

.item-pagination-title::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background-color: #F5A724;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
  pointer-events: none;
}

.item-pagination-link:hover .item-pagination-title::after,
.item-pagination-link:focus-visible .item-pagination-title::after {
  transform: scaleX(1);
}


/* ============================================================
   4. FEATURED WORK LIST — HOVER OVERLAY
   Section: 69a1ab39e4a48e5f71c38db3

   Desktop: hover reveals a full-image overlay with title and
   description, alternating green/gold backgrounds.
   Mobile: overlay disabled, description shows inline.
   ============================================================ */

/* Hide original native button wrapper */
section[data-section-id="69a1ab39e4a48e5f71c38db3"] .list-item-content__button-wrapper {
  display: none !important;
}

/* Hide original description on desktop (shown inside overlay instead) */
@media screen and (min-width: 768px) {
  section[data-section-id="69a1ab39e4a48e5f71c38db3"] .list-item-content__description {
    display: none !important;
  }
}

/* Fade out the title underneath the image on hover */
section[data-section-id="69a1ab39e4a48e5f71c38db3"] .list-item-content__title {
  transition: opacity 0.3s ease !important;
}
section[data-section-id="69a1ab39e4a48e5f71c38db3"] .list-item:hover .list-item-content__title {
  opacity: 0 !important;
}

/* Media container acts as positioning context */
section[data-section-id="69a1ab39e4a48e5f71c38db3"] .list-item-media-inner {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 0px !important;
}
section[data-section-id="69a1ab39e4a48e5f71c38db3"] .list-item-media-inner img {
  border-radius: 0px !important;
}

/* The overlay itself (injected by JS) */
section[data-section-id="69a1ab39e4a48e5f71c38db3"] .hover-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 28px !important;
  box-sizing: border-box !important;
  opacity: 0 !important;
  transition: opacity 0.35s ease !important;
  z-index: 2 !important;
  text-decoration: none !important;
  cursor: pointer !important;
}
section[data-section-id="69a1ab39e4a48e5f71c38db3"] .list-item:hover .hover-overlay {
  opacity: 1 !important;
  border: 5px solid #000;
}

/* Overlay typography */
section[data-section-id="69a1ab39e4a48e5f71c38db3"] .hover-overlay h2.overlay-title {
  color: #ffffff !important;
  font-size: 34px !important;
  line-height: 1.15 !important;
  text-align: center !important;
  margin: 0 0 16px 0 !important;
}
section[data-section-id="69a1ab39e4a48e5f71c38db3"] .hover-overlay p {
  color: #ffffff !important;
  font-size: 20px !important;
  line-height: 1.5 !important;
  text-align: center !important;
  margin: 0 !important;
}

/* Alternating overlay colors — green odd, gold even */
section[data-section-id="69a1ab39e4a48e5f71c38db3"] .list-item:nth-child(odd) .hover-overlay {
  background-color: rgba(51, 102, 83, 0.98) !important;
}
section[data-section-id="69a1ab39e4a48e5f71c38db3"] .list-item:nth-child(even) .hover-overlay {
  background-color: rgba(235, 153, 27, 0.98) !important;
}

/* Title link stays inherited color, no underline */
section[data-section-id="69a1ab39e4a48e5f71c38db3"] .list-item-content__title a {
  color: inherit !important;
  text-decoration: none !important;
  background-image: none !important;
}
section[data-section-id="69a1ab39e4a48e5f71c38db3"] .list-item-content__title a:hover {
  opacity: 0.7 !important;
}

/* Pointer cursor over the media area */
section[data-section-id="69a1ab39e4a48e5f71c38db3"] .list-item-media {
  cursor: pointer !important;
}

/* Mobile — overlay disabled, normal inline description returns */
@media screen and (max-width: 767px) {
  section[data-section-id="69a1ab39e4a48e5f71c38db3"] .hover-overlay {
    display: none !important;
  }
  section[data-section-id="69a1ab39e4a48e5f71c38db3"] .list-item:hover .list-item-content__title {
    opacity: 1 !important;
  }
}


/* ----------------------------------------------------------
   5. FEATURED WORK LIST — CARD HOVER LIFT & SHADOW
   ---------------------------------------------------------- */

/* Whole card lifts slightly on hover */
section[data-section-id="69a1ab39e4a48e5f71c38db3"] .list-item {
  transition: transform 0.3s ease !important;
}
section[data-section-id="69a1ab39e4a48e5f71c38db3"] .list-item:hover {
  transform: translateY(-3px) scale(1.01) !important;
}

/* Shadow on the image container only (not the text below it) */
section[data-section-id="69a1ab39e4a48e5f71c38db3"] .list-item-media-inner {
  transition: box-shadow 0.3s ease !important;
}
section[data-section-id="69a1ab39e4a48e5f71c38db3"] .list-item:hover .list-item-media-inner {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12),
              0 4px 10px rgba(0, 0, 0, 0.06) !important;
}

/* Mobile — no lift or shadow */
@media screen and (max-width: 767px) {
  section[data-section-id="69a1ab39e4a48e5f71c38db3"] .list-item:hover {
    transform: none !important;
  }
  section[data-section-id="69a1ab39e4a48e5f71c38db3"] .list-item:hover .list-item-media-inner {
    box-shadow: none !important;
  }
}


/* ----------------------------------------------------------
   6. FEATURED WORK LIST — TOP PADDING
   Breathing room above the first row of cards.
   ---------------------------------------------------------- */

section[data-section-id="69a1ab39e4a48e5f71c38db3"] .user-items-list {
  padding-top: 25px !important;
}


/* ============================================================
   7. HERO — "GET A QUOTE" TEXT STYLING + VERTICAL DIVIDER
   Section: 69a1a9057889be6b0aee15b2
   Block:   #block-5477d88409637e58f501

   Dark text on default, orange on hover, no underline.
   Subtle orange vertical divider to the left (desktop only).
   ============================================================ */

section[data-section-id="69a1a9057889be6b0aee15b2"] #block-5477d88409637e58f501 p,
section[data-section-id="69a1a9057889be6b0aee15b2"] #block-5477d88409637e58f501 p a {
  color: #201D20 !important;
  transition: color 0s ease !important;
  cursor: pointer !important;
  text-decoration: none !important;
  background-image: none !important;
}
section[data-section-id="69a1a9057889be6b0aee15b2"] #block-5477d88409637e58f501 p strong,
section[data-section-id="69a1a9057889be6b0aee15b2"] #block-5477d88409637e58f501 p a strong {
  color: inherit !important;
}

/* Hover — orange */
section[data-section-id="69a1a9057889be6b0aee15b2"] #block-5477d88409637e58f501 p:hover,
section[data-section-id="69a1a9057889be6b0aee15b2"] #block-5477d88409637e58f501 p:hover a,
section[data-section-id="69a1a9057889be6b0aee15b2"] #block-5477d88409637e58f501 p:hover strong,
section[data-section-id="69a1a9057889be6b0aee15b2"] #block-5477d88409637e58f501 p a:hover {
  color: #e8962f !important;
  text-decoration: none !important;
  background-image: none !important;
}

/* Vertical divider line (desktop) */
section[data-section-id="69a1a9057889be6b0aee15b2"] .fe-block-5477d88409637e58f501 {
  position: relative !important;
}
section[data-section-id="69a1a9057889be6b0aee15b2"] .fe-block-5477d88409637e58f501::before {
  content: '' !important;
  position: absolute !important;
  left: -16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 1.5px !important;
  height: 70% !important;
  background-color: rgba(232, 150, 47, 0.5) !important;
}
@media screen and (max-width: 767px) {
  section[data-section-id="69a1a9057889be6b0aee15b2"] .fe-block-5477d88409637e58f501::before {
    display: none !important;
  }
}


/* ============================================================
   8. ABOUT — KEN IMAGE FLUSH WITH SECTION DIVIDER
   Section: 69a1e248a45af16353a9dffd
   Block:   #block-yui_3_17_2_1_1772216668345_1327

   Pushes Ken's image down 72px and raises z-index so he sits
   flush with (not behind) the diagonal section divider.
   Mobile: reset.
   ============================================================ */

section[data-section-id="69a1e248a45af16353a9dffd"] #block-yui_3_17_2_1_1772216668345_1327 {
  position: relative !important;
  top: 72px !important;
  z-index: 2 !important;
}

@media screen and (max-width: 767px) {
  section[data-section-id="69a1e248a45af16353a9dffd"] #block-yui_3_17_2_1_1772216668345_1327 {
    top: 0 !important;
  }
}


/* ============================================================
   9. GLOBAL ORANGE SQUARE — BOLD SUB-HEADLINE ACCENT
   Adds a 10×10px orange square before any bold sub-headline
   paragraph site-wide. To use on a new section: write the
   sub-headline in a text block, bold it, and apply any
   Squarespace text color (accent, black, etc.).

   Does NOT match "Get a Quote" — its <strong> is inside <a>,
   not a color span, so it's excluded by design.
   ============================================================ */

.sqs-block-html p:has(> [class*="sqsrte-text-color"] > strong)::before,
.sqs-block-html p.sqsrte-small:has(> strong)::before {
  content: '' !important;
  display: inline-block !important;
  width: 10px !important;
  height: 10px !important;
  background-color: #e8962f !important;
  margin-right: 10px !important;
  vertical-align: middle !important;
  position: relative !important;
  top: -1px !important;
}


/* ----------------------------------------------------------
   10. PRIMARY BUTTON BORDER COLOR
   ---------------------------------------------------------- */

.primary-button-style-solid .sqs-button-element--primary {
  border-color: #610102;
}


/* ============================================================
   11. LIST-SECTION TITLE GOLD UNDERLINE
   Replicates the gold SVG underline used on "Clients" (via
   Squarespace Text Shape, color #F5A724) on the "Featured Work"
   and "Services" section titles, which are <p> tags inside
   .user-items-list-section and don't support Text Shape natively.
   ============================================================ */

.user-items-list-section .list-section-title,
.user-items-list-section .list-section-title p {
  text-decoration: underline !important;
  text-decoration-color: #F5A724 !important;
  text-decoration-thickness: 0.1em !important;
  text-underline-offset: 0.12em !important;
  text-decoration-skip-ink: none !important;
}


/* ============================================================
   12. PORTFOLIO FILTER — WORK PAGE
   Section:    matched by CONTENT — section.page-section:has(.portfolio-grid-overlay)
   Collection: 69a1d4c9ddb6a504135dda24 (Work)

   WHY NOT THE SECTION ID: every rule in this section (and in the hover
   block further down) used to be keyed to data-section-id
   69a1d4ceddb6a504135dda80. In 2026-09 Ken rebuilt the Work page
   section in the editor; Squarespace minted a new ID
   (6a6bead2035991387c1f18a4) and all 27 rules went dead at once —
   filter layout, hover overlay, tagline, background fade. Nothing was
   deleted from this file or from Code Injection; the anchor simply no
   longer existed on the page. Section IDs rotate on any rebuild.
   .portfolio-grid-overlay is unique to the Work page (Home's Featured
   Work uses a different grid), so it is the durable anchor. Same fix
   as the Services hero blocks.

   Style match: https://wearetopsecret.com/our-work/
     - Vertical pill list on the left
     - "FILTER" label above
     - White pills with 1px border + small "+" icon
     - Active: dark filled pill, white text, + rotates to ×
     - Multi-select (click to toggle)
     - Mobile: stacks above grid as horizontal scrolling row

   Categories are read from each project's DESCRIPTION field,
   expected format:  CATEGORIES: Content, B2B
   (the JS hides that line on individual project pages)
   ============================================================ */

/* Keep the work section full-viewport-tall even when filters hide
   most/all cards — prevents the page background from showing through */
section.page-section:has(.portfolio-grid-overlay) {
  min-height: 100vh !important;
}

/* Make .content a flex container so filter sits left, grid sits right.
   Cap and center it so on wide viewports the filter stays anchored
   right next to the grid instead of drifting to the viewport edge. */
section.page-section:has(.portfolio-grid-overlay) > .content-wrapper > .content {
  display: flex !important;
  align-items: flex-start !important;
  gap: 24px !important;
  max-width: 1700px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  min-height: calc(100vh - 160px);    /* breathing room for header + section padding */
}

/* Grid takes the remaining width inside the capped flex container.
   max-width: none unblocks Squarespace's internal constraint so the
   grid actually fills the space left over after the filter. */
section.page-section:has(.portfolio-grid-overlay) .portfolio-grid-overlay {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding-left: 12px !important;
}

/* ---------------- Filter sidebar ----------------
   padding-top is calibrated so the "FILTER" label
   sits flush with the top of the first card:
     grid's top padding    ≈ 48px
     sticky-top offset     = 100px
     content-wrapper top   ≈  88px (below fixed header)
   → label should appear at y ≈ 135 (first card top)
   → padding-top = 135 - 100 = 35
-------------------------------------------------- */
.ic-portfolio-filter {
  flex: 0 0 240px;                /* wider to accommodate "Brand Guidelines" */
  padding: 35px 0 40px 60px;
  position: sticky;
  top: 100px;
  box-sizing: border-box;
  align-self: flex-start;
}

.ic-filter-label {
  font-family: 'Fyodor', sans-serif;
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #201D20;
  margin-bottom: 18px;
}

.ic-filter-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  /* Pills are built from the categories found across the project
     pages, so they land after those fetches resolve. Fade them in
     rather than letting them pop. The sidebar is a fixed 240px
     column, so nothing reflows around them. */
  opacity: 0;
  transition: opacity 0.25s ease;
}
.ic-portfolio-filter.is-ready .ic-filter-list { opacity: 1; }

/* No project carries a category yet — hide the whole sidebar instead
   of showing a "Filter" heading with nothing under it. */
.ic-portfolio-filter.is-empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ic-filter-list { transition: none; }
}

/* ---------------- Filter pill ---------------- */
.ic-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px 11px 24px;
  border: 1px solid #201D20;
  border-radius: 40px;
  background: transparent;
  color: #201D20;
  font-family: 'Fyodor', sans-serif;
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  line-height: 1;
  white-space: nowrap;            /* keep "Brand Guidelines" on one line */
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
}

.ic-filter-text {
  white-space: nowrap;
}

.ic-filter-pill:hover {
  background-color: rgba(32, 29, 32, 0.06);
}

.ic-filter-pill.is-active {
  background-color: #c71e23;
  border-color: #c71e23;
  color: #ffffff;
}

.ic-filter-icon {
  display: inline-flex;
  width: 13px;
  height: 13px;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.ic-filter-icon svg {
  width: 100%;
  height: 100%;
}

.ic-filter-pill.is-active .ic-filter-icon {
  transform: rotate(45deg); /* + → × */
}

/* Clear-all link, shown only when a filter is active */
.ic-filter-clear {
  margin-top: 14px;
  display: none;
  background: none;
  border: 0;
  padding: 0;
  font-family: 'Fyodor', sans-serif;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: #201D20;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.7;
}
.ic-filter-clear:hover { opacity: 1; }
.ic-portfolio-filter.has-active .ic-filter-clear { display: inline-block; }

/* ---------------- Grid item fade + filtered-out state ---------------- */
section.page-section:has(.portfolio-grid-overlay) .grid-item {
  transition: opacity 0.25s ease;
}

section.page-section:has(.portfolio-grid-overlay) .portfolio-grid-overlay.ic-filtering .grid-item {
  opacity: 0;
  pointer-events: none;
}

section.page-section:has(.portfolio-grid-overlay) .grid-item.ic-hidden {
  display: none !important;
}

/* Empty-state message (injected by JS when no items match) */
.ic-filter-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 20px;
  font-family: 'Fyodor', sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(32, 29, 32, 0.5);
}

/* Hide the "CATEGORIES: ..." line on individual project pages
   (the JS also removes it as a safety net, but CSS here prevents flash) */
.ic-hidden-meta { display: none !important; }

/* ---------------- Mobile: stack above grid, centered & even ---------------- */
@media screen and (max-width: 767px) {
  section.page-section:has(.portfolio-grid-overlay) > .content-wrapper > .content {
    flex-direction: column !important;
    gap: 12px !important;
  }
  /* Filter: full width, centered label + pills, matching 20px gutter */
  .ic-portfolio-filter {
    flex: 0 0 auto;
    position: static;
    width: 100%;
    padding: 24px 20px 4px 20px;
    text-align: center;
  }
  .ic-filter-label {
    text-align: center !important;
  }
  .ic-filter-list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;   /* center the pills */
    gap: 8px;
  }
  /* Thumbnails: even 20px gutters both sides so the grid is centered
     (Squarespace's default gives 0 left / ~23px right, shifting it
     left). box-sizing keeps the padded width honest. Specificity must
     match the section-scoped selector to beat the earlier override. */
  section.page-section:has(.portfolio-grid-overlay) .portfolio-grid-overlay {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }
}

/* Guard edit mode: don't break Squarespace's own drag/edit overlays */
body.sqs-is-page-editing .ic-portfolio-filter { display: none !important; }
body.sqs-is-page-editing section.page-section:has(.portfolio-grid-overlay) > .content-wrapper > .content {
  display: block !important;
}


/* ============================================================
   LIST-SECTION BUTTON — match the "See the work" CTA exactly
   Section: 69a1e3b70627ef1961c0ec2b   ("View Services" button)
   Reference: #block-yui_3_17_2_1_1772202649113_937 (the CTA)

   Squarespace styles the list-section-button as secondary-large
   by default (red outline, Almarai 12px). The CTA is primary-medium
   (gold fill, black border, Fyodor 16px). We force every visible
   property on the target to match the CTA.
   ============================================================ */

section[data-section-id="69a1e3b70627ef1961c0ec2b"] .list-section-button {
  /* Color / fill */
  background-color: #F4A825 !important;   /* gold (--sk-color-29d) */
  color: #ffffff !important;
  border: 3px solid #000 !important;      /* matches CTA's --sk-color-7c4 */
  border-radius: 0 !important;
  box-sizing: border-box !important;

  /* Type */
  font-family: 'Fyodor', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;

  /* Sizing — match CTA height of ~60px without fighting line-height */
  padding: 0 20.8px !important;
  min-height: 60px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Kill the secondary-style outline pseudo-element if any */
section[data-section-id="69a1e3b70627ef1961c0ec2b"] .list-section-button::before {
  border: none !important;
  content: none !important;
}

/* Hover state — preserve the CTA's resting fill so it doesn't
   suddenly flip color on hover */
section[data-section-id="69a1e3b70627ef1961c0ec2b"] .list-section-button:hover,
section[data-section-id="69a1e3b70627ef1961c0ec2b"] .list-section-button:focus-visible {
  background-color: #F4A825 !important;
  color: #ffffff !important;
  border-color: #000 !important;
  opacity: 0.92 !important;
}


/* ============================================================
   CONTACT FORM — white fields, black type
   Block: #block-yui_3_17_2_1_1775494432162_2715

   Overrides SquareKicker's default black-tint field background
   and inherited color. Uses #siteWrapper prefix to match the
   specificity of SquareKicker's inline style block.
   ============================================================ */

#siteWrapper #block-yui_3_17_2_1_1775494432162_2715 .field input,
#siteWrapper #block-yui_3_17_2_1_1775494432162_2715 .field textarea,
#siteWrapper #block-yui_3_17_2_1_1775494432162_2715 .field select {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 0 !important;
}

/* Placeholder text — slightly muted black so the distinction
   from filled text is still visible */
#siteWrapper #block-yui_3_17_2_1_1775494432162_2715 .field input::placeholder,
#siteWrapper #block-yui_3_17_2_1_1775494432162_2715 .field textarea::placeholder {
  color: rgba(0, 0, 0, 0.5) !important;
  opacity: 1 !important;
}

/* Field label / title text sitting above each input stays
   branded (keeps whatever color the form section theme applies) */


/* ============================================================
   CONTACT PAGE FORM — match the homepage form
   Block: #block-82ce350e3c90e7e3e03b (Contact page)
   Reference: #block-yui_3_17_2_1_1775494432162_2715 (homepage)

   The Contact page form used transparent fields and white submit
   text, so it looked different from the homepage form. Match it:
   white fields, black text, and dark submit text on the gold button.

   Uses input[type=...] selectors (not just .field input) because
   SquareKicker styles this block's fields via type-specific selectors
   that would otherwise out-specify a generic override.
   ============================================================ */

#siteWrapper #block-82ce350e3c90e7e3e03b .field input[type="text"],
#siteWrapper #block-82ce350e3c90e7e3e03b .field input[type="email"],
#siteWrapper #block-82ce350e3c90e7e3e03b .field input[type="tel"],
#siteWrapper #block-82ce350e3c90e7e3e03b .field input[type="number"],
#siteWrapper #block-82ce350e3c90e7e3e03b .field textarea,
#siteWrapper #block-82ce350e3c90e7e3e03b .field select {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 0 !important;
}

#siteWrapper #block-82ce350e3c90e7e3e03b .field input::placeholder,
#siteWrapper #block-82ce350e3c90e7e3e03b .field textarea::placeholder {
  color: rgba(0, 0, 0, 0.5) !important;
  opacity: 1 !important;
}

/* Submit button text: dark on gold, matching the homepage form
   (was white on the Contact page) */
#siteWrapper #block-82ce350e3c90e7e3e03b .form-button-wrapper .button {
  color: #201D20 !important;
}


/* ============================================================
   FORM FIELD CAPTIONS — readable size (site-wide forms)

   Squarespace's "small text" scale is set very low
   (--small-text-size-value: .2), which renders form field captions
   and helper text at ~3.2px — essentially invisible. This affects
   the First/Last name sublabels, the "(required)" tags, and option
   labels like the newsletter checkbox on both the homepage and
   Contact page forms.

   Bump them to readable sizes. Applied to all .sqs-block-form
   instances so every form stays consistent.
   ============================================================ */

#siteWrapper .sqs-block-form .field .caption-text,
#siteWrapper .sqs-block-form .field .caption {
  font-size: 13px !important;
  line-height: 1.4 !important;
}

#siteWrapper .sqs-block-form .field .description,
#siteWrapper .sqs-block-form .field .required {
  font-size: 12px !important;
}

#siteWrapper .sqs-block-form .field .option label,
#siteWrapper .sqs-block-form .field .option {
  font-size: 13px !important;
}


/* ============================================================
   13. WORK PAGE — CARD HOVER (matches Home page Featured Work)
   Section: matched by content (see section 12 note)

   Replicates the hover treatment used on the Home page Featured
   Work list (section 9 above): colored overlay fades in with a
   5px black border, card lifts with shadow, centered white title.
   Odd items = green overlay, even items = gold overlay.
   Mobile: no lift/shadow, native Squarespace title behavior.
   ============================================================ */

/* Card lift + shadow on the image (not the title beneath) */
section.page-section:has(.portfolio-grid-overlay) .grid-item {
  transition: opacity 0.25s ease, transform 0.3s ease !important;
}
section.page-section:has(.portfolio-grid-overlay) .grid-item:hover {
  transform: translateY(-3px) scale(1.01) !important;
}
section.page-section:has(.portfolio-grid-overlay) .grid-image {
  position: relative !important;
  overflow: hidden !important;
  transition: box-shadow 0.3s ease !important;
}
section.page-section:has(.portfolio-grid-overlay) .grid-item:hover .grid-image {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12),
              0 4px 10px rgba(0, 0, 0, 0.06) !important;
}

/* Squarespace's native .portfolio-overlay div becomes our hover overlay */
section.page-section:has(.portfolio-grid-overlay) .portfolio-overlay {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  transition: opacity 0.35s ease, border-color 0.35s ease !important;
  pointer-events: none !important;
  border: 5px solid transparent !important;
  box-sizing: border-box !important;
  z-index: 2 !important;
}

/* Alternating colors — green odd, gold even (match Featured Work) */
section.page-section:has(.portfolio-grid-overlay) .grid-item:nth-child(odd) .portfolio-overlay {
  background-color: rgba(51, 102, 83, 0.98) !important;
}
section.page-section:has(.portfolio-grid-overlay) .grid-item:nth-child(even) .portfolio-overlay {
  background-color: rgba(235, 153, 27, 0.98) !important;
}

/* Reveal overlay on hover with black border */
section.page-section:has(.portfolio-grid-overlay) .grid-item:hover .portfolio-overlay {
  opacity: 1 !important;
  border-color: #000 !important;
}

/* Override Squarespace's native fade-in title behavior — we control it here */
section.page-section:has(.portfolio-grid-overlay) .portfolio-text {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 28px !important;
  z-index: 3 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity 0.35s ease !important;
}
section.page-section:has(.portfolio-grid-overlay) .portfolio-title {
  color: #ffffff !important;
  /* Force Molot (Site Styles sets H3 to Bebas Neue, which is condensed
     and reads smaller at the same px size — match home Featured Work) */
  font-family: 'Molot', sans-serif !important;
  font-size: 34px !important;
  line-height: 1.15 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  margin: 0 0 14px 0 !important;
  /* Kill Squarespace's built-in delayed transition */
  transition: none !important;
  transition-delay: 0s !important;
  transition-duration: 0s !important;
  opacity: 1 !important;
}

/* Tagline / subtitle injected under the title (optional per project) */
section.page-section:has(.portfolio-grid-overlay) .ic-portfolio-subtitle {
  color: #ffffff !important;
  font-size: 20px !important;
  line-height: 1.5 !important;
  text-align: center !important;
  margin: 0 !important;
  max-width: 90% !important;
  /* IBM Plex Sans for the body-style description, same as home page */
  font-family: "IBM Plex Sans", sans-serif !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
section.page-section:has(.portfolio-grid-overlay) .grid-item:hover .portfolio-text {
  opacity: 1 !important;
}

/* Mobile — drop the overlay/lift, let native Squarespace behavior return */
@media screen and (max-width: 767px) {
  section.page-section:has(.portfolio-grid-overlay) .grid-item:hover {
    transform: none !important;
  }
  section.page-section:has(.portfolio-grid-overlay) .grid-item:hover .grid-image {
    box-shadow: none !important;
  }
  section.page-section:has(.portfolio-grid-overlay) .portfolio-overlay,
  section.page-section:has(.portfolio-grid-overlay) .portfolio-text {
    display: none !important;
  }
}


/* ============================================================
   ACCORDION "READ MORE" CONTROL
   Pages: About (collection-69a1d4bf3444676a65fe5bb5)
          Work project pages (collection-69a1d4c9ddb6a504135dda24,
                              item view only)
   Block: .sqs-block-accordion

   Converts the default accordion (title + right-side down arrow)
   into: the first paragraph, with a "Read More" / "Read Less"
   text control sitting BELOW it instead of an arrow.

   Originally About-only. Extended to Work project pages after Ken
   deleted the accordion from a project page and asked to restore it:
   rebuilding it there would have silently come back with the native
   down-arrow, because this styling never reached that collection.
   Now any accordion he adds to a project page picks up the Read More
   treatment on its own, with no code change per page.

   Still scoped rather than global so accordions anywhere else on the
   site keep their native behaviour. :is() keeps the two collections
   on one selector instead of duplicating every rule below.
   ============================================================ */

/* Stack the title over the control instead of title | arrow */
body:is(.collection-69a1d4bf3444676a65fe5bb5, .collection-69a1d4c9ddb6a504135dda24.view-item) .sqs-block-accordion .accordion-item__click-target {
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 16px !important;
}

/* Hide the native arrow graphic */
body:is(.collection-69a1d4bf3444676a65fe5bb5, .collection-69a1d4c9ddb6a504135dda24.view-item) .sqs-block-accordion .accordion-icon-container .arrow-container {
  display: none !important;
}

/* Repurpose the (now empty) icon container as the text control.
   Reset its fixed 14x14 sizing so the label can size to its text. */
body:is(.collection-69a1d4bf3444676a65fe5bb5, .collection-69a1d4c9ddb6a504135dda24.view-item) .sqs-block-accordion .accordion-icon-container {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  transform: none !important;
}

/* The "Read More" / "Read Less" label */
body:is(.collection-69a1d4bf3444676a65fe5bb5, .collection-69a1d4c9ddb6a504135dda24.view-item) .sqs-block-accordion .accordion-icon-container::after {
  content: 'Read More';
  display: inline-block;
  font-family: 'Fyodor', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1;
  color: #201D20;
  border-bottom: 2px solid #F4A825;
  padding-bottom: 3px;
  transition: color 0.2s ease;
}

/* Swap label text when the item is open */
body:is(.collection-69a1d4bf3444676a65fe5bb5, .collection-69a1d4c9ddb6a504135dda24.view-item) .sqs-block-accordion .accordion-item__click-target[aria-expanded="true"] .accordion-icon-container::after {
  content: 'Read Less';
}

/* Hover — gold text to reinforce it's a control */
body:is(.collection-69a1d4bf3444676a65fe5bb5, .collection-69a1d4c9ddb6a504135dda24.view-item) .sqs-block-accordion .accordion-item__click-target:hover .accordion-icon-container::after,
body:is(.collection-69a1d4bf3444676a65fe5bb5, .collection-69a1d4c9ddb6a504135dda24.view-item) .sqs-block-accordion .accordion-item__click-target:focus-visible .accordion-icon-container::after {
  color: #F4A825;
}


/* ============================================================
   ABOUT PAGE — KEEP ILLUSTRATION ANCHORED WHEN ACCORDION OPENS
   Page:  body.collection-69a1d4bf3444676a65fe5bb5 (About)
   Block: .fe-block-yui_3_17_2_1_1775502879666_753 (Ken illustration)

   The illustration and the accordion share one Fluid Engine grid.
   The image block spans the full grid height and centers the image
   vertically (.fluid-image-animation-wrapper: align-items:center).
   When the accordion opens, the grid grows ~750px taller, so the
   centered image drifts downward.

   Anchoring the image to the TOP of its block keeps it fixed in
   place regardless of the accordion's open/closed state.
   ============================================================ */

body.collection-69a1d4bf3444676a65fe5bb5
  .fe-block-yui_3_17_2_1_1775502879666_753
  .fluid-image-animation-wrapper {
  align-items: flex-start !important;
}


/* ============================================================
   HOME HERO — ANCHOR FLAG IMAGE TO SECTION BOTTOM
   Section: 69a1a9057889be6b0aee15b2 (hero)
   Block:   .fe-block-yui_3_17_2_1_1784736317579_4307 (man + flag)

   The hero image block reaches the section bottom, but the image
   is vertically centered inside it
   (.fluid-image-animation-wrapper: align-items:center). As the
   viewport narrows, the block gets shorter than the image's
   natural centered position allows, leaving a gap below the image.

   Anchoring the image to the bottom keeps the figure standing on
   the section's bottom edge at every width, so there's never
   extra padding beneath it.
   ============================================================ */

section[data-section-id="69a1a9057889be6b0aee15b2"]
  .fe-block-yui_3_17_2_1_1784736317579_4307
  .fluid-image-animation-wrapper {
  align-items: flex-end !important;
}

/* Mobile: also anchor the image CONTENT to the bottom. With
   object-fit: contain, a device width that letterboxes the image
   would otherwise center it and leave a sliver of gap below. Pinning
   object-position to the bottom guarantees the figure/flag/crowd sits
   right on the section divider line at every mobile width. */
@media screen and (max-width: 767px) {
  section[data-section-id="69a1a9057889be6b0aee15b2"]
    .fe-block-yui_3_17_2_1_1784736317579_4307 img {
    object-position: 50% 100% !important;
  }
}


/* ============================================================
   SERVICES HERO — ANCHOR IMAGE TO SECTION BOTTOM
   Section: 6a0345b4ec9a10795c95a66e (services hero)
   Block:   .fe-block-yui_3_17_2_1_1784738134148_3696 (Ken + AI icons)

   Same fix as the home hero: the image block reaches the section
   bottom but the image is vertically centered inside it, leaving
   a gap below (~126px) that grows/shifts as the viewport narrows.
   Anchor the image to the bottom so it stays flush with the
   section's bottom edge at every width.
   ============================================================ */

section[data-section-id="6a0345b4ec9a10795c95a66e"] .fluid-engine > .fe-block:has(img) .fluid-image-animation-wrapper {
  align-items: flex-end !important;
}

/* Bottom-anchored at EVERY width — the artwork should always meet
   the bottom of the fold. (Briefly tried centering it at desktop to
   close the gap above; reverted, because sitting on the section
   edge is the intended look.) Any leftover column height therefore
   collects above the image; the fix for that is giving the image
   more width so it renders taller, not floating it. */


/* ============================================================
   SERVICES PAGE — HERO H1 MATCHES THE OTHER PAGES
   Page:  body.collection-69a1d51a8fb73a5aab6db6c6 (Services)
   Block: #block-a28e50ebf0b3bc6df216

   SquareKicker applies its own font-size to this block with a 0.9
   multiplier, making the Services H1 smaller than every other page.
   (It was reduced further while the headline copy was much longer;
   the copy has since been shortened, so it no longer needs to be.)

   Restating the standard Squarespace H1 formula WITHOUT the 0.9
   multiplier puts it at exactly the same computed size as the About
   hero H1 — same size, tracking, and 3px gold stroke.

   Needs the #siteWrapper + collection-class prefix to out-specify
   SquareKicker, and must also target the inner sqsrte-text-color
   span, which carries its own font-size.
   ============================================================ */

/* (The per-block size override that used to live here is gone —
   the block was rebuilt, and the global H1 scale now sets every
   page to the same size.) */

/* Desktop column split for the hero.

   Originally 2/17 + 17/26: the old headline ended in the single word
   "COMMUNICATION." (~689px), wider than the stock text column, and
   Squarespace sets overflow-wrap: break-word on headings — so it split
   mid-word as "COMMUNICATIO / N.". The text column was widened to stop
   that.

   Ken's shorter headline ("Ideas and messages that elevate your brand")
   removed that constraint and left the split badly lopsided: text 756px
   vs image 449px, with ~186px of dead space under the copy while the
   image sat small in a much taller block.

   The image container is width-driven (natural 449x479, aspect 0.937),
   so widening its column genuinely grows the image rather than
   letterboxing it. Measured at 1351px:

     2/17  text 756  image 449   H1 4 lines   <- lopsided
     2/15  text 654  image 551   H1 4 lines
     2/14  text 602  image 602   H1 4 lines   <- balanced, chosen
     2/13  text 551  image 654   H1 5 lines   <- headline grows a line

   14 is the last split that keeps the headline at four lines while
   giving the image equal width.

   The image then runs to 27 rather than 26 so it bleeds to the right
   edge of the viewport. That is exactly what the HOME hero does — it is
   placed 2/14 + 14/27 in the editor — so the two heroes now share the
   same geometry: 642px text column, 715px image, flush right and flush
   bottom. Ken asked for the Services hero to sit closer in balance to
   the home page hero; this makes them identical rather than merely
   similar. Desktop only; <=1023px already stacks. */
@media screen and (min-width: 1024px) {
  section[data-section-id="6a0345b4ec9a10795c95a66e"] .fluid-engine > .fe-block:has(h1) {
    grid-column: 2 / 14 !important;
  }
  section[data-section-id="6a0345b4ec9a10795c95a66e"] .fluid-engine > .fe-block:has(img) {
    grid-column: 14 / 27 !important;
  }
}


/* ============================================================
   SERVICES PAGE — "HOW I USE AI" TOOLTIPS
   Page: body.collection-69a1d51a8fb73a5aab6db6c6 (Services)

   Styling for the AI sparkle badge + hover/tap tooltip that
   replaces each service's "I use AI …" paragraph. Markup is
   injected by main.js (section 5).
   ============================================================ */

.ic-ai-tip {
  position: relative;
  display: inline-block;
}

/* Trigger: gold sparkle badge + dotted-underline label */
.ic-ai-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
  font-family: 'Fyodor', sans-serif;
  -webkit-appearance: none;
  appearance: none;
}

.ic-ai-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #F4A825;
  color: #201D20;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(244, 168, 37, 0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: icAiPulse 2.4s ease-out infinite;
}
.ic-ai-badge svg { width: 20px; height: 20px; }

/* Gentle attention pulse (invites interaction) */
@keyframes icAiPulse {
  0%   { box-shadow: 0 0 0 0   rgba(244, 168, 37, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(244, 168, 37, 0); }
  100% { box-shadow: 0 0 0 0   rgba(244, 168, 37, 0); }
}

.ic-ai-cta {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #201D20;
  border-bottom: 2px dotted rgba(32, 29, 32, 0.5);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.ic-ai-trigger:hover .ic-ai-badge,
.ic-ai-trigger:focus-visible .ic-ai-badge {
  transform: scale(1.08);
  animation: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.ic-ai-trigger:hover .ic-ai-cta,
.ic-ai-trigger:focus-visible .ic-ai-cta {
  color: #C81E23;
  border-bottom-color: #C81E23;
}

/* Tooltip bubble (appears above the badge) */
/* Opens BELOW the badge and extends to the right, so it never
   covers the service body copy sitting above the trigger.
   Left-anchored (not right) because .fluid-engine clips overflow-x —
   extending rightward from the left column stays inside that box.
   overflow-y is visible, so spilling below the section is fine. */
.ic-ai-tooltip {
  position: absolute;
  left: 0;
  top: calc(100% + 14px);
  width: max-content;
  max-width: min(340px, 80vw);
  background: #ffffff;
  color: #201D20;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: normal;
  padding: 16px 18px;
  border: 1px solid #201D20;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 20;
  pointer-events: none;
}
/* Arrow (dark border + white fill) sits on TOP of the bubble,
   pointing up at the badge above it */
.ic-ai-tooltip::after {
  content: '';
  position: absolute;
  left: 24px;
  bottom: 100%;
  border: 8px solid transparent;
  border-bottom-color: #201D20;
}
.ic-ai-tooltip::before {
  content: '';
  position: absolute;
  left: 24px;
  bottom: 100%;
  margin-bottom: -1.5px;
  border: 8px solid transparent;
  border-bottom-color: #ffffff;
  z-index: 1;
}

/* Reveal on hover, keyboard focus, or tap (.is-open via JS) */
.ic-ai-tip:hover .ic-ai-tooltip,
.ic-ai-tip:focus-within .ic-ai-tooltip,
.ic-ai-tip.is-open .ic-ai-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Lift the whole SECTION while the tooltip is open.

   Ken originally liked that the balloon passed *under* the image in the
   next module. That only read well while the modules had a large gap
   below the trigger — once the gap was trimmed the balloon landed on top
   of the next section's artwork and the text became unreadable.

   Raising z-index on .fe-block / .sqs-block / .sqs-html-content does not
   fix it: .sqs-html-content is `position: relative; z-index: 0`, which
   opens a stacking context that traps the tooltip's z-index: 20 inside
   the block. The next section then paints above it regardless.

   Promoting the whole page-section for the duration of the hover is the
   only lever that clears the following section. Scoped to the open state
   so normal stacking is untouched the rest of the time.

   TRADEOFF: the balloon now paints OVER the next module's image rather
   than under it. Legibility beat the effect. */
section.page-section:has(.ic-ai-tip:hover),
section.page-section:has(.ic-ai-tip:focus-within),
section.page-section:has(.ic-ai-tip.is-open) {
  position: relative !important;
  z-index: 500 !important;
}

/* Respect reduced-motion: no pulse, no transform jump */
@media (prefers-reduced-motion: reduce) {
  .ic-ai-badge { animation: none !important; }
  .ic-ai-trigger:hover .ic-ai-badge,
  .ic-ai-trigger:focus-visible .ic-ai-badge { transform: none; }
  .ic-ai-tooltip { transition: opacity 0.01ms; transform: none; }
}


/* ============================================================
   MOBILE — THINNER HEADING TEXT-STROKE (readability)
   Site-wide.

   SquareKicker applies a fixed -webkit-text-stroke of 3–4px to
   several display headings (home hero, about hero, services hero,
   and one h2). At desktop sizes that outline looks intentional,
   but the stroke width stays fixed as the font shrinks on mobile,
   so at phone sizes the outline fills in the letters and the
   headings become hard to read.

   Reduce the stroke to 1px at <=767px on every heading that
   SquareKicker strokes. These four selectors are the complete set
   of stroked headings on the site (verified against the injected
   SquareKicker styles). If a new outlined heading is added later
   via SquareKicker, add its selector here too.
   ============================================================ */

@media screen and (max-width: 767px) {
  #block-yui_3_17_2_1_1772213491145_49717 h2,
  #block-yui_3_17_2_1_1772213491145_49717 h2 span[class^="sqsrte-text-color"],
  #block-yui_3_17_2_1_1772202127116_2470 h1,
  #block-yui_3_17_2_1_1772202127116_2470 h1 span[class^="sqsrte-text-color"],
  #block-yui_3_17_2_1_1775502237673_443 h1,
  #block-yui_3_17_2_1_1775502237673_443 h1 span[class^="sqsrte-text-color"] {
    -webkit-text-stroke-width: 1px !important;
  }
}


/* ============================================================
   H1 OUTLINE CONSISTENCY — match the homepage everywhere
   The home hero H1 uses a 3px gold (#F4A825) text-stroke via
   SquareKicker. The About and Services hero H1s were set to 4px
   (thicker) — same gold color/fill, just a heavier outline.

   Normalize About + Services to 3px on desktop so every H1 outline
   matches the homepage. Scoped to min-width:768px so the mobile
   1px readability override above still wins on phones.
   ============================================================ */

@media screen and (min-width: 768px) {
  /* About hero H1 */
  #block-yui_3_17_2_1_1775502237673_443 h1,
  #block-yui_3_17_2_1_1775502237673_443 h1 span[class^="sqsrte-text-color"] {
    -webkit-text-stroke-width: 3px !important;
  }
}


/* ============================================================
   H1 GOLD OUTLINE — BASELINE, BLOCK-AGNOSTIC

   The outline used to be attached to specific block IDs (inherited
   from how SquareKicker wrote it). That's brittle: replacing a text
   block in the Squarespace editor mints a NEW block ID, so the rule
   silently stops matching and the headline loses its outline —
   exactly what happened when the Services hero was rebuilt.

   This is the baseline instead: every H1 gets the gold outline,
   keyed to nothing but the element. New or rebuilt hero blocks pick
   it up automatically.

   The per-block rules above still win where they exist (Home and
   About), so nothing there changes — they already resolve to the
   same gold at 3px.
   ============================================================ */

h1,
h1 span[class^="sqsrte-text-color"] {
  -webkit-text-stroke: 3px #F4A825;
}

/* Same mobile thinning as the rest — a fixed 3px outline fills in
   the letterforms once the type shrinks. */
@media screen and (max-width: 767px) {
  h1,
  h1 span[class^="sqsrte-text-color"] {
    -webkit-text-stroke-width: 1px;
  }
}


/* ============================================================
   MOBILE MENU — BRAND RESTYLE
   Applies when the mobile nav overlay is open
   (body.header--menu-open .header-menu…).

   - Cream paper background (matches site pages)
   - Gold accent bar across the top
   - Fyodor bold uppercase nav links in the dark brand color
   - Gold underline on the active/current page (animates from
     center out via the .header-menu-nav-item-content pseudo)
   - Red CONTACT button with a black border, matching the
     brand's primary-button treatment
   Scoped to menu-open state so the desktop header is untouched.
   ============================================================ */

/* Cream background */
body.header--menu-open .header-menu-bg.theme-bg--primary {
  background-color: #F5F0E5 !important;
}

/* Gold accent bar at the top of the overlay */
body.header--menu-open .header-menu {
  border-top: 5px solid #F4A825 !important;
}

/* Nav rhythm */
body.header--menu-open .header-menu-nav-item {
  margin: 0.28em 0 !important;
}

/* Nav links */
body.header--menu-open .header-menu-nav-item a {
  font-family: 'Fyodor', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #201D20 !important;
}

/* Gold underline anchored to the link text */
body.header--menu-open .header-menu-nav-item a .header-menu-nav-item-content {
  position: relative !important;
  display: inline-block !important;
  padding-bottom: 4px !important;
}
body.header--menu-open .header-menu-nav-item a .header-menu-nav-item-content::after {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  right: 50% !important;
  bottom: 0 !important;
  height: 4px !important;
  background-color: #F4A825 !important;
  transition: left 0.3s cubic-bezier(0.65, 0, 0.35, 1),
              right 0.3s cubic-bezier(0.65, 0, 0.35, 1) !important;
}
/* Active/current page: full-width gold underline */
body.header--menu-open .header-menu-nav-item--active a .header-menu-nav-item-content::after {
  left: 0 !important;
  right: 0 !important;
}
/* Tap feedback */
body.header--menu-open .header-menu-nav-item a:active {
  color: #C81E23 !important;
}

/* CONTACT button — branded red bar with black border */
body.header--menu-open .header-actions-action--cta .btn {
  background-color: #C81E23 !important;
  color: #ffffff !important;
  font-family: 'Fyodor', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.13em !important;
  border: 3px solid #201D20 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  body.header--menu-open .header-menu-nav-item a .header-menu-nav-item-content::after {
    transition: none !important;
  }
}


/* ============================================================
   SERVICES PAGE — HERO INTRO COPY
   REMOVED. This block used to enlarge the hero intro to
   clamp(18px, 1.9vw, 24px). Ken flagged it as bigger than the rest
   of the page's body copy, and he was right.

   The hero intro and the module body copy are both Squarespace
   "Large" paragraphs, so with NO rule here they match exactly at
   every width. See the matching note further down.
   ============================================================ */


/* ============================================================
   SERVICES PAGE — DIVIDER ABOVE FOOTER
   Page: body.collection-69a1d51a8fb73a5aab6db6c6 (Services)

   Subtle hairline separating the last service section from the
   footer. Uses the same tone/weight as the footer's existing
   internal divider (above the copyright line) so they read as
   one system.
   ============================================================ */

body.collection-69a1d51a8fb73a5aab6db6c6 #footer-sections {
  border-top: 1px solid rgba(32, 29, 32, 0.14) !important;
}


/* ============================================================
   CONTACT PAGE — SOCIAL ICON BACKGROUND
   Block: #block-e5c2d1d2d2614afd3a5f (Contact page socials)

   The icon "background" is the SVG .sqs-use--mask shape (not a CSS
   background-color), driven by the --si-fill-mask variable. Setting
   the mask fill directly recolors the rounded square behind each
   glyph. Glyph itself stays cream (.sqs-use--icon).
   ============================================================ */

#siteWrapper #block-e5c2d1d2d2614afd3a5f a .sqs-use--mask {
  fill: #bc132d !important;
}


/* ============================================================
   SERVICES HERO — STACK IMAGE BELOW TEXT ON NARROW SCREENS
   Section: 6a0345b4ec9a10795c95a66e
   Blocks:  matched by content (:has(h1) / :has(img)) rather than by
            ID, so rebuilding either block in the editor doesn't
            silently break these rules.

   Squarespace's Fluid Engine only switches to its stacked mobile
   layout at <=767px. Between ~768px and ~1023px the hero stayed
   side-by-side, squeezing the text column and crowding it against
   the image.

   Fix: re-place both blocks in the SAME grid (full width, image in
   rows after the text) rather than converting the grid to flex.
   The Fluid Engine derives each block's height from its row span —
   switching to flex collapses the image container to 0 height and
   the image disappears. Reassigning grid rows keeps that math intact.

   >=1024px is untouched (side-by-side still has room there).
   ============================================================ */

@media screen and (min-width: 768px) and (max-width: 1023px) {
  section[data-section-id="6a0345b4ec9a10795c95a66e"] .fluid-engine > .fe-block:has(h1) {
    grid-column: 2 / 26 !important;
    grid-row: 2 / 12 !important;
  }
  section[data-section-id="6a0345b4ec9a10795c95a66e"] .fluid-engine > .fe-block:has(img) {
    grid-column: 2 / 26 !important;
    grid-row: 12 / 27 !important;
  }
}

/* --- Phone: close the gap between the copy and the image -------
   Below 768px Squarespace uses its own mobile grid (30 rows), and the
   image block was drawn at rows 14/30 — leaving a 229px void between
   the last line of copy and the artwork, which pushed the image almost
   entirely below the fold.

   Two things had to move together:

   1. The image is pinned to the BOTTOM of its block (by the flush rule
      further up this file), so changing its START row does nothing —
      only the END row moves it. 26 lifts it as far as it goes before
      the block gets shorter than the image and the section starts
      growing again (tested 18/20/22/24/26: 24 and below inflate the
      section height).
   2. That leaves the freed space at the bottom instead. Squarespace
      sets grid-template-rows explicitly, so the empty rows do not
      collapse — a negative margin is the only lever that reaches them
      (same technique as the service modules below).

   -160 rather than -175 keeps ~15px of breath under the image instead
   of butting it against the next section's border.

   Measured: hero 1215 -> 1055, copy/image gap 229 -> 89 at 390px.
   Verified at 375 / 390 / 430 / 767: gap 52-103, 15px bottom gap
   throughout, no overlap into the next section, no horizontal scroll. */
@media screen and (max-width: 767px) {
  section[data-section-id="6a0345b4ec9a10795c95a66e"] .fluid-engine > .fe-block:has(img) {
    grid-row: 14 / 26 !important;
  }
  section[data-section-id="6a0345b4ec9a10795c95a66e"] .fluid-engine {
    margin-bottom: -160px !important;
  }
}


/* ============================================================
   SERVICES PAGE — SEPARATORS BETWEEN SERVICE SECTIONS
   Page: Services

   Adds a soft grey hairline between each of the four service
   sections. Applied as a border-top on sections 2-4 so the lines
   fall BETWEEN services (3 separators), leaving the hero → first
   service boundary alone.

   Section order:
     1. Brand Voice        69fa4ac868d01d7b5dfeed24  (no top border)
     2. Brand Guidelines   69fa4eabce683c4c69f957ee
     3. Copy               69fa4ea2679405554d5f74dd
     4. Content            69fa4e7770cb4b6b6fbe1f7c

   Tone is a touch lighter than the footer divider so it reads as
   a quiet grouping cue rather than a hard rule.
   ============================================================ */

section[data-section-id="69fa4eabce683c4c69f957ee"],
section[data-section-id="69fa4ea2679405554d5f74dd"],
section[data-section-id="69fa4e7770cb4b6b6fbe1f7c"] {
  border-top: 1px solid rgba(32, 29, 32, 0.28) !important;
}


/* ============================================================
   FOOTER CODE BLOCK — MATCH THE OPEN CAPS TRACKING

   The footer lives in a Squarespace Code Block with its own inline
   <style>. That inline block comes after this file in the document,
   so it wins at equal specificity — hence !important here to bring
   its uppercase nav and copyright in line with the rest of the
   site's caps tracking.
   ============================================================ */

.ic-footer-nav a {
  letter-spacing: 0.1em !important;
}

.ic-footer-copyright {
  letter-spacing: 0.14em !important;
}


/* ============================================================
   SERVICES HERO — REMOVE DEAD SPACE ABOVE THE HEADLINE
   Section: 6a0345b4ec9a10795c95a66e

   Two things stacked up above the H1 at desktop:
     ~125px  section padding-top (scales with viewport)
     ~74px   two EMPTY Fluid Engine grid rows above the text block,
             because the block was placed starting at row 3
     ~199px  total before the headline even begins

   Pulled the text block (and the image with it, to preserve their
   relative alignment) up one row. Going all the way to row 1 tested
   too tight — the headline butted against the header — so row 2 is
   the balance: ~37px of breathing room instead of ~74px of dead
   space. Headline now starts at y~161 instead of y~196.

   Desktop only: <=1023px uses the stacked layout defined earlier,
   which has its own row assignments.
   ============================================================ */

@media screen and (min-width: 1024px) {
  section[data-section-id="6a0345b4ec9a10795c95a66e"] .fluid-engine > .fe-block:has(h1) {
    grid-row: 2 / 13 !important;
  }
  section[data-section-id="6a0345b4ec9a10795c95a66e"] .fluid-engine > .fe-block:has(img) {
    grid-row: 2 / 14 !important;
  }
}


/* ============================================================
   KEN'S NOTES — 5 Aug "Notes on final delivery"
   ============================================================ */

/* --- Services hero body copy -> standard body size ------------
   Ken: "the body copy below the headline is larger than the rest
   of the body copy on the page... bring it down to standard body
   copy size (ie same size as the body copy in the other modules)."

   It was rendering 24px against 16px elsewhere. This restates the
   NORMAL text formula (rather than the Large one the block uses),
   so it tracks Site Styles instead of being pinned to a number.

   NOTE: this reverses an earlier request to enlarge this copy —
   Ken's note supersedes it. */
/* (No rule here on purpose.) The hero intro and the module body copy are
   BOTH Squarespace "Large" paragraphs, so with no override they match
   exactly at every width — nothing to keep in sync.

   History worth keeping: this was first enlarged to 24px on request, which
   Ken flagged as too big. I then "matched the other modules" at 16px — but
   I'd measured the wrong paragraph (the hidden "I use AI…" blurb, 16px)
   rather than the visible module copy (20.3px), so it came out too small
   and Ken flagged it again. Deleting the override is the actual fix. */

/* --- Services hero image flush to the section bottom ----------
   Ken: "Why is there extra padding at the bottom of the hero
   module? I thought the hero image was supposed to be flush with
   the bottom border."

   The section's own padding-bottom was already 0. The gap (99px at
   1130) came from the image block's grid row ending before the
   grid did — the taller TEXT block sets the section height, so the
   image stopped short of the bottom.

   grid-row-end: -1 pins the image block to the last grid line
   whatever the text does, so it stays flush at any width. */
@media screen and (min-width: 1024px) {
  section[data-section-id="6a0345b4ec9a10795c95a66e"] .fluid-engine > .fe-block:has(img) {
    grid-row-end: -1 !important;
  }
}

/* --- Trim bottom padding on the service modules ---------------
   Ken: "This extra bottom padding issue is also present in the
   other modules as well... this feels like too much."
   47.5px -> 28px. Kept some so they don't read cramped. */
section[data-section-id="69fa4ac868d01d7b5dfeed24"] > .content-wrapper,
section[data-section-id="69fa4eabce683c4c69f957ee"] > .content-wrapper,
section[data-section-id="69fa4ea2679405554d5f74dd"] > .content-wrapper,
section[data-section-id="69fa4e7770cb4b6b6fbe1f7c"] > .content-wrapper {
  padding-bottom: 16px !important;
}

/* The padding was only ever HALF the gap. Each module also carries empty
   Fluid Engine rows below its last block — 34/42/58/42px across the four —
   because of how tall the sections were drawn in the editor. That row space
   is set by Squarespace's explicit grid-template-rows and does NOT respond
   to height:fit-content, align-content, or shrinking the blocks (all tested,
   all no-ops). A negative margin is the only CSS lever that reaches it.

   -30px is deliberately under the smallest module's 34px of slack, so no
   module clips. Verified: no content overflows in any of the four.

   Caveat: if a module later gains a line of copy or a bullet, its slack
   shrinks and this could start to crowd. The clean permanent fix is to drag
   each section's bottom edge up in the Fluid Engine editor, which removes
   the empty rows properly — then this rule can be deleted. */
section[data-section-id="69fa4ac868d01d7b5dfeed24"] .fluid-engine,
section[data-section-id="69fa4eabce683c4c69f957ee"] .fluid-engine,
section[data-section-id="69fa4ea2679405554d5f74dd"] .fluid-engine,
section[data-section-id="69fa4e7770cb4b6b6fbe1f7c"] .fluid-engine {
  margin-bottom: -30px !important;
}

/* --- Module dividers: more visible + one under the hero -------
   Ken: "I'd like it to be a bit more visible. Also, there's not
   one at the bottom of the hero module."

   28% -> 45% opacity, and the first service module now carries a
   top border too, which reads as the hero's bottom border.
   (The line closing the last module already exists as the footer
   divider added earlier.) */
section[data-section-id="69fa4ac868d01d7b5dfeed24"],
section[data-section-id="69fa4eabce683c4c69f957ee"],
section[data-section-id="69fa4ea2679405554d5f74dd"],
section[data-section-id="69fa4e7770cb4b6b6fbe1f7c"] {
  border-top: 1px solid rgba(32, 29, 32, 0.45) !important;
}

/* --- Work project pages: pagination colliding with the header --
   Ken: "There are several Work pages where the side-to-side nav is
   mushed in with the top nav. Is this because there's no content
   yet on these pages?"

   Yes. With no content blocks, #sections collapses to 0 height, so
   the prev/next pagination lands at y=0 — behind the header.

   A min-height floors the content area so the pagination always
   clears the header. It's inert on populated pages (their content
   is already taller), so this only affects empty ones — including
   any new project created before its copy is ready. */
body.collection-69a1d4c9ddb6a504135dda24.view-item #sections {
  min-height: 45vh;
}


/* ============================================================
   SERVICES HERO — VERTICALLY CENTRE THE COPY (desktop)
   Section: 6a0345b4ec9a10795c95a66e

   Jared: "I want the text to be vertically in the middle not
   toward the top of the page."

   The copy sat flush with the TOP of the content band while the
   image ran the full height of it, leaving ~216px of void under
   the text. (Against the section box it was only ~24px off centre —
   the section carries ~125px of padding-top and none at the bottom,
   so section-centre and the visible content band are not the same
   thing. Centring on the band is what actually reads as centred.)

   Three rules, all load-bearing:

   1. grid-row-end: -1 on the text block so its grid area spans the
      same band as the image. Without this there is nothing to
      centre within — the block is exactly as tall as its copy.

   2. justify-content: center on the inner .sqs-block, NOT on the
      .fe-block. Squarespace already sets .sqs-block to display:flex
      and it stretches to fill the .fe-block, so centring one level
      up does nothing — the block absorbs the extra height and the
      copy stays pinned to the top.

   3. aspect-ratio on the image container. The section's height was
      previously driven by the TEXT block's row demand; once that
      block spans the full grid its copy spreads over more rows, the
      rows shrink, and the section collapses — taking the image with
      it (886 -> 850, image 717 -> 681). The image can't defend its
      own height because the <img> is absolutely positioned inside
      the container and object-fit: contain simply letterboxes. An
      explicit ratio makes the container demand its natural height
      and hold the section open.

   Result at 1770px: 108px above the copy, 108px below, image and
   section height unchanged, image still flush bottom-right.

   NOTE: 2342/2500 is this specific hero image's intrinsic ratio. If
   the hero artwork is ever swapped, update it to match or the
   container will letterbox. ============================================================ */

@media screen and (min-width: 1024px) {
  section[data-section-id="6a0345b4ec9a10795c95a66e"] .fluid-engine > .fe-block:has(h1) {
    grid-row-end: -1 !important;
  }
  section[data-section-id="6a0345b4ec9a10795c95a66e"] .fluid-engine > .fe-block:has(h1) .sqs-block {
    justify-content: center !important;
  }
  /* The container fills its block and the <img> letterboxes inside it
     via object-fit: contain, so the visible artwork is height-driven off
     the grid rows. height: 100% overrides the explicit pixel height
     Squarespace sets inline, which is sized for the original (much
     smaller) placement.

     An aspect-ratio was tried here to stop the section collapsing when
     the text block spans to -1. It tested clean but shipped badly: the
     container flipped from height-driven to width-driven and inflated
     the hero from 850px to 1138px. It also turned out to be unnecessary
     — the section holds 850px without it. Do not reintroduce it, and be
     wary of aspect-ratio on this container generally: the responsive
     srcset means the container's width can change the image variant that
     loads, which changes the natural size, which feeds back into layout. */
  section[data-section-id="6a0345b4ec9a10795c95a66e"] .fluid-engine > .fe-block:has(img) .fluid-image-container {
    height: 100% !important;
  }

  /* Jared: "I think the image can be reduced in size a bit."

     Scaling this down is trickier than it looks. The container sits in a
     flex wrapper (align-items: flex-end, from the flush-bottom rule) and
     takes its height from the grid rows, so the obvious levers are all
     no-ops: narrowing the grid column only slides it right, max-width
     does nothing, and max-height needs a definite containing height it
     does not have. All three tested.

     A transform sidesteps the problem entirely — it applies after layout,
     so it cannot feed back into the grid or the section height. Origin is
     bottom centre so the artwork keeps its flush-bottom edge and shrinks
     toward it.

     0.9 takes the visible artwork from 639x681 to 575x613 at 1826px.
     Below ~0.87 the copy starts overhanging the top of the image and the
     two stop reading as a pair. */
  section[data-section-id="6a0345b4ec9a10795c95a66e"] .fluid-engine > .fe-block:has(img) .fluid-image-container {
    transform: scale(0.9) !important;
    transform-origin: bottom center !important;
  }
}


/* ============================================================
   KEN'S NOTES — 11 Aug
   ============================================================ */

/* --- Remove the italic from the Services headline -------------
   Ken: "please remove the italics treatment from the Services
   headline."

   This is content markup, not styling: the headline is wrapped in
   <em> in the editor. Molot has no true italic, so the browser
   synthesises an oblique by skewing the upright — which is why it
   reads as a slant rather than a designed italic.

   The tidiest fix is to drop the <em> in the Squarespace editor
   (select the headline, toggle italic off) — this rule only masks
   it. Keeping the rule anyway so the headline stays upright if the
   markup comes back on a future copy paste.

   Scoped to the hero section: <em> elsewhere still italicises. */
section[data-section-id="6a0345b4ec9a10795c95a66e"] h1 em,
section[data-section-id="6a0345b4ec9a10795c95a66e"] h1 i {
  font-style: normal !important;
}

/* --- Work items: white bar behind the pagination on empty pages
   Ken: "the pages that don't have content have that white bar
   behind the bottom nav links, but the ones that currently have
   content don't."

   Squarespace tints the pagination band from the colour theme of
   the LAST section on the page. A project with content ends in a
   cream section, so the band inherits cream (#F5F0E5). A project
   with no sections yet has nothing to inherit from, so it falls
   back to the default white theme.

   So this resolves itself as Ken fills the pages in — but until
   then the empty ones look broken. This paints the band cream in
   exactly that case.

   #sections:not(:has(*)) matches only when the article has no
   element children, which is true only on a project with no
   sections. :empty would NOT work here — the article contains
   whitespace text nodes. The rule stops applying by itself the
   moment a section is added, so it needs no cleanup later and
   cannot fight a theme Ken chooses for real content. */
#sections:not(:has(*)) ~ .item-pagination {
  background-color: #F5F0E5 !important;
}


/* ============================================================
   KEN'S NOTES — 4 Sep (found while building out Work pages)
   ============================================================ */

/* --- Project title: gold outline regardless of heading level ---
   Ken: "when I selected the entire headline and pasted in new
   headline copy, it removed the orange outline around the headline."

   The paste didn't strip styling — it changed the heading LEVEL.
   Pasting over a fully-selected heading makes Squarespace re-type the
   block, and these pages ended up with the project title as an H2:

     H1 title: flo-website, skype-bicymple, feed-the-lobster
     H2 title: david-bowie, lumosity-mindfulness-launch

   The gold outline and the H1 size scale are both keyed to h1, so an
   H2 title silently lost the outline AND rendered ~20% smaller
   (59.2px vs 71.3px at 1200).

   Rather than ask Ken to police heading levels while authoring, make
   the level not matter: on Work project pages an H2 gets the same
   size and stroke as an H1. Safe to do here because H2 is only ever
   the project title on these pages — the red kicker above it is H3
   and accordion titles are H4 (verified across all six built pages).

   Setting the title back to Heading 1 in the editor is still the
   tidier fix; this just means the page never LOOKS broken if he
   doesn't. */
body.collection-69a1d4c9ddb6a504135dda24.view-item #sections h2,
body.collection-69a1d4c9ddb6a504135dda24.view-item #sections h2 span[class^="sqsrte-text-color"] {
  font-size: clamp(
    2rem,
    calc(((var(--heading-1-size-value) - 1) * 1.2vw + 1rem) * 0.95),
    calc(var(--heading-1-size-value) * 1rem * 0.95)
  ) !important;
  -webkit-text-stroke: 3px #F4A825;
}

/* Match the mobile thinning applied to h1 — a fixed 3px outline fills
   in the letterforms once the type shrinks. */
@media screen and (max-width: 767px) {
  body.collection-69a1d4c9ddb6a504135dda24.view-item #sections h2,
  body.collection-69a1d4c9ddb6a504135dda24.view-item #sections h2 span[class^="sqsrte-text-color"] {
    -webkit-text-stroke-width: 1px;
  }
}

/* --- Close the gap between the copy and the imagery -----------
   Ken: "there's a bit too much space between the copy and the
   imagery. Is there a way to close that distance?"

   Measured 100px on lumosity-mindfulness-launch at 1200px, and it
   came from two separate places rather than one:

     40px  bottom padding on the copy section's .content-wrapper
     60px  padding-top that Squarespace puts on .gallery-masonry
     ----
     100px

   Trimming both lands at 44px, which keeps the copy and the imagery
   reading as one unit without them touching.

   The section rule deliberately excludes the LAST section, so this
   only tightens the seam BETWEEN stacked sections and never eats the
   breathing room above the prev/next pagination bar.

   Both numbers are also editor sliders (section padding, and the
   gallery's own Spacing control), so these act as the site-wide
   default rather than a lock — say the word if a specific page wants
   more air and I'll scope an exception. */
body.collection-69a1d4c9ddb6a504135dda24.view-item #sections section:not(:last-of-type) > .content-wrapper {
  padding-bottom: 20px !important;
}

body.collection-69a1d4c9ddb6a504135dda24.view-item #sections .gallery-masonry {
  padding-top: 24px !important;
}


/* ============================================================
   WORK FILTER — SCROLL THE SIDEBAR WHEN IT DOESN'T FIT
   Jared: "the filters are pretty long and get cut off if the screen
   isn't tall enough."

   The category list is now built from content and Ken has 14
   categories, so the sidebar is ~820px tall. It is position: sticky at
   top: 100px, which means on any viewport shorter than ~920px the
   bottom pills sit permanently below the fold once sticky engages, and
   scrolling the page cannot reach them (measured: 4 pills unreachable
   at 1280x700).

   Cap the sidebar at the sticky-adjusted viewport height and let it
   scroll internally. On tall screens nothing changes, since the cap is
   larger than the content. On short screens the sidebar scrolls
   independently of the page. overscroll-behavior: contain stops the
   page from scrolling once the sidebar hits its end.

   Desktop only: below 768px the filter becomes a horizontal row above
   the grid and must not be height-capped. */
@media screen and (min-width: 768px) {
  .ic-portfolio-filter {
    max-height: calc(100vh - 100px);   /* 100px = the sticky top offset */
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(32, 29, 32, 0.25) transparent;
  }
  .ic-portfolio-filter::-webkit-scrollbar { width: 6px; }
  .ic-portfolio-filter::-webkit-scrollbar-thumb {
    background: rgba(32, 29, 32, 0.25);
    border-radius: 3px;
  }
}