/*
 Theme Name:   Fleming Design Studio
 Theme URI:    https://tflem.com
 Description:  Child theme for Divi 5 — Fleming Design Studio (tflem.com rebuild)
 Author:       Tyler Fleming
 Author URI:   https://tflem.com
 Template:     Divi
 Version:      1.42.0
 Text Domain:  fleming
*/
/* Hero scroll chevron: a slow up-and-down drift instead of Divi's "bounce" preset (which scales the icon in from nothing). */
@keyframes tfChevron { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(12px); } }
.preset--module--divi-text--6scb8u0juj.et_animated { animation: tfChevron 2.4s ease-in-out infinite !important; opacity: 1 !important; }
/* Hero scroll chevron (Divi preset 6scb8u0juj): the preset centers it with transform: translateX(-50%), but the bounce
   animation overwrites transform, so the chevron sat half its width (14px) right of center. The separate translate
   property is not touched by the animation. */
.preset--module--divi-text--6scb8u0juj { translate: -50% 0; }

/* ==========================================================================
   Fleming Design Studio — child theme styles
   Rule: only class-based selectors (never Divi's auto-numbered .et_pb_*_N classes).
   Palette: blue #1C5CE8 (accent, eyebrows), slate #454C62 (dark icon shapes), near-black #0B0B0B (text),
   cream #FBF9F3 (backgrounds), gray-blue #9196A3 (muted). Module colours are set in Divi; the accent used in this file is the one value below.
   ========================================================================== */
:root { --tf-accent: #1C5CE8; } /* also hard-coded in the cards-section arrow-head SVG further down (data URIs can't read variables) */

/* ==========================================================================
   TYPE SYSTEM (Adobe Fonts kit tuv8ssw). Every piece of copy on the site resolves to one of the roles below.
   Change a font or a size HERE and it changes everywhere; never set font-family/size on a module in Divi.

   Role        Face                         Phone → Desktop (fluid, 390–1400px)   Used for
   display     Sweet Sans Heavy, caps       (own clamp, .tf-hero-h)   homepage typewriter headline only
   h1          Hardcover 400                64       52      40      page titles (one per page)
   h2          Hardcover 400                60       48      36      section headlines (services, kind words, vibe check, newsletter, "Do you love your logo?")
   h3          Hardcover 400                44       38      30      sub-section headlines (about: mission / DJ / promise / stories), footer tagline
   h4          Hardcover 400                40       34      28      card titles (vibe-check cards, work CTA, "Your project goes here")
   h5          Hardcover 400                26       24      22      list titles (journal cards, post sub-heads, case-study heads)
   stat        Hardcover 400                64       56      44      big numbers (Shopify "$0 → $4M+")
   eyebrow     Sweet Sans Heavy, caps, 2px  13       13      12      h6 labels above headlines, footer headings, form legends, post meta
   label       Sweet Sans Heavy, caps, 2px  12       12      11      dates, categories, tiny caps
   subhead     Sweet Sans Heavy, caps, .5px 18       17      16      hero lane titles (h5)
   button      Sweet Sans Heavy, caps, 2px  16       15      14      every button, nav CTA, form submit
   lead        Sofia 400                    21       20      18      pull-quotes / testimonials, page-intro paragraphs
   body        Sofia 400                    18       18      17      paragraphs
   body-sm     Sofia 400                    16       16      16      card paragraphs, lanes, excerpts, form labels
   small       Sofia 400                    15       15      14      bylines, captions, drawer foot
   fine        Sofia 400                    11       11      11      legal line
   quote       Hardcover 400                21       20      19      about-page testimonial cards

   Utility classes carry the same roles: on an element directly, or as a Divi module's CSS Class (Advanced → CSS ID & Classes),
   where the tag applies to that module's heading/paragraph. Used so far: tf-t-stat (Shopify numbers), tf-t-h3 (Shopify pull-quote).
   .tf-t-h1 .tf-t-h2 .tf-t-h3 .tf-t-h4 .tf-t-h5 .tf-t-stat .tf-t-eyebrow .tf-t-label .tf-t-subhead .tf-t-button .tf-t-lead .tf-t-body .tf-t-body-sm .tf-t-small .tf-t-fine .tf-t-quote
   ========================================================================== */
:root {
  --tf-serif: "hardcover-vf", Georgia, serif;
  --tf-sans:  "sweet-sans-pro", Arial, sans-serif;
  --tf-text:  "sofia-pro", Helvetica, Arial, sans-serif;
  /* Fluid sizes: each token runs from its phone size at a 390px viewport to its desktop size at 1400px and holds
     outside that range (clamp). Values are rem (root = 16px) so a visitor's browser font-size setting still applies.
     To change a size, change the px pair in the comment and recompute: slope = (max-min)/(1400-390); intercept = min - slope*390. */
  --t-h1: clamp(2.5rem, 1.921rem + 2.38vw, 4rem);                     /* 40 → 64px */
  --t-h2: clamp(2.25rem, 1.671rem + 2.38vw, 3.75rem);                 /* 36 → 60px */
  --t-h3: clamp(1.875rem, 1.537rem + 1.39vw, 2.75rem);                /* 30 → 44px */
  --t-h4: clamp(1.75rem, 1.46rem + 1.19vw, 2.5rem);                   /* 28 → 40px */
  --t-h5: clamp(1.375rem, 1.278rem + 0.396vw, 1.625rem);              /* 22 → 26px */
  --t-stat: clamp(2.75rem, 2.267rem + 1.98vw, 4rem);                  /* 44 → 64px */
  --t-eyebrow: clamp(0.75rem, 0.7259rem + 0.099vw, 0.8125rem);        /* 12 → 13px */
  --t-label: clamp(0.6875rem, 0.6634rem + 0.099vw, 0.75rem);          /* 11 → 12px */
  --t-subhead: clamp(1rem, 0.9517rem + 0.198vw, 1.125rem);            /* 16 → 18px */
  --t-button: clamp(0.875rem, 0.8267rem + 0.198vw, 1rem);             /* 14 → 16px */
  --t-lead: clamp(1.125rem, 1.053rem + 0.297vw, 1.312rem);            /* 18 → 21px */
  --t-body: clamp(1.062rem, 1.038rem + 0.099vw, 1.125rem);            /* 17 → 18px */
  --t-body-sm: 1rem;                                                  /* 16 → 16px */
  --t-small: clamp(0.875rem, 0.8509rem + 0.099vw, 0.9375rem);         /* 14 → 15px */
  --t-fine: 0.6875rem;                                                /* 11 → 11px */
  --t-quote: clamp(1.188rem, 1.139rem + 0.198vw, 1.312rem);           /* 19 → 21px */
  --lh-tight: 1.08; --lh-heading: 1.15; --lh-body: 1.6; --lh-lead: 1.55;
  --ls-caps: 2px;
}
/* -- faces: everything is one of three families, whatever Divi's module settings say -- */
body, input, textarea, select, button, #page-container p, #page-container li, #page-container td, #page-container th, #page-container label, #page-container blockquote, #page-container figcaption, #page-container .et_pb_text, #page-container .et_pb_blurb_description, #page-container .et_pb_post .post-content { font-family: var(--tf-text) !important; }
#top-menu a, #et-top-navigation a, #page-container .et_mobile_menu a, #page-container .et-menu a { font-family: var(--tf-text) !important; }
#page-container h1:not(.tf-hero-h), #page-container h2, #page-container h3, #page-container h4, #page-container .entry-title, #page-container .tf-t-h1, #page-container .tf-t-h2, #page-container .tf-t-h3, #page-container .tf-t-h4, #page-container .tf-t-h5, #page-container .tf-t-stat, #page-container .tf-t-quote { font-family: var(--tf-serif) !important; font-weight: 400 !important; font-style: normal; letter-spacing: 0; text-transform: none; }
#page-container h5, #page-container h6, #page-container .tf-t-eyebrow, #page-container .tf-t-label, #page-container .tf-t-subhead, #page-container .tf-t-button, #page-container .et_pb_button, #page-container .et_pb_contact_submit, #page-container .fds-newsletter-form button, #page-container .fds-foot .row a, #page-container .fds-blog-grid .more-link, #page-container .et_pb_contact_field_options_title, #page-container .post-meta, #page-container .et_pb_post .post-meta { font-family: var(--tf-sans) !important; font-weight: 900 !important; text-transform: uppercase; }
/* -- sizes: element defaults -- */
#page-container h1:not(.tf-hero-h), #page-container .tf-t-h1, #page-container .tf-t-h1 :is(h1,h2,h3,h4) { font-size: var(--t-h1) !important; line-height: var(--lh-tight) !important; }
#page-container h2, #page-container .tf-t-h2, #page-container .tf-t-h2 :is(h1,h2,h3,h4) { font-size: var(--t-h2) !important; line-height: var(--lh-tight) !important; }
#page-container h3, #page-container .tf-t-h3, #page-container .tf-t-h3 :is(h1,h2,h3,h4) { font-size: var(--t-h3) !important; line-height: var(--lh-heading) !important; }
#page-container h4, #page-container .tf-t-h4, #page-container .tf-t-h4 :is(h1,h2,h3,h4) { font-size: var(--t-h4) !important; line-height: var(--lh-heading) !important; }
#page-container .tf-t-h5, #page-container .tf-t-h5 :is(h1,h2,h3,h4) { font-size: var(--t-h5) !important; line-height: 1.2 !important; }
#page-container .tf-t-stat, #page-container .tf-t-stat :is(h1,h2,h3,h4) { font-size: var(--t-stat) !important; line-height: 1 !important; }
#page-container h6, #page-container .tf-t-eyebrow, #page-container .et_pb_contact_field_options_title, #page-container .post-meta, #page-container .et_pb_post .post-meta, #page-container .fds-foot .meta h6, #page-container .fds-foot .row a, #page-container .fds-blog-grid .more-link { font-size: var(--t-eyebrow) !important; line-height: 1.4 !important; letter-spacing: var(--ls-caps) !important; }
#page-container .tf-t-label, #page-container .fds-blog-grid .post-meta, #page-container .fds-blog-grid .post-meta a, #page-container .fds-blog-grid .post-meta span { font-size: var(--t-label) !important; line-height: 1.6 !important; letter-spacing: var(--ls-caps) !important; }
#page-container h5, #page-container .tf-t-subhead { font-size: var(--t-subhead) !important; line-height: 1.25 !important; letter-spacing: 1.5px !important; }
#page-container .et_pb_button, #page-container .tf-t-button, #page-container .et_pb_contact_submit, #page-container .fds-newsletter-form button, #main-header .tf-cta, #main-header .tf-nav .tf-nav-cta a { font-size: var(--t-button) !important; line-height: 1.2 !important; letter-spacing: var(--ls-caps) !important; }
#page-container p, #page-container li, #page-container .et_pb_text, #page-container .tf-t-body, #page-container .et_pb_contact_field_options_list, #page-container .et_pb_contact_right, #page-container .et_pb_contact_right p { font-size: var(--t-body) !important; line-height: var(--lh-body) !important; font-weight: 400 !important; }
#page-container .tf-t-lead, #page-container .tf-t-lead p, #page-container .fds-testimonials .et_pb_text p, #page-container .fds-journal-hero .et_pb_text p, #page-container .fds-work-hero .et_pb_text p, #page-container .fds-contact-hero .et_pb_text p { font-size: var(--t-lead) !important; line-height: var(--lh-lead) !important; }
#page-container .tf-t-body-sm, #page-container .tf-t-body-sm p, #page-container .fds-services .et_pb_text p, #page-container .fds-fit .et_pb_text p, #page-container .fds-lane p, #page-container .fds-blog-grid .post-content p, #page-container .fds-form label, #page-container .et_pb_contact_field_options_list, #page-container .et_pb_contact_right, #page-container .et_pb_contact_right p, #page-container .fds-newsletter-form input, #page-container .fds-form input, #page-container .fds-form textarea, #page-container .fds-newsletter-form .fds-nl-note { font-size: var(--t-body-sm) !important; line-height: 1.5 !important; }
#page-container .tf-t-small, #page-container .tf-t-small p, #page-container .fds-quote .fds-quote-who, #page-container .fds-newsletter-form span, #page-container .fds-newsletter-form label, #main-header .tf-nav .tf-nav-foot p { font-size: var(--t-small) !important; line-height: 1.5 !important; font-weight: 400 !important; }
#page-container .tf-t-fine, #page-container .fds-foot .bar, #page-container .fds-foot .bar p { font-size: var(--t-fine) !important; line-height: 1.4 !important; }
#page-container .tf-t-quote, #page-container .fds-quote blockquote, #page-container .fds-quote blockquote p { font-family: var(--tf-serif) !important; font-size: var(--t-quote) !important; line-height: 1.45 !important; }
#page-container strong, #page-container b { font-weight: 700 !important; }
#page-container h1 strong, #page-container h2 strong, #page-container h3 strong, #page-container h4 strong { font-weight: 400 !important; }
/* -- context overrides (the only places an element's role differs from its tag) -- */
#page-container .fds-services .et_pb_text h3 { font-size: var(--t-h2) !important; line-height: var(--lh-tight) !important; }           /* services headlines read as section h2s */
#page-container .fds-about-mission h2, #page-container .fds-about-dj h2, #page-container .fds-about-stories h2, #page-container .fds-about-promise h2 { font-size: var(--t-h3) !important; } /* about sub-sections */
#page-container .fds-work-cta h2 { font-size: var(--t-h4) !important; }
#page-container .fds-fit .et_pb_column:has(.fi) h4 { font-size: var(--t-h4) !important; }
.page-id-354 #page-container .et_pb_text p { font-weight: 400 !important; }
#page-container .fds-testimonials .et_pb_text strong { font-size: var(--t-lead) !important; }
#page-container .fds-blog-grid .entry-title, #page-container .fds-blog-grid .entry-title a { font-family: var(--tf-serif) !important; font-size: var(--t-h5) !important; line-height: 1.2 !important; font-weight: 400 !important; }
.single-post #page-container .et_post_meta_wrapper .entry-title { font-size: var(--t-h1) !important; line-height: var(--lh-tight) !important; }
.single-post #page-container .entry-content h2 { font-size: var(--t-h4) !important; }
.single-post #page-container .entry-content h3 { font-size: var(--t-h5) !important; }
.single-post #page-container .entry-content p, .single-post #page-container .entry-content li { font-size: var(--t-body) !important; line-height: 1.7 !important; }
#page-container .fds-foot .tag { font-family: var(--tf-serif) !important; font-weight: 400 !important; font-size: var(--t-h3) !important; line-height: var(--lh-heading) !important; }
#page-container .fds-foot .meta p, #page-container .fds-foot .meta a { font-size: var(--t-body-sm) !important; }
#page-container .fds-lane h5 { font-size: var(--t-body-sm) !important; letter-spacing: var(--ls-caps) !important; }
#page-container .fds-contact-form-section .et_pb_contact_field_options_title { font-size: var(--t-eyebrow) !important; }
/* case studies (project CPT) and /thank-you/ were built on the old site with Baskervville / Cormorant / Brandon: pulled into the system */
.single-project #page-container .et_pb_text h1, .single-project #page-container h1.entry-title { font-size: var(--t-h1) !important; }
.single-project #page-container .et_pb_text h2, .single-project #page-container h2 { font-size: var(--t-h5) !important; letter-spacing: 0 !important; text-transform: none !important; }
.single-project #page-container .et_pb_text h3 { font-family: var(--tf-sans) !important; font-weight: 900 !important; font-size: var(--t-eyebrow) !important; letter-spacing: var(--ls-caps) !important; text-transform: uppercase; line-height: 1.4 !important; }
.single-project #page-container .et_pb_text span, .single-project #page-container .et_pb_text p, .single-project #page-container .et_pb_text div, .single-project #page-container .et_pb_testimonial, .single-project #page-container .et_pb_number_counter .title, .single-project #page-container .et_pb_counter_title { font-family: var(--tf-text) !important; font-weight: 400 !important; font-size: var(--t-body) !important; line-height: var(--lh-body) !important; }
.single-project #page-container .et_pb_module span:not(.et-pb-icon):not([class*="icon"]), .single-project #page-container .et_pb_module div, .single-project #page-container .et_pb_module em { font-family: var(--tf-text) !important; font-weight: 400 !important; font-size: var(--t-body-sm) !important; line-height: 1.5 !important; }
.single-project #page-container .et_pb_text strong, .single-project #page-container .et_pb_module strong { font-weight: 700 !important; }
.single-project #page-container a[class*="button"] { font-family: var(--tf-sans) !important; font-weight: 900 !important; font-size: var(--t-button) !important; letter-spacing: var(--ls-caps) !important; text-transform: uppercase; }
.single-project #page-container .et_pb_button { font-size: var(--t-button) !important; }
.page-id-285 #page-container .et_pb_text p { font-size: var(--t-lead) !important; }
@media (max-width: 767px) { #page-container .fds-intro h1 br { display: none; } }
/* the homepage typewriter headline, the drawer, and the header CTA keep their own sizes (see their blocks); everything else goes through the tokens above */

/* Smooth scrolling for in-page links such as the "Let's talk" button (#contact = the inquiry form section in the footer layout) */
html { scroll-behavior: smooth; }
#contact { scroll-margin-top: 54px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Services rows (Logo Design, Brand Identity, Illustration): rows are full width with no side padding in Divi,
   so the image column runs to the screen edge. The text column gets its own side padding here. */
.fds-services .et_pb_column:not(:has(.et_pb_slider)) { padding: 60px 4% 60px 6%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; }
/* the text block is a narrow column centred in its half; text stays left-aligned inside it */
.fds-services .et_pb_column:not(:has(.et_pb_slider)) > .et_pb_module { width: 100%; max-width: 520px; margin-left: auto; margin-right: auto; }
/* rows and section have no vertical padding, so the images stack edge to edge; the image fills its column's height */
.fds-services .et_pb_column:has(.et_pb_slider) { display: flex; }
.fds-services .et_pb_column:has(.et_pb_slider) .et_pb_slider { width: 100%; margin-bottom: 0; height: auto !important; min-height: 660px; align-self: stretch; }
.fds-services .et_pb_slider .et_pb_slides, .fds-services .et_pb_slider .et_pb_slide { height: 100% !important; min-height: 660px; }
@media (max-width: 980px) { .fds-services .et_pb_column:has(.et_pb_slider) .et_pb_slider, .fds-services .et_pb_slider .et_pb_slides, .fds-services .et_pb_slider .et_pb_slide { min-height: 380px; } }
@media (max-width: 980px) { .fds-services .et_pb_column:not(:has(.et_pb_slider)) { padding-left: 6%; padding-right: 6%; } }

/* Highlighted words in headings: wrap them in a span with the class tf-hl to get a thick accent bar behind the words.
   (In the cards section the bar is replaced by an underline, see further down.) */
.tf-hl {
  /* the bar starts just above the x-height and ends a little below the baseline.
     The first percentage sets where the bar's top edge sits; padding-bottom sets how far it drops below the letters. */
  background: linear-gradient(to bottom, transparent 38%, var(--tf-accent) 38%) no-repeat left top / 100% 100%;
  padding: 0 5px 6px; margin: 0 -2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* The bar wipes in from the left when it scrolls into view, and again when its card is hovered (tf-highlights.js adds the classes).
   Without the script, or with reduced motion on, the bar simply shows. */
.tf-hl-anim .tf-hl { background-size: 0% 100%; }
.tf-hl-anim .tf-hl.tf-in { animation: tfHlWipe 1.3s cubic-bezier(.2,.7,.2,1) both; }
@keyframes tfHlWipe { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }

/* Rules under the headlines (Divi Divider modules in the services rows): draw in from left to right when scrolled into view (tf-highlights.js adds tf-in) */
.tf-hl-anim :is(.fds-services, .fds-fit, .fds-contact-hero) .et_pb_divider { transform: scaleX(0); transform-origin: left center; }
.tf-hl-anim :is(.fds-services, .fds-fit, .fds-contact-hero) .et_pb_divider.tf-in { animation: tfRuleDraw 1.1s cubic-bezier(.2,.7,.2,1) both; }
@keyframes tfRuleDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Eyebrows (H6): Sweet Sans Pro Heavy is the heaviest weight in the family, so a hairline outline in the same colour thickens it a touch */
.et_pb_text h6 { -webkit-text-stroke: .5px currentColor; }

/* Buttons (services rows, intro, cards section): no arrow at rest. On hover an arrow grows from inside the button out through its right edge
   (near-black while inside the yellow button, navy once it is past the edge) and the button gets a soft dark shadow. */
.fds-services .et_pb_button_module_wrapper { margin-top: 4px; }
/* Services buttons are secondary links, not CTAs, so they take the eyebrow tan instead of the accent blue (blue is reserved for CTAs).
   Divi sets the colours with "body #page-container … !important", hence the long selector. The hover arrow follows: dark inside the button, tan past its edge. */
body #page-container .et_pb_section.fds-services .et_pb_column .et_pb_button { background-color: #C7C1AF !important; color: #0B0B0B !important; }
/* hover: white button, near-black text, near-black arrow inside and out (the lift shadow comes from the shared :hover rule below) */
body #page-container .et_pb_section.fds-services .et_pb_column .et_pb_button:hover { background-color: #FFFFFF !important; color: #0B0B0B !important; }
.fds-services .et_pb_button::after { background: linear-gradient(to right, #0B0B0B 0, #0B0B0B 26px, #C7C1AF 26px) !important; }
.fds-services .et_pb_button:hover::after { background: #0B0B0B !important; }
.fds-services .et_pb_button::before { border-color: #C7C1AF !important; }
.fds-services .et_pb_button:hover::before { border-color: #0B0B0B !important; }
/* still, single-colour grain over the cream sections; the rows (and so the images and cards) sit above it */
.fds-services, .fds-fit { position: relative; }
.fds-services::before, .fds-fit::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.7 0 0 0 -.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.fds-services .et_pb_row, .fds-fit .et_pb_row { position: relative; z-index: 1; }
/* The cards section's grain texture (its ::before, set by inset:0 above) is pulled up short of the section's
   full bottom padding so the textured/flat seam lands at the vertical middle of the "Let's talk" button,
   rather than far below it. Value = section bottom padding + row's default bottom padding − half the button's height. */
.fds-fit::before { bottom: 148.6px; }
:is(.fds-services, .fds-intro, .fds-fit) .et_pb_button { position: relative; overflow: visible !important; transition: box-shadow .35s ease !important; }
:is(.fds-services, .fds-intro, .fds-fit) .et_pb_button::after {
  content: "" !important; display: block !important; position: absolute !important; top: 50% !important; left: calc(100% - 34px) !important; right: auto !important;
  width: 0; height: 2px; margin: -1px 0 0 0 !important; opacity: 1 !important; transform: none !important; font-size: 0 !important;
  background: linear-gradient(to right, #fff 0, #fff 26px, var(--tf-accent) 26px) !important; /* white inside the button, accent past its edge */
  transition: width .45s cubic-bezier(.2,.7,.2,1) !important;
}
:is(.fds-services, .fds-intro, .fds-fit) .et_pb_button::before {
  content: "" !important; display: block !important; position: absolute !important; top: 50% !important; left: calc(100% - 34px) !important; right: auto !important;
  width: 9px; height: 9px; margin: -5.5px 0 0 -7.5px !important; border-top: 2px solid var(--tf-accent); border-right: 2px solid var(--tf-accent); background: none !important;
  transform: rotate(45deg) !important; opacity: 0 !important; font-size: 0 !important;
  transition: left .45s cubic-bezier(.2,.7,.2,1), opacity .15s ease !important;
}
:is(.fds-services, .fds-intro, .fds-fit) .et_pb_button:hover::after { width: 68px; }
:is(.fds-services, .fds-intro, .fds-fit) .et_pb_button:hover::before { left: calc(100% + 34px) !important; opacity: 1 !important; transition: left .45s cubic-bezier(.2,.7,.2,1), opacity .2s ease .2s !important; }
:is(.fds-services, .fds-intro, .fds-fit) .et_pb_button:hover { box-shadow: 0 10px 22px rgba(11,11,11,.16), 0 2px 6px rgba(11,11,11,.1) !important; }

/* The cards section's own "Let's talk" button (et_pb_button_4) only: a single downward arrow on hover,
   instead of the rightward arrow used by every other button. White where it crosses the button's bottom
   border, accent below it.
   The whole arrow — shaft AND head — is ONE SVG drawn in one coordinate system, so the head can never drift
   out of line with the shaft (earlier versions positioned the head as a separate element and it never stayed
   put). It is revealed top-to-bottom on hover with clip-path, which keeps the "grows downward" feel.
   The shared ::before arrow head is switched off for this button.
   NOTE: the colours are hard-coded because CSS variables do not resolve inside a data URI, so they must be
   changed together with --tf-accent at the top of this file. */
.fds-fit .et_pb_button_4::before { display: none !important; }
.fds-fit .et_pb_button_4::after {
  content: "" !important; display: block !important; position: absolute !important;
  top: calc(100% - 14px) !important; left: 50% !important; right: auto !important; bottom: auto !important;
  width: 14px !important; height: 49px !important; margin: 0 !important; border: 0 !important;
  transform: translateX(-50%) !important; opacity: 1 !important; font-size: 0 !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='49' viewBox='0 0 14 49'%3E%3Cpath d='M7 0V14' stroke='%23ffffff' stroke-width='2'/%3E%3Cpath d='M7 13V48' stroke='%231C5CE8' stroke-width='2'/%3E%3Cpath d='M1.5 42.5L7 48l5.5-5.5' fill='none' stroke='%231C5CE8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") top center / 14px 49px no-repeat !important;
  -webkit-clip-path: inset(0 0 100% 0); clip-path: inset(0 0 100% 0);
  transition: clip-path .45s cubic-bezier(.2,.7,.2,1), -webkit-clip-path .45s cubic-bezier(.2,.7,.2,1) !important;
}
.fds-fit .et_pb_button_4:hover::after { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); }

/* ==========================================================================
   Cards section: "You will enjoy working with me if…" (section class fds-fit)
   Centred eyebrow and headline, then two rows of three white cards on the cream background.
   Colours, fonts, padding and text are set in Divi; the layout details and animation live here.
   ========================================================================== */
/* cards are flat at rest and lift with a soft drop shadow on hover */
.fds-fit .et_pb_column:has(.fi) { box-shadow: 0 0 0 rgba(11,11,11,0) !important; transition: box-shadow .35s ease; }
.fds-fit .et_pb_column:has(.fi):hover { box-shadow: 0 30px 90px rgba(11,11,11,.10), 0 8px 24px rgba(11,11,11,.04) !important; }
/* each card is clickable and scrolls to the inquiry form, like the "Let's talk" button (tf-highlights.js handles the click) */
.fds-fit .et_pb_column:has(.fi) { cursor: pointer; }
/* narrower desktop screens: smaller titles so they stay on two lines */
@media (min-width: 981px) and (max-width: 1350px) { .fds-fit .et_pb_column:has(.fi) h4 { font-size: var(--t-h5) !important; } }
/* the old glow layers behind the cards (added by tf-parallax.js) stay switched off */
.fds-fit .tfp-bg { display: none !important; }
/* On desktop the titles keep room for two lines and sit on the bottom of that space, so the coloured panels start level across a row even when one title wraps */
@media (min-width: 981px) { .fds-fit .et_pb_column:has(.fi) .et_pb_text:has(h4) .et_pb_text_inner { min-height: 110px; display: flex; flex-direction: column; justify-content: flex-end; } }
/* Card titles: each highlighted word gets its own hand-drawn ink mark instead of a plain rule — circled,
   scribbled, arrowed, double-ruled, boxed or swept — so the six cards read like someone marked them up by
   hand. Each mark is an SVG on the span's ::after, stretched to whatever the word measures, so it works at
   any title size. Cards are matched on their icon's aria-label rather than their position, because
   tf-parallax.js injects a div into the section that shifts every nth-of-type index.
   The existing hooks still drive it: tf-highlights.js adds .tf-in on scroll-in and on hover, and the ink
   wipes on from the left.
   NOTE: the stroke colour is hard-coded in each SVG because CSS variables do not resolve inside a data URI,
   so it must be changed together with --tf-accent at the top of this file. */
.fds-fit .tf-hl { background: none !important; padding: 0 !important; margin: 0 !important; position: relative; }
.fds-fit .tf-hl::after {
  content: ""; position: absolute; pointer-events: none;
  left: -.08em; right: -.08em; bottom: -.30em; height: .34em;
  background: no-repeat center / 100% 100%;
}
/* the two marks that wrap around the word, rather than sitting under it, need a bigger box */
.fds-fit .et_pb_column:has(svg[aria-label="Products on a shelf"]) .tf-hl::after { left: -.26em; right: -.40em; top: -.17em; bottom: -.24em; height: auto; }
.fds-fit .et_pb_column:has(svg[aria-label="Straight-talking speech bubbles"]) .tf-hl::after { left: -.46em; right: -.46em; top: -.18em; bottom: -.26em; height: auto; }
/* the ink wipes on from the left */
.tf-hl-anim .fds-fit .tf-hl::after { clip-path: inset(0 100% 0 0); }
.tf-hl-anim .fds-fit .tf-hl.tf-in::after { animation: tfInk .85s cubic-bezier(.2,.7,.2,1) both; }
@keyframes tfInk { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -3% 0 0); } }
/* Four of the marks are drawn on like a pen moving, rather than wiped in: the circle round "a brand", the box
   round "keep it real", and the two double underlines ("a schedule", "human touch"), whose second line only
   starts once the first has finished. tf-highlights.js injects a real SVG into each span and adds .tf-ink-on,
   which switches off the background-image mark below — the two must never both render. The background
   versions stay as the fallback for when that script does not run.
   The SVG box defaults to the underline geometry; the circle and box get the same bigger boxes as their
   ::after fallbacks above. Per-path timing (--dur, --delay, --len, --o) is set inline by the script.
   Widths and heights are explicit, not left/right pairs: an SVG is a replaced element, and when an
   absolutely positioned replaced element has width:auto and a set height, the browser derives the width
   from the height and the viewBox ratio and ignores "right" — so the underlines came out 194px and 170px
   wide whatever the word measured. */
.fds-fit .tf-hl.tf-ink-on:after { display: none; }
.fds-fit .tf-hl .tf-ink {
  position: absolute; left: -.08em; bottom: -.30em; width: calc(100% + .16em); height: .34em;
  max-width: none; overflow: visible; pointer-events: none;
}
.fds-fit .et_pb_column:has(svg[aria-label="Products on a shelf"]) .tf-hl .tf-ink { left: -.26em; top: -.17em; bottom: auto; width: calc(100% + .66em); height: calc(100% + .41em); }
.fds-fit .et_pb_column:has(svg[aria-label="Straight-talking speech bubbles"]) .tf-hl .tf-ink { left: -.46em; top: -.18em; bottom: auto; width: calc(100% + .92em); height: calc(100% + .44em); }
.fds-fit .tf-hl .tf-ink path {
  fill: none; stroke: var(--tf-accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; /* box is stretched to the word, so keep the line an even weight */
}
/* Hidden until it draws. Belt and braces: the dash length is measured from the rendered size in tf-highlights.js,
   but if that measurement is ever off by a pixel or two, a short stub of the stroke would show at rest. */
.tf-hl-anim .fds-fit .tf-hl .tf-ink path { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); opacity: 0; }
.tf-hl-anim .fds-fit .tf-hl.tf-in .tf-ink path { animation: tfDraw var(--dur, .95s) cubic-bezier(.45,.05,.3,1) var(--delay, 0s) both; opacity: var(--o, 1); }
@keyframes tfDraw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .tf-hl-anim .fds-fit .tf-hl .tf-ink path { stroke-dashoffset: 0; } }

/* "a brand" — circled (background fallback, replaced by the drawn-on SVG above when the script runs) */
.fds-fit .et_pb_column:has(svg[aria-label="Products on a shelf"]) .tf-hl::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 56' preserveAspectRatio='none' fill='none' stroke='%231C5CE8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M92 9C70 3 32 4 18 15 4 26 12 42 35 48c25 6 65 2 76-10 8-9 2-21-14-27-8-3-16-4-22-4' stroke-width='2.2'/%3E%3C/svg%3E"); }
/* "a schedule" — loose scribbled underline, two passes */
.fds-fit .et_pb_column:has(svg[aria-label="A launch calendar"]) .tf-hl::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none' fill='none' stroke='%231C5CE8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7C30 2 56 11 84 6c28-5 56 4 84-1 12-2 22 0 28 2' stroke-width='2.2'/%3E%3Cpath d='M9 11C37 7 61 14 91 10c30-4 56 3 84-1 10-1 17 0 21 1' stroke-width='1.6' opacity='.7'/%3E%3C/svg%3E"); }
/* "creative partner" — underline running out into an arrow */
.fds-fit .et_pb_column:has(svg[aria-label="One partner connected to four disciplines"]) .tf-hl::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none' fill='none' stroke='%231C5CE8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8C40 4 80 11 120 7c28-3 50 1 66 3' stroke-width='2.2'/%3E%3Cpath d='M178 4l11 6-12 5' stroke-width='2.2'/%3E%3C/svg%3E"); }
/* "human touch" — double rule */
.fds-fit .et_pb_column:has(svg[aria-label="A pencil drawing a label by hand"]) .tf-hl::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none' fill='none' stroke='%231C5CE8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5C52 1 150 8 196 3' stroke-width='2.2'/%3E%3Cpath d='M7 12C62 8 140 14 193 10' stroke-width='1.7' opacity='.75'/%3E%3C/svg%3E"); }
/* "keep it real" — boxed in */
.fds-fit .et_pb_column:has(svg[aria-label="Straight-talking speech bubbles"]) .tf-hl::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 58' preserveAspectRatio='none' fill='none' stroke='%231C5CE8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 8C72 5 142 4 187 7c3 13 3 33 1 45-48 4-128 5-176 2C9 41 9 22 11 9c2-2 6-2 13-2' stroke-width='2.2'/%3E%3C/svg%3E"); }
/* "real creative" — single swept underline */
.fds-fit .et_pb_column:has(svg[aria-label="A cut gem"]) .tf-hl::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none' fill='none' stroke='%231C5CE8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10C40 5 92 13 142 8c24-3 42 0 54-5' stroke-width='2.2'/%3E%3C/svg%3E"); }
/* Cards: white top with the icon and title, accent-coloured bottom panel holding the paragraph.
   The panel colour, its text colour and its padding are set on each paragraph Text module in Divi.
   Here the panel is stretched to the card's side and bottom edges; titles all sit in the same height, so the panel starts level across a row. */
.fds-fit .et_pb_column:has(.fi) { display: flex; flex-direction: column; }
/* pale box behind the title (the accent at 14%): full card width, starts halfway up the title's first line and runs down to the panel */
.fds-fit .et_pb_column:has(.fi) > .et_pb_text:has(h4) { margin: 0 -34px !important; width: auto !important; max-width: none !important; padding: 0 34px 36px !important; background: linear-gradient(to top, #E7E5DC 115px, transparent 115px); /* band colour behind the card titles */ }
.fds-fit .et_pb_column:has(.fi) > .et_pb_text:last-child { margin: 0 -34px !important; width: auto !important; max-width: none !important; flex: 1 1 auto; display: flex !important; flex-direction: column; justify-content: center; /* paragraph centred vertically in the panel */ }
/* The whole card fades and rises once, keyed to the same scroll trigger as its title (tf-highlights.js adds tf-in-w to the h4).
   No per-module Divi animations inside a card — this is the only entrance. */
.tf-hl-anim .fds-fit .et_pb_column:has(.fi) { transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; }
.tf-hl-anim .fds-fit .et_pb_column:has(.fi):not(:has(.tf-in-w)) { opacity: 0; transform: translateY(18px); }
/* Card titles animate on like the quote carousel: each word rises, sharpens and fades in, one after the other (tf-highlights.js wraps the words and adds tf-in-w on scroll) */
.tf-hl-anim .fds-fit h4.tf-words .tf-w { display: inline-block; opacity: 0; transform: translateY(.55em); filter: blur(8px); transition: opacity .6s, transform .7s cubic-bezier(.2,.7,.2,1), filter .6s; transition-delay: calc(var(--k) * 70ms); }
.tf-hl-anim .fds-fit h4.tf-words.tf-in-w .tf-w { opacity: 1; transform: none; filter: none; }

/* ==========================================================================
   Site header: hamburger on the left, logo centred, "Hire me" on the right.
   The nav links live in a full-height drawer behind the hamburger at every width (markup in functions.php,
   toggled by tf-header.js; the drawer rules are further down in this block).
   On the home page the header is transparent and sits over the hero, with the logo in white; once the
   page scrolls (Divi adds .et-fixed-header) it goes solid cream with near-black ink, because a white
   logo would disappear against the cream sections below. Interior pages keep the solid header.
   The logo is an inline SVG filled with currentColor, so "color" is all that changes between the two.
   ========================================================================== */
#main-header { box-shadow: none !important; transition: background-color .3s ease, box-shadow .3s ease; }
/* full width rather than Divi's 1080px container, so the hamburger and CTA sit near the screen edges.
   --tf-hdr-pad is the gutter; the drawer below uses it too, so the two stay in step at every breakpoint. */
/* Padding is symmetric on purpose: the logo is centred on the bar's full height while the hamburger and
   CTA are centred within the content box, so unequal top/bottom padding would put them on axes 1px apart. */
#main-header .container.et_menu_container { --tf-hdr-pad: 40px; position: relative; width: auto; max-width: none; padding: 24px var(--tf-hdr-pad); }
/* one row, three slots */
#main-header #et-top-navigation { float: none; display: flex; align-items: center; width: 100%; padding: 0 !important; margin: 0; }
/* Divi's own nav, search icon and mobile toggle are all replaced by the hamburger + drawer below */
#main-header #top-menu-nav, #main-header #et_top_search, #main-header #et_mobile_nav_menu { display: none !important; }
/* hamburger, hard left, at every width */
#main-header .tf-burger {
  order: -1; display: flex; flex-direction: column; justify-content: center; gap: 6px;
  width: 28px; height: 28px; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; color: inherit;
  position: relative; z-index: 30;
}
#main-header .tf-burger span { display: block; width: 28px; height: 3px; border-radius: 1px; background: currentColor; transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .2s ease, background-color .3s ease; }
#main-header.tf-nav-open .tf-burger span { background: #0B0B0B; }
#main-header.tf-nav-open .tf-burger span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
#main-header.tf-nav-open .tf-burger span:nth-child(2) { opacity: 0; }
#main-header.tf-nav-open .tf-burger span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
/* logo, centred over the whole bar rather than between the two slots */
#main-header .logo_container { position: absolute; left: 50%; transform: translateX(-50%); top: 0; bottom: 0; width: auto; height: auto; display: flex; align-items: center; margin: 0; }
#main-header .logo_container .tf-logo { display: block; line-height: 0; }
/* The badge is geometrically centred with the hamburger and CTA, but its weight sits high — the FLEMING
   wordmark is far heavier than the DESIGN CO line beneath it — so a true centre reads as sitting high next
   to the smaller elements. This nudge is an optical correction, not a layout fix; transform keeps it out of
   the layout so it cannot shift the bar's height. */
#main-header .logo_container .tf-logo svg { display: block; width: auto; height: 68px; transform: translateY(5px); }
/* "Hire me", hard right — same solid blue and white text as the buttons elsewhere on the site */
#main-header .tf-cta {
  order: 10; margin-left: auto; display: inline-block; padding: 14px 28px;
  font-family: var(--tf-sans); font-weight: 900; font-size: 14px; letter-spacing: var(--ls-caps);
  text-transform: uppercase; line-height: 1; border: 0; white-space: nowrap;
  background: var(--tf-accent); color: #fff;
  transition: background-color .25s ease, color .25s ease;
}
/* The site-wide nav rule near the top of this file ("#et-top-navigation a { font-family: sofia-pro
   !important }") was written when that container only held Divi's menu. The CTA and the drawer links now
   live there too, so they need !important to keep Sweet Sans — the face used by the buttons and eyebrows. */
#main-header .tf-cta { font-family: "sweet-sans-pro", Arial, sans-serif !important; }
/* colours: dark logo and hamburger by default (interior pages, which keep Divi's solid white bar) */
#main-header .logo_container .tf-logo, #main-header .tf-burger { color: #0B0B0B; }
#main-header .tf-cta:hover { background: #0B0B0B; color: #fff; }
/* The header is global: the bar stays transparent for the whole scroll on every page, post and case study. A
   dark gradient scrim sits behind it instead of a solid background, so the white logo and hamburger stay
   readable whatever scrolls underneath — the hero image at the top, the cream sections further down. It is
   a ::before rather than a background on the bar itself so the fade can run past the bar's own height
   without moving the drawer. Pages that open on white instead of a dark hero (single posts, thank-you,
   archives, 404, the hero-less Quad W study) keep the same transparent bar but with dark ink and a white scrim — see the block after this one. */
#page-container { padding-top: 0 !important; }
#main-header { background: transparent !important; }
#main-header:before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100%; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(11,11,11,.31) 0%, rgba(11,11,11,.21) 38%, rgba(11,11,11,.08) 70%, rgba(11,11,11,0) 100%);
}
#main-header .logo_container .tf-logo,
#main-header .tf-burger { color: #fff; }
/* Divi's own fixed-header state is neutralised — the bar is meant to stay transparent the whole way down. */
#main-header.et-fixed-header { background: transparent !important; box-shadow: none !important; }
/* Light-top pages: no dark hero to sit on, so the ink goes dark, the scrim goes white and the content starts
   below the bar (95px) instead of under it. Any new page that opens on a light background belongs in this list. */
body:is(.single-post, .page-id-285, .page-id-279, .postid-33251, .archive, .search, .error404, .tf-light-top) #page-container { padding-top: 95px !important; }
body:is(.single-post, .page-id-285, .page-id-279, .postid-33251, .archive, .search, .error404, .tf-light-top) #main-header:before {
  background: linear-gradient(to bottom, rgba(255,255,255,.94) 0%, rgba(255,255,255,.86) 45%, rgba(255,255,255,.4) 78%, rgba(255,255,255,0) 100%);
}
body:is(.single-post, .page-id-285, .page-id-279, .postid-33251, .archive, .search, .error404, .tf-light-top) #main-header .logo_container .tf-logo,
body:is(.single-post, .page-id-285, .page-id-279, .postid-33251, .archive, .search, .error404, .tf-light-top) #main-header .tf-burger { color: #0B0B0B; }
/* The drawer: slides in from the left over the whole viewport height, covering the header bar (only the burger/X
   floats above it). Tan with a warm light source top-left, shadow bottom-right and the site's grain on top.
   Items and captions are defined in functions.php (fleming_header_nav); prototype: mockups/menu-drawer.html. */
#main-header .tf-scrim { position: fixed; inset: 0; z-index: 20; background: rgba(11,11,11,.55); opacity: 0; pointer-events: none; transition: opacity .5s ease; }
#main-header.tf-nav-open .tf-scrim { opacity: 1; pointer-events: auto; }
body.tf-nav-open { overflow: hidden; }
#main-header .tf-nav {
  position: fixed; top: 0; bottom: 0; left: 0; width: min(640px, 100vw); height: 100vh; height: 100dvh; z-index: 25;
  background: #C7C1AF; color: #0B0B0B; transform: translateX(-102%); transition: transform .55s cubic-bezier(.77,0,.18,1);
  display: flex; flex-direction: column; padding: 100px 56px 36px; box-sizing: border-box; overflow: hidden; will-change: transform; text-align: center;
}
.admin-bar #main-header .tf-nav { top: 32px; height: calc(100vh - 32px); }
#main-header .tf-nav::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 8% 0%, rgba(255,252,243,.55) 0%, rgba(255,252,243,0) 55%), radial-gradient(90% 70% at 100% 100%, rgba(11,11,11,.16) 0%, rgba(11,11,11,0) 60%); }
#main-header .tf-nav::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .16; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.7 0 0 0 -.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
#main-header .tf-nav > * { position: relative; z-index: 1; }
#main-header.tf-nav-open .tf-nav { transform: translateX(0); }
#main-header .tf-nav .tf-nav-list { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: clamp(28px, 5.6vh, 68px); padding-top: clamp(10px, 3vh, 32px); margin: 0; }
#main-header .tf-nav .tf-nav-item {
  position: relative; display: block; width: 100%; padding: 0; margin: 0; text-align: center; cursor: default;
  font-family: "hardcover-vf", Georgia, serif !important; font-weight: 400; font-size: clamp(46px, 8.6vh, 72px); line-height: 1.05; letter-spacing: -.01em;
  text-transform: none; color: #0B0B0B; text-decoration: none;
  opacity: 0; transform: translateX(-24px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
#main-header .tf-nav a.tf-nav-item { cursor: pointer; }
#main-header .tf-nav .tf-nav-item:hover { color: #0B0B0B; }
#main-header.tf-nav-open .tf-nav .tf-nav-item { opacity: 1; transform: none; }
#main-header.tf-nav-open .tf-nav .tf-nav-item:nth-child(1) { transition-delay: .18s; }
#main-header.tf-nav-open .tf-nav .tf-nav-item:nth-child(2) { transition-delay: .26s; }
#main-header.tf-nav-open .tf-nav .tf-nav-item:nth-child(3) { transition-delay: .34s; }
#main-header.tf-nav-open .tf-nav .tf-nav-item:nth-child(4) { transition-delay: .42s; }
#main-header.tf-nav-open .tf-nav .tf-nav-item:nth-child(5) { transition-delay: .5s; }
/* caption lives in the gap below each word; hidden until hover, underlines when hovered itself */
#main-header .tf-nav .tf-nav-item small {
  position: absolute; left: 0; right: 0; top: 100%; transform: translateY(-2px); white-space: nowrap; text-align: center;
  font-family: "sweet-sans-pro", Arial, sans-serif !important; font-weight: 700; font-size: 12px; line-height: 1; letter-spacing: 3px; text-transform: uppercase; color: #0B0B0B;
  opacity: 0; pointer-events: auto; cursor: pointer; text-decoration: underline transparent; text-underline-offset: 5px; text-decoration-thickness: 1.5px;
  transition: opacity .3s ease, transform .35s ease, text-decoration-color .2s;
}
#main-header .tf-nav .tf-nav-item:hover small { opacity: 1; transform: translateY(8px); }
#main-header .tf-nav a.tf-nav-item small:hover { text-decoration-color: #0B0B0B; }
#main-header .tf-nav .tf-nav-svc small { padding: 6px 0; display: flex; align-items: center; justify-content: center; text-decoration: none; }
#main-header .tf-nav .tf-nav-svc small a { position: static; display: inline-grid; width: auto; font: inherit; font-family: "sweet-sans-pro", Arial, sans-serif !important; letter-spacing: inherit; color: #0B0B0B; text-decoration: none; padding: 4px 2px; cursor: pointer; }
#main-header .tf-nav .tf-nav-svc small a span { text-decoration: underline transparent; text-underline-offset: 5px; text-decoration-thickness: 1.5px; transition: text-decoration-color .2s, color .2s; }
#main-header .tf-nav .tf-nav-svc small a:hover span { text-decoration-color: #0B0B0B; }
#main-header .tf-nav .tf-nav-svc small a:active span { color: #FFFFFF; text-decoration-color: #FFFFFF; }
#main-header .tf-nav .tf-nav-svc small i { font-style: normal; margin: 0 4px 0 6px; }
#main-header .tf-nav .tf-nav-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding-top: 28px; border-top: 1px solid rgba(11,11,11,.14); text-align: left; }
#main-header .tf-nav .tf-nav-foot p { margin: 0; padding: 0; font-family: "sofia-pro", Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.5; color: rgba(11,11,11,.7); }
#main-header .tf-nav .tf-nav-foot p a { color: #0B0B0B; text-decoration: none; }
#main-header .tf-nav .tf-nav-social { display: flex; gap: 18px; }
#main-header .tf-nav .tf-nav-social a { font-size: 0; color: #0B0B0B; text-decoration: none; line-height: 1; }
#main-header .tf-nav .tf-nav-social a::before { content: attr(data-i); font-family: ETmodules !important; font-size: 16px; }
#main-header .tf-nav .tf-nav-cta { display: none; }
@media (max-width: 767px) {
  #main-header .tf-nav { width: 100vw; padding: 110px 24px 24px; }
  #main-header .tf-nav .tf-nav-list { justify-content: center; gap: clamp(4px, 1.2vh, 12px); padding-top: 0; }
  #main-header .tf-nav .tf-nav-item { font-size: clamp(38px, 7vh, 56px); }
  #main-header .tf-nav .tf-nav-item small { display: none; }
  /* no hover on phones, so Services shows its three sub-links as a visible row instead of a dead word */
  #main-header .tf-nav .tf-nav-svc small { display: flex; position: static; opacity: 1; transform: none; margin-top: 2px; font-size: 10px; letter-spacing: 1.2px; white-space: normal; flex-wrap: wrap; }
  #main-header .tf-nav .tf-nav-svc small a { padding: 4px 1px; }
  #main-header .tf-nav .tf-nav-foot { display: none; }
  #main-header .tf-nav .tf-nav-cta { display: flex; flex-direction: column; gap: 10px; }
  #main-header .tf-nav .tf-nav-cta a { display: block; padding: 18px; text-align: center; font-family: "sweet-sans-pro", Arial, sans-serif !important; font-weight: 900; font-size: 14px; line-height: 1; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; }
  #main-header .tf-nav .tf-nav-cta a.primary { background: #1C5CE8; color: #fff; }
  #main-header .tf-nav .tf-nav-cta a.secondary { border: 1px solid #0B0B0B; color: #0B0B0B; }
}
@media (max-width: 980px) {
  #main-header .container.et_menu_container { --tf-hdr-pad: 20px; }
  #main-header .container.et_menu_container { padding-top: 16px; padding-bottom: 16px; }
  #main-header .logo_container .tf-logo svg { height: 46px; transform: translateY(3px); }
  #main-header .tf-cta { padding: 11px 16px; font-size: 11px; letter-spacing: 1.4px; }
}

/* ==========================================================================
   Hero headline: "I build / <typed adjective> / brands" (section class fds-hero)
   Left-aligned on purpose. The hero column centres its children, so a shrink-to-fit headline would be
   re-centred on every keystroke as the word grows and shrinks — stretching the module full width and
   aligning left keeps the line starts pinned while only the caret travels.
   tf-typewriter.js draws the headline as WebGL particles over this h1 (whose text it makes transparent) and
   types the adjective; it draws its own caret. Everything below still styles the plain h1, which is what
   shows with reduced motion or without WebGL, and what the particles are measured from.
   ========================================================================== */
/* The hero row runs full width rather than Divi's 1080px: at this size "profitable" measures ~1382px, so
   inside the 1080px row it would hang out over the right edge with only ~20px of viewport to spare. Going
   full-bleed also lines the headline's left edge up with the hamburger above it. */
/* Colour tint over the background video. Divi offers no overlay control for video backgrounds (only for
   image ones), so it is drawn here on the video wrapper's ::after. The wrapper fills the section, so the tint
   also covers Divi's fallback image when the video has not loaded. z-index 0 puts it above the video (z auto,
   earlier in the DOM) and below the row and the particle canvas (z 5). Strength chosen on the live hero. */
.fds-hero .et-pb-background-video { position: absolute; }
.fds-hero .et-pb-background-video::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: rgba(0,0,0,.35); }
.fds-hero .et_pb_row { width: 100%; max-width: none; }
.fds-hero .et_pb_text:has(.tf-hero-h) { width: 100%; align-self: stretch; }
.fds-hero .tf-hero-h {
  margin: 0; padding: 0 40px; text-align: center; color: #fff;
  font-family: "sweet-sans-pro", Arial, sans-serif !important; /* site-wide heading rule sets a serif */
  font-weight: 900; /* heaviest weight in the kit */
  text-transform: uppercase;
  font-size: clamp(26px, 9.75vw, 170px);
  line-height: .85; letter-spacing: -.015em;
}
/* No min-height here: an inline-block grows upward from the baseline, so reserving 1em made line two's
   line box taller than the other two and dropped all the extra space into the gap above it — measured
   207.8px of line spacing instead of the 190.9px the line-height asks for. The line cannot collapse while
   empty anyway: the block's own strut and the caret below both hold it open. */
.fds-hero .tf-type { display: inline-block; }
.fds-hero .tf-type:after {
  content: ""; display: inline-block; width: .055em; height: .74em;
  background: var(--tf-accent); margin-left: .06em; vertical-align: -.02em;
  animation: tfCaret 1.05s steps(1, end) infinite;
}
@keyframes tfCaret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fds-hero .tf-type:after { animation: none; } }
@media (max-width: 980px) { .fds-hero .tf-hero-h { padding: 0 20px; } }
/* Phones: size the headline so its widest line ("profitable" + caret) fills 96% of the width inside the 20px
   padding (7.1 = that line's width in em, 6.817, divided by 0.96). */
@media (max-width: 767px) { .fds-hero .tf-hero-h { font-size: calc((100vw - 40px) / 7.1); } }

/* Back-to-top button: Divi's global scroll-top element (not a module), styled with the tflem arrow.
   Root-relative path on purpose: the file is in this site's own library (imported from the old site), and a
   root-relative URL survives the move from staging to tflem.com without a search-replace. */
.et_pb_scroll_top.et-pb-icon {
  font-size: 20px;
  color: rgba(0,0,0,0);
  right: 5px;
  bottom: 20px;
  padding: 100px 10px;
  background: url(/wp-content/uploads/2018/10/bk-up-arrow.svg) center center no-repeat !important;
  border-radius: 0;
}
.et_pb_scroll_top.et-pb-icon:hover { background-color: transparent !important; }

/* ==========================================================================
   Contact page (/contact/): inquiry form + newsletter box. Module colours and type are set in Divi; this is layout and the bits Divi can't reach.
   ========================================================================== */
/* hero: the rule under the intro is a Divider module (same 3px #C7C1AF as the homepage services rules, drawn in by tf-highlights.js);
   the badge hangs off the bottom-right of the section and overlaps the form section, like the homepage badge */
.fds-contact-hero { position: relative; overflow: visible !important; padding-bottom: 120px !important; }
.fds-contact-hero .et_pb_row, .fds-contact-hero .et_pb_column { position: static; }
.fds-contact-hero .fds-contact-meta { border-top: 0 !important; }
.fds-contact-hero .fds-contact-meta .et_pb_column { margin-bottom: 0; }
.fds-contact-hero .fds-social .et_pb_social_icon { margin: 0 14px 0 0; }
.fds-contact-hero .fds-social .et_pb_social_icon a.icon { width: auto; height: auto; }
.fds-contact-hero .fds-social .et_pb_social_icon a.icon:before { font-size: 18px; line-height: 1; }
.fds-contact-hero .fds-contact-badge { position: absolute; right: 4vw; bottom: -120px; z-index: 10; margin: 0 !important; width: 220px; }
.fds-contact-hero .fds-contact-badge img { width: 220px; max-width: none; }
@media (max-width: 980px) {
  .fds-contact-hero .fds-contact-meta .et_pb_column { margin-bottom: 28px; }
  .fds-contact-hero .fds-contact-badge { width: 150px; right: 5vw; bottom: -70px; }
  .fds-contact-hero .fds-contact-badge img { width: 150px; }
}
/* inquiry form (Divi Contact Form). Half-width fields are .et_flex_column_12_24 in Divi 5 (.et_pb_contact_field_half before the page was converted). */
.fds-form form.et_pb_contact_form { display: flex; flex-wrap: wrap; gap: 12px !important; } /* gap, not field margins: Divi 5 zeroes the field margins */
.fds-form .et_pb_contact_field { flex: 0 0 100%; width: 100%; margin: 0; padding: 0; }
.fds-form .et_pb_contact_field.et_pb_contact_field_half, .fds-form .et_pb_contact_field.et_flex_column_12_24 { flex: 0 0 calc(50% - 6px); width: calc(50% - 6px); }
.fds-form input[type="text"], .fds-form input[type="email"], .fds-form textarea { width: 100%; box-sizing: border-box; background: #FFFFFF !important; border: 1px solid #E7E2D3 !important; border-radius: 0; padding: 17px 18px !important; color: #0B0B0B; }
.fds-form input:focus, .fds-form textarea:focus { border-color: #1C5CE8 !important; outline: none; }
.fds-form textarea { min-height: 170px; }
.fds-form ::placeholder { color: #8A8578; opacity: 1; }
.fds-form .et_pb_contact_field_options_title { color: #0B0B0B; margin: 10px 0 12px; }
.fds-form .et_pb_contact_field_options_list { color: #0B0B0B; }
.fds-form .et_pb_contact_field_options_list label { padding-left: 28px; }
.fds-form .et_pb_contact_field_checkbox input[type="checkbox"] + label i,
.fds-form .et_pb_contact_field_radio input[type="radio"] + label i { border: 1px solid #CFC9B8; background: #FFFFFF; }
.fds-form .et_pb_contact_field_options_list .et_pb_contact_field_checkbox,
.fds-form .et_pb_contact_field_options_list .et_pb_contact_field_radio { margin-bottom: 8px; }
.fds-form .et_pb_contact_field[data-type="checkbox"], .fds-form .et_pb_contact_field[data-type="radio"] { margin: 10px 0 !important; }
/* bottom row: captcha on the left, button on the right */
.fds-form .et_contact_bottom_container { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; margin-top: 6px; }
.fds-form .et_pb_contact_right { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; margin: 0; color: #0B0B0B; }
.fds-form .et_pb_contact_right p { margin: 0; }
.fds-form .et_pb_contact_captcha { width: 70px !important; padding: 12px !important; }
.fds-form .et_pb_contact_submit { white-space: nowrap; margin: 0; }
.fds-form .et-pb-contact-message p { font-family: "sofia-pro", Helvetica, Arial, sans-serif; color: #0B0B0B; }
@media (max-width: 767px) {
  .fds-form .et_pb_contact_field.et_pb_contact_field_half, .fds-form .et_pb_contact_field.et_flex_column_12_24 { flex-basis: 100%; width: 100%; }
  .fds-form .et_contact_bottom_container { flex-direction: column; align-items: stretch; }
  .fds-form .et_pb_contact_submit { width: 100%; text-align: center; }
}
/* newsletter box (markup in a Code module, behaviour in tf-newsletter.js, Brevo in inc/brevo.php).
   Background: the homepage testimonials gradient, added by tf-quotes.js (gradientOnly); the text goes dark on it as it does there. */
.fds-newsletter.tfq-on .et_pb_text h2, .fds-newsletter.tfq-on .et_pb_text p { color: #0B0B0B !important; }
.fds-newsletter.tfq-on .et_pb_text h6 { color: rgba(11,11,11,.55) !important; }
.fds-newsletter.tfq-on .fds-nl-note { color: #0B0B0B; }
.fds-newsletter-form { max-width: 640px; margin: 0 auto; }
.fds-newsletter-form .fds-nl-row { display: flex; gap: 10px; }
.fds-newsletter-form .fds-nl-field { flex: 1 1 0; min-width: 0; margin: 0; }
.fds-newsletter-form input[type="text"], .fds-newsletter-form input[type="email"] { width: 100%; box-sizing: border-box; border: 0; border-radius: 0; background: #FFFFFF; color: #0B0B0B; font-family: "sofia-pro", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; padding: 16px 18px; }
.fds-newsletter-form input::placeholder { color: #8A8578; opacity: 1; }
.fds-newsletter-form input:focus { outline: 2px solid #0B0B0B; outline-offset: 0; }
.fds-newsletter-form button { flex: 0 0 auto; border: 0; border-radius: 0; background: #0B0B0B; color: #FFFFFF; font-family: "sweet-sans-pro", Arial, sans-serif; font-weight: 900; font-size: 16px; letter-spacing: 2px; text-transform: uppercase; padding: 16px 34px; cursor: pointer; transition: background .2s, color .2s; }
.fds-newsletter-form button:hover, .fds-newsletter-form button:focus-visible { background: #FFFFFF; color: #0B0B0B; }
.fds-newsletter-form button[disabled] { opacity: .7; cursor: default; }
.fds-newsletter-form .fds-nl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fds-newsletter-form .fds-nl-note { font-family: "sofia-pro", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #FFFFFF; text-align: center; margin: 14px 0 0; min-height: 0; }
.fds-newsletter-form .fds-nl-note:empty { display: none; }
.fds-newsletter-form .fds-nl-note.is-ok { font-size: 20px; }
.fds-newsletter-form.is-done .fds-nl-row { display: none; }
@media (max-width: 767px) {
  .fds-newsletter-form .fds-nl-row { flex-direction: column; }
  .fds-newsletter-form button { width: 100%; }
}

/* ==========================================================================
   Footer (Theme Builder footer template, post 307): one Code module holds the markup (.fds-foot); everything visual lives here.
   Badge image: /wp-content/uploads/2026/10/Fleming-Design-Co-metal-badge-final.jpg (2528x1696).
   ========================================================================== */
.fds-footer { padding: 0 !important; }
.fds-footer .et_pb_row { width: 100% !important; max-width: 100% !important; padding: 0 !important; }
.fds-footer .et_pb_column, .fds-footer .et_pb_module { margin-bottom: 0 !important; }
.fds-foot { position: relative; background: #0B0B0B; color: #FFFFFF; overflow: hidden; }
.fds-foot::before { content: ""; position: absolute; inset: 0; opacity: .07; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.7 0 0 0 -.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.fds-foot .in { position: relative; width: min(1180px, 90vw); margin: 0 auto; }
.fds-foot .stamp { text-align: center; padding: 60px 0 120px; }
.fds-foot .badge-link { position: relative; display: block; width: 400px; max-width: 80vw; margin: 0 auto; aspect-ratio: 2528 / 1696; -webkit-mask-image: radial-gradient(ellipse 54% 56% at 50% 50%, #000 70%, transparent 100%); mask-image: radial-gradient(ellipse 54% 56% at 50% 50%, #000 70%, transparent 100%); }
.fds-foot .badge-link img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: rotate(-2deg) scale(1.06); display: block; }
.fds-foot .tag { color: #FFFFFF; font-family: var(--tf-serif) !important; font-weight: 400 !important; margin: 14px auto 0; max-width: 720px; }
.fds-foot .tag em { font-style: italic; color: #C7C1AF; }
.fds-foot .rule { border: 0; border-top: 1px solid rgba(255,255,255,.12); margin: 0; height: 0; }
.fds-foot .rule-wrap { position: relative; }
.fds-foot .rule-wrap .top { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; background: #1C5CE8; display: inline-grid; place-items: center; transition: background .2s; }
.fds-foot .rule-wrap .top svg { width: 16px; height: 16px; fill: none; stroke: #FFFFFF; stroke-width: 2; stroke-linecap: square; transition: stroke .2s; }
.fds-foot .rule-wrap .top:hover { background: #FFFFFF; }
.fds-foot .rule-wrap .top:hover svg { stroke: #0B0B0B; }
.fds-foot .meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding: 54px 0 44px; text-align: center; }
.fds-foot .meta h6 { color: #C7C1AF; margin: 0 0 12px; padding: 0; }
.fds-foot .meta p { color: rgba(255,255,255,.75); margin: 0; padding: 0; }
.fds-foot .meta a { color: #FFFFFF; text-decoration: none; }
.fds-foot .meta a:hover { color: #C7C1AF; }
.fds-foot .meta p.social { display: flex; justify-content: center; gap: 22px; line-height: 1; }
.fds-foot .meta p.social a { display: inline-block; color: #FFFFFF; font-size: 0; line-height: 1; transition: color .2s; }
.fds-foot .meta p.social a::before { content: attr(data-i); font-family: ETmodules !important; font-weight: 400; font-size: 17px; line-height: 1; speak: none; -webkit-font-smoothing: antialiased; }
.fds-foot .meta p.social a:hover { color: #C7C1AF; }
.fds-foot .row { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; padding: 40px 0; }
.fds-foot .row a { font-family: var(--tf-sans); font-weight: 900; text-transform: uppercase; color: rgba(255,255,255,.75); text-decoration: none; transition: color .2s; }
.fds-foot .row a:hover { color: #FFFFFF; }
.fds-foot .bar { padding: 20px 0 26px; border-top: 1px solid rgba(255,255,255,.12); text-align: center; color: rgba(255,255,255,.42); }
.fds-foot .bar p { margin: 0 auto; max-width: 720px; letter-spacing: .2px; padding: 0; }
@media (max-width: 980px) {
  .fds-foot .meta { grid-template-columns: 1fr; gap: 26px; }
  .fds-foot .stamp { padding: 44px 0 50px; }
  .fds-foot .row { gap: 18px 24px; padding: 30px 0; }
}

/* ==========================================================================
   Homepage hero lanes: three links under the typewriter headline (Code module right after the headline Text module; prototype in mockups/hero-lanes.html).
   ========================================================================== */
.fds-hero .tf-hero-h { font-size: clamp(26px, 12vw, 216px) !important; }
.fds-hero .et_pb_column > .et_pb_module:has(.tf-hero-h) { margin-bottom: 0 !important; }
.fds-hero .et_pb_code:has(.fds-lanes) { margin-bottom: 0 !important; }
.fds-lanes { position: relative; z-index: 12; margin: 14px auto 0; width: min(1080px, 92vw); display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 18px; background: rgba(11,11,11,.38); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border: 1px solid rgba(255,255,255,.08); }
.fds-lane { display: block; position: relative; overflow: hidden; background: #C7C1AF; color: #0B0B0B; text-decoration: none; text-align: center; padding: 30px 26px 28px; transition: background .25s; }
.fds-lane::before { content: ""; position: absolute; inset: 0; opacity: .14; pointer-events: none; transition: opacity .25s; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.7 0 0 0 -.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.fds-lane > * { position: relative; }
.fds-lane:hover { background: #FFFFFF; }
.fds-lane:hover::before { opacity: 0; }
.fds-lane h5 { margin: 0 0 8px; padding: 0; color: inherit; display: flex; align-items: center; justify-content: center; gap: 10px; }
.fds-lane h5 svg { width: 14px; height: 14px; flex: 0 0 14px; transition: transform .25s; }
.fds-lane:hover h5 svg { transform: translate(2px, -2px); }
.fds-lane p { margin: 0 auto; padding: 0; max-width: 26ch; color: #454C62; }
@media (max-width: 980px) {
  .fds-lanes { grid-template-columns: 1fr; gap: 10px; padding: 10px; }
  .fds-lane { padding: 18px 18px 16px; }
}
/* Hero fit on laptops: the section is exactly one viewport tall, the headline scales with viewport HEIGHT as well as width,
   and the scroll chevron sits in the section's bottom padding instead of overlapping the lanes. (Divi gives the row/column
   a 90vh min-height, which is what pushed the section past the fold.) */
.fds-hero { min-height: 100vh; box-sizing: border-box; padding-top: 110px !important; padding-bottom: 70px !important; }
.fds-hero .et_pb_row, .fds-hero .et_pb_column { min-height: calc(100vh - 180px) !important; }
.fds-hero .tf-hero-h { font-size: min(12vw, calc((100vh - 480px) / 2.56)) !important; }
.fds-hero .preset--module--divi-text--6scb8u0juj { bottom: -26px !important; }
@media (max-height: 820px) {
  .fds-lanes { margin-top: 10px; padding: 12px; gap: 12px; }
  .fds-lane { padding: 18px 18px 16px; }
  .fds-lane p { font-size: var(--t-small) !important; }
}

/* ==========================================================================
   Work (/work/, page 280): full-bleed 2-up tile grid pulled from tflem.com/portfolio. About (/about/, page 278).
   ========================================================================== */
.fds-work-grid .et_pb_row { display: flex; flex-wrap: wrap; }
.fds-work-grid .et_pb_column { margin: 0 !important; width: 50% !important; }
.fds-work-grid .fds-work-tile { margin: 0; line-height: 0; overflow: hidden; }
.fds-work-grid .fds-work-tile img { width: 100%; height: auto; display: block; transition: transform .6s ease; }
.fds-work-grid .fds-work-tile:hover img { transform: scale(1.03); }
.fds-work-grid .fds-work-cta-col { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1 / 1; padding: 40px; }
.fds-work-grid .fds-work-cta { margin-bottom: 26px !important; }
.fds-work-grid .fds-work-cta h2 { padding-bottom: 14px; }
@media (max-width: 767px) {
  .fds-work-grid .et_pb_column { width: 100% !important; }
  .fds-work-grid .fds-work-cta-col { aspect-ratio: auto; padding: 60px 30px; }
}
.fds-about-hero .et_pb_button_module_wrapper { display: inline-block !important; margin: 0 14px 10px 0 !important; }
.fds-about-promise .et_pb_text h6 { color: #0B0B0B !important; opacity: .55; }
.fds-quote { position: relative; background: #FFFFFF; border: 1px solid #E7E2D3; padding: 36px 36px 30px; height: 100%; }
.fds-quote img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; display: block; margin: 0 0 22px; }
.fds-quote blockquote { margin: 0 0 22px; padding: 0; border: 0; color: #0B0B0B; }
.fds-quote blockquote p { padding: 0; }
.fds-quote .fds-quote-who { color: #454C62; padding: 0; }
#page-container .fds-quote .fds-quote-who strong { font-family: var(--tf-sans) !important; font-weight: 900 !important; font-size: var(--t-eyebrow) !important; letter-spacing: var(--ls-caps); text-transform: uppercase; color: #0B0B0B; }
.fds-about-stories .et_pb_column, .fds-about-stories .et_pb_text:has(.fds-quote) { height: 100%; margin-bottom: 0 !important; }
@media (max-width: 980px) { .fds-about-hero { background-position: 70% center !important; } }

/* ==========================================================================
   Journal (/journal/, page 283, Divi Blog module) and single posts (default Divi single template, sidebar hidden until a Theme Builder post template exists).
   ========================================================================== */
.fds-blog-grid .et_pb_post { padding: 0 0 26px; box-shadow: none; }
.fds-blog-grid .et_pb_post .entry-featured-image-url { margin-bottom: 22px; }
.fds-blog-grid .et_pb_post .entry-featured-image-url img { width: 100%; height: 240px; object-fit: cover; }
.fds-blog-grid .et_pb_post .entry-title, .fds-blog-grid .et_pb_post .post-content, .fds-blog-grid .et_pb_post .post-meta { padding: 0 26px; }
.fds-blog-grid .et_pb_post .entry-title { margin-bottom: 10px; }
.fds-blog-grid .et_pb_post .entry-title a { color: #0B0B0B; }
.fds-blog-grid .et_pb_post .entry-title a:hover { color: #1C5CE8; }
.fds-blog-grid .et_pb_post .post-meta { margin-bottom: 14px; }
.fds-blog-grid .et_pb_post .post-meta a { color: #8A8578; }
.fds-blog-grid .more-link { display: inline-block; margin-top: 12px; }
.fds-blog-grid .pagination a { font-family: var(--tf-sans) !important; font-weight: 900 !important; font-size: var(--t-eyebrow) !important; letter-spacing: var(--ls-caps); text-transform: uppercase; color: #0B0B0B; }
.single-post #main-content .container { max-width: 820px; }
.single-post #sidebar { display: none; }
.single-post #left-area { width: 100%; padding-right: 0; }
.single-post #main-content .container:before { display: none; }
.single-post .et_post_meta_wrapper .entry-title { color: #0B0B0B; padding-bottom: 10px; }
.single-post .post-meta { color: #8A8578; margin-bottom: 30px; }
.single-post .post-meta a { color: #8A8578; }
.single-post .entry-content { color: #0B0B0B; }
.single-post .entry-content p { padding-bottom: 1.4em; }
.single-post .entry-content h1, .single-post .entry-content h2, .single-post .entry-content h3 { color: #0B0B0B; padding-bottom: 14px; }
.single-post .entry-content a { color: #1C5CE8; }
.single-post .entry-content figure { margin: 10px 0 34px; }
.single-post .entry-content figure img { width: 100%; height: auto; display: block; }
.single-post .entry-content .wp-block-embed__wrapper { position: relative; padding-top: 56.25%; }
.single-post .entry-content .wp-block-embed__wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.single-post .et_post_meta_wrapper > img:first-child { display: none; }

/* ==========================================================================
   Phone pass (1.34.0): order and spacing fixes found going page by page at 390px.
   ========================================================================== */
/* Services rows: image above text on every row (the desktop layout alternates sides, which stacked as text/image/image/text) */
@media (max-width: 980px) {
  .fds-services .et_pb_row { display: flex; flex-direction: column; }
  .fds-services .et_pb_column:has(.et_pb_slider) { order: -1; }
}
/* Logo Design hero (page 281): the section has no padding of its own, and with the transparent header the headline started under the logo */
.page-id-281 .et_builder_inner_content > .et_pb_section:first-child { padding: 160px 0 110px !important; }
.page-id-281 .et_builder_inner_content > .et_pb_section:first-child .et_pb_row { min-height: 0 !important; }
@media (max-width: 980px) {
  .page-id-281 .et_builder_inner_content > .et_pb_section:first-child { padding: 120px 0 90px !important; }
  .page-id-281 .et_builder_inner_content > .et_pb_section:first-child .preset--module--divi-text--6scb8u0juj { display: none !important; }
}
/* Logo Design gallery: two tiles per row on phones instead of one long column of squares */
@media (max-width: 980px) {
  .page-id-281 .et_pb_fullwidth_section .et_pb_row.et_pb_gutters1 { display: flex; flex-wrap: wrap; }
  .page-id-281 .et_pb_fullwidth_section .et_pb_row.et_pb_gutters1 .et_pb_column { width: 50% !important; margin: 0 !important; }
  .page-id-281 .et_pb_fullwidth_section .et_pb_row.et_pb_gutters1 .et_pb_image { margin: 0 !important; }
  .page-id-281 .et_pb_fullwidth_section .et_pb_row.et_pb_gutters1 .et_pb_image_wrap, .page-id-281 .et_pb_fullwidth_section .et_pb_row.et_pb_gutters1 img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
}
/* Shopify page reuses the homepage card section (fds-fit) without the "Let's talk" button, so its grain runs to the section edge */
.page-id-354 .fds-fit::before { bottom: 0; }
/* Homepage inquiry form (Typeform embed): 800px tall with the question centred left a screen of dead space on phones */
@media (max-width: 767px) { .tf-v1-widget, .tf-v1-widget iframe { height: 540px !important; } }

/* ==========================================================================
   Closing CTA section (class fds-cta) + down-arrow button (class tf-btn-down) — the homepage cards-section ending, reusable.
   Shopify page uses both: "Tell me what's not working" sits on the grain, the seam lands mid-button, the Typeform follows on flat cream.
   Set them as CSS Classes in Divi (section → fds-cta, button → tf-btn-down). 145px = 90px section padding + row padding + half the button.
   ========================================================================== */
.fds-cta { position: relative; }
.fds-cta::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .09; bottom: 145px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.7 0 0 0 -.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.fds-cta .et_pb_row { position: relative; z-index: 1; }
.fds-cta .et_pb_button { position: relative; overflow: visible !important; transition: box-shadow .35s ease !important; }
.fds-cta .et_pb_button:hover { box-shadow: 0 10px 22px rgba(11,11,11,.16), 0 2px 6px rgba(11,11,11,.1) !important; }
/* same arrow as .fds-fit .et_pb_button_4 above (colours hard-coded in the data URI, change with --tf-accent) */
.et_pb_button.tf-btn-down::before, .tf-btn-down .et_pb_button::before { display: none !important; }
.et_pb_button.tf-btn-down::after, .tf-btn-down .et_pb_button::after {
  content: "" !important; display: block !important; position: absolute !important;
  top: calc(100% - 14px) !important; left: 50% !important; right: auto !important; bottom: auto !important;
  width: 14px !important; height: 49px !important; margin: 0 !important; border: 0 !important;
  transform: translateX(-50%) !important; opacity: 1 !important; font-size: 0 !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='49' viewBox='0 0 14 49'%3E%3Cpath d='M7 0V14' stroke='%23ffffff' stroke-width='2'/%3E%3Cpath d='M7 13V48' stroke='%231C5CE8' stroke-width='2'/%3E%3Cpath d='M1.5 42.5L7 48l5.5-5.5' fill='none' stroke='%231C5CE8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") top center / 14px 49px no-repeat !important;
  -webkit-clip-path: inset(0 0 100% 0); clip-path: inset(0 0 100% 0);
  transition: clip-path .45s cubic-bezier(.2,.7,.2,1), -webkit-clip-path .45s cubic-bezier(.2,.7,.2,1) !important;
}
.et_pb_button.tf-btn-down:hover::after, .tf-btn-down .et_pb_button:hover::after { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); }

/* ==========================================================================
   Journal grid (1.37.0): Divi's blog grid stacks posts into three column divs (Salvattore masonry), so cards in a row never
   matched in height. The column divs are flattened (display: contents) into a real CSS grid, which stretches every card in a
   row to the tallest, and the posts are put back in date order with "order" (Salvattore fills column-wise: 1,4,7 / 2,5,8 / 3,6,9).
   Cards: white, no border, lift on hover, and "Read more" grows the site's arrow when the whole card is hovered.
   ========================================================================== */
#page-container .fds-blog-grid { background: transparent !important; border: 0 !important; padding: 0 !important; }
.fds-blog-grid .et_pb_salvattore_content { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: stretch; }
.fds-blog-grid .et_pb_salvattore_content .column { display: contents; }
.fds-blog-grid .et_pb_salvattore_content .column.size-1of3 { width: auto; }
.fds-blog-grid .et_pb_salvattore_content .column:nth-child(1) article:nth-child(1){order:1}.fds-blog-grid .et_pb_salvattore_content .column:nth-child(2) article:nth-child(1){order:2}.fds-blog-grid .et_pb_salvattore_content .column:nth-child(3) article:nth-child(1){order:3}.fds-blog-grid .et_pb_salvattore_content .column:nth-child(1) article:nth-child(2){order:4}.fds-blog-grid .et_pb_salvattore_content .column:nth-child(2) article:nth-child(2){order:5}.fds-blog-grid .et_pb_salvattore_content .column:nth-child(3) article:nth-child(2){order:6}.fds-blog-grid .et_pb_salvattore_content .column:nth-child(1) article:nth-child(3){order:7}.fds-blog-grid .et_pb_salvattore_content .column:nth-child(2) article:nth-child(3){order:8}.fds-blog-grid .et_pb_salvattore_content .column:nth-child(3) article:nth-child(3){order:9}.fds-blog-grid .et_pb_salvattore_content .column:nth-child(1) article:nth-child(4){order:10}.fds-blog-grid .et_pb_salvattore_content .column:nth-child(2) article:nth-child(4){order:11}.fds-blog-grid .et_pb_salvattore_content .column:nth-child(3) article:nth-child(4){order:12}.fds-blog-grid .et_pb_salvattore_content .column:nth-child(1) article:nth-child(5){order:13}.fds-blog-grid .et_pb_salvattore_content .column:nth-child(2) article:nth-child(5){order:14}.fds-blog-grid .et_pb_salvattore_content .column:nth-child(3) article:nth-child(5){order:15}.fds-blog-grid .et_pb_salvattore_content .column:nth-child(1) article:nth-child(6){order:16}.fds-blog-grid .et_pb_salvattore_content .column:nth-child(2) article:nth-child(6){order:17}.fds-blog-grid .et_pb_salvattore_content .column:nth-child(3) article:nth-child(6){order:18}.fds-blog-grid .et_pb_salvattore_content .column:nth-child(1) article:nth-child(7){order:19}.fds-blog-grid .et_pb_salvattore_content .column:nth-child(2) article:nth-child(7){order:20}.fds-blog-grid .et_pb_salvattore_content .column:nth-child(3) article:nth-child(7){order:21}.fds-blog-grid .et_pb_salvattore_content .column:nth-child(1) article:nth-child(8){order:22}.fds-blog-grid .et_pb_salvattore_content .column:nth-child(2) article:nth-child(8){order:23}.fds-blog-grid .et_pb_salvattore_content .column:nth-child(3) article:nth-child(8){order:24}.fds-blog-grid .et_pb_salvattore_content .column:nth-child(1) article:nth-child(9){order:25}.fds-blog-grid .et_pb_salvattore_content .column:nth-child(2) article:nth-child(9){order:26}.fds-blog-grid .et_pb_salvattore_content .column:nth-child(3) article:nth-child(9){order:27}.fds-blog-grid .et_pb_salvattore_content .column:nth-child(1) article:nth-child(10){order:28}.fds-blog-grid .et_pb_salvattore_content .column:nth-child(2) article:nth-child(10){order:29}.fds-blog-grid .et_pb_salvattore_content .column:nth-child(3) article:nth-child(10){order:30}.fds-blog-grid .et_pb_salvattore_content .column:nth-child(1) article:nth-child(11){order:31}.fds-blog-grid .et_pb_salvattore_content .column:nth-child(2) article:nth-child(11){order:32}.fds-blog-grid .et_pb_salvattore_content .column:nth-child(3) article:nth-child(11){order:33}.fds-blog-grid .et_pb_salvattore_content .column:nth-child(1) article:nth-child(12){order:34}.fds-blog-grid .et_pb_salvattore_content .column:nth-child(2) article:nth-child(12){order:35}.fds-blog-grid .et_pb_salvattore_content .column:nth-child(3) article:nth-child(12){order:36}
.fds-blog-grid article.et_pb_post { display: flex; flex-direction: column; margin: 0 !important; background: #FFFFFF; border: 0 !important; box-shadow: 0 0 0 rgba(11,11,11,0); transition: box-shadow .35s ease; }
.fds-blog-grid article.et_pb_post:hover { box-shadow: 0 30px 90px rgba(11,11,11,.10), 0 8px 24px rgba(11,11,11,.04); }
.fds-blog-grid article.et_pb_post .entry-featured-image-url { margin: 0 0 22px; }
.fds-blog-grid article.et_pb_post .post-content { flex: 1 1 auto; display: flex; flex-direction: column; }
.fds-blog-grid article.et_pb_post .post-content-inner { flex: 1 1 auto; }
/* "Read more" pinned to the card bottom; the arrow (line + chevron, like the buttons) grows out when the card is hovered */
.fds-blog-grid .more-link { position: relative; display: inline-block !important; width: max-content !important; align-self: flex-start; margin-top: auto; padding-right: 0; color: #1C5CE8; text-decoration: none; }
.fds-blog-grid .more-link::after { content: ""; position: absolute; left: calc(100% + 10px); top: 50%; width: 0; height: 2px; margin-top: -1px; background: #1C5CE8; transition: width .45s cubic-bezier(.2,.7,.2,1); }
.fds-blog-grid .more-link::before { content: ""; position: absolute; left: calc(100% + 10px); top: 50%; width: 8px; height: 8px; margin: -5px 0 0 -6px; border-top: 2px solid #1C5CE8; border-right: 2px solid #1C5CE8; transform: rotate(45deg); opacity: 0; transition: left .45s cubic-bezier(.2,.7,.2,1), opacity .15s ease; }
.fds-blog-grid article.et_pb_post:hover .more-link::after { width: 28px; }
.fds-blog-grid article.et_pb_post:hover .more-link::before { left: calc(100% + 38px); opacity: 1; transition: left .45s cubic-bezier(.2,.7,.2,1), opacity .2s ease .15s; }
@media (max-width: 980px) { .fds-blog-grid .et_pb_salvattore_content { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 767px) { .fds-blog-grid .et_pb_salvattore_content { grid-template-columns: 1fr; } }

/* ==========================================================================
   Sweep (1.38.0): phone spacing, image framing and tap targets found going page by page at 390 / 1280.
   ========================================================================== */
/* footer social icons: 18px glyphs get a 40px tap area without moving */
.fds-foot .meta p.social a { padding: 11px 6px; margin: -11px -6px; }
/* journal card meta links (dates, categories) were 15px tall */
.fds-blog-grid .post-meta a { display: inline-block; padding: 4px 0; }
@media (max-width: 767px) {
  /* about hero: 240/200px of padding was a screen of empty black; and the portrait sat off the right edge (Divi's phone position was 100%) */
  .fds-about-hero { padding-top: 160px !important; padding-bottom: 120px !important; }
  #page-container .fds-about-hero { background-position: 62% 50% !important; }
  /* interior heroes only need to clear the transparent header */
  .fds-work-hero, .fds-journal-hero, .fds-contact-hero { padding-top: 140px !important; }
  /* homepage intro: Divi's 80% row left the headline wrapping to four lines ("…run / on."); 90% lands it on three */
  .fds-intro .et_pb_row { width: 90% !important; }
  /* Shopify "Sound familiar?" section carried its desktop 180px bottom padding onto phones */
  .page-id-354 .et_pb_section:has(+ .et_pb_section .et_pb_image) { padding-bottom: 100px !important; }
  /* homepage intro headline: a 16px gutter and a hair less size on the narrowest phones keep "…they run on." on three lines (was four at 360px) */
  .fds-intro .et_pb_row { width: calc(100% - 32px) !important; max-width: none !important; }
  #page-container .fds-intro h1 { font-size: min(var(--t-h1), 10.6vw) !important; }
}

/* ==========================================================================
   Case studies (1.39.0): the ten /project/ pages are 2017 Divi 3 layouts. This block normalises them to the site's grid
   without touching the content: equal-height columns, images that fill their tile, no stray colour bars, section labels
   on the left edge, and the hero chevron matched to the homepage one.
   ========================================================================== */
/* Fullscreen hero: Divi subtracts the header bar from its 100vh because it assumes a solid bar; ours is transparent. */
.single-project .et_pb_fullwidth_header.et_pb_fullscreen { height: 100vh !important; min-height: 100vh !important; }
/* Hero scroll chevron: Divi's 56px font glyph is swapped for the homepage SVG (28px, 1.5 stroke) with the same slow drift. */
.single-project .et_pb_fullwidth_header_scroll { bottom: 34px !important; padding: 0 !important; line-height: 0; }
.single-project .et_pb_fullwidth_header_scroll a { display: inline-block; width: 28px; height: 28px; line-height: 0; }
.single-project .et_pb_fullwidth_header_scroll .scroll-down {
  display: block !important; width: 28px !important; height: 28px !important; font-size: 0 !important; line-height: 0 !important; color: transparent !important;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5'><path d='M6 9l6 6 6-6'/></svg>") center / 28px 28px no-repeat;
  animation: tfChevron 2.4s ease-in-out infinite !important;
}
/* Hero logos render at the file's pixel size. OSI's is an 800px file (it used to be squeezed by a 600px module width, along
   with the wrong background); Aria Village's is a 159px file stretched to 400 — held nearer its real size until a larger
   export replaces it. */
.single-project .et_pb_fullwidth_header .header-logo { height: auto; }
.postid-33245 .et_pb_fullwidth_header .header-logo { max-width: min(360px, 70vw); }
.postid-33243 .et_pb_fullwidth_header .header-logo { max-width: min(240px, 60vw); }
/* Images: inline <img> left a 6px baseline strip of row colour under every picture (the "colour bars"); the image module's
   own bottom margin did the same in full-bleed rows. The wrap stays inline-block so Divi's text-align keeps centring images
   that are narrower than their column (the C&V growlers). */
.single-project .et_pb_image_wrap { display: inline-block; vertical-align: top; }
.single-project .et_pb_image_wrap img { display: block; }
/* Full-bleed rows: the row really is 100% wide and every picture spans its column, so nothing stops short of the edge on
   wide screens (the C&V station photo was a 1750px file sitting left on a 2000px viewport). */
.single-project .et_pb_row.et_pb_row_fullwidth { width: 100% !important; max-width: 100% !important; }
.single-project .et_pb_row_fullwidth .et_pb_column > .et_pb_image .et_pb_image_wrap { display: block; width: 100%; }
.single-project .et_pb_row_fullwidth .et_pb_column > .et_pb_image .et_pb_image_wrap img { width: 100%; height: auto; }
.single-project .et_pb_column:is(.tf-fill, .tf-tile) > .et_pb_image:only-child { margin-bottom: 0 !important; }
/* Multi-column rows: columns stretch to the tallest. In a tiled row (full-bleed, or with a row/column colour) a column that
   is just one image is either a photo tile (tf-fill: the picture grows to the column, cropped centre) or a logo/figure on a
   colour (tf-tile: centred). tf-project-grid.js decides which by measuring whether the image spans the column. Logo grids
   on white inside the content column are left with Divi's own spacing. The fill is done with flex-grow, not a percentage
   height: lazy-loaded images have no height until they load, and a percentage would collapse the row to nothing. */
.single-project .et_pb_row:has(> .et_pb_column + .et_pb_column) { display: flex; flex-wrap: wrap; align-items: stretch; }
.single-project .et_pb_row:has(> .et_pb_column + .et_pb_column) > .et_pb_column { display: flex; flex-direction: column; }
/* In a flex column Divi's centred image modules (margin: auto) shrink to fit, which made the Aria SVG logos (no intrinsic
   size) vanish and photos stop short of the column; width 100% with Divi's own max-width keeps them centred and visible. */
.single-project .et_pb_row:has(> .et_pb_column + .et_pb_column) > .et_pb_column > .et_pb_image { width: 100%; }
.single-project .et_pb_column.tf-fill > .et_pb_image { flex: 1 1 auto; display: flex; flex-direction: column; }
.single-project .et_pb_column.tf-fill .et_pb_image_wrap { flex: 1 1 auto; display: flex; flex-direction: column; width: 100%; }
.single-project .et_pb_column.tf-fill .et_pb_image_wrap img { flex: 1 1 auto; width: 100%; height: auto; min-height: 0; object-fit: cover; }
/* The full-bleed rule above resets the wrap to block; a photo tile's wrap must stay flex so the picture can grow. A row
   that is nothing but photo tiles (Hari Mari hats) drops its vertical padding too — the tiles ARE the row. */
.single-project .et_pb_row .et_pb_column.tf-fill .et_pb_image_wrap { display: flex; }
.single-project .et_pb_row_fullwidth:has(> .et_pb_column.tf-fill):not(:has(> .et_pb_column:not(.tf-fill))) { padding-top: 0 !important; padding-bottom: 0 !important; }
.single-project .et_pb_column.tf-tile { justify-content: center; }
.single-project .et_pb_column.tf-tile .et_pb_image_wrap { display: block; width: 100%; }
.single-project .et_pb_column.tf-tile .et_pb_image_wrap img { width: 100%; height: auto; }
/* Columns that hold copy next to a photo: the copy sits vertically centred rather than pinned to the top. A column that
   holds a picture AND a quote (Vandoliers) keeps the picture at the top and centres the quote in the space below it. */
.single-project .et_pb_row:has(> .et_pb_column.tf-fill) > .et_pb_column:not(.tf-fill):not(.tf-tile) { justify-content: center; }
.single-project .et_pb_row:has(> .et_pb_column.tf-fill) > .et_pb_column:not(.tf-fill):not(.tf-tile):has(> .et_pb_image) { justify-content: flex-start; }
.single-project .et_pb_row:has(> .et_pb_column.tf-fill) > .et_pb_column:not(.tf-fill):not(.tf-tile):has(> .et_pb_image) > :is(.et_pb_testimonial, .et_pb_blurb) { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; margin-top: 0 !important; margin-bottom: 0 !important; }
/* Testimonial headshots: Divi 5's compatibility CSS dropped the portrait's background-size/position, so the 90px circle
   showed the top-left corner of the photo (white). Cover-fit and centred, with the circle above the quote. */
.single-project .et_pb_testimonial_portrait { background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; float: none !important; margin: 0 auto 28px !important; }
.single-project .et_pb_testimonial.et_pb_text_align_center .et_pb_testimonial_description { margin-left: 0 !important; padding-left: 0 !important; }
/* Section labels ("identity design", "final brand"…) were right-aligned eyebrows on a shifted row; they sit on the left
   edge of the content column like every other eyebrow on the site. */
.single-project .et_pb_text_inner > h3:only-child { text-align: left !important; }
/* The 2017 layouts struck the labels through (per-module custom CSS "text-decoration: line-through"); plain text now. */
.single-project .et_pb_text h3, .single-project del { text-decoration: none !important; }
.single-project .et_pb_row:has(> .et_pb_column > .et_pb_text:only-child .et_pb_text_inner > h3:only-child) { margin-left: auto !important; margin-right: auto !important; }
@media (max-width: 980px) {
  /* stacked columns: a photo keeps its own proportions */
  .single-project .et_pb_column.tf-fill .et_pb_image_wrap img { flex: 0 0 auto; }
}

/* ==========================================================================
   Work index (1.40.0): /work/ (page 280) is one Code module (markup: .fds-work) styled here. A pinned white sidebar
   (eyebrow, headline, client list, a line to Contact) and a strip of 3:2 case-study cards at two-thirds width, flush to
   the right edge. The page snaps card by card to the centre of the screen (the module's script sets scroll-snap on
   <html> at desktop widths); only the parked card (.on, set by the script) answers hover: it insets 2.5% and a dark spec
   strip with the client name, one-line brief and an arrow rises from the bottom. Prototype: mockups/work-options.html.
   ========================================================================== */
.fds-work-section .et_pb_row { padding: 0 !important; width: 100% !important; max-width: 100% !important; }
.fds-work-section .et_pb_module { margin-bottom: 0 !important; }
.fds-work { --fw-bone: #EDE9DE; --fw-mist: #D9DCE3; background: #fff; color: #0B0B0B; }
.fds-work .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 66.666vw; gap: 0 4vw; align-items: start; padding: 0 0 0 6vw; }
/* the strip starts at the very top, under the global dark-scrim header; the sidebar text clears the bar */
.fds-work .side { position: sticky; align-self: start; padding-top: 135px; height: 100vh; top: 0; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; }
.page-id-280 #page-container .fds-work .eyebrow { margin: 0 0 18px !important; font-family: var(--tf-sans) !important; font-weight: 900 !important; font-size: var(--t-eyebrow) !important; letter-spacing: var(--ls-caps) !important; text-transform: uppercase; line-height: 1.4 !important; color: #0B0B0B; }
.page-id-280 #page-container .fds-work h1 { font-size: clamp(2rem, 1.1rem + 2vw, 3.25rem) !important; line-height: 1.08 !important; margin: 0 0 28px !important; padding: 0 !important; }
.fds-work .list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #C7C1AF; }
.fds-work .list li { margin: 0; padding: 0; }
.page-id-280 #page-container .fds-work .list a { display: flex; justify-content: space-between; align-items: baseline; padding: 17px 0; border-bottom: 1px solid #C7C1AF; font-family: var(--tf-sans) !important; font-weight: 900 !important; font-size: var(--t-eyebrow) !important; letter-spacing: var(--ls-caps) !important; text-transform: uppercase; color: #454C62; text-decoration: none; transition: color .25s, padding-left .35s cubic-bezier(.2,.7,.2,1); }
.page-id-280 #page-container .fds-work .list a small { font-family: var(--tf-text) !important; font-weight: 400 !important; font-size: .8125rem !important; letter-spacing: 0 !important; text-transform: none; color: #C7C1AF; }
.page-id-280 #page-container .fds-work .list a:hover, .page-id-280 #page-container .fds-work .list a.on { color: #0B0B0B; padding-left: 12px; }
.fds-work .ask { margin-top: auto; padding: 32px 0 96px; }
.page-id-280 #page-container .fds-work .ask p { margin: 0; padding: 0; max-width: 34ch; font-size: var(--t-small) !important; line-height: 1.55 !important; color: #454C62; }
.page-id-280 #page-container .fds-work .ask a { color: #0B0B0B; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #C7C1AF; }
.page-id-280 #page-container .fds-work .ask a:hover { text-decoration-color: #0B0B0B; }
.fds-work .stack { display: flex; flex-direction: column; gap: 0; }
.fds-work .card { display: block; aspect-ratio: 3 / 2; min-height: 0; max-height: 66.666vw; overflow: hidden; outline: none; box-sizing: border-box; padding: 0; scroll-snap-align: center; scroll-snap-stop: always; scroll-margin-top: 0; transition: padding .32s cubic-bezier(.2,.8,.2,1); }
.fds-work .card:first-child { scroll-snap-align: start; scroll-margin-top: 0; }
/* the footer is a snap point too, otherwise mandatory snapping pins the page on the last card */
.page-id-280 .et-l--footer, .page-id-280 #main-footer { scroll-snap-align: start; }
.fds-work .card.on:hover, .fds-work .card:focus-visible { padding: 2.5%; }
.fds-work .card .in { height: 100%; min-height: 0; display: grid; grid-template-rows: 1fr 0fr; background: #0B0B0B; transition: grid-template-rows .32s cubic-bezier(.2,.8,.2,1); }
.fds-work .card.on:hover .in, .fds-work .card:focus-visible .in { grid-template-rows: 1fr .2fr; }
.fds-work .card .win { min-height: 0; height: 100%; overflow: hidden; background: var(--fw-mist); }
.fds-work .card .win img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; filter: grayscale(1) contrast(1.04); transition: filter .3s ease; }
.fds-work .card.on:hover .win img, .fds-work .card:focus-visible .win img { filter: none; }
.fds-work .card .meta { min-height: 0; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; gap: 0 36px; align-items: center; padding: 0 32px; color: #fff; opacity: 0; transition: opacity .2s ease .08s; }
.fds-work .card.on:hover .meta, .fds-work .card:focus-visible .meta { opacity: 1; }
.page-id-280 #page-container .fds-work .card h2 { margin: 0; padding: 0; font-family: var(--tf-sans) !important; font-weight: 900 !important; font-size: var(--t-eyebrow) !important; letter-spacing: var(--ls-caps) !important; text-transform: uppercase; line-height: 1.3 !important; white-space: nowrap; color: #fff; }
.page-id-280 #page-container .fds-work .card p { margin: 0; padding: 0; color: #C7C1AF; font-size: .8125rem !important; line-height: 1.5 !important; max-width: 46ch; }
.fds-work .arrow { display: inline-flex; align-items: center; color: #fff; }
.fds-work .arrow i { width: 56px; height: 2px; background: currentColor; position: relative; transition: width .3s cubic-bezier(.2,.8,.2,1); }
.fds-work .arrow i::after { content: ""; position: absolute; right: 0; top: 50%; width: 11px; height: 11px; margin-top: -6.5px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.fds-work .card.on:hover .arrow i { width: 84px; }
@media (max-width: 980px) {
  .fds-work .wrap { grid-template-columns: 1fr; padding-right: 6vw; }
  .fds-work .side { position: static; height: auto; padding-top: 120px; }
  .fds-work .list { display: none; }
  .fds-work .ask { padding: 24px 0 40px; }
  .fds-work .stack { gap: 18px; }
  .fds-work .card { aspect-ratio: auto; max-height: none; padding: 0 !important; scroll-snap-align: none; }
  .fds-work .card .in { grid-template-rows: 1fr auto; }
  .fds-work .card .meta { opacity: 1; padding: 22px 26px 26px; grid-template-columns: 1fr auto; grid-template-areas: "h a" "p a"; gap: 6px 24px; }
  .fds-work .card h2 { white-space: normal; grid-area: h; }
  .fds-work .card .meta p { grid-area: p; }
  .fds-work .card .meta .arrow { grid-area: a; align-self: center; }
}
@media (prefers-reduced-motion: reduce) { .fds-work .card, .fds-work .card .in, .fds-work .card .win img, .fds-work .card .meta, .fds-work .arrow i { transition: none; } }

/* ==========================================================================
   NOMAD Grills study (1.41.0): pieces the shortcode layout can't express. The hero logo is a wide wordmark file; the
   social section is a Code module of iPhone-framed videos (.tf-phones — drop each MP4 into its <source src>, the poster
   shows until then); results are four stat columns; the Camp NOMAD sponsor line is a serif run.
   ========================================================================== */
.fds-hero-logo-wide .header-logo { max-width: min(460px, 70vw) !important; height: auto; }
.single-project #page-container .fds-cap p { color: #8B8574; margin-bottom: 0; }
.fds-stats .et_pb_column { padding-right: 24px; }
.single-project #page-container .et_pb_text p.fds-stat { font-family: var(--tf-serif) !important; font-size: var(--t-stat) !important; line-height: 1 !important; color: #0B0B0B; margin-bottom: 10px !important; }
.single-project #page-container .et_pb_text p.fds-names { font-family: var(--tf-serif) !important; font-size: var(--t-h5) !important; line-height: 1.5 !important; color: #0B0B0B; }
/* iPhone frames: 9:19.5 screens in a rounded black shell with a dynamic-island notch; four across, two on tablets, one on phones */
.tf-phones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 20px 0 10px; }
.tf-phone { margin: 0; }
.tf-phone-screen { position: relative; aspect-ratio: 9 / 19.5; background: #111; border-radius: 44px; padding: 10px; box-shadow: 0 0 0 2px #2A2A2A, 0 30px 60px -30px rgba(0,0,0,.8); }
.tf-phone-screen::before { content: ""; position: absolute; top: 20px; left: 50%; width: 28%; height: 22px; margin-left: -14%; background: #111; border-radius: 12px; z-index: 2; }
.tf-phone-screen video, .tf-phone-screen img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 34px; background: #1A1A1A; }
.single-project #page-container .tf-phone figcaption { margin-top: 16px; text-align: center; font-family: var(--tf-sans) !important; font-weight: 900 !important; font-size: var(--t-label) !important; letter-spacing: var(--ls-caps) !important; text-transform: uppercase; color: #C7C1AF; }
@media (max-width: 980px) { .tf-phones { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (max-width: 520px) { .tf-phones { grid-template-columns: 1fr; max-width: 300px; margin: 0 auto; } }

/* ---------- Glow pill button (1.42.0) ----------
   White pill, 2px hairline ring with one brand-blue point of light orbiting it (conic gradient rotated by a
   registered custom property), soft blue bloom, label slides left on hover to let a short heavy arrow in.
   Markup is added by tf-pill.js: <a class="et_pb_button tf-pill"><span>Label</span><b class="tf-ar"></b><i class="tf-halo"></i></a>
   Apply by giving a Divi button the CSS class "tf-pill". The angle animates on the button itself (where --ring is
   declared) because Chrome will not repaint a pseudo-element whose inherited animated variable changes. */
@property --a { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@keyframes tfSweep { to { --a: 360deg; } }
.tf-pill-wrap { isolation: isolate; }
body #page-container .et_pb_section .et_pb_button.tf-pill, body #page-container .et_pb_section .et_pb_button.tf-pill:hover { color: #1C5CE8 !important; }
body #page-container .et_pb_section .et_pb_button.tf-pill {
  position: relative; display: inline-flex !important; align-items: center; justify-content: center;
  width: auto; min-width: 237px; max-width: 100%; padding: 22px 61px !important; border: 0 !important; border-radius: 999px !important;
  background: #fff !important; color: #1C5CE8 !important;
  font-family: var(--tf-sans) !important; font-weight: 900 !important; font-size: 15px !important;
  letter-spacing: 2.4px !important; text-transform: uppercase; line-height: 1 !important;
  animation: tfSweep 6s linear infinite;
  --ring: conic-gradient(from var(--a, 0deg), #E4E1D9 0 78%, #1C5CE8 92%, #E4E1D9 100%);
  --halo: conic-gradient(from var(--a, 0deg), transparent 0 78%, #1C5CE8 92%, transparent 100%);
}
body #page-container .et_pb_section .et_pb_button.tf-pill:hover { padding: 22px 61px !important; background: #fff !important; border: 0 !important; }
body #page-container .et_pb_section .et_pb_button.tf-pill:before { content: "" !important; display: block !important; position: absolute !important; inset: -2px !important; margin: 0 !important; line-height: 0 !important; opacity: 1 !important; width: auto !important; height: auto !important; transform: none !important; border: 0 !important; font-size: 0 !important; transition: none !important; border-radius: inherit !important; z-index: -1 !important; background: var(--ring) !important; }
body #page-container .et_pb_section .et_pb_button.tf-pill .tf-halo { position: absolute; inset: -5px; border-radius: inherit; z-index: -2; background: var(--halo); filter: blur(8px); opacity: .35; transition: opacity .3s; }
body #page-container .et_pb_section .et_pb_button.tf-pill:hover .tf-halo { opacity: .7; }
/* 1.42.6: bloom lives on ::after (Divi's icon slot, repurposed) instead of a child <i>: iOS Safari does not repaint a
   child element as the inherited animated angle changes, which left the bloom frozen while the ring moved. */
body #page-container .et_pb_section .et_pb_button.tf-pill:after { content: "" !important; display: block !important; position: absolute !important; inset: -5px !important; margin: 0 !important; line-height: 0 !important; width: auto !important; height: auto !important; transform: none !important; border: 0 !important; font-size: 0 !important; border-radius: inherit !important; z-index: -2 !important; background: var(--halo) !important; filter: blur(8px); opacity: .35 !important; transition: opacity .3s !important; }
body #page-container .et_pb_section .et_pb_button.tf-pill:hover:after { opacity: .7 !important; }
body #page-container .et_pb_section .et_pb_button.tf-pill .tf-halo { display: none; }
body #page-container .et_pb_section .et_pb_button.tf-pill > span { display: inline-block; transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
body #page-container .et_pb_section .et_pb_button.tf-pill .tf-ar { position: absolute; right: 30px; top: 50%; width: 18px; height: 3px; margin-top: -1.5px; background: currentColor; opacity: 0; transform: translateX(10px); transition: transform .32s cubic-bezier(.2, .8, .2, 1), opacity .25s; }
body #page-container .et_pb_section .et_pb_button.tf-pill .tf-ar:after { content: ""; position: absolute; right: 0; top: 50%; width: 9px; height: 9px; margin-top: -6px; border-top: 3px solid currentColor; border-right: 3px solid currentColor; transform: rotate(45deg); }
body #page-container .et_pb_section .et_pb_button.tf-pill:hover > span { transform: translateX(-14px); }
body #page-container .et_pb_section .et_pb_button.tf-pill:hover .tf-ar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { body #page-container .et_pb_section .et_pb_button.tf-pill { animation: none; --a: 300deg; } }

/* Home intro: bigger eyebrow, tighter headline-to-copy gap */
#page-container .fds-intro .et_pb_text_2 h6 { font-size: 18px !important; letter-spacing: 3px !important; }
.fds-intro .et_pb_text_3 h1 { padding-bottom: 0; margin-bottom: 22px; }

/* Pill, hairline variant (class "tf-pill tf-pill-hair"): ink label, arrow always showing and growing on hover,
   fill matches the section it sits in via --tf-pill-bg. */
body #page-container .et_pb_section .et_pb_column .et_pb_button.tf-pill.tf-pill-hair { width: auto; padding: 22px 32px !important; gap: 14px; background: var(--tf-pill-bg, #fff) !important; color: #0B0B0B !important; }
body #page-container .et_pb_section .et_pb_column .et_pb_button.tf-pill.tf-pill-hair:hover { padding: 22px 32px !important; background: var(--tf-pill-bg, #fff) !important; color: #0B0B0B !important; }
body #page-container .et_pb_section .et_pb_button.tf-pill.tf-pill-hair .tf-ar { position: relative; right: auto; top: auto; margin: 0; width: 28px; height: 2px; opacity: 1; transform: none; transition: width .3s cubic-bezier(.2, .8, .2, 1); }
body #page-container .et_pb_section .et_pb_button.tf-pill.tf-pill-hair .tf-ar:after { width: 8px; height: 8px; margin-top: -5px; border-width: 2px; }
body #page-container .et_pb_section .et_pb_button.tf-pill.tf-pill-hair:hover .tf-ar { width: 44px; }
body #page-container .et_pb_section .et_pb_button.tf-pill.tf-pill-hair:hover > span { transform: none; }
.fds-services .et_pb_button.tf-pill { --tf-pill-bg: #FBF9F3; --ring: conic-gradient(from var(--a, 0deg), #DDD8CC 0 78%, #1C5CE8 92%, #DDD8CC 100%); }

/* Work index 1.42.0: tan eyebrow, dot rail with goo blob instead of the hover shift, new ask block */
.page-id-280 #page-container .fds-work .eyebrow { color: #C7C1AF; }
.fds-work .list { position: relative; }
.page-id-280 #page-container .fds-work .list a { padding-left: 34px; transition: color .25s; }
.page-id-280 #page-container .fds-work .list a:hover, .page-id-280 #page-container .fds-work .list a.on { padding-left: 34px; }
.fds-work .rail { position: absolute; left: 0; top: 0; bottom: 0; width: 18px; pointer-events: none; }
.fds-work .rail .glass { position: absolute; left: 0; width: 18px; height: 18px; border-radius: 50%; background: #ECE8DD; box-shadow: inset 1.5px 1.5px 1px -.5px #fff, inset -1.2px -1.2px 1px -.5px rgba(255,255,255,.8), 0 0 0 .5px #DDD8CC; }
.fds-work .rail .goo { position: absolute; inset: -20px -28px; filter: url(#tfw-goo) drop-shadow(0 0 6px rgba(28,92,232,.4)); }
.fds-work .rail .goo span { position: absolute; border-radius: 50%; background: #1C5CE8; }
.fds-work .ask { isolation: isolate; }
.page-id-280 #page-container .fds-work .ask .ask-h { font-family: var(--tf-serif) !important; font-weight: 500; font-size: var(--t-h5) !important; line-height: 1.25 !important; color: #0B0B0B; margin-bottom: 10px; max-width: 20ch; }
.page-id-280 #page-container .fds-work .ask .et_pb_button.tf-pill { margin-top: 26px; }
.fds-work .ask { padding: 24px 0 40px; }
.page-id-280 #page-container .fds-work .ask .ask-h { margin-bottom: 8px; }
.page-id-280 #page-container .fds-work .ask .et_pb_button.tf-pill { margin-top: 20px; }
.page-id-280 #page-container .fds-work .ask a.tf-pill { text-decoration: none !important; }
@media (min-width: 981px) and (max-height: 1000px) { .fds-work .side { padding-top: 116px; } .page-id-280 #page-container .fds-work .side h1 { margin-bottom: 18px !important; } .page-id-280 #page-container .fds-work .list a { padding-top: 12px; padding-bottom: 12px; } .fds-work .ask { padding: 16px 0 24px; } .page-id-280 #page-container .fds-work .ask .et_pb_button.tf-pill { margin-top: 16px; } }

/* Work index 1.42.1: sidebar clips with a margin so the pill's ring/bloom survive; roomier rows; extra-short tier */
.fds-work .side { overflow: clip; overflow-clip-margin: 16px; }
.page-id-280 #page-container .fds-work .list a { padding-top: 20px; padding-bottom: 20px; }
@media (min-width: 981px) and (max-height: 1000px) { .page-id-280 #page-container .fds-work .list a { padding-top: 16px; padding-bottom: 16px; } }
@media (min-width: 981px) and (max-height: 900px) { .fds-work .side { padding-top: 104px; } .page-id-280 #page-container .fds-work .list a { padding-top: 12px; padding-bottom: 12px; } .page-id-280 #page-container .fds-work .ask .ask-h { font-size: 1.25rem !important; } }

/* 1.42.2: Work ask block spans the list width and centres in the space below it */
.fds-work .ask { margin: auto 0; padding: 24px 0; }
.page-id-280 #page-container .fds-work .ask p { max-width: none; }
.page-id-280 #page-container .fds-work .ask .ask-h { max-width: none; }
@media (min-width: 981px) and (max-height: 1000px) { .fds-work .ask { padding: 16px 0; } }

/* 1.42.2: footer back-to-top as the "full ring" pill on ink — ink disc, 3px rotating blue ring, soft bloom.
   Centred with margins rather than transform, because a transform makes the link its own stacking context
   and the z-index:-1 ring would paint over the disc. */
.fds-foot .rule-wrap { isolation: isolate; }
.fds-foot .rule-wrap .top { transform: none; margin: -28px 0 0 -28px; background: #0B0B0B; animation: tfSweep 3s linear infinite; transition: none; overflow: visible;
  --ring: conic-gradient(from var(--a, 0deg), #1C5CE8, #5A95F5 50%, #1C5CE8); }
.fds-foot .rule-wrap .top:before, .fds-foot .rule-wrap .top:after { content: ""; position: absolute; border-radius: 50%; z-index: -1; background: var(--ring); }
.fds-foot .rule-wrap .top:before { inset: -3px; }
.fds-foot .rule-wrap .top:after { inset: -6px; filter: blur(12px); opacity: .55; transition: opacity .3s; }
.fds-foot .rule-wrap .top:hover { background: #0B0B0B; }
.fds-foot .rule-wrap .top:hover:after { opacity: 1; }
.fds-foot .rule-wrap .top:hover svg { stroke: #FFFFFF; }
@media (prefers-reduced-motion: reduce) { .fds-foot .rule-wrap .top { animation: none; --a: 300deg; } }

/* 1.42.4: Work sidebar — list centred with equal side margins, eyebrow centred, list pinned high, CTA centred at the bottom */
/* 1.42.5: the grid's column gap sat between the sidebar and the image inside the white area, so the sidebar
   (and its 10% padding) was off-centre by that gap; the sidebar now spans the whole white area. */
.fds-work .wrap { padding-left: 0 !important; column-gap: 0 !important; }
.fds-work .side { justify-content: flex-start; padding: 124px 10% 48px !important; }
.page-id-280 #page-container .fds-work .eyebrow { text-align: center; margin-bottom: 22px !important; }
.fds-work .ask { margin: auto 0 0 !important; padding: 40px 0 0 !important; text-align: center; }
.page-id-280 #page-container .fds-work .ask .ask-h, .page-id-280 #page-container .fds-work .ask p { max-width: none; text-align: center; }
.page-id-280 #page-container .fds-work .ask .et_pb_button.tf-pill { margin: 20px auto 0; }
@media (max-width: 980px) { .fds-work .side { padding: 120px 6vw 40px !important; } }
/* 1.42.6: phones — panel and cards run edge to edge, cards snap to centre (proximity, set by the page script), bloom not clipped */
@media (max-width: 980px) { .fds-work .wrap { padding-right: 0 !important; } .fds-work .card { scroll-snap-align: center !important; } .fds-work .side { overflow: visible; } }
/* 1.42.8: phones — cards keep one outer height (image + room for the strip) so the snap point never moves; the snapped
   card (.on, set by the page script) goes colour, insets with a white border all round and opens its info strip
   (max-height reveal, Safari-safe); every other card is the bare black-and-white image at full width. */
@media (max-width: 980px) {
  .fds-work .card { height: calc(66.666vw + 112px); scroll-snap-stop: normal !important; transition: padding .32s cubic-bezier(.2,.8,.2,1); }
  .fds-work .card.on { padding: 4vw !important; }
  .fds-work .card .in { height: 100%; display: flex; flex-direction: column; }
  .fds-work .card .win { flex: 1 1 auto; min-height: 0; height: auto; aspect-ratio: auto; }
  .fds-work .card .meta { flex: 0 0 auto; max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; overflow: hidden; transition: max-height .32s cubic-bezier(.2,.8,.2,1), padding .32s cubic-bezier(.2,.8,.2,1), opacity .2s ease .08s; }
  .fds-work .card.on .meta { max-height: 240px; padding: 22px 26px 26px; opacity: 1; }
  .fds-work .card.on .win img { filter: none; }
}

/* 1.42.8: bloom = rounded clip box (.tf-halo) with a rotating blurred square inside (transform animation; Safari-safe) */
@keyframes tfSpin { to { transform: rotate(360deg); } }
body #page-container .et_pb_section .et_pb_button.tf-pill:after { display: none !important; }
body #page-container .et_pb_section .et_pb_button.tf-pill .tf-halo { display: block; position: absolute; inset: -12px; border-radius: inherit; overflow: hidden; z-index: -2; opacity: .35; transition: opacity .3s; pointer-events: none; background: none; filter: none; }
body #page-container .et_pb_section .et_pb_button.tf-pill .tf-halo b { position: absolute; left: 50%; top: 50%; width: 220%; aspect-ratio: 1 / 1; margin: 0; translate: -50% -50%; background: conic-gradient(from 0deg, transparent 0 78%, #1C5CE8 92%, transparent 100%); filter: blur(10px); animation: tfSpin 6s linear infinite; }
body #page-container .et_pb_section .et_pb_button.tf-pill:hover .tf-halo { opacity: .7; }
.fds-foot .rule-wrap .top:after { display: none; }
.fds-foot .rule-wrap .top .tf-halo { position: absolute; inset: -10px; border-radius: 50%; overflow: hidden; z-index: -2; opacity: .55; transition: opacity .3s; pointer-events: none; }
.fds-foot .rule-wrap .top .tf-halo b { position: absolute; left: 50%; top: 50%; width: 160%; aspect-ratio: 1 / 1; translate: -50% -50%; background: conic-gradient(from 0deg, #1C5CE8, #5A95F5 50%, #1C5CE8); filter: blur(12px); animation: tfSpin 3s linear infinite; }
.fds-foot .rule-wrap .top:hover .tf-halo { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tf-halo b { animation: none !important; transform: rotate(300deg); } }