/*!
Theme Name: mobileframing
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: mobileframing
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

mobileframing is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
	 font-family: 'Arial', sans-serif;
}
a {
    text-decoration: none;
}
:root {
  /* --- Type families -----------------------------------------------------
     Figma reports "Arial Regular" for headings/body and "Poppins Medium"
     for pills, buttons, stat values and labels. That mix is almost certainly
     a font-substitution artefact rather than the real spec — confirm the
     intended family and change these two lines only. */
  --mf-font-display: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --mf-font-ui: "Poppins", Arial, "Helvetica Neue", Helvetica, sans-serif;

  /* --- Colour ------------------------------------------------------------ */
  --mf-teal: #6cdbd5;          /* brand mint */
  --mf-teal-rgb: 108, 219, 213;
  --mf-teal-dark: #008080;     /* stat values */
  --mf-teal-deep: #004e4a;     /* on-mint text */
  --mf-ink: #010101;
  --mf-grey-800: #474747;
  --mf-grey-600: rgba(99, 99, 99, 0.9);
  --mf-grey-500: rgba(113, 113, 113, 0.9);
  --mf-grey-400: #989898;
  --mf-hairline: #d5d5d5;
  --mf-rule: #6cdbd5;          /* stat dividers — see ASSETS.md */
  --mf-surface: #ffffff;
  --mf-surface-muted: #f3f3f3;
	--mf-black: #000000;
--mf-hairline-soft: #e3e3e3;
--mf-fs-know: clamp(18px, 1.406vw, 27px);
--mf-lh-row-text: 1.4167;
--mf-lh-know: 1.778;
--mf-radius-panel: clamp(16px, 1.563vw, 30px);
	 /* The section background — this is the one your console flagged */
  --mf-gradient-process: linear-gradient(
    113.01deg,
    rgb(255, 255, 255) 2.4503%,
    rgb(180, 237, 234) 63.882%,
    rgb(108, 219, 213) 123%
  );
  --mf-surface-photo: #eeeeee;                 /* card backdrop */
  --mf-shadow-team: 4px 15px 23px rgba(0, 0, 0, 0.12);
  --mf-fs-name: clamp(24px, 1.927vw, 37px);    /* 37 — name */
  --mf-fs-role: clamp(17px, 1.354vw, 26px);    /* 26 — role */
  --mf-fs-counter: clamp(20px, 1.563vw, 30px); /* sizes the 70px arrows */
 
  --mf-gradient-plate: linear-gradient(
    1.365deg,
    rgb(1, 5, 21) 4.3832%,
    rgba(4, 11, 44, 0) 152.66%
  );
	 --mf-gradient-footer: linear-gradient(
    118.614deg,
    rgb(188, 255, 251) 25.861%,
    rgb(255, 255, 255) 48.588%,
    rgb(186, 255, 251) 120.23%
  );

 --mf-fs-loc-title: clamp(28px, 2.76vw, 53px);    /* 53 — the H2 */
  --mf-fs-loc-card: clamp(14px, 0.938vw, 18px);    /* 18 — suburb label */
  --mf-fs-loc-cta: clamp(18px, 1.354vw, 26px);     /* 26 — Connect Now */

  --mf-gradient-locations: linear-gradient(
    113.759deg,
    rgb(255, 255, 255) 8.3772%,
    rgb(148, 255, 249) 50.894%,
    rgb(255, 255, 255) 99.547%
  );

  /* the card's glass fill — note the angle differs from .mf-glass's 169.7 */
  --mf-gradient-loc-card: linear-gradient(
    177.613deg,
    rgba(255, 255, 255, 0.135) 3.658%,
    rgba(255, 255, 255, 0) 104.77%
  );
  /* Type scale — the max of each clamp is the exact Figma size at 1920.
     Letter-spacing is a uniform -0.03em across the whole design. */
  --mf-tracking: -0.03em;
  --mf-fs-h2: clamp(30px, 2.344vw, 45px);      /* 45 / 57  — H2 + step titles */
  --mf-fs-lead: clamp(16px, 1.25vw, 24px);     /* 24 / 39  — lead + note      */
  --mf-fs-pill: clamp(14px, 1.042vw, 20px);    /* 20 / 48  — glass label      */
  --mf-fs-step: clamp(34px, 3.438vw, 66px);    /* 66 / 50  — 01 / 02 / 03     */

  --mf-lh-h2: 1.267;
  --mf-lh-lead: 1.625;
  --mf-lh-note: 1.4583;                        /* 35/24 — tighter than lead   */
  --mf-lh-step: 0.758;                         /* 50/66                       */

  /* Space and radii */
  --mf-gutter: clamp(20px, 3.385vw, 65px);     /* 65 @1920 */
  --mf-radius-panel: clamp(16px, 1.563vw, 30px); /* 30 @1920 */

  /* --- Type scale --------------------------------------------------------
     Letter-spacing is a uniform -0.03em across the entire design, so it is
     set once as --mf-tracking rather than per element. */
  --mf-tracking: -0.03em;

  --mf-fs-eyebrow: clamp(15px, 1.146vw, 22px);      /* 22 / 39 */
  --mf-fs-h2: clamp(30px, 2.344vw, 45px);           /* 45 / 57 */
  --mf-fs-lead: clamp(16px, 1.25vw, 24px);          /* 24 / 39 */
  --mf-fs-btn: clamp(15px, 1.146vw, 22px);          /* 22 / 39 */
  --mf-fs-card-title: clamp(22px, 1.875vw, 36px);   /* 36 / 48 */
  --mf-fs-chip: clamp(13px, 0.938vw, 18px);         /* 18 / 48 */
  --mf-fs-card-text: clamp(15px, 1.25vw, 24px);     /* 24 / 37 */
  --mf-fs-switch: clamp(17px, 1.354vw, 26px);       /* 26 / 48 */
  --mf-fs-stat-title: clamp(26px, 2.344vw, 45px);   /* 45 / 50 */
  --mf-fs-stat-value: clamp(32px, 3.073vw, 59px);   /* 59 / 57 */
  --mf-fs-stat-label: clamp(15px, 1.302vw, 25px);   /* 25 / 36 */

  /* Unitless so they scale with the clamped sizes */
  --mf-lh-eyebrow: 1.773;
  --mf-lh-h2: 1.267;
  --mf-lh-lead: 1.625;
  --mf-lh-card-title: 1.333;
  --mf-lh-card-text: 1.542;
  --mf-lh-stat-title: 1.111;
  --mf-lh-stat-value: 0.966;
  --mf-lh-stat-label: 1.44;
 --mf-fs-faq: clamp(20px, 1.563vw, 30px);   /* 30 — question */
 
  --mf-gradient-faq: linear-gradient(
    118.973deg,
    rgb(255, 255, 255) 9.5431%,
    rgb(255, 255, 255) 52.194%,
    rgb(238, 238, 238) 93.235%
  );
  /* --- Space -------------------------------------------------------------
     One shared gutter, so every section lines up on the same 1790px box. */
  --mf-gutter: clamp(20px, 3.385vw, 65px);          /* 65 @1920 */
  --mf-grid-gap: clamp(16px, 1.563vw, 30px);        /* 30 @1920 */
  --mf-card-pad: clamp(18px, 1.302vw, 25px);        /* 25 @1920 */

  /* --- Radii -------------------------------------------------------------- */
  --mf-radius-card: clamp(20px, 2.083vw, 40px);     /* 40 @1920 */
  --mf-radius-pill: 130px;

  /* --- Elevation ---------------------------------------------------------
     Figma uses one shadow signature throughout: dx -20, dy 22, blur 70. */
  --mf-shadow-glass: -20px 22px 70px rgba(0, 0, 0, 0.25);
  --mf-shadow-card: -20px 22px 70px rgba(0, 0, 0, 0.1);
  --mf-shadow-media-inset: inset 0 0 10px rgba(0, 0, 0, 0.2);

  /* --- Type sizes --------------------------------------------------------
     An undefined var in font-size is invalid at computed-value time, so the
     element INHERITS its parent's size. That is why the service card titles
     and the team names are the wrong size right now. */
  --mf-fs-service: clamp(19px, 1.771vw, 34px);      /* 34 — service titles */
  --mf-fs-name: clamp(24px, 1.927vw, 37px);         /* 37 — team name */
  --mf-fs-role: clamp(17px, 1.354vw, 26px);         /* 26 — team role */
  --mf-fs-counter: clamp(20px, 1.563vw, 30px);      /* 30 — sizes the 70px
                                                       carousel arrows via
                                                       2.333em */
  --mf-fs-price: clamp(20px, 1.51vw, 29px);         /* 29 — products */
  --mf-fs-rating: clamp(21px, 1.615vw, 31px);       /* 31 — products */
 
  /* --- Colour ------------------------------------------------------------ */
  --mf-surface-photo: #eeeeee;   /* studio backdrop behind the team photos */
  --mf-surface-alt: #fbfbfb;     /* products cart button */
  --mf-grey-300: rgba(173, 173, 173, 0.9);   /* carousel counter total */
  --mf-teal-bright: #75fefe;                 /* products "OFF 40%" badge */
 
  /* --- Radii ------------------------------------------------------------- */
  --mf-radius-thumb: clamp(12px, 1.042vw, 20px);    /* 20 — service cards */
  --mf-radius-badge: clamp(6px, 0.573vw, 11px);     /* 11 — feed play badge */
  --mf-radius-cart: clamp(8px, 0.625vw, 12px);      /* 12 — products */
  --mf-radius-bar: clamp(4px, 0.365vw, 7px);        /* 7  — products */
  --mf-fs-loc-title: clamp(28px, 2.76vw, 53px);    /* 53 / 76 */
  --mf-fs-loc-card: clamp(14px, 0.938vw, 18px);    /* 18 / 39 */
  --mf-fs-loc-cta: clamp(18px, 1.354vw, 26px);     /* 26 / 39 */
 
  --mf-gradient-locations: linear-gradient(
    113.759deg,
    rgb(255, 255, 255) 8.3772%,
    rgb(148, 255, 249) 50.894%,
    rgb(255, 255, 255) 99.547%
  );
 
  /* the card's glass fill — note the angle differs from .mf-glass's 169.7 */
  --mf-gradient-loc-card: linear-gradient(
    177.613deg,
    rgba(255, 255, 255, 0.135) 3.658%,
    rgba(255, 255, 255, 0) 104.77%
  );

  /* --- Elevation --------------------------------------------------------- */
  --mf-shadow-btn: 0 2px 4px rgba(0, 0, 0, 0.19);
  --mf-shadow-post: 11px 11px 13px rgba(0, 0, 0, 0.02);
  --mf-shadow-section-top: 0 -4px 11px rgba(0, 0, 0, 0.07);
  --mf-shadow-team: 4px 15px 23px rgba(0, 0, 0, 0.12);
 
  /* --- Gradients ---------------------------------------------------------
     You inlined the services and team gradients directly, so those two are
     here only for completeness. The feed and plate ones ARE live and both
     are currently rendering as nothing. */
  --mf-gradient-feed: linear-gradient(
    121.798deg,
    rgb(239, 239, 239) 9.5511%,
    rgb(255, 255, 255) 71.894%,
    rgb(211, 211, 211) 141.87%
  );
 
  --mf-gradient-plate: linear-gradient(
    1.365deg,
    rgb(1, 5, 21) 4.3832%,
    rgba(4, 11, 44, 0) 152.66%
  );
 
  --mf-gradient-services: linear-gradient(
    99.278deg,
    rgb(255, 255, 255) 2.4503%,
    rgb(180, 237, 234) 63.882%,
    rgb(108, 219, 213) 123%
  );
 
  --mf-gradient-team: linear-gradient(
    108.912deg,
    rgb(255, 255, 255) 0.91019%,
    rgb(180, 237, 234) 58.801%,
    rgb(108, 219, 213) 116.26%
  );
 
  --mf-peek: #d9d9d9;            /* products left-edge peek block */

  --mf-fs-loc-title: clamp(28px, 2.76vw, 53px);    /* 53 / 76 */
  --mf-fs-loc-card: clamp(14px, 0.938vw, 18px);    /* 18 / 39 */
  --mf-fs-loc-cta: clamp(18px, 1.354vw, 26px);     /* 26 / 39 */
 
  --mf-gradient-locations: linear-gradient(
    113.759deg,
    rgb(255, 255, 255) 8.3772%,
    rgb(148, 255, 249) 50.894%,
    rgb(255, 255, 255) 99.547%
  );
 
  /* the card's glass fill — note the angle differs from .mf-glass's 169.7 */
  --mf-gradient-loc-card: linear-gradient(
    177.613deg,
    rgba(255, 255, 255, 0.135) 3.658%,
    rgba(255, 255, 255, 0) 104.77%
  );
/* ==========================================================================
   Per-card photo crops
   These are NOT root tokens — each card sets its own. They are missing from
   your stylesheet entirely, which is why every team and service photo is
   rendering un-zoomed at 100%. The classes are already in your markup.
   ========================================================================== */
	 /* Card + offer headline: Arial 42 / 57 / -1.26 */
  --mf-fs-bento-title: clamp(26px, 2.188vw, 42px);
  /* Card body copy: Arial 22 / 33 */
  --mf-fs-bento-body: clamp(15px, 1.146vw, 22px);
  /* "Special Offer" pill: Poppins Medium 24 / 39 / -0.72 */
  --mf-fs-offer-pill: clamp(16px, 1.25vw, 24px);
 
  /* The dark copy panel under the shop card */
  --mf-panel-shop: linear-gradient(
    180deg,
    rgba(58, 58, 58, 0.92) 0%,
    rgb(58, 58, 58) 100%
  );
 
  /* The photo scrim on the two image cards. Figma applies a 136.678deg
     black->transparent ramp at 85% layer opacity; the 0.85 is baked into
     the first stop instead of using opacity, so the card can keep a single
     stacking context. */
  --mf-scrim-bento: linear-gradient(
    136.678deg,
    rgba(0, 0, 0, 0.85) 8.1625%,
    rgba(0, 0, 0, 0) 90.855%
  );
 
  /* --- The live product panel (card D) ---------------------------------
     Card D in Figma is a flat screenshot of the real shop's "add a floating
     frame" upsell. These are read off that screenshot, since the panel is
     raster in the design and has no vector spec to measure. */
  --mf-surface-shop: #f6f4f1;
  --mf-ink-shop: #1f1f1f;
  --mf-ink-shop-soft: #5c5c5c;
  --mf-shop-accent: #e0553f;          /* the "Add to Wishlist" coral */
  --mf-shop-btn: #2f2f2f;             /* ADD TO BASKET */
  --mf-fs-shop-q: clamp(16px, 1.25vw, 24px);
  --mf-fs-shop-lead: clamp(12px, 0.885vw, 17px);
  --mf-fs-shop-meta: clamp(11px, 0.729vw, 14px);
}
/* ---- Team (node 1:3289) ------------------------------------------------- */
.mf-team__card--michael { --mf-crop-x: -22.28%; --mf-crop-w: 144.55%; }
.mf-team__card--carl    { --mf-crop-x: -21.29%; --mf-crop-w: 144.55%; }
.mf-team__card--moshe   { --mf-crop-x: -22.28%; --mf-crop-w: 144.55%; }
.mf-team__card--sam     { --mf-crop-x: -24.58%; --mf-crop-w: 147.22%;
                          --mf-crop-h: 102.05%; }
 
/* ---- Services (node 1:5350) --------------------------------------------
   The scrim alpha and height genuinely vary per card in Figma — Jersey
   fades to solid black, Art Courier to only 0.43, Canvas Stretching's scrim
   is 185px instead of 262px. Those are design values, not simplifications. */
.mf-services__card--jersey {
  --mf-crop-x: -19.924%; --mf-crop-y: -19.784%;
  --mf-crop-w: 119.924%; --mf-crop-h: 152.086%;
  --mf-scrim-end: 1;
}
 
.mf-services__card--floating {
  --mf-crop-x: -3.795%; --mf-crop-y: -29.610%;
  --mf-crop-w: 103.795%; --mf-crop-h: 129.610%;
}
 
.mf-services__card--mirror {
  --mf-crop-x: -0.379%; --mf-crop-y: -25.437%;
  --mf-crop-w: 100.379%; --mf-crop-h: 128.264%;
}
 
.mf-services__card--hanging {
  --mf-crop-x: -3.985%; --mf-crop-y: -48.586%;
  --mf-crop-w: 118.786%; --mf-crop-h: 150.336%;
}
 
.mf-services__card--custom {
  --mf-crop-y: -16.285%; --mf-crop-w: 99.833%; --mf-crop-h: 126.514%;
}
 
.mf-services__card--printing { --mf-crop-h: 126.379%; }
 
.mf-services__card--blank {
  --mf-crop-y: -23.149%; --mf-crop-w: 101.708%; --mf-crop-h: 127.591%;
}
 
.mf-services__card--glass { --mf-crop-y: -23.957%; --mf-crop-h: 125.841%; }
 
.mf-services__card--courier {
  --mf-crop-y: -25.841%; --mf-crop-h: 125.841%;
  --mf-scrim-end: 0.43;
}
 
.mf-services__card--stretching {
  --mf-crop-y: -11.170%; --mf-crop-w: 99.810%; --mf-crop-h: 126.110%;
  --mf-scrim-end: 0.77;
  --mf-scrim-h: 24.899%;
}
 
}
/* Your .mf-services__photo lost its top/left/height, so the crops above
   can't take effect. Restore those three lines: */
.mf-services__photo {
  top: var(--mf-crop-y, 0);
  left: var(--mf-crop-x, 0);
  height: var(--mf-crop-h, 100%);
}

/* --------------------------------------------------------------------------
   Shared utility
   -------------------------------------------------------------------------- */

.mf-u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Removed broken @font-face for Arial (fonts/Arial.woff does not exist; Arial is a system font). */
/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
:root{
  --mf-teal:#6cdbd5;
  --mf-teal-dark:#004e4a;
  --mf-teal-mid:#38b2ab;
  --mf-white-90:rgba(255,255,255,0.9);
  --mf-white-30:rgba(255,255,255,0.3);
  --mf-white-13:rgba(255,255,255,0.135);
  --mf-pill-bg:rgba(217,217,217,0.2);
}
 /* ==========================================================================
   Mobile Framing — site header
   Figma: file FV7LRaWs3NuDRhlzVrOeRO, node 22:1314
          component "SeviceNav" 1:1931 — 1831 x 70

   NO NEW TOKENS. Uses --mf-fs-eyebrow (22), --mf-fs-pill (20), --mf-teal,
   --mf-font-display and --mf-tracking, all of which you already have.
   ========================================================================== */

.site-header {
  position: absolute;                /* floats over the hero photo */
  top: clamp(10px, 1.042vw, 20px);
  right: 0;
  left: 0;
  z-index: 20;
  box-sizing: border-box;
  width: 100%;
  padding-inline: clamp(12px, 2.318vw, 44.5px);   /* (1920 - 1831) / 2 */
}

.site-header *,
.site-header *::before,
.site-header *::after {
  box-sizing: border-box;
}

/* ---- The bar — 1831 x 70, radius 18, 63% black ------------------------- */
.site-header__bar {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.5vw, 28px);
  width: 100%;
  max-width: 1831px;
  min-height: clamp(56px, 3.646vw, 70px);
  margin-inline: auto;
  /* Figma: logo plate inset 8 left, Contact Now 14 from the right */
  padding: clamp(4px, 0.313vw, 6px) clamp(8px, 0.729vw, 14px)
           clamp(4px, 0.313vw, 6px) clamp(6px, 0.417vw, 8px);
  background-color: rgba(0, 0, 0, 0.63);
  border-radius: clamp(12px, 0.938vw, 18px);
}

/* --------------------------------------------------------------------------
   Branding — a white plate, 119 x 57, radius 15, logo inset 8px
   -------------------------------------------------------------------------- */
.site-branding {
    flex: 0 0 auto;
    display: flex;
    place-items: center;
    width: 120px;
    padding: 4px 14px;
    background-color: var(--mf-surface);
    border-radius: 15px;
}

.site-branding .custom-logo-link,
.site-branding .custom-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* With a logo set, the title and tagline stay in the DOM but leave the
   layout — the design shows the mark alone. Remove this block if you would
   rather show the wordmark as text. */
.site-branding:has(.custom-logo) .site-title,
.site-branding:has(.custom-logo) .site-description {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* No logo uploaded yet — keep the plate readable rather than empty */
.site-branding .site-title {
  margin: 0;
  font-family: var(--mf-font-display);
  font-size: clamp(14px, 1.042vw, 20px);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}

.site-branding .site-title a {
  color: var(--mf-teal-deep);
  text-decoration: none;
}

.site-branding .site-description {
  display: none;
}

/* --------------------------------------------------------------------------
   Navigation
   Figma hand-places each item, with gaps running from 41px to 83px. A
   wp_nav_menu emits a plain <ul>, so those individual offsets can't be
   reproduced — and shouldn't be. One gap, set to Figma's average, keeps the
   row landing where the design puts it.
   -------------------------------------------------------------------------- */
.main-navigation {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.main-navigation ul {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3.229vw, 62px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-navigation li {
  position: relative;
}

.main-navigation a {
  display: block;
  font-family: var(--mf-font-display);
  font-size: var(--mf-fs-eyebrow);   /* 22 / 39 / -0.66 */
  font-weight: 400;
  line-height: 1.773;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: var(--mf-tracking);
  transition: color 0.2s ease;
}

.main-navigation a:hover,
.main-navigation a:focus-visible {
  color: var(--mf-teal);
}

/* Active item — Figma shows Home in the brand mint */
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
.main-navigation .current-menu-ancestor > a {
  color: var(--mf-teal);
}

/* ---- Dropdown chevron — 16px, on any item with children ---------------- */
.main-navigation .menu-item-has-children > a {
  display: inline-flex;
  align-items: center;
  gap: clamp(4px, 0.417vw, 8px);
}

.main-navigation .menu-item-has-children > a::after {
  content: "";
  flex: 0 0 auto;
  width: clamp(12px, 0.833vw, 16px);
  height: clamp(12px, 0.833vw, 16px);
  background-image: url("../icons/icon-chevron-down.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform 0.2s ease;
}

.main-navigation .menu-item-has-children:hover > a::after,
.main-navigation .menu-item-has-children:focus-within > a::after {
  transform: rotate(180deg);
}

/* ---- Submenu ------------------------------------------------------------
   Not in the design — the chevron implies one, so this matches the bar's
   own treatment rather than inventing a new style. */
.main-navigation ul ul {
  position: absolute;
  top: calc(100% + clamp(8px, 0.729vw, 14px));
  left: 50%;
  z-index: 5;
  display: block;
  min-width: 240px;
  padding: clamp(8px, 0.625vw, 12px);
  visibility: hidden;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.82);
  border-radius: clamp(10px, 0.781vw, 15px);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transform: translateX(-50%);
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.main-navigation li:hover > ul,
.main-navigation li:focus-within > ul {
  visibility: visible;
  opacity: 1;
}

.main-navigation ul ul li {
  width: 100%;
}

.main-navigation ul ul a {
  padding: clamp(5px, 0.417vw, 8px) clamp(8px, 0.625vw, 12px);
  font-size: var(--mf-fs-pill);      /* 20 */
  white-space: normal;
  border-radius: clamp(6px, 0.469vw, 9px);
}

.main-navigation ul ul a:hover,
.main-navigation ul ul a:focus-visible {
  background-color: rgba(255, 255, 255, 0.1);
}

/* --------------------------------------------------------------------------
   Right cluster — 50px cart, 13px gap, 148 x 50 Contact Now
   -------------------------------------------------------------------------- */
.site-header__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.677vw, 13px);
}

.site-header__cart {
  display: grid;
  place-items: center;
  width: clamp(40px, 2.604vw, 50px);
  height: clamp(40px, 2.604vw, 50px);
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: clamp(9px, 0.677vw, 13px);
  transition: background-color 0.2s ease;
}

.site-header__cart:hover,
.site-header__cart:focus-visible {
  background-color: #fff;
}

.site-header__cart img {
  width: 52%;                        /* 26/50 */
  height: 52%;
  object-fit: contain;
}

.site-header__contact {
  display: grid;
  place-items: center;
  min-width: clamp(112px, 7.708vw, 148px);
  height: clamp(40px, 2.604vw, 50px);
  padding-inline: clamp(12px, 1.042vw, 20px);
  font-family: var(--mf-font-display);
  font-size: var(--mf-fs-pill);      /* 20 / 39 / -0.6 */
  line-height: 1.95;
  color: rgba(0, 0, 0, 0.9);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  background-color: var(--mf-teal);
  border-radius: clamp(9px, 0.677vw, 13px);
  letter-spacing: var(--mf-tracking);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.site-header__contact:hover,
.site-header__contact:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(var(--mf-teal-rgb), 0.45);
}

/* --------------------------------------------------------------------------
   Menu toggle — hidden on desktop, a hamburger below 1200px
   -------------------------------------------------------------------------- */
.menu-toggle {
  display: none;
  place-items: center;
  width: clamp(40px, 2.604vw, 50px);
  height: clamp(40px, 2.604vw, 50px);
  padding: 0;
  background-color: rgba(255, 255, 255, 0.9);
  border: 0;
  border-radius: clamp(9px, 0.677vw, 13px);
  cursor: pointer;
}

.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  display: block;
  width: 22px;
  height: 2px;
  background-color: #000;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
#gform_wrapper_1 #input_1_3 .gchoice {
    position: relative;
    display: block !important;
    flex: 0 1 auto;
    max-width: 100%;
    margin: 0 !important;
    flex: 0 0 calc((84% - 7px) / 4);
    min-width: 0;
}
.menu-toggle__bars {
  position: relative;
}

.menu-toggle__bars::before,
.menu-toggle__bars::after {
  position: absolute;
  left: 0;
  content: "";
}

.menu-toggle__bars::before { top: -7px; }
.menu-toggle__bars::after  { top: 7px; }

/* Underscores' navigation.js flips .toggled on .main-navigation */
.main-navigation.toggled .menu-toggle__bars {
  background-color: transparent;
}

.main-navigation.toggled .menu-toggle__bars::before {
  top: 0;
  transform: rotate(45deg);
}

.main-navigation.toggled .menu-toggle__bars::after {
  top: 0;
  transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Responsive
   Six items at 22px need roughly 1200px of bar, so the row collapses to the
   toggle below that.
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .main-navigation {
   justify-content:flex-end;                     /* toggle sits after the buttons */
  }

  .menu-toggle {
    display: grid;
  }

  .main-navigation > ul {
    position: absolute;
    top: calc(100% + clamp(8px, 0.729vw, 14px));
    right: 0;
    z-index: 5;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-width: min(320px, calc(100vw - 32px));
    padding: clamp(8px, 1.5vw, 14px);
    background-color: rgba(0, 0, 0, 0.88);
    border-radius: clamp(10px, 1.2vw, 15px);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .main-navigation.toggled > ul {
    display: flex;
  }

  .main-navigation > ul a {
    padding: 10px 12px;
    font-size: clamp(16px, 2.4vw, 20px);
    border-radius: 9px;
  }

  /* nested lists open in flow rather than as a floating panel */
  .main-navigation ul ul {
    position: static;
    min-width: 0;
    padding: 0 0 0 12px;
    visibility: visible;
    opacity: 1;
    background: none;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none;
  }

  .site-header__actions {
    order: 2;
    margin-left: auto;
  }
}

@media (max-width: 560px) {
  .site-header__contact {
    min-width: 0;
    padding-inline: 14px;
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .main-navigation a,
  .main-navigation ul ul,
  .site-header__cart,
  .site-header__contact,
  .menu-toggle__bars,
  .menu-toggle__bars::before,
  .menu-toggle__bars::after,
  .main-navigation .menu-item-has-children > a::after {
    transition: none;
  }
}

@media (forced-colors: active) {
  .site-header__bar,
  .site-header__cart,
  .site-header__contact,
  .menu-toggle {
    border: 1px solid CanvasText;
  }
}

/* ===== Hero canvas (1920 x 1005 at native/design size) ===== */
.mf-hero {
    width: 100%;
    background-image: url(/wp-content/uploads/2026/09/home-banner-bg-img.png);
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    background-position: 70% 100%;
}
.mf-hero__content {
    padding: 130px 50px 40px 50px;
}
 
/* The navbar (template-parts/navbar.php) sits in the page header above this
   section, not inside it — see header-example.php. If your design calls for
   it visually overlapping the hero photo, position it with negative margin
   or place header.php's wrapper with position:absolute over .mf-hero. */
 
/* ===== Location badge ===== */
.mf-badge {
    width: 18%;
    border: 1px solid var(--mf-white-30);
    border-radius: 110px;
    display: flex;
    align-items: center;
    padding: 0;
    gap: 16px;
    justify-content: center;  
	margin-bottom: 18px;
}
.mf-badge__icon{ width:17px; height:17px; flex:none; }
.mf-badge__icon img{ width:100%; height:100%; display:block; }
.mf-badge__text {
    font-size: 22px;
    letter-spacing: -0.66px;
    color: var(--mf-white-90);
    white-space: nowrap;
	    line-height: 0.8;
}
 
.mf-headline {
    font-size: 75px;
    line-height: 1.3;
    letter-spacing: -2.55px;
    color: #fff;
    white-space: nowrap;
}
.mf-headline-quote {
    font-size: 75px;
    line-height: 70px;
    letter-spacing: -2.55px;
    color: #6CDBD5;
    white-space: nowrap;
}
/* Fixed-height window prevents the banner content from jumping. */
.mf-hero .mf-word-rotator {
  --mf-word-height: 1.15em;

  display: block;
  position: relative;
  height: var(--mf-word-height);
  overflow: hidden;

  /* Inherits your existing headline font size and font family. */
  line-height: 1.15;
  color: #6CDBD5;
  white-space: nowrap;
}

/* Four equal rows: Memories / Artwork / Stories / Memories. */
.mf-hero .mf-word-rotator__track {
  display: flex;
  flex-direction: column;
  width: 100%;
  animation: mf-hero-word-slide 4.2s
    cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.mf-hero .mf-word-rotator__word {
  display: block;
  flex: 0 0 var(--mf-word-height);
  height: var(--mf-word-height);
  line-height: var(--mf-word-height);
  margin: 0;
  padding: 0;
}

/* Hold each word, then slide upwards to the next one. */
@keyframes mf-hero-word-slide {
  0%,
  26% {
    transform: translateY(0);
  }

  33.333%,
  59.333% {
    transform: translateY(-25%);
  }

  66.666%,
  92.666% {
    transform: translateY(-50%);
  }

  100% {
    transform: translateY(-75%);
  }
}

/* Read the complete phrase once with assistive technology. */
.mf-hero .mf-word-rotator__accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Fixed-height window prevents the banner content from jumping. */
.mf-hero .mf-word-rotator {
  --mf-word-height: 1.15em;

  display: block;
  position: relative;
  height: var(--mf-word-height);
  overflow: hidden;

  /* Inherits your existing headline font size and font family. */
  line-height: 1.15;
  color: #6CDBD5;
  white-space: nowrap;
}

/* Four equal rows: Memories / Artwork / Stories / Memories. */
.mf-hero .mf-word-rotator__track {
  display: flex;
  flex-direction: column;
  width: 100%;
  animation: mf-hero-word-slide 4.2s
    cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.mf-hero .mf-word-rotator__word {
  display: block;
  flex: 0 0 var(--mf-word-height);
  height: var(--mf-word-height);
  line-height: var(--mf-word-height);
  margin: 0;
  padding: 0;
}

/* Hold each word, then slide upwards to the next one. */
@keyframes mf-hero-word-slide {
  0%,
  26% {
    transform: translateY(0);
  }

  33.333%,
  59.333% {
    transform: translateY(-25%);
  }

  66.666%,
  92.666% {
    transform: translateY(-50%);
  }

  100% {
    transform: translateY(-75%);
  }
}

/* Read the complete phrase once with assistive technology. */
.mf-hero .mf-word-rotator__accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Show a static word when reduced motion is preferred. */
@media (prefers-reduced-motion: reduce) {
  .mf-hero .mf-word-rotator__track {
    animation: none;
    transform: none;
  }
}
/* Show a static word when reduced motion is preferred. */
@media (prefers-reduced-motion: reduce) {
  .mf-hero .mf-word-rotator__track {
    animation: none;
    transform: none;
  }
} 
.mf-headline-2 {
    font-size: 75px;
    line-height: 1.3;
    letter-spacing: -2.55px;
    color: #fff;
}
 
.mf-subtext {
    width: 50.36%;
    font-size: 20px;
    line-height: 1.6;
    letter-spacing: -0.66px;
    color: #fff;
}
 
/* ===== Quote / steps section ===== */
.mf-quote-sec{
  width:93.7%; /* 1799/1920 */
  height:37.1%;/* 373/1005 */
}
 
.mf-quote-sec__divider{
  width:100%;
  height:17.4%; /* 65/373 */
  background:#d9d9d9;
}
 
/* -- step 1 mini card -- */
.mf-step-mini {
    width: 27%;
    border-radius: 24px;
    border: 1px solid #fff;
    background: linear-gradient(180.3deg, var(--mf-white-13) 1.15%, rgba(255, 255, 255, 0) 98.9%);
    box-shadow: -20px 22px 70px 0 rgba(0, 0, 0, 0.25);
    padding: 20px;
    margin-top: 70px;
}
.mef-step-mini-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
	    padding-bottom: 8px;
}
.mf-step-mini__label{
  font-size:24px;
  letter-spacing:-0.72px;
  line-height:1.2;
  color:var(--mf-teal);
  white-space:nowrap;
}


.mf-step-mini__circle{
  width:40px; height:40px;
  border-radius:134px;
  border:2px solid #fff;
  background:linear-gradient(181.3deg, var(--mf-white-13) 1.15%, rgba(255,255,255,0) 98.9%);
  box-shadow:-20px 22px 70px 0 rgba(0,0,0,0.25);
  backdrop-filter:blur(35px);
  display:flex;
  align-items:center;
  justify-content:center;
}
.mf-step-mini__circle span{
  font-weight:bold;
  font-size:24px;
  letter-spacing:-0.72px;
  color:#fff;
}
 
/* -- main services card -- */
.mf-services-card {
    width: 100%;
    border-radius: 24px;
    border: 2px solid #fff;
    background: linear-gradient(180.14deg, var(--mf-white-13) 1.15%, rgba(255, 255, 255, 0) 98.9%);
    box-shadow: -20px 22px 70px 0 rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(35px);
    padding: 9px 37px;
    margin-top: 10px;
}
.mf-services-card__title{
  font-size:24px;
  letter-spacing:-0.72px;
  line-height:1.2;
  color:var(--mf-teal);
  margin-bottom:32px;
}
 .mf-pills-wrapper {
    display: flex;
    justify-content: space-between;
}
.mf-pills{
  display:flex;
  flex-wrap:wrap;
  gap:16px 20px;
  max-width:1000px;
}
.mf-pill{
  display:flex;
  align-items:center;
  gap:10px;
  height:47px;
  padding:0 18px;
  border-radius:100px;
  background:var(--mf-pill-bg);
  color:#fff;
  font-size:20px;
  letter-spacing:-0.8px;
  white-space:nowrap;
}
.mf-pill img{ width:20px; height:20px; flex:none; }
 
.mf-next-btn{
  width:170px;
  height:54px;
  background:var(--mf-teal);
  border-radius:130px;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 6px 0 24px;
}
.mf-next-btn__label{
  font-family:'Poppins', sans-serif;
  font-weight:500;
  font-size:24px;
  letter-spacing:-0.72px;
  color:var(--mf-teal-dark);
}
.mf-next-btn__icon{
  position:relative;
  width:41px;
  height:41px;
  flex:none;
}
.mf-next-btn__icon {
    position: relative;
    width: 41px;
    height: 41px;
    flex: none;
    background-color: #fff;
    border-radius: 100px;
}
.mf-next-btn__icon img.arrow {
    width: 31px;
    height: 31px;
    position: absolute;
    top: 5px;
    right: 5px;
}
 
/* ---- Small-screen fallback (basic; expand as needed) ---- */
@media (max-width:900px){
  .mf-services-card{ position:relative; height:auto; padding:20px; }
  .mf-quote-sec{ position:relative; height:auto; margin-top:40px; }
  .mf-step-mini{ position:relative; width:100%; margin-bottom:20px; }
  .mf-next-btn{ position:static; margin-top:20px; }
}
  .about{
    max-width:1400px;
    margin:0 auto;
    padding:64px 32px 96px;
  }
 
  /* ---- top row: badge + CTA ---- */
  .about__top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
    margin-bottom:32px;
  }
 /* Card colour transition */
.about .profile-card {
  transition: background-color 350ms ease;
}

.about .profile-card__title,
.about .profile-card__desc,
.about .profile-card__footer-label {
  transition: color 350ms ease;
}

/* Keep the switch above decorative layers */
.about .profile-card__footer {
  position: relative;
  z-index: 3;
}

/* Switch track */
.about .mf-framing-switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: inline-block;
  flex: 0 0 97px;
  width: 97px;
  min-width: 97px;
  height: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 120px;
  background: #474747;
  box-shadow: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 350ms ease;
}

/* White sliding knob */
.about .mf-framing-switch__knob {
  position: absolute;
  top: 50%;
  left: 8px;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: #fff;
  transform: translate(0, -50%);
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.about .mf-framing-switch[aria-checked="true"] {
  background: #6CDBD5;
}

.about .mf-framing-switch[aria-checked="true"]
.mf-framing-switch__knob {
  transform: translate(50px, -50%);
}

.about .mf-framing-switch:focus-visible {
  outline: 3px solid #004E4A;
  outline-offset: 5px;
}

/* Active card appearance */
.about .profile-card.is-framing-active {
  background-color: #363938;
}

.about .profile-card.is-framing-active .profile-card__title {
  color: #6CDBD5;
}

.about .profile-card.is-framing-active .profile-card__desc {
  color: #F0F0F0;
}

.about .profile-card.is-framing-active .profile-card__footer-label {
  color: #fff;
}

.about .profile-card.is-framing-active
.mf-framing-switch:focus-visible {
  outline-color: #fff;
}

/* Prevent decorative overlays from blocking clicks */
.about .profile-card::before,
.about .profile-card__photo::after {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .about .profile-card,
  .about .profile-card__title,
  .about .profile-card__desc,
  .about .profile-card__footer-label,
  .about .mf-framing-switch,
  .about .mf-framing-switch__knob {
    transition: none;
  }
}
.badge-pill {
    display: inline-flex;
    align-items: center;
    padding: 12px 28px;
    border: 2px solid #D5D5D5;
    border-radius: 130px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: -0.66px;
    color: #636363;
    background: #fff;
}
.quote-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 7px 7px 20px;
    gap: 10px;
    border: none;
    border-radius: 130px;
    background: #6CDBD5;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: -0.66px;
    color: #004E4A;
    cursor: pointer;
}
 
  /* ---- heading + intro paragraph ---- */
  .about__intro{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:48px;
    align-items:start;
    margin-bottom:40px;
  }
 
  .about__heading{
    margin:0;
    font-size:45px;
    line-height:1.27;
    letter-spacing:-1.35px;
    font-weight:400;
  }
 
.about__text {
    margin: 0;
    font-size: 19px;
    line-height: 1.55;
    letter-spacing: -0.72px;
    color: #636363;
}
 
  /* ---- two-column feature row ---- */
  .about__features{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:32px;
  }
   .media-card {
    position: relative;
    overflow: hidden;
  }

  .media-card__video {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
  }

  .media-card__expand {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 10px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
  }

  .media-card__expand img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .media-card:fullscreen {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }
  /* -- left: teal profile card -- */
.profile-card {
    position: relative;
    display: flex;
    gap: 24px;
    padding: 24px 25px;
    border-radius: 40px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(132.66deg, rgba(108, 219, 213, 0) 34.15%, #6CDBD5 156.97%);
    background-color: #6CDBD5;
}
 
  .profile-card__body{
    display:flex;
    flex-direction:column;
    flex:1;
    min-width:0;
    z-index:1;
  }
 
.profile-card__title {
    margin: 0 0 16px;
    font-size: 32px;
    line-height: 1.33;
    letter-spacing: -1.08px;
    max-width: 380px;
    font-weight: 400;
}
 
  .profile-card__desc {
    margin: 0;
    font-size: 20px;
    line-height: 1.55;
    letter-spacing: -0.72px;
    color: #717171E5;
    max-width: 440px;
    width: 56%;
}
 
  .profile-card__footer{
    display:flex;
    align-items:center;
    gap:16px;
    margin-top:auto;
    padding-top:24px;
  }
 
  .toggle{
    position:relative;
    width:97px;
    height:40px;
    border-radius:120px;
    background:#474747;
    flex:none;
  }
  .toggle__knob{
    position:absolute;
    left:8px;
    top:50%;
    transform:translateY(-50%);
    width:31px;
    height:31px;
    border-radius:50%;
    background:#fff;
  }
 
  .profile-card__footer-label{
    font-family:'Poppins', sans-serif;
    font-size:26px;
    letter-spacing:-0.78px;
    color:#474747;
    white-space:nowrap;
  }
 .profile-card__photo {
    width: 0;
    border-radius: 40px;
    overflow: hidden;
    float: right;
    left: 0;
}
.profile-card__photo img {
    position: absolute;
    width: 44%;
    height: 100%;
    object-fit: contain;
    left: auto;
    right: 0;
    object-position: right bottom;
}
.profile-card__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(155.58deg, rgba(108, 219, 213, 0) 63.8%, #6CDBD5 116.8%);
}
 
  .badge-float{
    position:absolute;
    top:24px;
    right:25px;
    display:inline-flex;
    align-items:center;
    height:45px;
    padding:0 16px;
    border:2px solid #fff;
    border-radius:124px;
    background:rgba(255,255,255,0.15);
    backdrop-filter:blur(20px);
    font-family:'Poppins', sans-serif;
    font-size:18px;
    letter-spacing:-0.54px;
    color:rgba(255,255,255,0.9);
    white-space:nowrap;
    z-index:2;
  }
 
  /* bottom fade over the whole card, matching the design's lower gradient band */
  .profile-card::before{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:99px;
    background:linear-gradient(177deg, rgba(108,219,213,0) 64%, rgba(108,219,213,0.9) 117%);
    border-radius:0 0 40px 40px;
    pointer-events:none;
  }
 
  /* -- right: video/image card -- */
 .media-card {
    position: relative;
    border-radius: 40px;
}
  .media-card img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .media-card__placeholder{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#2b2b2b;
    color:rgba(255,255,255,0.5);
    font-size:18px;
  }
 
  .media-card__expand{
    position:absolute;
    top:24px;
    right:25px;
    width:48px;
    height:48px;
    border-radius:50%;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 12px rgba(0,0,0,0.15);
  }
  .media-card__expand img{ position:static; width:20px; height:20px; }
 
  /* ---- responsive ---- */
  @media (max-width:900px){
    .about__intro,
    .about__features{
      grid-template-columns:1fr;
    }
    .profile-card{ flex-direction:column; }
    .profile-card__photo{ width:100%; height:260px; }
  .profile-card__photo img{ width:100%; left:0; right:0; object-fit:contain; object-position:center bottom; }
  }
.stats-section {
    margin: 0 auto;
    padding: 56px 32px 72px;
    text-align: center;
    background: #F3F3F3;
}
.stats-section__heading {
    margin: 0 0 40px;
    font-size: 45px;
    line-height: 1.11;
    letter-spacing: -1.35px;
    color: #474747;
    font-weight: 400;
}
 /* Hidden only after JavaScript enables the animation. */
.stats-section.mf-fade-ready .stats-section__heading,
.stats-section.mf-fade-ready .stat__value,
.stats-section.mf-fade-ready .stat__label {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 1200ms ease,
    transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--mf-fade-delay, 0ms);
}

/* Reveal each element. */
.stats-section.mf-fade-ready.is-visible .stats-section__heading,
.stats-section.mf-fade-ready.is-visible .stat__value,
.stats-section.mf-fade-ready.is-visible .stat__label {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .stats-section.mf-fade-ready .stats-section__heading,
  .stats-section.mf-fade-ready .stat__value,
  .stats-section.mf-fade-ready .stat__label {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
  /* ---- stats card ---- */
.stats-card {
    padding: 28px 24px;
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 1600px;
    margin: 0 auto;
    background: linear-gradient(181.35deg, rgba(255, 255, 255, 0.135) 1.15%, rgba(255, 255, 255, 0) 98.91%);
    backdrop-filter: blur(70px);
    box-shadow: -20px 22px 70px 0px #00000029;
    border-image-source: linear-gradient(147.91deg, #FFFFFF 9.57%, rgba(255, 255, 255, 0) 56.98%, rgba(255, 255, 255, 0.77) 97.79%);
    border-image-slice: 1;
    border-radius: 36px;
}
 
  .stat{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    padding:32px 24px;
    border-left:1px solid #6CDBD5;
  }
  .stat:first-child{
    border-left:none;
  }
 
.stat__value {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 44px;
    letter-spacing: -1.32px;
    line-height: 1;
    color: #008080;
    white-space: nowrap;
}
 
  .stat__label{
    margin:0;
    font-family:'Poppins', sans-serif;
    font-size:19px;
    letter-spacing:-0.57px;
    line-height:1.3;
    color:#989898;
 
  /* ---- responsive ---- */
  @media (max-width:900px){
    .stats-card{
      grid-template-columns:repeat(2, 1fr);
    }
    .stat:nth-child(3){ border-left:none; }
    .stat:nth-child(3),
    .stat:nth-child(4){
      border-top:1px solid var(--divider);
    }
  }
  @media (max-width:520px){
    .stats-section__heading{ font-size:30px; }
    .stats-card{ grid-template-columns:1fr; }
    .stat{ border-left:none !important; border-top:1px solid var(--divider); }
    .stat:first-child{ border-top:none; }
  }
}
* ==========================================================================
   Mobile Framing — Legacy / trust-stats section
   Figma: node 1:2654 (instance of "Legacy", variant property1="Variant2")
          1920 x 469, background #F3F3F3, contents clipped
   Requires tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Section shell
   1920 frame: 57px top padding, 92px bottom. Panel sits at x67 (1786 wide),
   matching the shared 1790px content box used by every other section.
   -------------------------------------------------------------------------- */
.mf-legacy {
  box-sizing: border-box;
  padding-block: clamp(32px, 2.969vw, 57px) clamp(40px, 4.792vw, 92px);
  font-family: var(--mf-font-display);
  background-color: var(--mf-surface-muted);
  letter-spacing: var(--mf-tracking);
  /* Figma clips the panel's shadow at the section bounds */
  overflow: hidden;
}

.mf-legacy *,
.mf-legacy *::before,
.mf-legacy *::after {
  box-sizing: border-box;
}

.mf-legacy__container {
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
  padding-inline: var(--mf-gutter);
}

/* --------------------------------------------------------------------------
   2. Heading — 45/50/-1.35, #474747, centred, max-width 959
   -------------------------------------------------------------------------- */
.mf-legacy__title {
  max-width: 959px;
  margin: 0 auto;
  font-family: var(--mf-font-display);
  font-size: var(--mf-fs-stat-title);
  font-weight: 400;
  line-height: var(--mf-lh-stat-title);
  color: var(--mf-grey-800);
  text-align: center;
  letter-spacing: var(--mf-tracking);
}

/* --------------------------------------------------------------------------
   3. Panel — 1786 x 173, radius 40, white on #F3F3F3
   The panel is a single flattened SVG in Figma, so it is rebuilt in CSS: as
   an image it could not reflow, and a rounded rect with three hairlines is
   layout, not artwork. Fill, radius and stroke colour are therefore read
   from the 1:1 render rather than from values — see ASSETS.md.
   -------------------------------------------------------------------------- */
.mf-legacy__panel {
  /* named so the dividers can be positioned against the panel box rather
     than against the shorter stat box they actually sit inside */
  --mf-panel-pt: clamp(22px, 1.979vw, 38px);      /* 38 @1920 */
  --mf-panel-pb: clamp(16px, 1.302vw, 25px);      /* 25 @1920 */
  --mf-rule-top: clamp(17px, 1.563vw, 30px);      /* 30 @1920 */
  --mf-rule-bottom: clamp(13px, 1.198vw, 23px);   /* 23 @1920 */

  margin-top: clamp(24px, 2.448vw, 47px);
  padding-block: var(--mf-panel-pt) var(--mf-panel-pb);
  background-color: var(--mf-surface);
  border-radius: var(--mf-radius-card);
  box-shadow: var(--mf-shadow-card);
}

/* --------------------------------------------------------------------------
   4. Stats grid
   Figma places four hand-positioned columns whose centres sit at 249.5,
   676.5, 1110.5 and 1537.5 within the 1786 panel — i.e. four equal columns
   inset ~35px (1.96%) from each edge. Expressed that way the computed
   centres land within 3px of Figma's, and the layout becomes genuinely
   symmetric, which Figma's hand placement very nearly is.
   -------------------------------------------------------------------------- */
.mf-legacy__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding-inline: 1.96%;
}

.mf-legacy__stat {
  position: relative;
  display: flex;
  /* value renders above the label; DOM order stays label-then-value so the
     pair reads as "Projects Completed: 10,000+" to assistive tech */
  flex-direction: column-reverse;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(8px, 0.885vw, 17px);
  text-align: center;
}

/* Value — 59/57/-1.77, #008080 */
.mf-legacy__value {
  margin: 0;
  font-family: var(--mf-font-ui);
  font-size: var(--mf-fs-stat-value);
  font-weight: 500;
  line-height: var(--mf-lh-stat-value);
  color: var(--mf-teal-dark);
  letter-spacing: var(--mf-tracking);
}

/* Label — 25/36/-0.75, #989898 */
.mf-legacy__label {
  font-family: var(--mf-font-ui);
  font-size: var(--mf-fs-stat-label);
  font-weight: 500;
  line-height: var(--mf-lh-stat-label);
  color: var(--mf-grey-400);
  letter-spacing: var(--mf-tracking);
}

/* ---- Dividers -----------------------------------------------------------
   Figma: Line 114/115/116 — 1px, 120px tall, 30px from the panel top, on
   the boundaries between columns. Drawn as pseudo-elements on the stats so
   they can switch axis at each breakpoint.
   ------------------------------------------------------------------------ */
.mf-legacy__stat::before,
.mf-legacy__stat::after {
  position: absolute;
  content: "";
  background-color: var(--mf-rule);
  pointer-events: none;
}

/* vertical rule, on the leading edge — 30px from the panel top and 23px
   from its bottom, so it is offset back out through the panel's padding */
.mf-legacy__stat::before {
  top: calc(var(--mf-rule-top) - var(--mf-panel-pt));
  bottom: calc(var(--mf-rule-bottom) - var(--mf-panel-pb));
  left: 0;
  width: 1px;
}

/* horizontal rule, used only once the grid wraps */
.mf-legacy__stat::after {
  top: 0;
  right: 12%;
  left: 12%;
  height: 1px;
  display: none;
}

/* four columns: no rule before the first */
.mf-legacy__stat:first-child::before {
  display: none;
}

/* --------------------------------------------------------------------------
   5. Responsive
   The 1920 frame is the only reference in Figma; below 1281px the grid
   rewraps and the rules switch axis to match.
   -------------------------------------------------------------------------- */

/* 2 x 2 ------------------------------------------------------------------- */
@media (max-width: 900px) {
  .mf-legacy__stats {
    grid-template-columns: repeat(2, 1fr);
    row-gap: clamp(22px, 4vw, 34px);
    padding-inline: clamp(12px, 3vw, 24px);
  }

  /* vertical rule only between the two columns */
  .mf-legacy__stat:nth-child(odd)::before {
    display: none;
  }

  .mf-legacy__stat:nth-child(even)::before {
    display: block;
    /* rows now have their own height, so inset from the stat instead */
    top: 8%;
    bottom: 8%;
  }

  /* horizontal rule above the second row */
  .mf-legacy__stat:nth-child(n + 3)::after {
    display: block;
    top: calc(clamp(22px, 4vw, 34px) / -2);
  }
}

/* single column ----------------------------------------------------------- */
@media (max-width: 520px) {
  .mf-legacy__stats {
    grid-template-columns: 1fr;
    row-gap: clamp(18px, 5vw, 26px);
  }

  /* both selectors are needed to outrank the nth-child rule above */
  .mf-legacy__stat:nth-child(odd)::before,
  .mf-legacy__stat:nth-child(even)::before {
    display: none;
  }

  .mf-legacy__stat:nth-child(n + 2)::after {
    display: block;
    top: calc(clamp(18px, 5vw, 26px) / -2);
    right: 8%;
    left: 8%;
  }
}
}
.mf-why *,
.mf-why *::before,
.mf-why *::after {
  box-sizing: border-box;
}
.mf-why__container {
    width: 100%;
}

/* 2. Two-column body
   Figma: image column 708, gap 141, content column 898 (= 1747).
   The image column is pinned to Figma's exact 708px (36.875vw at the 1920
   reference) so the panel is 708 x 839 to the pixel; the text column takes
   the remainder, absorbing the 43px difference between Figma's 1747 content
   box and the shared 1790 one.
   ------------------------------------------------------------------------ */
.mf-why__grid {
  display: grid;
  grid-template-columns: clamp(260px, 36.875vw, 708px) minmax(0, 1fr);
  column-gap: clamp(28px, 7.344vw, 141px);
  align-items: start;
  margin-top: clamp(16px, 1.51vw, 29px);
}

/* 3. Left column — heading, CTA, image ------------------------------------ */
.mf-why__title {
  max-width: 400px;
  margin: 0;
  font-family: var(--mf-font-display);
  font-size: var(--mf-fs-h2);          /* 45 / 57 / -1.35 */
  font-weight: 400;
  line-height: var(--mf-lh-h2);
  color: var(--mf-black);
  letter-spacing: var(--mf-tracking);
}

.mf-why__cta {
  margin-top: clamp(18px, 1.563vw, 30px);
}

/* Image panel — 708 x 839, radius 30 */
.mf-why__figure {
    position: relative;
    margin: clamp(16px, 1.458vw, 28px) 0 0;
    overflow: hidden;
    aspect-ratio: 708 / 839;
    border-radius: 30px;
}
.mf-why {
    box-sizing: border-box;
    font-family: var(--mf-font-display);
    color: var(--mf-black);
    background-color: var(--mf-surface);
    max-width: 1400px;
    letter-spacing: var(--mf-tracking);
    margin: 0 auto;
    padding: 50px 0;
}
/* Figma crop: top -24.31%, height 142.91%, left -0.29%, width 100.29% */
.mf-why__photo {
    width: 100%;
    max-width: none;
    object-fit: cover;
}
.mf-btn--glass {
    gap: 10px;
    padding: 7px 60px 7px 30px;
    font-family: var(--mf-font-display);
    font-size: var(--mf-fs-know);
    font-weight: 400;
    line-height: var(--mf-lh-know);
    color: rgba(255, 255, 255, 0.9);
    border: 2px solid #fff;
    border-radius: 49px;
    box-shadow: var(--mf-shadow-glass);
    backdrop-filter: blur(35px);
    -webkit-backdrop-filter: blur(35px);
    backdrop-filter: blur(70px) box-shadow: -20px 22px 70px 0px #00000040;
    border: 2px solid;
    background: linear-gradient(169.7deg, rgba(255, 255, 255, 0.135) 7.69%, rgba(255, 255, 255, 0) 100.75%);
}
.mf-why__scrim {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    123.26deg,
    rgba(0, 0, 0, 0.4) 16.763%,
    rgba(102, 102, 102, 0) 62.791%
  );
  pointer-events: none;
}
.mf-next-btn__icon img.arrow {
    width: 31px;
    height: 31px;
    position: absolute;
    top: 5px;
    right: 5px;
}
.why-icon {
    position: absolute;
    width: 41px;
    height: 41px;
    right: 6px;
    top: 10px;
    flex: none;
    background-color: #fff;
    border-radius: 100px;
}
/* Know More — glass pill, 243 x 58, inset 25 top / 21 right of the panel */
.mf-why__more {
  position: absolute;
  top: clamp(14px, 1.302vw, 25px);
  right: clamp(12px, 1.094vw, 21px);
  z-index: 2;
}

/* 4. Right column — lead paragraph, then the four rows -------------------- */
.mf-why__lead {
    max-width: 898px;
    margin: 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    color: var(--mf-grey-600);
}

.mf-why__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Figma's four rules sit at a uniform 228px pitch (516 / 744 / 972 / 1200)
   while the row content drifts by a few px. Fixed 228px rows with the
   content vertically centred reproduces rows 2-4 to within ~3px. */
.mf-why__item {
  display: flex;
  gap: clamp(14px, 1.771vw, 34px);
  align-items: center;
  min-height: clamp(120px, 11.875vw, 228px);
  border-bottom: 1px solid var(--mf-hairline-soft);
}

/* Icon — 84px circle, glyph sized per row */
.mf-why__icon {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: clamp(52px, 4.375vw, 84px);
  height: clamp(52px, 4.375vw, 84px);
  background-color: var(--mf-teal);
  border-radius: 50%;
}

.mf-why__glyph {
  width: 57.1%;
  height: 57.1%;
  object-fit: contain;
}

/* Figma sizes each glyph differently inside the same 84px circle:
   51 / 48 / 40 / 42 px => 60.7% / 57.1% / 47.6% / 50% */
.mf-why__item:nth-child(1) .mf-why__glyph { width: 60.7%; height: 60.7%; }
.mf-why__item:nth-child(2) .mf-why__glyph { width: 57.1%; height: 57.1%; }
.mf-why__item:nth-child(3) .mf-why__glyph { width: 47.6%; height: 47.6%; }
.mf-why__item:nth-child(4) .mf-why__glyph { width: 50%;   height: 50%;   }

.mf-why__item-title {
    max-width: 568px;
    margin: 0;
    font-family: var(--mf-font-display);
    font-size: 40px;
    font-weight: 400;
    line-height: 52px;
    color: var(--mf-black);
    letter-spacing: var(--mf-tracking);
}

.mf-why__item-text {
    max-width: 757px;
    margin: clamp(4px, 0.313vw, 6px) 0 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    color: var(--mf-grey-600);
}

/* 5. Responsive ----------------------------------------------------------- */

/* Stack, and reorder so the lead paragraph follows the heading */
@media (max-width: 1024px) {
  .mf-why__grid {
    display: flex;
    flex-direction: column;
    row-gap: clamp(20px, 3vw, 30px);
  }

  /* promote the column children so `order` can interleave them */
  .mf-why__col {
    display: contents;
  }

  /* width:100% is required — the figure's only child is absolutely
     positioned, so with aspect-ratio set it has no intrinsic width to
     stretch from and collapses to 0 as a flex item */
  .mf-why__figure {
    order: 4;
    width: 100%;
    margin-top: 0;
    aspect-ratio: 4 / 3;
  }

  .mf-why__list { order: 5; }

  .mf-why__item {
    min-height: 0;
    padding-block: clamp(20px, 3.5vw, 32px);
  }

  .mf-why__item:first-child {
    padding-top: 0;
  }
}

/* Icon and copy stack inside each row */
@media (max-width: 560px) {
  .mf-why__item {
    flex-direction: column;
    gap: clamp(12px, 3vw, 18px);
    align-items: flex-start;
  }

  .mf-why__figure {
    aspect-ratio: 3 / 4;
  }

  /* the glass pill overlaps the photo too tightly at this size */
  .mf-why__more {
    top: 12px;
    right: 12px;
  }
}

/* 6. Forced colours ------------------------------------------------------- */
@media (forced-colors: active) {
  .mf-why__icon {
    border: 1px solid CanvasText;
  }
}
.why-choose-btn {
    margin-top: 18px;
}
.mf-process {
  box-sizing: border-box;
  padding-block: clamp(36px, 3.646vw, 70px) clamp(40px, 9.01vw, 160px);
  font-family: var(--mf-font-display);
  color: var(--mf-black);
 background: linear-gradient(99.22deg, #FFFFFF 2.45%, #B4EDEA 63.88%, #6CDBD5 123%);
  letter-spacing: var(--mf-tracking);
}

.mf-process *,
.mf-process *::before,
.mf-process *::after {
  box-sizing: border-box;
}

.mf-process__container {
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
  padding-inline: var(--mf-gutter);
}

/* --------------------------------------------------------------------------
   2. Two-column body
   Figma: copy column 609 (H2 capped at 568), step cluster 1157.
   The cluster is pinned to its exact 1157px so the staggered card geometry
   is pixel-correct; the copy column takes the remainder.
   -------------------------------------------------------------------------- */
.mf-process__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(320px, 60.26vw, 1157px);
  column-gap: clamp(24px, 2.135vw, 41px);
  align-items: stretch;
}

/* The copy column stretches to the cluster's height so the CTA can be
   anchored 39px above its bottom edge, exactly as Figma places it. That
   also decouples the CTA from the lead paragraph's length — see ASSETS.md
   for the duplicated sentence in Figma's copy. */
.mf-process__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* --------------------------------------------------------------------------
   3. Copy column
   -------------------------------------------------------------------------- */
.mf-process__title {
  max-width: 568px;
  margin: clamp(16px, 1.51vw, 29px) 0 0;
  font-family: var(--mf-font-display);
  font-size: var(--mf-fs-h2);          /* 45 / 57 / -1.35 */
  font-weight: 400;
  line-height: var(--mf-lh-h2);
  color: var(--mf-black);
  letter-spacing: var(--mf-tracking);
}

.mf-process__lead {
  max-width: 508px;
  margin: clamp(14px, 1.51vw, 29px) 0 0;
  font-size: 20px;        /* 24 / 39 / -0.72 */
  font-weight: 400;
  line-height: var(--mf-lh-lead);
  color: var(--mf-grey-600);
}
.mf-glass {
    border-radius: 49px;
    box-shadow: var(--mf-shadow-glass);
    backdrop-filter: blur(35px);
    -webkit-backdrop-filter: blur(35px);
    border: 2px solid;
    background: linear-gradient(169.7deg, rgba(255, 255, 255, 0.135) 7.69%, rgba(255, 255, 255, 0) 100.75%);
}
.mf-process__cta {
  margin-top: auto;
  margin-bottom: clamp(0px, 2.031vw, 39px);
}

/* --------------------------------------------------------------------------
   4. Step cluster
   Three cards staggered inside a 1157 x 600 box. They do not actually
   overlap (card 1 ends at 1153, card 2 starts at 1171; card 2 ends at 1501,
   card 3 starts at 1520) — the effect is purely vertical offset, so no
   z-index juggling is needed. Absolute positioning is right here: this is a
   fixed composition, not a reflowable layout, and every offset is a
   percentage of the box so it scales as one piece.
   -------------------------------------------------------------------------- */
.mf-process__steps {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  aspect-ratio: 1157 / 600;
}

.mf-process__step {
  position: absolute;
}

/* card 1 — 460 x 487 at 0,0 of the box */
.mf-process__step--1 {
  top: 0;
  left: 0;
  width: 39.758%;
}

/* card 2 — 330 x 392 at 478,208 */
.mf-process__step--2 {
  top: 34.667%;
  left: 41.314%;
  width: 28.522%;
}

/* card 3 — 330 x 392 at 827,121 */
.mf-process__step--3 {
  top: 20.167%;
  left: 71.477%;
  width: 28.522%;
}

/* ---- The card itself ---------------------------------------------------- */
.mf-process__card {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--mf-radius-panel);   /* 30 @1920 */
}

.mf-process__step--1 .mf-process__card { aspect-ratio: 460 / 487; }
.mf-process__step--2 .mf-process__card,
.mf-process__step--3 .mf-process__card { aspect-ratio: 330 / 392; }

.mf-process__photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
/* Each card has its own scrim — note the differing alphas and stop lists */
.mf-process__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mf-process__step--1 .mf-process__scrim {
  background-image: linear-gradient(
    137.1deg,
    rgba(0, 0, 0, 0.53) 19.635%,
    rgba(0, 0, 0, 0) 50.271%,
    rgba(0, 0, 0, 0.201) 88.873%
  );
}

.mf-process__step--2 .mf-process__scrim {
  background-image: linear-gradient(
    133.8deg,
    rgba(0, 0, 0, 0.53) 19.635%,
    rgba(102, 102, 102, 0) 88.873%
  );
}

.mf-process__step--3 .mf-process__scrim {
  background-image: linear-gradient(
    133.8deg,
    rgba(0, 0, 0, 0.185) 19.635%,
    rgba(102, 102, 102, 0) 88.873%
  );
}

/* ---- Step numeral — 66/50 Hind Colombo, white, at 20,22 of each card --- */
.mf-process__num {
  position: absolute;
  top: clamp(10px, 1.146vw, 22px);
  left: clamp(10px, 1.042vw, 20px);
  z-index: 2;
  font-family: var(--mf-font-numeral);
  font-size: var(--mf-fs-step);
  font-weight: 400;
  line-height: var(--mf-lh-step);
  color: #fff;
  /* the only text in the design without the -0.03em tracking */
  letter-spacing: normal;
}

/* ---- Glass label pill --------------------------------------------------
   Cards 2 and 3 stretch the pill to 300 (= 330 - 15 - 15) with the text
   centred. Card 1's pill is content-width (261) and right-aligned instead.
   ------------------------------------------------------------------------ */
.mf-process__pill {
  position: absolute;
  right: 4.546%;
  bottom: 4.082%;
  left: 4.546%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(38px, 2.76vw, 53px);
  margin: 0;
  padding-inline: clamp(10px, 0.729vw, 14px);
  font-family: var(--mf-font-ui);
  font-size: var(--mf-fs-pill);        /* 20 / 48 / -0.6 */
  font-weight: 400;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  border-radius: 124px;
}

.mf-process__pill--inline {
  right: 3.478%;
  bottom: 3.696%;
  left: auto;
  width: auto;
  padding-inline: clamp(16px, 1.51vw, 29px);
}

/* ---- Note under card 1 -------------------------------------------------- */
.mf-process__note {
  margin: clamp(6px, 0.417vw, 8px) 0 0;
  font-size: 20px;        /* 24 / 35 / -0.72 */
  font-weight: 400;
  line-height: var(--mf-lh-note);
  color: var(--mf-grey-600);
}

/* --------------------------------------------------------------------------
   5. Responsive
   The stagger depends on the cluster's 1157 x 600 aspect, so below 1025px
   the cards leave the absolute composition and become a plain grid.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .mf-process__grid {
    display: flex;
    flex-direction: column;
    row-gap: clamp(24px, 4vw, 40px);
  }

  .mf-process__cta {
    margin-top: clamp(18px, 3vw, 28px);
    margin-bottom: 0;
  }

  .mf-process__title,
  .mf-process__lead {
    max-width: 62ch;
  }

  .mf-process__steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(14px, 2.5vw, 24px);
    aspect-ratio: auto;
  }

  /* out of the stagger and into the grid */
  .mf-process__step,
  .mf-process__step--1,
  .mf-process__step--2,
  .mf-process__step--3 {
    position: static;
    width: auto;
  }

  /* one shared aspect so the row reads evenly */
  .mf-process__step--1 .mf-process__card,
  .mf-process__step--2 .mf-process__card,
  .mf-process__step--3 .mf-process__card {
    aspect-ratio: 330 / 392;
  }

  /* the per-card crops were tuned to the desktop frames; fall back to the
     focal points instead */
  .mf-process__step--1 .mf-process__photo,
  .mf-process__step--2 .mf-process__photo,
  .mf-process__step--3 .mf-process__photo {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .mf-process__pill,
  .mf-process__pill--inline {
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    padding-inline: clamp(8px, 1.5vw, 14px);
  }
}

/* Single column ----------------------------------------------------------- */
@media (max-width: 700px) {
  .mf-process__steps {
    grid-template-columns: 1fr;
    gap: clamp(18px, 4vw, 28px);
  }

  .mf-process__step--1 .mf-process__card,
  .mf-process__step--2 .mf-process__card,
  .mf-process__step--3 .mf-process__card {
    aspect-ratio: 16 / 11;
  }
}

/* --------------------------------------------------------------------------
   6. Forced colours
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .mf-process__pill {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }
}
/* Desktop expanding-card interaction */
@media (min-width: 1025px) {
  .mf-process__steps[data-mf-active] {
    --mf-process-speed: 550ms;
    --mf-process-ease: cubic-bezier(0.22, 1, 0.36, 1);
  }

  .mf-process__steps[data-mf-active] .mf-process__step {
    position: absolute;
    width: 28.522%;
    height: 65.333%;

    transition:
      width var(--mf-process-speed) var(--mf-process-ease),
      height var(--mf-process-speed) var(--mf-process-ease),
      left var(--mf-process-speed) var(--mf-process-ease),
      top var(--mf-process-speed) var(--mf-process-ease);
  }

  .mf-process__steps[data-mf-active] .mf-process__card {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: var(--mf-radius-panel, 30px);
  }

  .mf-process__steps[data-mf-active] .mf-process__photo {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Descriptions sit beneath their respective cards. */
  .mf-process__steps[data-mf-active] .mf-process__note {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin: 10px 0 0;

    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    pointer-events: none;

    transition:
      opacity 180ms ease,
      transform 180ms ease,
      visibility 180ms ease;
  }

  .mf-process__steps[data-mf-active]
  .mf-process__step.is-active .mf-process__note {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);

    transition-delay: 250ms;
    transition-duration: 300ms;
  }

  /* Active card dimensions */
  .mf-process__steps[data-mf-active]
  .mf-process__step.is-active {
    width: 39.758%;
    height: 81.167%;
  }

  /* STATE 1: first card expanded */
  .mf-process__steps[data-mf-active="1"] .mf-process__step--1 {
    top: 0;
    left: 0;
  }

  .mf-process__steps[data-mf-active="1"] .mf-process__step--2 {
    top: 34.667%;
    left: 41.314%;
  }

  .mf-process__steps[data-mf-active="1"] .mf-process__step--3 {
    top: 20.167%;
    left: 71.477%;
  }

  /* STATE 2: middle card expanded */
  .mf-process__steps[data-mf-active="2"] .mf-process__step--1 {
    top: 0;
    left: 0;
  }

  .mf-process__steps[data-mf-active="2"] .mf-process__step--2 {
    top: 0;
    left: 30.078%;
  }

  .mf-process__steps[data-mf-active="2"] .mf-process__step--3 {
    top: 20.167%;
    left: 71.477%;
  }

  /* STATE 3: final card expanded */
  .mf-process__steps[data-mf-active="3"] .mf-process__step--1 {
    top: 0;
    left: 0;
  }

  .mf-process__steps[data-mf-active="3"] .mf-process__step--2 {
    top: 16%;
    left: 30.078%;
  }

  .mf-process__steps[data-mf-active="3"] .mf-process__step--3 {
    top: 4%;
    left: 60.242%;
  }

  /* Consistent label position as cards change width */
  .mf-process__steps[data-mf-active] .mf-process__pill {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    padding: 8px 10px;
    font-size: clamp(12px, 1.042vw, 20px);
  }
}

/* Keyboard focus */
.mf-process__card:focus-visible {
  outline: 3px solid #004E4A;
  outline-offset: 5px;
}

/* Tablet/mobile: retain your grid and show all descriptions. */
@media (max-width: 1024px) {
  .mf-process__steps[data-mf-active] .mf-process__note {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    margin-top: 12px;
  }
}

/* Respect reduced-motion settings */
@media (prefers-reduced-motion: reduce) {
  .mf-process__steps[data-mf-active] .mf-process__step,
  .mf-process__steps[data-mf-active] .mf-process__note {
    transition: none !important;
  }
}
/* ==========================================================================
   Mobile Framing — Our Services section
   Figma: file FV7LRaWs3NuDRhlzVrOeRO, node 1:5350 ("Frame 2095585402")
          1925 x 1912; instances "Service1" (y357) and "Service2" (y1133),
          each 743 tall.
   Requires tokens.css and components.css.
   ========================================================================== */

.mf-services {
  box-sizing: border-box;
  padding-block: clamp(28px, 2.188vw, 42px) clamp(24px, 1.875vw, 36px);
  font-family: var(--mf-font-display);
  color: var(--mf-black);
 background: linear-gradient(99.22deg, #FFFFFF 2.45%, #B4EDEA 63.88%, #6CDBD5 123%);
  letter-spacing: var(--mf-tracking);
}

.mf-services *,
.mf-services *::before,
.mf-services *::after {
  box-sizing: border-box;
}

.mf-services__container {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: var(--mf-gutter);
}

/* --------------------------------------------------------------------------
   1. Header band
   Figma: eyebrow 84,42 · H2 84,118 (w540) · lead 1097,108 (w773)
          Get A Quote 84,262
   -------------------------------------------------------------------------- */
.mf-services__head {
  display: grid;
  /* 540 : 773 with a 473 gap — all container-relative */
  grid-template-columns: minmax(0, 540fr) minmax(0, 773fr);
      column-gap: 20%;
  align-items: center;
}

.mf-services__title {
  max-width: 540px;
  margin: clamp(12px, 1.146vw, 22px) 0 0;   /* 118 - (42 + 54) = 22 */
  font-family: var(--mf-font-display);
  font-size: var(--mf-fs-h2);               /* 45 / 57 / -1.35 */
  font-weight: 400;
  line-height: var(--mf-lh-h2);
  color: var(--mf-black);
  letter-spacing: var(--mf-tracking);
	padding-bottom: 20px;
}

.mf-services__cta {
  margin-top: clamp(18px, 1.563vw, 30px);   /* 262 - 232 */
  /* the only button in the design carrying a drop shadow */
  box-shadow: var(--mf-shadow-btn);
}

.mf-services__lead {
  max-width: 773px;
  margin: clamp(0px, 3.438vw, 66px) 0 0;    /* lead y108 vs header top y42 */
  font-size: var(--mf-fs-lead);             /* 24 / 39 / -0.72 */
  font-weight: 400;
  line-height: var(--mf-lh-lead);
  color: var(--mf-grey-600);
}

/* --------------------------------------------------------------------------
   2. Card rows
   Five cards per row: one expanded (527) and four collapsed (290), 20px
   apart, 743 tall — 527 + 4x290 + 4x20 = 1767, the content width.

   Every card's artwork is built at the EXPANDED width and clipped when the
   card is narrow. Reproduced by giving the inner box a fixed aspect ratio
   of 527/743 and a height of 100%: because every card in a row is the same
   height, every inner box is the same width, whatever the card's own width.
   That is what makes the photo hold still while the window widens.
   -------------------------------------------------------------------------- */
.mf-services__row {
  display: flex;
  gap: 1.132%;                       /* 20/1767 */
  margin-top: clamp(20px, 2.135vw, 41px);
  list-style: none;
  padding: 0;
  /* The ROW owns the height — 1767 x 743 in Figma. Cards then stretch to
     100% of it, so expanding a card changes its WIDTH ONLY. Putting
     aspect-ratio on the card instead makes its height follow its width,
     which is the bug this replaces. */
  aspect-ratio: 1767 / 743;
}

.mf-services__row + .mf-services__row {
  margin-top: clamp(16px, 1.719vw, 33px);   /* 1133 - 1100 */
}

.mf-services__card {
  position: relative;
  /* the card IS the flex item — the anchor inside it fills the box */
  flex: 0 1 16.412%;                 /* 290/1767 collapsed */
  height: 100%;                      /* height comes from the row, not the width */
  overflow: hidden;
  background-color: var(--mf-surface);
  border-radius: var(--mf-radius-thumb);    /* 20 @1920 */
  transition: flex-basis 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              flex-grow 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.mf-services__link {
  position: absolute;
  inset: 0;
  display: block;
  text-decoration: none;
}

/* the expanded card takes the row's remainder — width only */
.mf-services__card--active {
  flex: 1 1 29.825%;                 /* 527/1767 */
}

/* Hover or keyboard focus moves the expansion to that card. Pure CSS: the
   row collapses everything, then the target re-expands. */
.mf-services__row:hover .mf-services__card,
.mf-services__row:focus-within .mf-services__card {
  flex: 0 1 16.412%;
}

.mf-services__row .mf-services__card:hover,
.mf-services__row .mf-services__card:focus-within {
  flex: 1 1 29.825%;
}

/* ---- The 527-wide inner box ------------------------------------------- */
.mf-services__inner {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  aspect-ratio: 527 / 743;
  pointer-events: none;
}

/* ---- Photo — each card carries its own crop, as % of the inner box ---- */
.mf-services__photo {
  position: absolute;
  width: var(--mf-crop-w, 100%);
  max-width: none;
  object-fit: cover;
}

/* ---- Bottom scrim — 527 x 262 flush to the card's bottom edge ---------- */
.mf-services__scrim {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--mf-scrim-h, 35.263%);       /* 262/743 */
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 8.323%,
    rgba(0, 0, 0, var(--mf-scrim-end, 0.76)) 103.56%
  );
  border-radius: 0 0 var(--mf-radius-thumb) var(--mf-radius-thumb);
}

/* ---- Title — anchored to the CARD, so it wraps inside a narrow card ---- */
.mf-services__name {
  position: absolute;
  right: clamp(10px, 1.042vw, 20px);
  bottom: 4.307%;                    /* 32/743 */
  left: clamp(10px, 1.042vw, 20px);
  z-index: 2;
  margin: 0;
  font-family: var(--mf-font-card);
  font-size: var(--mf-fs-service);   /* 34 / normal / -1.02 */
  font-weight: 400;
  line-height: 1.25;
  color: #fff;
  letter-spacing: var(--mf-tracking);
}

/* ---- Arrow badge — 77px, inset 8px from the card's top-right ---------- */
.mf-services__go {
    position: absolute;
    top: 2.077%;
    right: 8px;
    z-index: 2;
    padding: 15px;
    width: 61px;
    aspect-ratio: 1;
    height: 61px;
    background-color: #fff;
    border-radius: 100px;
}

.mf-services__go img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   3. Per-card artwork
   Figma crops, converted to percentages of the 527 x 743 inner box. The
   scrim alpha and height vary per card — those are Figma's values, not a
   simplification.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   4. Responsive
   The expand-on-hover row needs width to work in, and hover is not a thing
   on touch, so below 1025px the rows become a plain grid of equal cards.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .mf-services__head {
    grid-template-columns: 1fr;
    row-gap: clamp(12px, 2vw, 20px);
  }

  .mf-services__title,
  .mf-services__lead {
    max-width: 62ch;
  }

  .mf-services__lead {
    margin-top: 0;
  }

  .mf-services__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(12px, 2vw, 20px);
    /* stacked, the cards carry their own ratio instead */
    aspect-ratio: auto;
  }

  /* equal cards — no expansion, so no hover states either */
  .mf-services__card,
  .mf-services__card--active,
  .mf-services__row:hover .mf-services__card,
  .mf-services__row:focus-within .mf-services__card,
  .mf-services__row .mf-services__card:hover,
  .mf-services__row .mf-services__card:focus-within {
    flex: none;
    height: auto;
    aspect-ratio: 290 / 420;
    transition: transform 0.25s ease;
  }

  /* the inner box now matches the card, so the crops apply to the full width */
  .mf-services__inner {
    width: 100%;
    aspect-ratio: auto;
    height: 100%;
  }

  .mf-services__card:hover,
  .mf-services__card:focus-within {
    transform: translateY(-4px);
  }
}

@media (max-width: 700px) {
  .mf-services__row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 420px) {
  .mf-services__row {
    grid-template-columns: 1fr;
  }

  .mf-services__card,
  .mf-services__card--active {
    aspect-ratio: 16 / 11;
  }
}

/* --------------------------------------------------------------------------
   5. Motion & forced colours
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mf-services__card {
    transition: none;
  }
}

@media (forced-colors: active) {
  .mf-services__card {
    border: 1px solid CanvasText;
  }
}

/* ==========================================================================
   Mobile Framing — Instagram feed section ("Follow Our Journey")
   Figma: file FV7LRaWs3NuDRhlzVrOeRO, node 1:3192 — 1928 x 822
   The three posts are autoplaying muted videos, not stills.
   Requires tokens.css and components.css.
   ========================================================================== */

.mf-feed {
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    padding: clamp(32px, 2.917vw, 56px) 0 clamp(30px, 3.021vw, 58px);
    font-family: var(--mf-font-display);
    color: var(--mf-black);
    background-image: url(/wp-content/uploads/2026/09/insta-bg.png);
    letter-spacing: var(--mf-tracking);
    box-shadow: var(--mf-shadow-section-top);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
img.icon-play {
    left: 12px;
    position: absolute;
    top: 7px;
    right: 0;
}

.mf-feed *,
.mf-feed *::before,
.mf-feed *::after {
  box-sizing: border-box;
}

/* Decorative — 350px Instagram marks at 10%, bleeding off both edges.
   Figma: (-115, -58) and (1645, 432) of 1928 x 822. */
.mf-feed__mark {
  position: absolute;
  width: 18.153%;                    /* 350/1928 */
  opacity: 0.1;
}

.mf-feed__mark:nth-of-type(1) { top: -7.056%; left: -5.965%; }
.mf-feed__mark:nth-of-type(2) { top: 52.555%; right: -3.475%; }

/* --------------------------------------------------------------------------
   Layout — copy left, the staggered post cluster right
   Figma: copy 60 -> 575 · cluster 615 -> 1847 (1232 wide)
   -------------------------------------------------------------------------- */
.mf-feed__container {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 68.827%;   /* 1232/1790 */
  align-items: start;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 var(--mf-gutter);
}

/* ---- Copy ---------------------------------------------------------------- */
.mf-feed__title {
  max-width: 430px;
  margin: clamp(14px, 1.51vw, 29px) 0 0;
  font-size: var(--mf-fs-h2);               /* 45 / 57 / -1.35 */
  font-weight: 400;
  line-height: var(--mf-lh-h2);
  letter-spacing: var(--mf-tracking);
}

.mf-feed__lead {
  max-width: 508px;
  margin: clamp(14px, 1.51vw, 29px) 0 0;
  font-size: var(--mf-fs-lead);             /* 24 / 39 / -0.72 */
  line-height: var(--mf-lh-lead);
  color: var(--mf-grey-600);   
	padding-bottom: 38px;
}

.mf-feed__cta {
  margin-top: clamp(24px, 5.26vw, 101px);
}

/* --------------------------------------------------------------------------
   Post cluster
   Three 395 x 581 cards in a 1232 x 705 box; the middle one sits 124 lower.
   -------------------------------------------------------------------------- */
.mf-feed__posts {
  position: relative;
  margin-top: clamp(0px, 0.156vw, 3px);     /* Figma starts them at y59 */
  aspect-ratio: 1232 / 705;
}

.mf-feed__post {
  position: absolute;
  top: 0;
  display: block;
  width: 32.062%;                           /* 395/1232 */
  aspect-ratio: 395 / 581;
  overflow: hidden;
  background-color: var(--mf-surface);
  border-radius: var(--mf-radius-panel);    /* 30 @1920 */
  box-shadow: var(--mf-shadow-post);
}

.mf-feed__post:nth-child(1) { left: 0; }
.mf-feed__post:nth-child(2) { left: 33.929%; top: 17.589%; }   /* 418, 124 */
.mf-feed__post:nth-child(3) { left: 67.857%; }                 /* 836 */

.mf-feed__post video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Play badge — 43.876px white square, radius 11, inset 24/25 ---------
   Sized off HEIGHT (43.876/581) + aspect-ratio, so it stays square. The
   icon is a background, not an <img>: percentage padding would resolve
   against the card's width, not the badge's own box. */
.mf-feed__play {
  position: absolute;
  top: 4.303%;                              /* 25/581 */
  right: 6.101%;                            /* 24.1/395 */
  height: 7.552%;                           /* 43.876/581 */
  aspect-ratio: 1;
  background-color: var(--mf-surface);
  background-image: url("../icons/icon-play.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 38% 48%;                 /* 16.64 x 21.18 of 43.876 */
  border-radius: var(--mf-radius-badge);
}

/* --------------------------------------------------------------------------
   Responsive — the stagger needs the 1232 x 705 box, so below 1025px the
   posts become a plain three-up row, then scroll on narrow screens.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .mf-feed__container {
    grid-template-columns: 1fr;
    row-gap: clamp(24px, 4vw, 40px);
  }

  .mf-feed__title,
  .mf-feed__lead {
    max-width: 62ch;
  }

  .mf-feed__cta {
    margin-top: clamp(20px, 3vw, 28px);
  }

  .mf-feed__posts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(14px, 2vw, 23px);
    aspect-ratio: auto;
  }

  /* relative, not static — the play badge is absolute inside the card */
  .mf-feed__post,
  .mf-feed__post:nth-child(2) {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
  }

  .mf-feed__mark {
    display: none;
  }
}

@media (max-width: 640px) {
  .mf-feed__posts {
    display: flex;
    gap: clamp(12px, 3vw, 18px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .mf-feed__posts::-webkit-scrollbar {
    display: none;
  }

  .mf-feed__post {
    flex: 0 0 72%;
    scroll-snap-align: start;
  }
}
img.insta.icon {
    width: 100%;
    padding: 8px;
}
/* ==========================================================================
   Mobile Framing — Expertise / team section ("Meet the Experts")
   Figma: file FV7LRaWs3NuDRhlzVrOeRO, node 1:3289 ("Expertise")
          1940 x 976 · component 1:1184
   Requires tokens.css and components.css.
   ========================================================================== */

.mf-team {
    box-sizing: border-box;
    padding: clamp(20px, 1.719vw, 33px) 0 clamp(24px, 3.594vw, 69px);
    overflow: hidden;
    font-family: var(--mf-font-display);
    letter-spacing: var(--mf-tracking);
    background: linear-gradient(99.22deg, #FFFFFF 2.45%, #B4EDEA 63.88%, #6CDBD5 123%);
}


.mf-team *,
.mf-team *::before,
.mf-team *::after {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   1. Header band
   Figma: eyebrow 76,33 · H2 76,100 (w494) · lead 956,90 (w875)
          Get A Quote 79,236 · nav 1599,196
   -------------------------------------------------------------------------- */
.mf-team__head {
  display: grid;
  /* Figma's 76 / 570 / 956 columns, normalised onto the shared 1790 content
     box: 503.8 track, 393.7 gap. Percentages of that box, so the lead's left
     edge lands where Figma puts it without a single viewport unit. */
  grid-template-columns: 28.146% minmax(0, 1fr);
  column-gap: 21.994%;
  align-items: start;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 var(--mf-gutter);
}

.mf-team__title {
  max-width: 494px;
  margin: clamp(8px, 0.677vw, 13px) 0 0;    /* 100 - (33 + 54) = 13 */
  font-size: var(--mf-fs-h2);               /* 45 / 57 / -1.35 */
  font-weight: 400;
  line-height: var(--mf-lh-h2);
  letter-spacing: var(--mf-tracking);
	padding-bottom: 15px;
}

.mf-team__cta {
  margin-top: clamp(14px, 1.146vw, 22px);   /* 236 - 214 */
}

.mf-team__lead {
  max-width: 875px;
  margin: clamp(0px, 2.969vw, 57px) 0 0;    /* lead y90 vs head top y33 */
  font-size: var(--mf-fs-lead);             /* 24 / 39 / -0.72 */
  line-height: var(--mf-lh-lead);
  color: var(--mf-grey-600);
}

/* ---- Arrows -------------------------------------------------------------
   Two 70px circles, 14px apart. Figma reports the group as 182 x 98, but
   that box carries a 14px effect margin on every side — the drawn circles
   are 70px on an 84px pitch, the same control as the products carousel.
   Right edge sits 64px inside the copy column's right edge (not flush).
   -------------------------------------------------------------------------- */
.mf-team__nav {
  display: flex;
  gap: clamp(6px, 0.729vw, 14px);
  justify-content: flex-end;
  /* 42 below the lead (Figma: lead ends 168, circles start 210) and 64 in
     from the copy column's right edge — the nav is NOT flush, that inset is
     Figma's. NOTE: this gap is measured from the lead, so a lead that wraps
     to three lines instead of two carries the nav down with it. See
     ASSETS.md on the font stack. */
  margin: clamp(16px, 2.188vw, 42px) 7.171% 0 0;   /* 64/892.5 of this track */
}

.mf-team__arrow {
  display: grid;
  place-items: center;
  /* 70/30 of the counter type — identical to .mf-products__arrow */
  font-size: var(--mf-fs-counter);
  width: 2.333em;
  height: 2.333em;
  padding: 0;
  color: var(--mf-grey-800);
  background: none;
  border: 1.5px solid var(--mf-grey-400);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease,
              transform 0.2s ease;
}

.mf-team__arrow img {
  width: 51.4%;                      /* 36 / 70 */
  height: 51.4%;
  object-fit: contain;
}

.mf-team__arrow--prev img {
  transform: rotate(180deg);
}

.mf-team__arrow:hover:not(:disabled),
.mf-team__arrow:focus-visible {
  background-color: var(--mf-teal);
  border-color: var(--mf-teal);
  transform: translateY(-2px);
}

.mf-team__arrow:disabled {
  opacity: 0.4;
  cursor: default;
}

/* --------------------------------------------------------------------------
   2. Card row
   Figma: track y323, cards 404 x 584 on a 435 pitch (31 gap), radius 30.
   The row starts at the content's left edge and runs off the right edge of
   the section — Figma masks the left gutter with a white rect; here the
   left padding does that job and `overflow: hidden` on the section clips
   the right.

   A scrolling row, not a transform carousel: it works with no JS at all
   (touch and trackpad already scroll it) and the arrows just nudge it.
   -------------------------------------------------------------------------- */
/* The scroller is full-bleed and owns the scrolling; its left padding lines
   the first card up with the header's content edge. */
.mf-team__scroller {
  /* `overflow-x: auto` makes overflow-y auto too, which would crop each
     card's 4px/15px/23px shadow — so the box is 38px taller than the cards
     and that 38px is pulled straight back off with a negative margin. The
     shadow renders; the section's height is unchanged. */
  margin: clamp(16px, 1.719vw, 33px) 0 -38px;   /* 323 - 290 */
  padding: 0 0 38px
           calc(max((100% - 1920px) / 2, 0px) + var(--mf-gutter));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
	
}

.mf-team__scroller::-webkit-scrollbar {
  display: none;
}

/* The row is exactly the 1790 content box, so the card and gap percentages
   below resolve against the same width every other section uses. Cards are
   `flex: 0 0`, so once there are more than four they overflow this box on
   purpose and the scroller scrolls. Sizing them off the scroller instead
   would measure against 1855 and come out 15px narrow. */
.mf-team__row {
  display: flex;
  gap: 1.7318%;                      /* 31/1790 */
  width: min(calc(100% - var(--mf-gutter)), 1790px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mf-team__card {
    position: relative;
    flex: 0 0 22.5698%;
    aspect-ratio: 404 / 584;
    overflow: hidden;
    background-color: #EEEEEE;
    border-radius: var(--mf-radius-panel);
    box-shadow: var(--mf-shadow-team);
    scroll-snap-align: start;
}

/* ---- Photo — each card carries its own crop, as % of the card ---------- */
.mf-team__photo {
    position: absolute;
    max-width: none;
    object-fit: contain;
    width: 100%;
}

/* ---- Name plate — 404 x 105 flush to the card's bottom ----------------- */
.mf-team__plate {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 2.475% 6% 4.208%;
    text-align: center;
    background: linear-gradient(5.24deg, #010515 4.38%, rgba(4, 11, 44, 0) 152.66%);
}
.mf-team__name {
  margin: 0;
  font-size: var(--mf-fs-name);      /* 37 / normal / -1.11 */
  font-weight: 400;
  line-height: 1.162;                /* 43/37 — Figma's measured text box */
  color: #fff;
  letter-spacing: var(--mf-tracking);
}

.mf-team__role {
  margin: clamp(2px, 0.26vw, 5px) 0 0;
  font-size: var(--mf-fs-role);      /* 26 / normal / -0.78 */
  line-height: 1.154;                /* 30/26 */
  color: #fff;
  opacity: 0.67;
  letter-spacing: var(--mf-tracking);
}

/* --------------------------------------------------------------------------
   4. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .mf-team__head {
    grid-template-columns: 1fr;
    row-gap: clamp(12px, 2vw, 20px);
  }

  .mf-team__title,
  .mf-team__lead {
    max-width: 62ch;
  }

  .mf-team__lead {
    margin-top: 0;
  }

  .mf-team__nav {
    justify-content: flex-start;
	  display:flex !important;
    margin: clamp(12px, 2vw, 20px) 0 0;
  }

  .mf-team__scroller {
    padding-left: var(--mf-gutter);
  }

  .mf-team__card {
    flex: 0 0 40%;
  }
}

@media (max-width: 700px) {
  .mf-team__card {
    flex: 0 0 62%;
  }
}

@media (max-width: 420px) {
  .mf-team__card {
    flex: 0 0 82%;
  }
}

/* --------------------------------------------------------------------------
   5. Motion & forced colours
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mf-team__scroller {
    scroll-behavior: auto;
  }

  .mf-team__arrow {
    transition: none;
  }
}

@media (forced-colors: active) {
  .mf-team__card,
  .mf-team__arrow {
    border: 1px solid CanvasText;
  }
}
/* Horizontal carousel */
.mf-team .mf-team__scroller {
  display: block;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.mf-team .mf-team__scroller::-webkit-scrollbar {
  display: none;
}

.mf-team .mf-team__row {
  --mf-team-gap: 24px;

  display: flex;
  flex-wrap: nowrap;
  gap: var(--mf-team-gap);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Three visible cards on desktop */
.mf-team .mf-team__row > .mf-team__card {
    position: relative;
    inset: auto;
    flex: 0 0 calc((95% - 16px) / 4);
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 0;
    scroll-snap-align: start;
}

/* Keep your existing photo and nameplate styling */
.mf-team .mf-team__photo {
  max-width: 100%;
}

/* Team photos: scale by card width and sit on the card's bottom edge, so
   source images of differing heights all show the full figure, uncropped. */
.mf-team__card .mf-team__photo {
  width: 100%;
  height: auto;
  top: auto;
  bottom: 0;
  left: 0;
  object-fit: contain;
  object-position: center bottom;
}

/* Previous button first, then Next */
.mf-team .mf-team__nav {
	display:none;
/*   display: flex; */
  align-items: center;
  gap: 12px;
}

.mf-team .mf-team__arrow--prev {
  order: 0;
}

.mf-team .mf-team__arrow--next {
  order: 1;
}

.mf-team .mf-team__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid #004E4A;
  border-radius: 50%;
  background: transparent;
  color: #004E4A;
  cursor: pointer;
  transition: background-color 200ms ease, opacity 200ms ease;
}

/* Consistent directional arrows */
.mf-team .mf-team__arrow img {
  display: none;
}

.mf-team .mf-team__arrow::before {
  display: block;
  font-family: Arial, sans-serif;
  font-size: 28px;
  line-height: 1;
}

.mf-team .mf-team__arrow--prev::before {
  content: "←";
}

.mf-team .mf-team__arrow--next::before {
  content: "→";
}

.mf-team .mf-team__arrow:hover:not(:disabled) {
  background: #6CDBD5;
}

.mf-team .mf-team__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.mf-team .mf-team__arrow:focus-visible,
.mf-team .mf-team__scroller:focus-visible {
  outline: 3px solid #008080;
  outline-offset: 4px;
}

/* Two visible cards on tablet */
@media (max-width: 1024px) {
  .mf-team .mf-team__row > .mf-team__card {
    flex-basis: calc((100% - 24px) / 2);
  }
}

/* One card with a preview of the next on mobile */
@media (max-width: 600px) {
  .mf-team .mf-team__row {
    --mf-team-gap: 16px;
  }

  .mf-team .mf-team__row > .mf-team__card {
    flex-basis: 86%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mf-team .mf-team__arrow {
    transition: none;
  }
}
.mf-faq {
  box-sizing: border-box;
  padding: clamp(36px, 3.281vw, 63px) 0 clamp(40px, 3.75vw, 72px);
  font-family: var(--mf-font-ui);            /* this section is ALL Poppins */
  color: var(--mf-black);
  background-image: var(--mf-gradient-faq);
  letter-spacing: var(--mf-tracking);
}
 
.mf-faq *,
.mf-faq *::before,
.mf-faq *::after {
  box-sizing: border-box;
}
 
/* --------------------------------------------------------------------------
   Two columns — copy left, questions right
   Figma: copy 80 (lead w508) · list 882, rules 924 wide
   -------------------------------------------------------------------------- */
.mf-faq__container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 53.53%;   /* 924/1726 */
  grid-template-areas:
    "pill pill"
    "copy list";
  column-gap: 17.03%;
  row-gap: clamp(14px, 1.51vw, 29px);   /* pill bottom 117 -> H2 top 146 */
  align-items: start;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 var(--mf-gutter);
}
 
/* The pill owns its own row, so the first question lines up with the H2
   rather than with the top of the section — and it keeps doing so whatever
   height the shared .badge-pill component happens to be. */
.mf-faq__container > .badge-pill {
  grid-area: pill;
  margin: 0;
  justify-self: start;
  max-width: 100%;   /* or it stays at max-content and overflows narrow screens */
}
.mf-faq__intro { grid-area: copy; }
.mf-faq__list  { grid-area: list; }
 
/* ---- Copy column -------------------------------------------------------- */
.mf-faq__title {
  max-width: 484px;
  margin: 0;                                 /* the grid row sets the offset */
  font-size: var(--mf-fs-h2);                /* 45 / 57 / -1.35 */
  font-weight: 500;
  line-height: var(--mf-lh-h2);
  letter-spacing: var(--mf-tracking);
}
 
.mf-faq__lead {
  max-width: 508px;
  margin: clamp(14px, 1.51vw, 29px) 0 0;     /* 289 - 260 */
  font-size: var(--mf-fs-lead);              /* 24 / 39 / -0.72 */
  font-weight: 500;
  line-height: var(--mf-lh-lead);
  color: var(--mf-grey-600);
}
 
.mf-faq__cta {
  margin-top: clamp(14px, 1.458vw, 28px);    /* 473 - 445 */
}
 
/* --------------------------------------------------------------------------
   Question list
   Figma rhythm: a closed row is 106 tall — 24 above the question, the
   question's own 57, then 25 down to its rule. The first row has no top
   padding, so its question sits level with the H2.
   -------------------------------------------------------------------------- */
.mf-faq__item {
  padding: clamp(12px, 1.25vw, 24px) 0;      /* 24 + 57 + 24 + 1px rule = 106 */
  border-bottom: 1px solid var(--mf-hairline-soft);
}
 
.mf-faq__item:first-child {
  padding-top: 0;
}
 
/* ---- Question ---------------------------------------------------------- */
.mf-faq__q {
  display: flex;
  gap: 3.789%;                       /* 35/924 */
  align-items: center;
  justify-content: space-between;
  font-size: var(--mf-fs-faq);       /* 30 / 57 / -0.9 */
  font-weight: 500;               /* 57/30 — Figma reuses the H2 leading */
  color: var(--mf-black);
  cursor: pointer;
  list-style: none;                  /* kills the default disclosure marker */
}
 
.mf-faq__q::-webkit-details-marker {
  display: none;
}
 
.mf-faq__q::marker {
  content: "";
}
 
/* ---- Toggle — 49px circle, flush to the rule's right edge --------------
   Teal when closed, grey when open. The chevron is one asset: it points
   down, and the open state rotates it 180deg. */
.mf-faq__toggle {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(34px, 2.552vw, 49px);
  height: clamp(34px, 2.552vw, 49px);
  background-color: var(--mf-teal);
  border-radius: 50%;
  transition: transform 0.25s ease, background-color 0.25s ease;
}
 
.mf-faq__toggle img {
    width: 35%;
    object-fit: contain;
}
 
.mf-faq__item[open] .mf-faq__toggle {
  /* grey read off the 1:1 render — Figma flattens both circles to SVG, so
     this is the one value here not taken from a layer */
  background-color: #d9d9d9;
  transform: rotate(180deg);
}
 
/* ---- Answer ------------------------------------------------------------- */
.mf-faq__a {
  max-width: 92%;                    /* 850/924 */
  margin: clamp(4px, 0.417vw, 8px) 0 0;
  font-size: var(--mf-fs-lead);      /* 24 / 39 / -0.72 */
  font-weight: 500;
  line-height: var(--mf-lh-lead);
  color: var(--mf-grey-600);
}
 
/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .mf-faq__container {
    grid-template-columns: 1fr;
    /* the areas MUST be redeclared — left at "pill pill" / "copy list" they
       demand a second column and the grid invents one off to the right */
    grid-template-areas:
      "pill"
      "copy"
      "list";
    row-gap: clamp(24px, 4vw, 40px);
  }
 
  .mf-faq__title,
  .mf-faq__lead {
    max-width: 62ch;
  }
 
  .mf-faq__item:first-child {
    padding-top: clamp(12px, 1.25vw, 24px);
  }
 
  .mf-faq__q {
    gap: 16px;
    line-height: 1.4;
  }
 
  .mf-faq__a {
    max-width: none;
  }
}
 
@media (prefers-reduced-motion: reduce) {
  .mf-faq__toggle {
    transition: none;
  }
}
 
@media (forced-colors: active) {
  .mf-faq__toggle {
    border: 1px solid CanvasText;
  }
}
 
.mf-loc {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;                  /* the map bleeds past the bottom edge */
  font-family: var(--mf-font-ui);    /* this section is ALL Poppins */
  color: var(--mf-black);
  background-image: var(--mf-gradient-locations);
  letter-spacing: var(--mf-tracking);
}
 
.mf-loc *,
.mf-loc *::before,
.mf-loc *::after {
  box-sizing: border-box;
}
 
/* Background texture. Figma rotates this layer -90deg; export it already
   rotated rather than transforming it here, or it cannot scale cleanly. */
.mf-loc__texture {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
 
/* --------------------------------------------------------------------------
   The stage — everything below is a percentage of this box
   -------------------------------------------------------------------------- */
.mf-loc__stage {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  aspect-ratio: 1920 / 997;
}
 
/* Map of Australia — 1058 x 992 at 417,19, 40% opacity, clipped at the
   bottom by the section. Figma centres it 14px left of the frame; centred
   is plainly the intent, so it is centred here. */
.mf-loc__map {
  position: absolute;
  top: 1.906%;                       /* 19/997 */
  left: 50%;
  width: 55.104%;                    /* 1058/1920 */
  height: 99.498%;                   /* 992/997 — set, not derived, so a
                                        missing file can't collapse it */
  opacity: 0.4;
  transform: translateX(-50%);
  pointer-events: none;
}
 
/* --------------------------------------------------------------------------
   Centre stack
   Figma: pill y218 · H2 y303 · lead y469 · button y612
   The H2 and lead are centred on 935.5 while the pill and button sit on 922,
   and the whole group is ~24px left of the frame centre. That is hand
   placement, not a design decision — all four are centred here.
   -------------------------------------------------------------------------- */
.mf-loc__center {
  position: absolute;
  top: 21.865%;                      /* 218/997 */
  left: 50%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 48.594%;                    /* 933/1920 — the lead's own width */
  text-align: center;
  transform: translateX(-50%);
}
 
/* Solid white pill — not the outlined .badge-pill used elsewhere */
.mf-loc__pill {
  margin: 0;
  padding: clamp(6px, 0.391vw, 7.5px) clamp(14px, 1.198vw, 23px);
  font-size: var(--mf-fs-eyebrow);   /* 22 / 39 / -0.66 */
  font-weight: 500;
  line-height: var(--mf-lh-eyebrow);
  color: var(--mf-grey-600);
  background-color: var(--mf-surface);
  border-radius: var(--mf-radius-pill);
}
 
.mf-loc__title {
  max-width: 893px;
  margin: clamp(14px, 3.109vw, 31px) 0 0;   /* 303 - 272 */
  font-size: var(--mf-fs-loc-title);        /* 53 / 76 / -1.59 */
  font-weight: 600;                         /* Poppins SemiBold */
  line-height: 1.434;                       /* 76/53 */
  color: #2d2d2d;
	    margin-top: 50px;
  letter-spacing: var(--mf-tracking);
}
 
/* "Across Australia". #9cfffa on this near-white gradient is roughly 1.4:1 —
   far below the 4.5:1 WCAG AA minimum. Built as designed; see the note in
   ASSETS.md. A mid-teal such as #008080 keeps the accent and passes. */
.mf-loc__title span {
  color: #9cfffa;
}
 
.mf-loc__lead {
  margin: clamp(8px, 1.404vw, 14px) 0 0;    /* 469 - 455 */
  font-size: var(--mf-fs-eyebrow);          /* 22 / 39 / -0.66 */
  font-weight: 500;
  line-height: var(--mf-lh-eyebrow);
  color: rgba(102, 102, 102, 0.9);
}
 
/* ---- CTA — a bigger, white variant of the shared .quote-btn -------------
   Figma: 276 x 66, white, radius 130, 26px text, 58.667px circle.
   Selected as .quote-btn.mf-loc__cta on purpose: a bare .mf-loc__cta ties
   with .quote-btn on specificity, so it would silently lose wherever
   .quote-btn happens to sit later in style.css. */
.quote-btn.mf-loc__cta {
  margin-top: clamp(12px, 2.608vw, 26px);   /* 612 - 586 */
  /* 66 tall around a 58.667 circle leaves 3.67 above and below */
  padding: clamp(2px, 0.191vw, 3.667px) clamp(3px, 0.318vw, 6.1px)
           clamp(2px, 0.191vw, 3.667px) clamp(12px, 1.25vw, 24px);
  font-size: var(--mf-fs-loc-cta);          /* 26 / 39 / -0.78 */
  background-color: var(--mf-surface);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.19);
}
 
/* the circle is 58.667 here, not the shared 41 */
.quote-btn.mf-loc__cta .mf-next-btn__icon {
  width: clamp(38px, 3.056vw, 58.667px);
  height: clamp(38px, 3.056vw, 58.667px);
  background-color: var(--mf-teal);
}
 
.quote-btn.mf-loc__cta .mf-next-btn__icon img.arrow {
  top: 25%;
  right: 25%;
  width: 50%;                        /* 29.333/58.667 */
  height: 50%;
}
 
/* --------------------------------------------------------------------------
   Location cards
   257 x 135.702 each, radius 15, 2px white border, 35px backdrop blur.
   -------------------------------------------------------------------------- */
/* NOTE: 13 live Maps embeds, each inside a backdrop-filtered card, is the
   most expensive thing on this page. Every iframe is loading="lazy", but in
   this composition they all sit near the viewport at once. If Lighthouse
   complains, swap the iframe for a static map image (the design's own
   intent) and keep the badge linking out. */
.mf-loc__card {
  position: absolute;
  z-index: 2;
  display: block;
  width: 13.385%;                    /* 257/1920 */
  aspect-ratio: 257 / 135.702;
  padding: 0;
  text-decoration: none;
  background-image: var(--mf-gradient-loc-card);
  border: 2px solid var(--mf-surface);
  border-radius: clamp(8px, 0.781vw, 15px);
  box-shadow: var(--mf-shadow-glass);
  backdrop-filter: blur(35px);
  -webkit-backdrop-filter: blur(35px);
  transition: transform 0.2s ease;
}
 
/* The card is a <div>: the map inside it is interactive, so wrapping the
   whole thing in an <a> would mean a click pans the map instead of
   following the link. The badge is the link. */
.mf-loc__card:hover,
.mf-loc__card:focus-within {
  transform: translateY(-3px);
}
 
/* ---- Card internals ----------------------------------------------------
   The card carries a 2px border, and an absolutely positioned child resolves
   its percentages against the PADDING box — 253 x 131.7, not 257 x 135.7.
   Every percentage below is against that inner box, which is why they don't
   read as the round Figma numbers. Getting this wrong puts each piece 2px
   down and to the right. */
 
/* Pin — 28 x 42, hanging 14px above the card's top-left corner */
.mf-loc__pin {
  position: absolute;
  top: -12.15%;                      /* -16 of 131.7 (= -14 of the border box) */
  left: -2px;
  width: 11.067%;                    /* 28/253 */
  height: 31.89%;                    /* 42/131.7 */
  object-fit: contain;
}
 
.mf-loc__name {
  position: absolute;
  top: 0;                            /* = 2 of the border box, via the border */
  right: 0;
  left: 0;
  display: block;
  font-size: var(--mf-fs-loc-card);  /* 18 / 39 / -0.54 */
  font-weight: 500;
  line-height: 2.167;                /* 39/18 */
  color: rgba(102, 102, 102, 0.9);
  text-align: center;
  letter-spacing: var(--mf-tracking);
}
 
/* Map thumbnail — 244 x 87 at 6,41 */
.mf-loc__thumb {
  position: absolute;
  top: 29.61%;                       /* 39/131.7 */
  left: 1.581%;                      /* 4/253 */
  display: block;
  width: 96.443%;                    /* 244/253 */
  height: 66.06%;                    /* 87/131.7 */
  overflow: hidden;
  background-color: var(--mf-surface);
  border-radius: clamp(5px, 0.521vw, 10px);
}
 
/* A live Google Maps embed fills the window, so there is nothing to crop */
.mf-loc__thumb iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
 
/* External-link badge — 30px white square, radius 7, at 215,44 */
.mf-loc__ext {
  position: absolute;
  top: 31.89%;                       /* 42/131.7 */
  left: 84.190%;                     /* 213/253 */
  z-index: 2;
  display: grid;
  place-items: center;
  width: 11.858%;                    /* 30/253 */
  aspect-ratio: 1;
  background-color: var(--mf-surface);
  border-radius: clamp(4px, 0.365vw, 7px);
}
 
.mf-loc__ext img {
  width: 60%;                        /* 18/30 */
  height: 60%;
  object-fit: contain;
}
 
.mf-loc__ext:focus-visible {
  outline: 2px solid var(--mf-teal-deep);
  outline-offset: 2px;
}
 
/* --------------------------------------------------------------------------
   Card positions — percentages of the 1920 x 997 stage
   -------------------------------------------------------------------------- */
.mf-loc__card--moorabbin    { left: 21.354%; top:  5.216%; }
.mf-loc__card--collingwood  { left:  4.583%; top: 16.851%; }
.mf-loc__card--elwood       { left:  9.531%; top: 37.813%; }
.mf-loc__card--byron-bay    { left:  3.854%; top: 58.776%; }
.mf-loc__card--parramatta   { left:  9.427%; top: 79.639%; }
.mf-loc__card--botany       { left: 26.667%; top: 70.411%; }
.mf-loc__card--bondi        { left: 44.583%; top: 81.846%; }
.mf-loc__card--gold-coast   { left: 60.365%; top:  5.617%; }
.mf-loc__card--brisbane     { left: 77.708%; top: 10.331%; }
.mf-loc__card--hampton      { left: 73.021%; top: 28.285%; }
.mf-loc__card--croydon-park { left: 82.552%; top: 46.139%; }
.mf-loc__card--macquarie-st { left: 69.115%; top: 61.886%; }
.mf-loc__card--brookvale    { left: 77.969%; top: 80.040%; }
 
/* --------------------------------------------------------------------------
   Responsive
   The hand-placed positions only mean anything on the full stage, so below
   1025px the cards leave the composition and become a grid under the copy.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .mf-loc {
    padding: clamp(28px, 4vw, 48px) var(--mf-gutter);
  }
 
  .mf-loc__stage {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(28px, 3vw, 40px) clamp(14px, 2vw, 24px);
    aspect-ratio: auto;
  }
 
  .mf-loc__center {
    position: static;
    grid-column: 1 / -1;
    width: auto;
    max-width: 62ch;
    margin: 0 auto clamp(12px, 2vw, 20px);
    transform: none;
  }
 
  /* the map is decorative at this size and the cards now carry the meaning */
  .mf-loc__map,
  .mf-loc__texture {
    display: none;
  }
 
  .mf-loc__card,
  .mf-loc__card--moorabbin,
  .mf-loc__card--collingwood,
  .mf-loc__card--elwood,
  .mf-loc__card--byron-bay,
  .mf-loc__card--parramatta,
  .mf-loc__card--botany,
  .mf-loc__card--bondi,
  .mf-loc__card--gold-coast,
  .mf-loc__card--brisbane,
  .mf-loc__card--hampton,
  .mf-loc__card--croydon-park,
  .mf-loc__card--macquarie-st,
  .mf-loc__card--brookvale {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
  }
}
 
@media (max-width: 700px) {
  .mf-loc__stage {
    grid-template-columns: repeat(2, 1fr);
  }
}
 
@media (max-width: 460px) {
  .mf-loc__stage {
    grid-template-columns: 1fr;
  }
}
 
@media (prefers-reduced-motion: reduce) {
  .mf-loc__card {
    transition: none;
  }
}
 
@media (forced-colors: active) {
  .mf-loc__card,
  .mf-loc__ext {
    border: 1px solid CanvasText;
  }
}
 .mf-connect {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;                  /* the fades and texture bleed */
  background-color: var(--mf-surface);
  box-shadow: 0 4px 9px rgba(0, 0, 0, 0.16);
  letter-spacing: var(--mf-tracking);
}

.mf-connect *,
.mf-connect *::before,
.mf-connect *::after {
  box-sizing: border-box;
}

/* Same background texture as the Locations section. Figma rotates it -90deg;
   export it pre-rotated rather than transforming it here. */
.mf-connect__texture {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   The stage — every position below is a percentage of this box
   -------------------------------------------------------------------------- */
.mf-connect__stage {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  aspect-ratio: 1920 / 943;
}

/* --------------------------------------------------------------------------
   Photo collage
   13 cards, 178 x 218, radius 15, on a 191px column pitch (9 columns) with
   231px vertical pitch where a column holds two. Each column starts at its
   own height — that stagger is the whole effect.
   -------------------------------------------------------------------------- */
.mf-connect__photo {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  width: 9.271%;                     /* 178/1920 */
  aspect-ratio: 178 / 218;
  background-color: var(--mf-surface);
  border-radius: clamp(8px, 0.781vw, 15px);
}

.mf-connect__photo img {
  position: absolute;
  top: var(--mf-ph-y, 0);
  left: var(--mf-ph-x, 0);
  width: var(--mf-ph-w, 100%);
  height: var(--mf-ph-h, 100%);
  max-width: none;
  object-fit: cover;
}

/* ---- Positions ---------------------------------------------------------- */
.mf-connect__photo--1  { left:  5.677%; top: 17.497%; }   /* 109, 165 */
.mf-connect__photo--2  { left:  5.677%; top: 41.994%; }   /* 109, 396 */
.mf-connect__photo--3  { left: 15.625%; top:  8.696%; }   /* 300,  82 */
.mf-connect__photo--4  { left: 15.625%; top: 33.192%; }   /* 300, 313 */
.mf-connect__photo--5  { left: 25.573%; top: 18.876%; }   /* 491, 178 */
.mf-connect__photo--6  { left: 35.521%; top: 10.074%; }   /* 682,  95 */
.mf-connect__photo--7  { left: 45.469%; top: 15.271%; }   /* 873, 144 */
.mf-connect__photo--8  { left: 55.417%; top: 10.074%; }   /* 1064, 95 */
.mf-connect__photo--9  { left: 65.365%; top: 18.876%; }   /* 1255,178 */
.mf-connect__photo--10 { left: 75.313%; top:  8.696%; }   /* 1446, 82 */
.mf-connect__photo--11 { left: 75.313%; top: 33.192%; }   /* 1446,313 */
.mf-connect__photo--12 { left: 85.260%; top: 17.179%; }   /* 1637,162 */
.mf-connect__photo--13 { left: 85.260%; top: 41.675%; }   /* 1637,393 */

/* ---- Crops --------------------------------------------------------------
   Every photo is a tall phone shot zoomed hard into a 178 x 218 window —
   between 2x and 5.8x vertically. These are Figma's values.

   WORTH KNOWING: at 5.8x these will look soft. Export each already cropped
   to 178 x 218 (or 356 x 436 for 2x) and this whole block can be deleted —
   the default object-fit: cover then does the right thing.
   ------------------------------------------------------------------------ */
.mf-connect__photo--1 img  { --mf-ph-x:   -7.30%; --mf-ph-y:  -34.86%; --mf-ph-w: 121.35%; --mf-ph-h: 215.60%; }
.mf-connect__photo--2 img  { --mf-ph-x:  -17.98%; --mf-ph-y:  -53.21%; --mf-ph-w: 138.76%; --mf-ph-h: 246.33%; }
.mf-connect__photo--3 img  { --mf-ph-x:  -21.35%; --mf-ph-y:  -55.96%; --mf-ph-w: 138.76%; --mf-ph-h: 246.33%; }
.mf-connect__photo--4 img  { --mf-ph-x:  -62.36%; --mf-ph-y:  -85.32%; --mf-ph-w: 193.82%; --mf-ph-h: 344.04%; }
.mf-connect__photo--5 img  { --mf-ph-x:   -6.74%; --mf-ph-y:  -43.12%; --mf-ph-w: 124.16%; --mf-ph-h: 220.18%; }
.mf-connect__photo--6 img  { --mf-ph-x:  -42.70%; --mf-ph-y:  -73.39%; --mf-ph-w: 200.00%; --mf-ph-h: 355.05%; }
.mf-connect__photo--7 img  { --mf-ph-x:  -44.38%; --mf-ph-y:  -95.41%; --mf-ph-w: 158.43%; --mf-ph-h: 281.19%; }
.mf-connect__photo--8 img  { --mf-ph-x:  -15.73%; --mf-ph-y: -121.56%; --mf-ph-w: 182.58%; --mf-ph-h: 324.31%; }
.mf-connect__photo--9 img  { --mf-ph-x:  -11.80%; --mf-ph-y:  -54.59%; --mf-ph-w: 134.83%; --mf-ph-h: 239.45%; }
.mf-connect__photo--10 img { --mf-ph-x:  -44.94%; --mf-ph-y:  -64.22%; --mf-ph-w: 171.91%; --mf-ph-h: 305.50%; }
.mf-connect__photo--11 img { --mf-ph-x:   -3.93%; --mf-ph-y:  -43.12%; --mf-ph-w: 110.67%; --mf-ph-h: 196.79%; }
.mf-connect__photo--12 img { --mf-ph-x: -127.53%; --mf-ph-y: -208.72%; --mf-ph-w: 325.28%; --mf-ph-h: 578.44%; }
.mf-connect__photo--13 img { --mf-ph-x:  -27.53%; --mf-ph-y:  -89.91%; --mf-ph-w: 155.06%; --mf-ph-h: 276.15%; }

/* --------------------------------------------------------------------------
   White fades — these sit ABOVE the photos in Figma's layer order, which is
   what lets the collage dissolve into the page instead of ending on a hard
   edge. Left/right 260 wide, top band 291 tall.
   -------------------------------------------------------------------------- */
.mf-connect__fade {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.mf-connect__fade--top {
  top: 0;
  right: 0;
  left: 0;
  height: 30.859%;                   /* 291/943 */
  background-image: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0));
}

.mf-connect__fade--left {
  top: 0;
  bottom: 0;
  left: 0;
  width: 13.542%;                    /* 260/1920 */
  background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}

.mf-connect__fade--right {
  top: 0;
  right: 0;
  bottom: 0;
  width: 13.542%;
  background-image: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));
}

/* --------------------------------------------------------------------------
   Centre copy — pill y407 · H2 y492 · lead y658 · button y777
   -------------------------------------------------------------------------- */
.mf-connect__copy {
  position: absolute;
  top: 43.161%;                      /* 407/943 */
  left: 50%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 53%;                    /* 895/1920 — the lead's own width */
  text-align: center;
  transform: translateX(-50%);
}

.mf-connect__pill {
  margin: 0;
  padding: clamp(6px, 0.391vw, 7.5px) clamp(14px, 1.406vw, 27px);
  font-family: var(--mf-font-ui);
  font-size: var(--mf-fs-eyebrow);   /* 22 / 39 / -0.66 */
  font-weight: 500;
  line-height: var(--mf-lh-eyebrow);
  color: var(--mf-grey-600);
  background-color: #eee;
  border-radius: var(--mf-radius-pill);
}

.mf-connect__title {
  max-width: 893px;
  margin: clamp(14px, 3.287vw, 31px) 0 0;   /* 492 - 461 */
  font-family: var(--mf-font-ui);
  font-size: var(--mf-fs-loc-title);        /* 53 / 76 / -1.59 — shared */
  font-weight: 600;                         /* Poppins SemiBold */
  line-height: 1.434;                       /* 76/53 */
  color: var(--mf-black);
  letter-spacing: var(--mf-tracking);
}

.mf-connect__title span {
  color: #7b7b7b;                    /* 4.6:1 on white — passes AA */
}

/* Figma reports Arial for this paragraph while the heading above it is
   Poppins. Same substitution oddity as the other sections; it follows
   --mf-font-display, so settling that variable settles this. */
.mf-connect__lead {
  margin: clamp(8px, 1.485vw, 14px) 0 0;    /* 658 - 644 */
  /* Figma's box is 117 tall (three lines) but the copy only fills two, and
     the button is placed 2px below the BOX, not below the text. Reserving
     the box keeps the button at y777 whether the text wraps to two lines or
     three — so a font change can't move it. */
  min-height: clamp(60px, 6.094vw, 117px);
  font-family: var(--mf-font-display);
  font-size: var(--mf-fs-lead);             /* 24 / 39 / -0.72 */
  line-height: var(--mf-lh-lead);
  color: var(--mf-grey-600);
}

/* ---- CTA — the big 276 x 66 button, teal (the Locations one is white) ---
   Qualified with both classes so it cannot lose to .quote-btn on order. */
.quote-btn.mf-connect__btn {
  margin-top: clamp(1px, 0.212vw, 2px);     /* 777 - 775 */
  /* 66 tall around a 58.667 circle leaves 3.67 above and below */
  padding: clamp(2px, 0.191vw, 3.667px) clamp(3px, 0.318vw, 6.1px)
           clamp(2px, 0.191vw, 3.667px) clamp(12px, 1.25vw, 24px);
  font-size: var(--mf-fs-loc-cta);          /* 26 / 39 / -0.78 — shared */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.19);
}

.quote-btn.mf-connect__btn .mf-next-btn__icon {
  width: clamp(38px, 3.056vw, 58.667px);
  height: clamp(38px, 3.056vw, 58.667px);
}

.quote-btn.mf-connect__btn .mf-next-btn__icon img.arrow {
  top: 25%;
  right: 25%;
  width: 50%;                        /* 29.333/58.667 */
  height: 50%;
}

/* --------------------------------------------------------------------------
   Responsive
   The collage only reads at full width, so below 1025px the copy goes into
   normal flow and the photos become a scrolling strip behind it.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .mf-connect {
    padding: clamp(24px, 4vw, 40px) 0 clamp(28px, 4vw, 48px);
  }

  .mf-connect__stage {
    aspect-ratio: auto;
  }

  .mf-connect__photo,
  .mf-connect__photo--1,  .mf-connect__photo--2,  .mf-connect__photo--3,
  .mf-connect__photo--4,  .mf-connect__photo--5,  .mf-connect__photo--6,
  .mf-connect__photo--7,  .mf-connect__photo--8,  .mf-connect__photo--9,
  .mf-connect__photo--10, .mf-connect__photo--11, .mf-connect__photo--12,
  .mf-connect__photo--13 {
    position: relative;
    top: auto;
    left: auto;
    flex: 0 0 auto;
    width: clamp(120px, 34vw, 178px);
  }

  /* one scrolling strip instead of the stagger */
  .mf-connect__strip {
    display: flex;
    gap: clamp(8px, 1.5vw, 13px);
    overflow-x: auto;
    padding-inline: var(--mf-gutter);
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  .mf-connect__strip::-webkit-scrollbar {
    display: none;
  }

  .mf-connect__copy {
    position: static;
    width: auto;
    max-width: 62ch;
    margin: clamp(20px, 3vw, 32px) auto 0;
    padding-inline: var(--mf-gutter);
    transform: none;
  }

  .mf-connect__fade--top,
  .mf-connect__texture {
    display: none;
  }

  /* the side fades still soften the strip's edges */
  .mf-connect__fade--left,
  .mf-connect__fade--right {
    bottom: auto;
    height: clamp(150px, 46vw, 240px);
    width: clamp(24px, 8vw, 60px);
  }
}

@media (forced-colors: active) {
  .mf-connect__photo {
    border: 1px solid CanvasText;
  }

  .mf-connect__fade {
    display: none;
  }
}
.site-footer {
  box-sizing: border-box;
  padding: clamp(24px, 1.979vw, 38px) 0 clamp(26px, 2.031vw, 39px);
  font-family: var(--mf-font-display);
  color: #373737;
  background-image: var(--mf-gradient-footer);
  letter-spacing: var(--mf-tracking);
}

.site-footer *,
.site-footer *::before,
.site-footer *::after {
  box-sizing: border-box;
}

/* 1697 IS the content box, gutters included — so this is a width, not a
   max-width plus padding. Adding padding on top pushed everything 65px in. */
.site-footer__inner {
  width: min(1697px, 100% - 2 * var(--mf-gutter));
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   1. Top band
   Figma: H2 131,38 (w643) · lead 1190,50 (w647)
          trust row y220 · buttons y188, right-aligned to 1828
   -------------------------------------------------------------------------- */
.site-footer__top {
    display: flex;
    align-items: center;
	justify-content:space-between;
}
.site-footer__brand--top {
  width: clamp(150px, 11.667vw, 224px);
}
.site-footer__brand--top img,
.site-footer__brand--top a {
  display: block;
  width: 100%;
  height: auto;
}
.site-footer__headline {
  max-width: 643px;
  margin: 0;
  font-size: 46px;      /* 66 — same ramp as the process numerals */
  font-weight: 400;
  line-height: 0.985;                /* 65/66 */
  color: #a6a6a6;
  letter-spacing: -0.03em;
}

.site-footer__headline em {
  font-style: normal;
  color: var(--mf-teal);             /* "Focusing on quality," */
}
.fooetr-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.site-footer__top-left {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}
.site-footer__intro {
  max-width: 647px;
  margin: clamp(4px, 0.619vw, 12px) 0 0 auto;   /* lead y50 vs H2 y38 */
  font-size: var(--mf-fs-stat-label);           /* 25 / 38 / -0.75 */
  line-height: 1.52;
}

/* ---- Trust row — two check items, 83px apart --------------------------- */
.site-footer__trust {
  display: flex;
  /* Separate axes on purpose. Figma fits both items in the 761 column; a
     wider fallback font wraps, and a single `gap` would then charge the
     83px BETWEEN the items as a row gap too, costing 113px of height
     instead of 48. */
  column-gap: clamp(20px, 4.281vw, 83px);
  row-gap: clamp(6px, 0.521vw, 10px);
  margin: clamp(22px, 2.708vw, 52px) 0 0;   /* H2 ends 168, row at 220 */
  padding: 0;
  list-style: none;
}

.site-footer__trust li {
  display: flex;
  align-items: center;
  gap: clamp(5px, 0.417vw, 8px);
  font-size: var(--mf-fs-stat-label);       /* 25 / 38 / -0.75 */
  line-height: 1.52;                        /* 38/25 */
  color: #3a3a3a;
  /* Figma fits each of these on one line (373px and 229px). A wider
     fallback font would wrap and add 38px to the band, so pin them — the
     container still wraps BETWEEN the two items on narrow screens. */
  white-space: nowrap;
}

.site-footer__trust img {
  flex: 0 0 auto;
  width: clamp(22px, 1.563vw, 30px);
  height: clamp(22px, 1.563vw, 30px);
  object-fit: contain;
}

/* ---- CTA pair — 230.881 x 65 each, radius 192 -------------------------- */
.site-footer__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 1.147vw, 22px);           /* 1597.18 - 1575.19 */
  justify-content: flex-end;
  margin-top: clamp(10px, 1.25vw, 24px);     /* intro ends 164, buttons 188 */
}

.site-footer__quote,
.site-footer__call {
  display: flex;
  align-items: center;
  min-width: clamp(170px, 12.031vw, 230.881px);
  min-height: clamp(48px, 3.386vw, 65px);
  font-size: var(--mf-fs-eyebrow);           /* 22 */
  text-decoration: none;
  white-space: nowrap;
  border-radius: 192px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.site-footer__quote {
  gap: clamp(6px, 0.677vw, 13px);
  justify-content: space-between;
  padding-inline: clamp(18px, 2.031vw, 39px) clamp(5px, 0.521vw, 10px);
  color: #00938b;
  background-color: var(--mf-surface);
	box-shadow: 0px 1px 7px 0px #00000040;

}

/* The 49px badge inside the pill's right end — the same idea as the shared
   .mf-next-btn__icon, but 49 rather than 41 and outlined instead of filled. */
.site-footer__quote span {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(36px, 2.551vw, 48.975px);
  height: clamp(36px, 2.551vw, 48.975px);
  background-color: var(--mf-surface);
  border: 1.5px solid var(--mf-teal);
  border-radius: 50%;
}

.site-footer__quote span img {
  width: 56%;                        /* 27.5/49 */
  height: 56%;
  object-fit: contain;
}

.site-footer__call {
  justify-content: center;
  padding-inline: clamp(14px, 1.302vw, 25px);
  color: #373737;
  border: 2px solid #373737;
}

.site-footer__quote:hover,
.site-footer__quote:focus-visible,
.site-footer__call:hover,
.site-footer__call:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
}

/* --------------------------------------------------------------------------
   2. Column band
   Figma column starts, relative to the 1697 box: 0 · 298 · 584 · 922 ·
   1252 · 1501. Hand-placed, so the track widths below are those exact
   spans rather than an even split.
   -------------------------------------------------------------------------- */
.site-footer__cols {
  display: grid;
  /* Gold Coast column removed 2026-10-26 — the original six Figma spans
     (17.56/16.85/19.92/19.45/14.67/11.55) rescaled to five tracks. */
  grid-template-columns: 20.44% 24.16% 23.60% 17.80% 14.00%;
  align-items: start;
  margin-top: clamp(30px, 3.698vw, 71px);   /* trust ends 258, band at 329 */
}

/* ---- Logo plate — 224 x 116, radius 20, logo 159 x 90 inset ------------ */
.site-footer__brand {
  display: grid;
  place-items: center;
  width: clamp(150px, 11.667vw, 224px);
  height: clamp(78px, 6.042vw, 116px);
  padding: clamp(10px, 0.833vw, 16px) clamp(18px, 1.719vw, 33px);
  background-color: var(--mf-surface);
  border-radius: clamp(12px, 1.042vw, 20px);
}

.site-footer__brand .custom-logo-link,
.site-footer__brand .custom-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---- Link columns — heading y334, links from y379 on a 41 pitch -------- */
.site-footer__col-title {
  margin: clamp(2px, 0.26vw, 5px) 0 0;      /* headings y334 vs plate y329 */
  font-size: clamp(17px, 1.198vw, 23px);    /* 23 */
  font-weight: 400;
  line-height: 1.2;
  color: #373737;
  text-transform: capitalize;
}

/* Every list in the footer carries its own class and NOTHING is selected as
   `.site-footer__col ul` or `.site-footer__col li`. A class-plus-type
   selector like that is more specific than a single class, so it quietly
   outranked the social and legal lists and broke their spacing twice. */
.site-footer__col-links {
  margin: clamp(9px, 0.906vw, 17.4px) 0 0;  /* title ends 361.6, links 379 */
  padding: 0;
  list-style: none;
}

.site-footer__col-links li + li {
  margin-top: clamp(9px, 0.99vw, 19px);     /* 41 pitch less the 22 line box */
}

.site-footer__col-links a {
  font-size: var(--mf-fs-pill);      /* 20 */
  line-height: 1.1;
  color: #808080;
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer__col-links a:hover,
.site-footer__col-links a:focus-visible {
  color: var(--mf-teal-deep);
}

/* --------------------------------------------------------------------------
   3. Social column + legal links
   Icons 40px on a 50.6 pitch at y368; Terms y450, Privacy y502, both
   right-aligned to the content edge.
   -------------------------------------------------------------------------- */
/* Its own class, not `.site-footer__social ul` — that also matched the
   legal list below and laid Terms/Privacy out side by side in a flex row. */
.site-footer__social-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    margin: clamp(4px, 0.333vw, 6.4px) 0 0;
    padding: 0;
    list-style: none;
}

.site-footer__social-list li,
.site-footer__social-list a {
  display: flex;
}

.site-footer__social-list img {
    display: flex;
    width: 46px;
    height: 46px;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.site-footer__social-list a:hover img,
.site-footer__social-list a:focus-visible img {
  transform: translateY(-2px);
}

.site-footer__legal {
  margin: clamp(20px, 2.188vw, 42px) 0 0;   /* icons end 408, Terms 450 */
  padding: 0;
  list-style: none;
  text-align: right;
}

.site-footer__legal li + li {
  margin-top: clamp(12px, 1.448vw, 27.8px); /* 52 pitch less the 24.2 line box */
}

.site-footer__legal a {
  font-size: var(--mf-fs-eyebrow);   /* 22 */
  line-height: 1.1;
  white-space: nowrap;               /* Figma sets both on one line */
  color: #373737;
  text-decoration: none;
}

.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
  color: var(--mf-teal-deep);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   4. Divider and bottom row — rule y599, row y645
   -------------------------------------------------------------------------- */
.site-footer__rule {
  height: 2px;
  margin: clamp(18px, 1.771vw, 34px) 0 0;   /* columns end 565, rule 599 */
  border: 0;
  background-color: rgba(55, 55, 55, 0.15);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 1.5vw, 24px);
  align-items: center;
  justify-content: space-between;
  margin-top: clamp(16px, 2.292vw, 44px);   /* rule ends 601, row 645 */
  font-size: var(--mf-fs-pill);             /* 20 / 38 / -0.6 */
  line-height: 1.9;
}

.site-footer__bottom p {
  margin: 0;
}

.site-footer__bottom a {
  color: inherit;
  text-decoration: none;
}

.site-footer__bottom a:hover,
.site-footer__bottom a:focus-visible {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   5. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .site-footer__cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 36px);
  }

  .site-footer__legal {
    text-align: left;
  }
}

@media (max-width: 1024px) {
    .site-footer__top {
        flex-direction: column;
	}

  .site-footer__headline,
  .site-footer__intro {
    max-width: 62ch;
  }
.fooetr-bottom {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
  .site-footer__intro {
    margin-left: 0;
  }

  .site-footer__ctas {
    justify-content: flex-start;
    margin-top: clamp(18px, 3vw, 28px);
  }

  /* nowrap is a desktop-only guard against the font wrapping the row; at
     these widths it would force a horizontal scrollbar instead */
  .site-footer__trust li {
    white-space: normal;
  }
}

@media (max-width: 700px) {
  .site-footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__bottom {
    justify-content: flex-start;
  }
}

@media (max-width: 460px) {
  .site-footer__cols {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer__quote,
  .site-footer__call,
  .site-footer__col-links a,
  .site-footer__social-list img {
    transition: none;
  }
}

@media (forced-colors: active) {
  .site-footer__quote,
  .site-footer__brand {
    border: 1px solid CanvasText;
  }
}
 
/* ==========================================================================
   SECTION SHELL
   ========================================================================== */
.mf-bento {
  padding-block: clamp(48px, 3.125vw, 60px);   /* 60 top, 60 bottom @1920 */
  background-color: var(--mf-surface);
}
 
.mf-bento *,
.mf-bento *::before,
.mf-bento *::after {
  box-sizing: border-box;
}
 
/* The inner box IS the 1790 content box — width, not max-width + padding,
   so it can't end up inset twice. */
.mf-bento__inner {
  display: grid;
  /* 717 / 456 / 576 of 1786 */
  grid-template-columns: 40.1456% 25.5319% 32.2508%;
  /* The three tracks come to 97.928%; space-between hands the remaining
     2.072% out as the two 18px column gaps Figma draws. */
  justify-content: space-between;
  width: min(1790px, 100% - 2 * var(--mf-gutter));
  margin-inline: auto;
}
 
/* Each column runs on its own vertical rhythm — the head/card-A break at
   y=308 does not line up with the B/C break at y=618, so shared grid rows
   can't express this. The wrappers stretch to the tallest column (grid's
   default align-items), and the bottom card in each is pinned down, so all
   three columns finish flush no matter how the head text wraps. */
.mf-bento__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
 
/* Cards B/C and card D start 148 / 150 below the top of the section.
   Percentage padding resolves against the CONTAINING BLOCK'S WIDTH, which
   for a grid item is its own grid area — so these are measured against the
   column width (456 and 576), not against the 1786 content box. */
.mf-bento__col--mid {
  justify-content: flex-end;
  padding-top: 32.4561%;              /* 148/456 */
}
 
.mf-bento__col--shop {
  justify-content: flex-end;
  padding-top: 26.0417%;              /* 150/576 */
}
 
/* ==========================================================================
   HEAD — pill, H2, two CTAs. Column 1, above card A.
   ========================================================================== */
.mf-bento__head {
  /* 37px from the CTA row down to the top of card A */
  padding-bottom: 5.1604%;            /* 37/717 */
}
 
/* .badge-pill is the live theme's eyebrow. It sits at max-content with
   nothing constraining it, so it has to be told not to outgrow its column. */
.mf-bento__head .badge-pill {
  max-width: 100%;
  margin: 0;
}
 
.mf-bento__title {
  width: 75.3138%;                    /* 540/717 */
  margin: 3.0684% 0 0;                /* 22 gap under the pill */
  font-family: var(--mf-font-display);
  font-size: var(--mf-fs-h2);         /* 45 / 57 / -1.35 */
  font-weight: 400;
  line-height: 1.2667;
  color: var(--mf-black);
  letter-spacing: var(--mf-tracking);
}
 
.mf-bento__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(12px, 3.4867%, 25px);    /* 25/717 — 233 - 208 */
  margin-top: 3.9052%;                /* 28 under the H2 */
}
 
/* The outlined variant of the live .quote-btn — same 54px pill and 48px
   arrow circle, teal-deep hairline instead of a mint fill. Selected as
   .quote-btn.mf-bento__call so it outranks .quote-btn rather than tying
   with it (two single-class selectors tie and source order decides). */
.quote-btn.mf-bento__call {
  color: var(--mf-teal-deep);
  background-color: transparent;
  border: 1px solid var(--mf-teal-deep);
  box-shadow: none;
}
 
.quote-btn.mf-bento__call .mf-next-btn__icon {
  background-color: var(--mf-teal);
}
 
/* ==========================================================================
   CARDS — shared
   ========================================================================== */
.mf-bento__card {
  position: relative;
  overflow: hidden;
  border-radius: var(--mf-radius-card);   /* 40 */
}
 
/* The photo. Figma crops each fill differently, so left/top/width/height
   live in the per-card block below and only the shared bits are here. */
.mf-bento__photo {
  position: absolute;
  z-index: 0;
  object-fit: cover;
}
 
.mf-bento__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: var(--mf-scrim-bento);
}
 
/* The copy has to sit above the scrim, and `position: relative` is what
   lifts it. It is set on each content class rather than as
   `.mf-bento__card > :not(.mf-bento__photo)` — a class plus two :not()
   arguments scores (0,3,0), which quietly outranked .mf-bento__badge and
   turned the absolutely positioned badge back into a flow element. */
.mf-bento__card-title,
.mf-bento__card-text,
.mf-bento__offer-pill,
.mf-bento__offer-title,
.mf-bento__card--offer .quote-btn {
  position: relative;
  z-index: 2;
}
 
.mf-bento__card-title {
  margin: 0;
  font-family: var(--mf-font-display);
  font-size: var(--mf-fs-bento-title);    /* 42 / 57 / -1.26 */
  font-weight: 400;
  line-height: 1.3571;
  color: var(--mf-surface);
  letter-spacing: var(--mf-tracking);
}
 
.mf-bento__card-text {
  margin: 0;
  font-family: var(--mf-font-display);
  font-size: var(--mf-fs-bento-body);     /* 22 / 33 */
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}
 
/* ---- The glass arrow badge --------------------------------------------
   The same 75px badge four times over: 2px white edge, 35px backdrop blur,
   a near-vertical white sheen and the shared -20/22/70 shadow. Identical to
   the .mf-glass family already in the theme. The arrow art is 39px and
   arrow-icon.png is already drawn on the diagonal, so nothing is rotated —
   rotating it would point it back at the card. */
.mf-bento__badge {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  border: 2px solid var(--mf-surface);
  border-radius: 124px;
  background-image: linear-gradient(
    181.347deg,
    rgba(255, 255, 255, 0.135) 1.1484%,
    rgba(255, 255, 255, 0) 98.909%
  );
  box-shadow: var(--mf-shadow-glass);
  backdrop-filter: blur(35px);
  -webkit-backdrop-filter: blur(35px);
}
 
.mf-bento__badge img {
  width: 52%;                             /* 39/75 */
  height: 52%;
  object-fit: contain;
}
 
/* ==========================================================================
   CARD A — Custom Jersey Framing. 717 x 729, column 1.
   margin-top:auto pins it to the bottom of the column, so slack from the
   head's text wrapping is absorbed above it and the card bottom stays level
   with cards C and D.
   ========================================================================== */
.mf-bento__card--jersey {
  margin-top: auto;
  aspect-ratio: 717 / 729;
  padding: 2.9289% 7.6708% 0;             /* 21 top, 55 sides */
}
.mf-bento__card--jersey .mf-bento__photo {
    top: 0;
    left: 0;
    width: 100%;
}
 
/* From here down the percentages are measured against the card's CONTENT
   box, not its width: the 55px inset is padding, so 717 - 2 x 55 = 607 is
   what a child's % width and % margin resolve against. The badge below is
   the exception — an absolutely positioned child resolves against the
   PADDING box, so its numbers stay over 717. */
.mf-bento__card--jersey .mf-bento__card-title {
  width: 66.3921%;                        /* 403/607 */
}
 
.mf-bento__card--jersey .mf-bento__card-text {
  width: 40.5272%;                        /* 246/607 */
  margin-top: 1.1532%;                    /* 7/607 under the 2-line title */
}
 
.mf-bento__card--jersey .mf-bento__badge {
  top: 2.8807%;                           /* 21/729 — `top` is a % of HEIGHT */
  left: 86.6109%;                         /* 621/717 */
  width: 10.4603%;                        /* 75/717 */
  aspect-ratio: 1;
}
 
/* ==========================================================================
   CARD B — Unique & Challenging Framing Projects. 456 x 470, column 2.
   ========================================================================== */
.mf-bento__card--unique {
  aspect-ratio: 456 / 470;
  margin-bottom: 3.7281%;                 /* 17 gap down to card C */
  padding: 5.7018% 5.9211% 0;             /* 26 top, 27 sides */
}
 
.mf-bento__card--unique .mf-bento__photo {
    top: 0;
    left: 0;
    width: 100%;
}
.mf-bento__card--unique .mf-bento__card-title {
  width: 79.3532%;                        /* 319/402 — content box, not 456 */
}
 
.mf-bento__card--unique .mf-bento__card-text {
  width: 61.194%;                         /* 246/402 */
  margin-top: 3.4826%;                    /* 14/402 under the 3-line title */
}
 
.mf-bento__card--unique .mf-bento__badge {
  top: 4.4681%;                           /* 21/470 */
  left: 78.9474%;                         /* 360/456 */
  width: 16.4474%;                        /* 75/456 */
  aspect-ratio: 1;
}
 
/* ==========================================================================
   CARD C — Special Offer / Get 20% Off. 457 x 402, column 2, flat teal.
   ========================================================================== */
.mf-bento__card--offer {
  aspect-ratio: 456 / 402;
  padding: 4.6053% 5.9211% 0 4.386%;      /* 21 top; 20 left, 27 for the text */
  background-color: var(--mf-teal);
}
 
/* An outlined pill, not the theme's filled .badge-pill: 199 x 65, radius
   110, 1px #3d3d3d, text in the on-mint deep teal. */
.mf-bento__offer-pill {
  display: grid;
  place-items: center;
  width: 48.6553%;                        /* 199/409 — content box */
  /* aspect-ratio, not a % height: a percentage height would resolve against
     the card's content-box HEIGHT (403 - 21 top padding), which is a second
     moving part for no gain. */
  aspect-ratio: 199 / 65;
  margin: 0;
  font-family: var(--mf-font-ui);
  font-size: var(--mf-fs-offer-pill);     /* 24 / 39 / -0.72 */
  font-weight: 500;
  line-height: 1.625;
  color: var(--mf-teal-deep);
  border: 1px solid #3d3d3d;
  border-radius: 110px;
  letter-spacing: var(--mf-tracking);
}
 
.mf-bento__offer-title {
  width: 73.1051%;                        /* 299/409 */
  margin: 3.912% 0 0 1.7115%;             /* 16 below the pill; 27 - 20 left */
  font-family: var(--mf-font-display);
  font-size: var(--mf-fs-bento-title);    /* 42 / 57 / -1.26 */
  font-weight: 400;
  line-height: 1.3571;
  color: #343434;
  letter-spacing: var(--mf-tracking);
}
 
/* Figma sets "20%" in white against the mint */
.mf-bento__offer-title em {
  font-style: normal;
  color: var(--mf-surface);
}
 
.mf-bento__card--offer .quote-btn {
  margin: 2.934% 0 0 1.7115%;             /* 12/409 under the headline */
}
 
/* White pill on the mint, deep-teal label — the inverse of .quote-btn */
.quote-btn.mf-bento__discount {
  color: var(--mf-teal-deep);
  background-color: var(--mf-surface);
  box-shadow: var(--mf-shadow-btn);
}
 
/* ==========================================================================
   CARD D — the shop card. 576 x 887, column 3.
 
   Two stacked blocks, no absolute positioning: the live product panel takes
   the top 488 (55.0169%) and the dark copy panel the bottom 399 (44.9831%).
   In Figma both are one flat screenshot; here the top half is real
   WooCommerce output.
   ========================================================================== */
.mf-bento__card--shop {
  display: flex;
  flex-direction: column;
  aspect-ratio: 576 / 887;
  background-color: var(--mf-surface-shop);
}
 
/* ---- The dark copy panel ---------------------------------------------- */
.mf-bento__panel {
    position: absolute;
    bottom: 0;
    flex: 0 0 44.9831%;
    min-height: 0;
    padding: 5.2083% 7.2917% 0;
    background-image: var(--mf-panel-shop);
}
 
/* Content box is 576 - 2 x 42 = 492 */
.mf-bento__panel .mf-bento__card-title {
  width: 86.9919%;                        /* 428/492 */
  font-size: var(--mf-fs-card-title);     /* 36 / 48 / -1.08 */
  line-height: 1.3333;
}
 
.mf-bento__panel .mf-bento__card-text {
  width: 98.9837%;                        /* 487/492 */
  margin-top: 5.4878%;                    /* 27/492 under the 2-line title */
}
 
.mf-bento__panel .mf-bento__badge {
  top: 5.8897%;                           /* 23.5/399 */
  left: 84.2014%;                         /* 485/576 */
  width: 13.0208%;                        /* 75/576 */
  aspect-ratio: 1;
}
 
/* ==========================================================================
   THE LIVE PRODUCT PANEL
   Top 488 of card D. A flex column so the swatch row can give up space
   before the button does — the product title and blurb are editable content
   and will not always be the length Figma drew.
   ========================================================================== */
.mf-shop {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: clamp(20px, 1.563vw, 30px) clamp(20px, 2.188vw, 42px)
           clamp(14px, 1.042vw, 20px);
  overflow: hidden;
  color: var(--mf-ink-shop);
}
 
.mf-shop__q {
  margin: 0;
  font-family: var(--mf-font-ui);
  font-size: var(--mf-fs-shop-q);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--mf-tracking);
}
 
.mf-shop__lead {
  /* Two lines, whatever the shop editor writes. Done with max-height
     rather than -webkit-line-clamp: the -webkit-box display that clamp
     needs collapses to zero height as a flex item. */
  max-height: 2.8em;                      /* 2 x line-height */
  margin: clamp(6px, 0.521vw, 10px) 0 0;
  overflow: hidden;
  font-family: var(--mf-font-ui);
  font-size: var(--mf-fs-shop-lead);
  font-weight: 600;
  line-height: 1.4;
}
 
/* ---- Frame swatches ---------------------------------------------------
   One radio per variation. The <label> is the whole tile, so the thumbnail
   and both lines of text are click targets, and :has() on the fieldset is
   not needed — the checked state is styled off the input's own sibling. */
.mf-shop__frames {
  flex: 0 1 auto;
  min-width: 0;
  min-height: 0;
  margin: clamp(12px, 0.938vw, 18px) 0 0;
  padding: 0;
  border: 0;
}
 
.mf-shop__frames legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
 
.mf-shop__swatches {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(6px, 0.625vw, 12px);
  margin: 0;
  padding: 0;
  list-style: none;
}
 
.mf-shop__swatch {
  min-width: 0;
}
 
.mf-shop__swatch input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
 
.mf-shop__swatch label {
  display: block;
  cursor: pointer;
  text-align: center;
}
 
.mf-shop__swatch img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* min-height as well as the ratio: aspect-ratio is ignored on a BROKEN
     <img>, which would collapse the tile to its alt text if a variation has
     no image yet. */
  min-height: 42px;
  object-fit: cover;
  border: 2px solid transparent;
  border-radius: 4px;
  transition: border-color 0.15s ease;
}
 
.mf-shop__swatch-name,
.mf-shop__swatch-price {
  display: block;
  font-family: var(--mf-font-ui);
  font-size: var(--mf-fs-shop-meta);
  line-height: 1.45;
}
 
.mf-shop__swatch-name {
  margin-top: 0.35em;
}
 
.mf-shop__swatch-price {
  color: var(--mf-ink-shop-soft);
}
 
.mf-shop__swatch input:checked + label img {
  border-color: var(--mf-ink-shop);
}
 
.mf-shop__swatch input:focus-visible + label img {
  outline: 2px solid var(--mf-teal-dark);
  outline-offset: 2px;
}
 
/* A variation that is out of stock stays visible but cannot be picked */
.mf-shop__swatch input:disabled + label {
  cursor: not-allowed;
  opacity: 0.45;
}
 
/* ---- ADD TO BASKET ---------------------------------------------------- */
.mf-shop__submit {
  display: block;
  width: 100%;
  margin-top: clamp(12px, 1.146vw, 22px);
  padding: 0.72em 1em;
  font-family: var(--mf-font-ui);
  font-size: var(--mf-fs-shop-lead);
  font-weight: 600;
  color: var(--mf-surface);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background-color: var(--mf-shop-btn);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
 
.mf-shop__submit:hover,
.mf-shop__submit:focus-visible {
  background-color: var(--mf-ink-shop);
}
 
.mf-shop__wishlist {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin-top: clamp(9px, 0.729vw, 14px);
  font-family: var(--mf-font-ui);
  font-size: var(--mf-fs-shop-lead);
  color: var(--mf-shop-accent);
  text-decoration: none;
}
 
.mf-shop__wishlist:hover,
.mf-shop__wishlist:focus-visible {
  text-decoration: underline;
}
 
/* A text heart, not an icon file. The glyph in the design lives inside the
   screenshot raster, so there is no real asset to export — a character
   avoids inventing one. */
.mf-shop__wishlist::before {
  content: "\2661";
  font-size: 1.25em;
  line-height: 1;
}
 
.mf-shop__returns {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  margin: clamp(6px, 0.521vw, 10px) 0 0;
  font-family: var(--mf-font-ui);
  font-size: var(--mf-fs-shop-meta);
  color: var(--mf-ink-shop);
}
 
.mf-shop__returns::before {
  content: "";
  flex: 0 0 auto;
  width: 0.5em;
  height: 0.5em;
  background-color: var(--mf-ink-shop);
  border-radius: 50%;
}
 
/* ---- What is NOT in this panel --------------------------------------
   The screenshot Figma pastes into this card also shows FREE SHIPPING /
   RETURNS AND REFUNDS accordions and a Trustpilot strip. They are left out
   deliberately, for two reasons:
 
   1. They do not fit. The panel is 488px tall and the content above comes
      to about 455 at 1920 — the two rows need another 79, and a clipped
      ADD TO BASKET is worse than a missing accordion. Figma gets away with
      it because the screenshot is scaled to ~137% inside the card, so the
      design never shows the bottom of that panel either.
   2. They are single-product-page furniture. Shipping terms and a
      third-party review widget belong on the product template, not in a
      home-page card.
 
   To put them back: add <details class="mf-shop__row"> rows inside a
   .mf-shop__info wrapper, and change .mf-bento__card--shop's aspect-ratio
   from 576/887 to about 576/970 so the card grows to hold them. Cards A and
   C will then finish above it — the columns are pinned flush at the bottom,
   so that shows up immediately.
 
   Trustpilot supplies its own embed script; drop that into the product
   template rather than rebuilding the mark here.
   -------------------------------------------------------------------------- */
 
/* ---- Fallbacks --------------------------------------------------------
   No WooCommerce, or no product in the Floating Frames category: the panel
   shows Figma's own screenshot so the card is never a blank rectangle. */
.mf-shop--static {
  padding: 0;
}
 
.mf-shop--static img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}
 
/* WooCommerce prints its own notices into this slot */
.mf-shop .woocommerce-notices-wrapper:empty {
  display: none;
}
 
/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
 
/* ---- Two columns ------------------------------------------------------
   display:contents dissolves the column wrappers so the five blocks become
   direct grid children and can be placed freely. Their padding-top offsets
   go with them, which is exactly what's wanted — the stagger is a 1920-only
   composition.
 
   1360, not the more usual 1200: the shop card's type bottoms out on its
   clamp() floors around 1400 while the card itself keeps shrinking with the
   viewport, so between 1200 and 1360 the product panel is the tightest it
   ever gets. Measured with the panel's type forced 12% larger than it
   renders here, the returns line starts clipping just below 1360. */
@media (max-width: 1360px) {
  .mf-bento__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2.5vw, 30px);
    justify-content: normal;
  }
 
  .mf-bento__col {
    display: contents;
  }
 
  .mf-bento__head {
    grid-column: 1 / -1;
    padding-bottom: 0;
  }
 
  .mf-bento__title,
  .mf-bento__card--jersey .mf-bento__card-title,
  .mf-bento__card--unique .mf-bento__card-title,
  .mf-bento__offer-title {
    width: min(100%, 34ch);
  }
 
  .mf-bento__card {
    align-self: start;
  }
 
  /* The badge stays in its designed top-right corner down to 768, so the
     title has to keep clear of it — at these widths the cards are narrower
     than the design's and the heading now reaches into that corner. */
  .mf-bento__card-title {
    padding-right: clamp(64px, 14%, 104px);
  }
 
  .mf-bento__card--jersey {
    margin-top: 0;
  }
 
  .mf-bento__card--shop {
    aspect-ratio: auto;
  }
 
  .mf-shop,
  .mf-bento__panel {
    flex: 0 0 auto;
  }
 
  .mf-bento__card--unique {
    margin-bottom: 0;
  }
 
  .mf-bento__card--jersey .mf-bento__card-text,
  .mf-bento__card--unique .mf-bento__card-text {
    width: min(100%, 30ch);
  }
}
 
/* ---- One column -------------------------------------------------------
   Below 768 the aspect ratios go: at 700px of card width card A's blurb is
   already 6 lines, and a fixed 0.98 ratio would clip it. min-height keeps
   the proportions as a floor and lets the text push the card taller.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	
	.mf-modal__backdrop {
    background-color: #fff !important;
	}
  .mf-bento__inner {
    grid-template-columns: minmax(0, 1fr);
  }
 
  .mf-bento__card--jersey,
  .mf-bento__card--unique,
  .mf-bento__card--offer {
    aspect-ratio: auto;
  }
 
  /* The cards are now wide and short, and the copy runs the full width — so
     the badge moves out of the top-right corner (where it was sitting on top
     of the second line of body text) down to the bottom-right, and each card
     that has one reserves enough bottom padding that the last line of copy
     cannot reach it. */
  .mf-bento__card--jersey {
    min-height: 101.67%;                  /* 729/717 */
    padding: 26px 26px clamp(84px, 20vw, 118px);
  }
 
  .mf-bento__card--unique {
    min-height: 103.07%;                  /* 470/456 */
    padding: 26px 26px clamp(84px, 20vw, 118px);
  }
 
  /* No badge on the offer card — the Get Discount button is its action. */
  .mf-bento__card--offer {
    min-height: 88.16%;                   /* 402/456 */
    padding: 26px 26px 34px;
  }
 
  .mf-bento__panel {
    padding: 28px 26px clamp(84px, 20vw, 118px);
  }
 
  .mf-shop {
    padding: 26px;
  }
 
  .mf-bento__card-title {
    padding-right: 0;
  }
 
  .mf-bento__card--jersey .mf-bento__card-title,
  .mf-bento__card--unique .mf-bento__card-title,
  .mf-bento__card--jersey .mf-bento__card-text,
  .mf-bento__card--unique .mf-bento__card-text,
  .mf-bento__offer-title,
  .mf-bento__panel .mf-bento__card-title,
  .mf-bento__panel .mf-bento__card-text,
  .mf-bento__title {
    width: 100%;
  }
 
  .mf-bento__offer-pill {
    width: max-content;
    height: auto;
    min-height: 48px;
    padding-inline: 22px;
  }
 
  .mf-bento__offer-title,
  .mf-bento__card--offer .quote-btn {
    margin-left: 0;
  }
 
  /* Percentage margins were measured against the 456/576 card widths; at one
     column those become the viewport and read far too large. */
  .mf-bento__card-text,
  .mf-shop__lead,
  .mf-shop__frames,
  .mf-shop__submit,
  .mf-shop__wishlist,
  .mf-shop__returns,
  .mf-bento__offer-title,
  .mf-bento__card--offer .quote-btn,
  .mf-bento__panel .mf-bento__card-text {
    margin-top: 16px;
  }
 
  .mf-shop__swatches {
    gap: 12px;
  }
 
  .mf-shop__swatch img {
    height: clamp(70px, 22vw, 130px);
  }
 
  /* !important only because the desktop rules set top/left/width per card
     with equal specificity and later source order would otherwise win. */
  .mf-bento__badge {
    top: auto !important;
    bottom: 26px;
    left: auto !important;
    right: 26px;
    width: clamp(52px, 12vw, 75px) !important;
  }
}
 
@media (max-width: 480px) {
  .mf-bento__card--offer {
    padding: 20px 20px 26px;
  }
 
  /* Keep the bottom clearance under the badge — only the other three sides
     tighten here. */
  .mf-bento__card--jersey,
  .mf-bento__card--unique {
    padding: 20px 20px clamp(84px, 24vw, 110px);
  }
 
  .mf-bento__panel {
    padding: 22px 20px clamp(84px, 24vw, 110px);
  }
 
  .mf-shop {
    padding: 22px 20px 26px;
  }
 
  .mf-bento__badge {
    bottom: 20px;
    right: 20px;
  }
 
  .mf-shop__swatches {
    gap: 8px;
  }
 
  .mf-bento__actions .quote-btn {
    width: 100%;
  }
}
 
@media (prefers-reduced-motion: reduce) {
  .mf-shop__submit,
  .mf-shop__swatch img {
    transition: none;
  }
}
 
@media (forced-colors: active) {
  .mf-bento__badge,
  .mf-shop__submit,
  .mf-shop__swatch input:checked + label img {
    border: 1px solid CanvasText;
  }
}
 

.mf-products {
	--mfp-bg: #f3f3f3;
	--mfp-ink: #000;
	--mfp-muted: rgba(99, 99, 99, .9);
	--mfp-faint: rgba(173, 173, 173, .9);
	--mfp-peek: #d9d9d9;
	--mfp-line: #d5d5d5;
	--mfp-teal: #6cdbd5;
	--mfp-deep: #004e4a;
	--mfp-mint: #75fefe;
	--mfp-cart-bg: #fbfbfb;
	--mfp-scrim: linear-gradient(117.84deg, rgba(0, 0, 0, .4) 16.763%, rgba(102, 102, 102, 0) 62.791%);
 
	position: relative;
	overflow: hidden; /* clips the strip's right-hand bleed */
	padding-block: 42px 71px;
	background: var(--mfp-bg);
}
 
/* [hidden] loses to a class that sets display, so it needs help here. */
.mf-products [hidden] {
	display: none !important;
}
 
.mf-products__inner {
	box-sizing: border-box;
	max-width: 1920px;
	margin-inline: auto;
	/* min() pins the inset once the container stops growing. */
	padding-left: min(6.094%, 117px);
	padding-right: min(5.573%, 107px);
}
 
/* --------------------------------------------------------------------------
   Head — 494-wide title column, 875-wide copy column
   -------------------------------------------------------------------------- */
 
.mf-products__head {
	display: grid;
	/* 494 | 327 gutter | 875, all over 1696 */
	grid-template-columns: 29.128% 19.28% 51.592%;
}
 
.mf-products__intro {
	grid-column: 1;
}
 
.mf-products__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	grid-column: 3;
	padding-top: 83px;
}
 
/* Outlined variant of the shared pill. Two classes so it outranks
   .badge-pill instead of tying with it and depending on source order. */
.badge-pill.mf-products__pill {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	max-width: 100%;
	min-height: 38px;
	margin: 0;
	padding: 0 clamp(20px, 2.135vw, 41px);
	border: 2px solid var(--mfp-line);
	border-radius: 130px;
	background: transparent;
	color: var(--mfp-muted);
	font-family: "Poppins", sans-serif;
	font-size: clamp(15px, 1.146vw, 22px);
	font-weight: 500;
	letter-spacing: -.03em;
	line-height: 1.7727;
}
 
.mf-products__title {
	margin: 39px 0 0;
	color: var(--mfp-ink);
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(26px, 2.344vw, 45px);
	font-weight: 400;
	letter-spacing: -.03em;
	line-height: 1.2667;
}
 
.mf-products__lead {
	width: 100%;
	margin: 0;
	color: var(--mfp-muted);
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(16px, 1.25vw, 24px);
	font-weight: 400;
	letter-spacing: -.03em;
	line-height: 1.625;
}
 
.mf-products__quote {
	display: inline-block;
	margin-top: 19px;
	text-decoration: none;
}
 
/* --------------------------------------------------------------------------
   Body — 544 aside | 486 featured | 565 rail
   -------------------------------------------------------------------------- */
 
.mf-products__body {
	position: relative;
	display: grid;
	/* 544 | 54 | 486 | 47 | 565, all over 1696 */
	grid-template-columns: 32.076% 3.184% 28.656% 2.771% 33.313%;
	grid-template-areas: "aside . featured . rail";
	margin-top: 43px;
}
 
/* The grey block at the section's left edge: the previous card, peeking.
   Percentages resolve against the body's padding box, and the body's own
   width is a percentage of the same viewport, so the offset stays exact. */

 
/* ---- Aside: the active product's gallery, plus the controls ---- */
 
.mf-products__aside {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	grid-area: aside;
}
 
.mf-products__thumbs {
	display: grid;
	/* 247 | 50 | 247, all over 544 */
	grid-template-columns: 45.404% 9.192% 45.404%;
	grid-template-areas: "a . b";
}
 
.mf-products__thumb {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: clamp(10px, 1.042vw, 20px);
	aspect-ratio: 247 / 362;
	/* aspect-ratio is ignored on a broken <img>, so the ratio lives on the
	   wrapper and the min-height keeps the box honest if a URL is missing. */
	min-height: 120px;
}
 
.mf-products__thumb:first-child {
	grid-area: a;
}
 
.mf-products__thumb:last-child {
	grid-area: b;
}
 
.mf-products__thumb-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
 
.mf-products__thumb-scrim {
	position: absolute;
	inset: 0;
	background: var(--mfp-scrim);
	pointer-events: none;
}
 
/* ---- Controls ---- */
 
.mf-products__nav {
	margin-top: auto; /* bottom-aligns with the featured card */
}
 
.mf-products__counter {
	margin: 0;
	font-family: "Poppins", sans-serif;
	font-size: clamp(20px, 1.563vw, 30px);
	letter-spacing: -.03em;
	line-height: 1.3;
}
 
.mf-products__counter-current,
.mf-products__counter-sep {
	color: var(--mfp-muted);
	font-weight: 500;
}
 
.mf-products__counter-total {
	color: var(--mfp-faint);
	font-weight: 300;
}
 
.mf-products__arrows {
	display: flex;
	gap: 18px;
	margin-top: 6px;
}
 
.mf-products__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: clamp(48px, 3.542vw, 68px);
	height: clamp(48px, 3.542vw, 68px);
	padding: 0;
	border: 1.5px solid var(--mfp-teal);
	border-radius: 100px;
	background: transparent;
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease;
}
 
.mf-products__arrow:hover {
	background: var(--mfp-teal);
}
 
.mf-products__arrow[disabled] {
	border-color: var(--mfp-line);
	background: transparent;
	cursor: default;
	opacity: .45;
}
 
.mf-products__arrow-icon {
	display: block;
	width: 24px;
	height: 24px;
}
 
/* ---- Featured card ---- */
 
.mf-products__featured {
	position: relative;
	z-index: 1;
	grid-area: featured;
	overflow: hidden;
	border-radius: clamp(14px, 1.563vw, 30px);
	aspect-ratio: 486 / 720;
	min-height: 260px;
}
 
.mf-products__featured-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
 
.mf-products__featured-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(117.68deg, rgba(0, 0, 0, .4) 16.763%, rgba(102, 102, 102, 0) 62.791%);
	pointer-events: none;
}
 
.mf-products__badge {
	position: absolute;
	top: 3.333%;  /* 24 / 720 */
	left: 3.704%; /* 18 / 486 */
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 21.605%; /* 105 / 486 */
	min-height: 7.361%; /* 53 / 720 */
	margin: 0;
	padding: 6px clamp(10px, .885vw, 17px);
	border: 2px solid #fff;
	border-radius: 124px;
	background-image: linear-gradient(180.68deg, rgba(255, 255, 255, .135) 1.148%, rgba(255, 255, 255, 0) 98.909%);
	box-shadow: -20px 22px 70px 0 rgba(0, 0, 0, .25);
	backdrop-filter: blur(35px);
	-webkit-backdrop-filter: blur(35px);
	color: var(--mfp-mint);
	font-family: "Poppins", sans-serif;
	font-size: clamp(13px, 1.042vw, 20px);
	font-weight: 500;
	letter-spacing: -.03em;
	line-height: 1.2;
	white-space: nowrap;
}
 
.mf-products__bar {
	position: absolute;
	right: 5.35%;   /* 26 / 486 */
	bottom: 3.194%; /* 23 / 720 */
	left: 3.704%;   /* 18 / 486 */
	display: flex;
	align-items: center;
	box-sizing: border-box;
	height: 8.472%; /* 61 / 720 */
	min-height: 46px;
	padding-right: 1.646%; /* 8 / 486 */
	padding-left: 7.819%;  /* 38 / 486 */
	border-radius: clamp(8px, .677vw, 13px);
	background: var(--mfp-teal);
	gap: clamp(12px, 1.563vw, 30px);
}
 
.mf-products__price {
	color: #fff;
	font-family: "Poppins", sans-serif;
	font-size: clamp(18px, 1.51vw, 20px);
	font-weight: 500;
	letter-spacing: -.03em;
	line-height: 1.345;
	white-space: nowrap;
}
 
/* WooCommerce prints the struck-through regular price for a sale item. */
.mf-products__price del {
	margin-right: .35em;
	font-size: .62em;
	opacity: .75;
}
 
.mf-products__price ins {
	text-decoration: none;
}
 
.mf-products__buy {
	margin-right: auto;
	color: var(--mfp-deep);
	font-family: "Poppins", sans-serif;
	font-size: clamp(15px, 1.146vw, 22px);
	font-weight: 500;
	letter-spacing: -.03em;
	line-height: 1.7727;
	text-decoration: none;
	white-space: nowrap;
}
 
.mf-products__buy:hover {
	text-decoration: underline;
}
 
.mf-products__cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: clamp(34px, 2.448vw, 47px);
	height: clamp(34px, 2.448vw, 47px);
	border-radius: clamp(8px, .625vw, 12px);
	background: var(--mfp-cart-bg);
}
 
.mf-products__cart-icon {
	display: block;
	width: 68%;
	height: 68%;
	object-fit: contain;
}
 
/* ---- Rail: copy for the active product, then the strip ---- */
 
.mf-products__rail {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	grid-area: rail;
	min-width: 0;
	padding-top: 18px;
}
 
.mf-products__product-title {
	margin: 0;
	color: var(--mfp-ink);
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(26px, 2.344vw, 45px);
	font-weight: 400;
	letter-spacing: -.03em;
	line-height: 1.2667;
}
 
.mf-products__product-link {
	color: inherit;
	text-decoration: none;
}
 
.mf-products__product-link:hover {
	text-decoration: underline;
}
 
.mf-products__desc {
	margin: 16px 0 0;
	color: var(--mfp-muted);
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(16px, 1.25vw, 24px);
	font-weight: 400;
	letter-spacing: -.03em;
	line-height: 1.625;
}
 
.mf-products__rating {
	display: grid;
	grid-template-columns: auto auto 1fr;
	grid-template-areas:
		"stars value ."
		"label label label";
	align-items: center;
	margin-top: 45px;
	column-gap: 13px;
}
 
.mf-products__stars {
	display: flex;
	grid-area: stars;
	gap: 4.2px;
}
 
.mf-products__star {
	display: block;
	width: clamp(18px, 1.323vw, 25.4px);
	height: auto;
}
 
.mf-products__star--off {
	opacity: .26;
}
 
.mf-products__rating-value {
	grid-area: value;
	margin: 0;
	color: var(--mfp-muted);
	font-family: "Poppins", sans-serif;
	font-size: clamp(21px, 1.615vw, 31px);
	font-weight: 500;
	letter-spacing: -.03em;
	line-height: 1.258;
}
 
.mf-products__rating-label {
	grid-area: label;
	margin: 11px 0 0;
	color: var(--mfp-muted);
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(16px, 1.25vw, 24px);
	letter-spacing: -.03em;
	line-height: 1.625;
}
 
/* The strip runs off the right edge of the section. No vw needed: the gap
   from the rail's right edge to the section's right edge is a fixed fraction
   of the rail (107 / 565 = 18.938%) because both are percentages of the same
   box. The matching padding lets the last card scroll fully into view. */
.mf-products__strip {
	display: flex;
	margin-top: 27px;
	margin-right: -18.938%;
	padding-right: 18.938%;
	overflow-x: auto;
	overflow-y: hidden;
	gap: 8.85%; /* 50 / 565 — resolves against the strip's own content box */
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
}
 
.mf-products__strip::-webkit-scrollbar {
	display: none;
}
 
.mf-products__card {
	position: relative;
	flex: 0 0 43.717%; /* 247 / 565 */
	overflow: hidden;
	border-radius: clamp(10px, 1.042vw, 20px);
	aspect-ratio: 247 / 362;
	min-height: 160px;
	scroll-snap-align: start;
	transition: box-shadow .2s ease, transform .2s ease;
}
 
.mf-products__card.is-active {
	box-shadow: 0 0 0 2px var(--mfp-teal);
}
 
.mf-products__card-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
 
.mf-products__card-scrim {
	position: absolute;
	inset: 0;
	background: var(--mfp-scrim);
	pointer-events: none;
}
 
/* --------------------------------------------------------------------------
   <= 1200: the aside drops below, featured and rail sit side by side.
   grid-template-areas is redeclared with the columns, never left stale.
   -------------------------------------------------------------------------- */
 
@media (max-width: 1200px) {
 
	.mf-products__head {
		grid-template-columns: 100%;
	}
 
	.mf-products__intro,
	.mf-products__copy {
		grid-column: 1;
	}
 
	.mf-products__copy {
		align-items: flex-start;
		padding-top: 28px;
	}
 
	.mf-products__body {
		grid-template-columns: 46% 4% 50%;
		grid-template-areas:
			"featured . rail"
			"aside aside aside";
	}
 
	.mf-products__peek {
		display: none;
	}
 
	.mf-products__aside {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		margin-top: 36px;
		gap: 32px;
	}
 
	.mf-products__thumbs {
		flex: 0 1 46%;
	}
 
	.mf-products__nav {
		margin-top: 0;
	}
 
	.mf-products__rail {
		padding-top: 0;
	}
 
	.mf-products__rating {
		margin-top: 28px;
	}
 
	/* Rail is 50% of the content box, so the bleed fraction changes with it. */
	.mf-products__strip {
		margin-right: -12.618%;
		padding-right: 12.618%;
		gap: 7.7%;
	}
 
	.mf-products__card {
		flex: 0 0 38%;
	}
}
 
/* --------------------------------------------------------------------------
   <= 820: one column. No mobile frame exists in the Figma for this section,
   so this reflow is an interpretation, not a design match.
   -------------------------------------------------------------------------- */
 
@media (max-width: 820px) {
 
	.mf-products {
		padding-block: 32px 48px;
	}
 
	.mf-products__body {
		grid-template-columns: 100%;
		grid-template-areas:
			"featured"
			"rail"
			"aside";
		margin-top: 32px;
	}
 
	.mf-products__featured {
		aspect-ratio: 4 / 5;
	}
 
	.mf-products__rail {
		margin-top: 28px;
	}
 
	.mf-products__aside {
		flex-direction: column;
		align-items: stretch;
		margin-top: 28px;
	}
 
	.mf-products__thumbs {
		flex: 0 0 auto;
	}
 
	.mf-products__nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 24px;
	}
 
	.mf-products__arrows {
		margin-top: 0;
	}
 
	/* Rail now fills the content box: 107 / 1696 = 6.309%. */
	.mf-products__strip {
		margin-right: -6.309%;
		padding-right: 6.309%;
		gap: 4%;
	}
 
	.mf-products__card {
		flex: 0 0 45%;
	}
}
 
@media (max-width: 520px) {
 
	.mf-products__card {
		flex: 0 0 62%;
	}
 
	.mf-products__bar {
		padding-left: 5%;
	}
}
 @media (max-width: 766px) {
	 	.mf-brisbrane {
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.2) 100%), url(/wp-content/uploads/2026/09/image-542-scaled.png) !important;
}
}

@media (max-width: 767px) {
#gform_page_1_2 #field_1_11 {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
}

    .stat:first-child {
        border-top: none;
    }
	.stat {
    border-top: 1px solid #6CDBD5;
    border-left:none;
}
	.stats-card {
    grid-template-columns: repeat(1, 1fr);
	}
}
 
.mf-reviews {
	--mfr-ink: #000;
	--mfr-muted: rgba(99, 99, 99, .9);
	--mfr-line: #d5d5d5;
	--mfr-arrow-bg: #418c88;
	--mfr-mask: #e9f9f8;
	--mfr-dot: #5b5959;
	--mfr-dot-off: #fff;
 
	/* Card metrics, measured off node 1:1361. Used by the skin block below. */
	--mfr-card-w: 28.952%;      /* 522 / 1803 (track content box) */
	--mfr-card-gap: 2.274%;     /* 41 / 1803 */
	--mfr-card-ratio: 522 / 569;
	--mfr-quote: #515151;
	--mfr-name: #008079;
 
	position: relative;
	padding-block: 34px 70px;
	background-image: linear-gradient(107.309deg, #fff 0.91%, #b4edea 58.801%, #6cdbd5 116.26%);
}
 
.mf-reviews [hidden] {
	display: none !important;
}
 
.mf-reviews__inner {
	box-sizing: border-box;
	max-width: 1920px;
	margin-inline: auto;
	padding-left: min(6.094%, 117px);
	padding-right: min(5.573%, 107px);
}
 
/* --------------------------------------------------------------------------
   Head — 497-wide intro column, 875-wide copy column
   -------------------------------------------------------------------------- */
 
.mf-reviews__head {
	display: grid;
	/* 497 | 324 gutter | 875, all over 1696 */
	grid-template-columns: 29.304% 19.104% 51.592%;
}
 
.mf-reviews__intro {
	grid-column: 1;
}
 
.mf-reviews__copy {
	display: flex;
	flex-direction: column;
	grid-column: 3;
	padding-top: 73px;
}
 
/* Same outlined pill as the products section (node 1:2719 === node 1:140).
   Two classes so it outranks .badge-pill rather than tying with it. If you
   later merge the two, make it one shared .badge-pill.mf-pill--outline. */
.badge-pill.mf-reviews__pill {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	max-width: 100%;
	min-height: 54px;
	margin: 0;
	padding: 0 clamp(16px, 1.458vw, 28px);
	border: 2px solid var(--mfr-line);
	border-radius: 130px;
	background: transparent;
	color: var(--mfr-muted);
	font-family: "Poppins", sans-serif;
	font-size: clamp(15px, 1.146vw, 22px);
	font-weight: 500;
	letter-spacing: -.03em;
	line-height: 1.7727;
}
 
.mf-reviews__title {
	max-width: 100%;
	margin: 19px 0 0;
	color: var(--mfr-ink);
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(26px, 2.344vw, 45px);
	font-weight: 400;
	letter-spacing: -.03em;
	line-height: 1.2667;
}
 
.mf-reviews__quote-link {
	display: inline-block;
	margin-top: 28px;
	text-decoration: none;
}
 
.mf-reviews__lead {
	margin: 0;
	color: var(--mfr-muted);
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(16px, 1.25vw, 24px);
	font-weight: 400;
	letter-spacing: -.03em;
	line-height: 1.625;
}
 
/* --------------------------------------------------------------------------
   Arrows — node 1:2755 / 1:2759
   -------------------------------------------------------------------------- */
 
.mf-reviews__arrows {
	display: flex;
	justify-content: flex-end;
	margin-top: 8px;
	gap: clamp(20px, 4.792vw, 92px);
}
 
.mf-reviews__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: clamp(52px, 4.115vw, 79px);
	height: clamp(52px, 4.115vw, 79px);
	padding: 0;
	border: 0;
	border-radius: 100px;
	background: var(--mfr-arrow-bg);
	box-shadow: 2px 4px 12px 0 rgba(0, 0, 0, .09);
	cursor: pointer;
	transition: opacity .18s ease, transform .18s ease;
}
 
.mf-reviews__arrow:hover {
	transform: translateY(-2px);
}
 
.mf-reviews__arrow[disabled] {
	cursor: default;
	opacity: .4;
	transform: none;
}
 
/* One asset (an up arrow, node 1:2757) turned both ways, as in the design. */
.mf-reviews__arrow-icon {
	display: block;
	width: clamp(21px, 1.667vw, 32px);
	height: clamp(21px, 1.667vw, 32px);
}
 
.mf-reviews__arrow--prev .mf-reviews__arrow-icon {
	transform: rotate(-90deg);
}
 
.mf-reviews__arrow--next .mf-reviews__arrow-icon {
	transform: rotate(90deg);
}
 
/* --------------------------------------------------------------------------
   Track — full bleed, clipped. The plugin renders into .mf-reviews__slot.
   -------------------------------------------------------------------------- */
 
.mf-reviews__track {
	position: relative;
	margin-top: 59px;
}
 
/* Node 1:1417: a flat swatch over the left gutter, hiding whatever has
   scrolled past. It sits OUTSIDE the scroller on purpose — an absolutely
   positioned child of a scroll container scrolls away with the content. */
.mf-reviews__mask {
	position: absolute;
	top: 14.235%;    /* 81 / 569 */
	left: 0;
	z-index: 2;
	width: min(6.094%, 117px);
	height: 76.626%; /* 436 / 569 */
	background: var(--mfr-mask);
	pointer-events: none;
}
 
.mf-reviews__slot {
	box-sizing: border-box;
	padding-left: min(6.094%, 117px);
	padding-right: min(5.573%, 107px);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
}
 
.mf-reviews__slot::-webkit-scrollbar {
	display: none;
}
 
/* --------------------------------------------------------------------------
   Dots — node 1:2750
   -------------------------------------------------------------------------- */
 
.mf-reviews__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 67px;
	gap: 13px;
}
 
.mf-reviews__dot {
	display: block;
	width: 28px;
	height: 6px;
	border: 0;
	border-radius: 14px;
	background: var(--mfr-dot-off);
	padding: 0;
}
 
.mf-reviews__dot.is-active {
	background: var(--mfr-dot);
}
 
/* Only clickable once reviews.js has turned them into buttons. */
button.mf-reviews__dot {
	cursor: pointer;
}
 
/* ==========================================================================
   SKIN — the plugin's cards, restyled to node 1:1361
 
   Every value below is measured off the Figma. The SELECTORS are the only
   unknown: they depend on which Google Reviews plugin is installed. Send the
   plugin's rendered HTML and these get pointed at the real class names.
 
   Until then this block does nothing, which is the intended state — a wrong
   guess at a plugin's class names is worse than no skin at all.
 
   Note when filling these in: use the plugin's own card class directly.
   Do NOT write `.mf-reviews__slot div` — a class plus a type selector
   outranks any single class and has hijacked lists in this theme twice.
   ========================================================================== */
 
.mf-reviews__slot .PLUGIN-ROW {
	display: flex;
	gap: var(--mfr-card-gap);
}
 
.mf-reviews__slot .PLUGIN-CARD {
	position: relative;
	flex: 0 0 var(--mfr-card-w);
	box-sizing: border-box;
	aspect-ratio: var(--mfr-card-ratio);
	min-height: 320px;
	background-image: url("…/uploads/2026/09/review-bubble.svg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	border-radius: 0;
	box-shadow: none;
}
 
.mf-reviews__slot .PLUGIN-TEXT {
	position: absolute;
	top: 6.151%;    | 35 / 569
	left: 6.705%;   | 35 / 522
	width: 87.356%; | 456 / 522
	max-height: 396px;
	overflow: hidden;
	color: var(--mfr-quote);
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(15px, 1.25vw, 24px);
	letter-spacing: -.03em;
	line-height: 1.375;
}
 
.mf-reviews__slot .PLUGIN-AVATAR {
	position: absolute;
	top: 81.371%;   | 463 / 569
	left: 0;
	width: 20.307%; | 106 / 522
	aspect-ratio: 1;
	border: 1px solid #fff;
	border-radius: 100px;
	object-fit: cover;
}
 
.mf-reviews__slot .PLUGIN-NAME {
	position: absolute;
	top: 84.007%;   | 478 / 569
	left: 22.414%;  | 117 / 522
	color: var(--mfr-name);
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(16px, 1.25vw, 24px);
	font-weight: 700;
	letter-spacing: -.03em;
}
 
.mf-reviews__slot .PLUGIN-LOCATION {
	position: absolute;
	top: 90.861%;   | 517 / 569
	left: 22.414%;
	color: var(--mfr-name);
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(14px, 1.094vw, 21px);
	letter-spacing: -.03em;
}

 
/* --------------------------------------------------------------------------
   Responsive. No desktop/mobile pair exists for the CARD component, only a
   440-wide mobile block for the head (node 1:3759), so the reflow below is
   an interpretation rather than a design match.
   -------------------------------------------------------------------------- */
 
@media (max-width: 1200px) {
 
	.mf-reviews__head {
		grid-template-columns: 100%;
	}
 
	.mf-reviews__intro,
	.mf-reviews__copy {
		grid-column: 1;
	}
 
	.mf-reviews__copy {
		padding-top: 28px;
	}
 
	.mf-reviews__arrows {
		justify-content: flex-start;
		margin-top: 28px;
	}
 
	.mf-reviews__track {
		margin-top: 40px;
	}
 
	.mf-reviews {
		--mfr-card-w: 44%;
	}
 
	.mf-reviews__dots {
		margin-top: 40px;
	}
}
 
@media (max-width: 820px) {
 
	.mf-reviews {
		--mfr-card-w: 78%;
		padding-block: 28px 44px;
	}
 
	.mf-reviews__mask {
		display: none;
	}
 
	.mf-reviews__track {
		margin-top: 32px;
	}
 
	.mf-reviews__dots {
		margin-top: 28px;
	}
}
 /* Belt-and-braces: hide GF's own progress bar if it's still showing */
.gform-theme--framework .gf_progressbar .percentbar_blue {
    background-color: #38b2ab !important;
}
.gform-theme--framework .gf_progressbar {
    background-color: var(--gf-field-pg-prog-bar-bg-color);
    border-radius: var(--gf-field-pg-prog-bar-radius);
    margin-top: -20px;
}
p.gf_progressbar_title {
    display: none;
}
.mf-gform-wrapper .gf_progressbar_wrapper {
    width: 27%;
    margin-left: 20px;
}

/* Field label / heading spacing */
.mf-gform-wrapper .gfield_label {
	color: #5ce1c9;
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 16px;
}

/* Pills wrap in a row instead of the cramped/overlapping default layout */
.mf-gform-wrapper .gfield_checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mf-gform-wrapper .gchoice {
	margin: 0 !important;
}

/* Hide the native checkbox square but keep it accessible */
.mf-gform-wrapper .gchoice input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* The pill itself */
.mf-gform-wrapper .gchoice label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: #fff;
	font-size: 15px;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
}

/* Checkmark circle before the label text */
.mf-gform-wrapper .gchoice label::before {
	content: "";
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	border-radius: 50%;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 11px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
	border: 1.5px solid rgba(255, 255, 255, 0.6);
}

/* Checked / selected state */
.mf-gform-wrapper .gchoice input[type="checkbox"]:checked + label {
	background: #2ec4b6;
	border-color: #2ec4b6;
}

.mf-gform-wrapper .gchoice input[type="checkbox"]:checked + label::before {
	border-color: #fff;
}

/* Next / Back / Submit buttons */
.mf-gform-wrapper .gform_page_footer,
.mf-gform-wrapper .gform_footer {
	display: flex;
	justify-content: flex-end;
	margin-top: 20px;
	gap: 12px;
}

.mf-gform-wrapper .gform_button {
	border-radius: 999px;
	padding: 14px 28px;
	font-size: 16px;
	font-weight: 600;
	border: none;
	cursor: pointer;
}

.mf-gform-wrapper .gform_next_button,
.mf-gform-wrapper input[type="submit"].gform_button {
	background: #2ec4b6;
	color: #fff;
}

.mf-gform-wrapper .gform_previous_button {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.6);
}
/* The whole "Tell Us About Your Project" panel */
.mf-gform-wrapper .gform_page {
    position: relative;
    backdrop-filter: blur(6px);
    border-radius: 20px;
    border: 1px solid #fff;
    background: linear-gradient(180.3deg, var(--mf-white-13) 1.15%, rgba(255, 255, 255, 0) 98.9%);
    box-shadow: -20px 22px 70px 0 rgba(0, 0, 0, 0.25);
    padding: 20px;
	    margin-top: 12px;
	
}
/* Labels */
.mf-gform-wrapper .gfield_label {
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 6px;
}
.gform-theme--foundation fieldset#field_1_3 .gform-field-label__text {
    font-size: 24px;
    letter-spacing: -0.72px;
    line-height: 1.2;
    color: var(--mf-teal);
    white-space: normal;
}
.mf-gform-wrapper .gfield_required {
	color: #ff6b6b;
}

/* Inputs */
.mf-gform-wrapper input[type="text"],
.mf-gform-wrapper input[type="email"],
.mf-gform-wrapper input[type="tel"],
.mf-gform-wrapper textarea {
	width: 100%;
	background: rgba(255, 255, 255, 0.85);
	border: none;
	border-radius: 10px;
	padding: 14px 16px;
	font-size: 14px;
	box-sizing: border-box;
}

.mf-gform-wrapper textarea {
	min-height: 130px;
	resize: none;
}

/* Grid layout: Name/Phone, Email/Location in two columns, Notes+File+CAPTCHA alongside */
.mf-gform-wrapper .gform_fields {
	grid-template-rows: auto auto;
	gap: 20px 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Assumes field order: 1 Name, 2 Phone, 3 Email, 4 Location, 5 Notes, 6 File, 7 CAPTCHA */
.mf-gform-wrapper .gform_fields > li:nth-child(1) { grid-column: 1; grid-row: 1; }
.mf-gform-wrapper .gform_fields > li:nth-child(2) { grid-column: 2; grid-row: 1; }
.mf-gform-wrapper .gform_fields > li:nth-child(3) { grid-column: 1; grid-row: 2; }
.mf-gform-wrapper .gform_fields > li:nth-child(4) { grid-column: 2; grid-row: 2; }
.mf-gform-wrapper .gform_fields > li:nth-child(5) { grid-column: 3; grid-row: 1 / span 2; }
.mf-gform-wrapper .gform_fields > li:nth-child(6) { grid-column: 4; grid-row: 1; }
.mf-gform-wrapper .gform_fields > li:nth-child(7) { grid-column: 4; grid-row: 2; }

.mf-gform-wrapper .gform_fields > li:nth-child(5) textarea {
	height: 100%;
}

/* CAPTCHA + File labels smaller, matching design */
.mf-gform-wrapper .gfield--type-captcha .gfield_label,
.mf-gform-wrapper .gfield--type-fileupload .gfield_label {
	font-size: 13px;
	letter-spacing: 0.5px;
	opacity: 0.8;
}
.gform-theme--api, .gform-theme--foundation {
    --gf-form-gap-x: 16px;
    --gf-form-gap-y: 16px !important;
}
/* Back / Submit pinned top-right, next to the heading */
.mf-gform-wrapper .gform_page_footer {
	position: absolute;
	top: 28px;
	right: 28px;
	display: flex;
	gap: 12px;
	margin: 0;
}
@media (max-width: 768px) {

	/* ---------- Step 1: service pills ---------- */

	.mf-gform-wrapper .gfield_checkbox {
		flex-direction: column;
		gap: 10px;
	}

	.mf-gform-wrapper .gchoice label {
		width: 100%;
		box-sizing: border-box;
		padding: 12px 16px;
		font-size: 14px;
	}

	.mf-gform-wrapper .gform_page_footer:has(.gform_next_button) {
		position: static;
		justify-content: stretch;
		margin-top: 16px;
	}

	.mf-gform-wrapper .gform_next_button {
		width: 100%;
		justify-content: center;
	}

	/* ---------- Step 2: "Tell Us About Your Project" ---------- */

	.mf-gform-wrapper .gform_page {
		padding: 24px 20px 20px;
	}

	/* Buttons drop out of the absolute top-right position and sit
	   below the fields instead, full width, stacked */
	.mf-gform-wrapper .gform_page_footer {
		position: static;
		flex-direction: column;
		margin-top: 24px;
	}

	.mf-gform-wrapper .gform_page_footer .gform_button {
		width: 100%;
		justify-content: center;
	}

	/* Single column, natural field order, no more grid spanning */
	.mf-gform-wrapper .gform_fields {
		gap: 18px;
	}

	.mf-gform-wrapper .gform_fields > li:nth-child(1),
	.mf-gform-wrapper .gform_fields > li:nth-child(2),
	.mf-gform-wrapper .gform_fields > li:nth-child(3),
	.mf-gform-wrapper .gform_fields > li:nth-child(4),
	.mf-gform-wrapper .gform_fields > li:nth-child(5),
	.mf-gform-wrapper .gform_fields > li:nth-child(6),
	.mf-gform-wrapper .gform_fields > li:nth-child(7) {
		grid-column: 1;
		grid-row: auto;
	}

	.mf-gform-wrapper .gform_fields > li:nth-child(5) textarea {
		height: auto;
		min-height: 110px;
	}
}
.mf-gform-wrapper .gfield_label,
.mf-gform-wrapper legend.gfield_label {
	color: #fff !important;
}

.mf-gform-wrapper .gform_button,
.mf-gform-wrapper input.gform_button,
.mf-gform-wrapper input[type="submit"] {
	background: #2ec4b6 !important;
	color: #fff !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 14px 28px !important;
}

.mf-gform-wrapper .gform_previous_button {
	background: transparent !important;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, 0.6) !important;
}
/* Service checkbox layout */
#gform_wrapper_1 #input_1_3 {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    gap: 15px 0;
    width: 75%;
}
.gform-theme--framework .gf_progressbar .percentbar_blue {
    background-color: #38b2ab !important;
    height: 5px;
    margin-bottom: 30px;
    border-radius: 20px;
}
.gf_progressbar_percentage.percentbar_blue.percentbar_50 span {
    visibility: hidden;
}
fieldset#field_1_3 {
    border: none;
}
/* Reset Gravity Forms choice layout */
#gform_wrapper_1 #input_1_3 .gchoice {
    position: relative;
    display: block !important;
    max-width: 100%;
    margin: 0 !important;
    flex: 0 0 calc((84% - 7px) / 4) !important;
    min-width: 0;
}

/* Hide native checkbox visually; retain keyboard access */
#gform_wrapper_1 #input_1_3 .gfield-choice-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Rounded translucent pill */
#gform_wrapper_1 #input_1_3 .gchoice label {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    width: auto;
    margin: 0 !important;
    padding: 12px 20px !important;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.30);
    color: #fff !important;
    font-size: 18px;
    line-height: 1.2;
    cursor: pointer;
    box-sizing: border-box;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

/* Circular tick */
#gform_wrapper_1 #input_1_3 .gchoice label::before {
    content: "✓" !important;
    position: static !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 13px;
    line-height: 1;
    box-sizing: border-box;
    transform: none !important;
}

/* Prevent a decorative tick appearing twice */
#gform_wrapper_1 #input_1_3 .gchoice label::after {
    content: none !important;
}

/* Hover */
#gform_wrapper_1 #input_1_3 .gchoice label:hover {
    background: rgba(255, 255, 255, 0.23);
    border-color: rgba(255, 255, 255, 0.65);
}

/* Selected service */
#gform_wrapper_1 #input_1_3 input:checked + label {
    background: #65d9d3;
    border-color: #65d9d3;
    color: #174c49 !important;
}

#gform_wrapper_1 #input_1_3 input:checked + label::before {
    background: #fff;
    border-color: #fff;
    color: #218c86;
}

/* Keyboard focus */
#gform_wrapper_1 #input_1_3 input:focus-visible + label {
    outline: 3px solid #65d9d3;
    outline-offset: 4px;
}

/* Next / Back / Submit buttons */
#gform_wrapper_1 .gform_next_button,
#gform_wrapper_1 .gform_previous_button,
#gform_wrapper_1 .gform_button {
    display: inline-flex !important;
    align-items: center;
    gap: 14px;
    height: auto !important;
    padding: 4px 4px 4px 28px !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-size: 18px !important;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: filter .2s ease;
}
div#gform_1_validation_container {
    display: none;
}
#gform_wrapper_1 .gform_next_button,
#gform_wrapper_1 .gform_button {
    background: #65d9d3 !important;
    color: #10403d !important;
}

#gform_wrapper_1 .gform_previous_button {
    background: #fff !important;
    color: #10403d !important;
}

/* Circular arrow badge */
#gform_wrapper_1 .gform_next_button::after,
#gform_wrapper_1 .gform_previous_button::after,
#gform_wrapper_1 .gform_button::after {
    content: "";
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: #fff;
    background-image: url("/wp-content/uploads/2026/09/arrow-icon.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
}

#gform_wrapper_1 .gform_previous_button::after {
    background-color: #65d9d3;
}

#gform_wrapper_1 .gform_next_button:hover,
#gform_wrapper_1 .gform_previous_button:hover,
#gform_wrapper_1 .gform_button:hover {
    filter: brightness(1.06);
}

/* Mobile */
@media (max-width: 767px) {
    #gform_wrapper_1 #input_1_3 {
        gap: 10px !important;
        width: 100%;
    }

    #gform_wrapper_1 #input_1_3 .gchoice {
        flex: 0 0 calc(50% - 5px);
        min-width: 0;
    }

    #gform_wrapper_1 #input_1_3 .gchoice label {
        display: flex !important;
        width: 100% !important;
        min-height: 46px;
        padding: 10px 12px !important;
        gap: 8px;
        font-size: 13px !important;
    }

    #gform_wrapper_1 #input_1_3 .gchoice label::before {
        flex-basis: 18px;
        width: 18px;
        height: 18px;
        font-size: 11px;
    }

    #gform_wrapper_1 .gform_next_button,
    #gform_wrapper_1 .gform_previous_button,
    #gform_wrapper_1 .gform_button {
        font-size: 16px !important;
        padding: 6px 6px 6px 22px !important;
        gap: 10px;
    }

    #gform_wrapper_1 .gform_next_button::after,
    #gform_wrapper_1 .gform_previous_button::after,
    #gform_wrapper_1 .gform_button::after {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
        background-size: 13px 13px;
    }
}
/* ============ STEP 2: Tell Us About Your Project ============ */
#gform_page_1_2 {
    position: relative;
    background: rgba(25, 28, 30, 0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 24px;
    padding: 86px 32px 32px !important;
}

#gform_page_1_2::before {
    content: "Tell Us About Your Project";
    position: absolute;
    top: 32px;
    left: 32px;
    color: #65d9d3;
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
}

/* Buttons pinned top-right */
#gform_page_1_2 .gform_page_footer {
    position: absolute;
    top: 22px;
    right: 32px;
    display: flex;
    gap: 14px;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Labels */
#gform_page_1_2 .gfield_label {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    margin-bottom: 8px !important;
}

#gform_page_1_2 .gfield_required {
    color: #fff !important;
}

/* Hide the First / Country / Street Address sub-labels */
#gform_page_1_2 .gform-field-label--type-sub {
    display: none !important;
}

#gform_page_1_2 .gfield_fileupload_rules {
    display: none !important;
}

/* Inputs */
#gform_page_1_2 input[type="text"],
#gform_page_1_2 input[type="email"],
#gform_page_1_2 input[type="tel"],
#gform_page_1_2 select {
    width: 100% !important;
    height: 52px !important;
    padding: 0 16px !important;
    background: rgba(255, 255, 255, 0.75) !important;
    border: 0 !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    color: #10403d !important;
    box-sizing: border-box;
}

#gform_page_1_2 textarea {
    width: 100% !important;
    min-height: 165px;
    padding: 14px 16px !important;
    background: rgba(255, 255, 255, 0.75) !important;
    border: 0 !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    resize: none;
    box-sizing: border-box;
}

/* Layout — Gravity Forms uses a 12-column grid */
#gform_page_1_2 .gform_fields {
    gap: 18px 20px !important;
}

#gform_page_1_2 #field_1_5  { grid-column: 1 / span 3 !important;  grid-row: 1 !important; }
#gform_page_1_2 #field_1_6  { grid-column: 4 / span 3 !important;  grid-row: 1 !important; }
#gform_page_1_2 #field_1_7  { grid-column: 1 / span 3 !important;  grid-row: 2 !important; }
#gform_page_1_2 #field_1_8  { grid-column: 4 / span 3 !important;  grid-row: 2 !important; }
#gform_page_1_2 #field_1_10 { grid-column: 11 / span 2 !important; grid-row: 1 !important; }
#gform_page_1_2 #field_1_11 {
    grid-column: 4 / span 3 !important;
    grid-row: 2 !important;
}

#gform_page_1_2 #field_1_9 {
    grid-column: 7 / span 4 !important;
    grid-row: 1 / span 2 !important;
    display: flex;
    flex-direction: column;
}

#gform_page_1_2 #field_1_9 .ginput_container {
    flex: 1;
}

/* Step 2 mobile */
@media (max-width: 767px) {
    #gform_page_1_2 {
        padding: 70px 18px 24px !important;
        border-radius: 18px;
    }

    #gform_page_1_2::before {
        top: 24px;
        left: 18px;
        font-size: 18px;
    }

    #gform_page_1_2 .gform_page_footer {
        position: static;
        margin-top: 22px !important;
        justify-content: flex-start;
    }

    #gform_page_1_2 .gform_fields > .gfield {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }

    #gform_page_1_2 #field_1_9 {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }

    #gform_page_1_2 textarea {
        height: auto !important;
        min-height: 120px;
    }
	
    #gform_page_1_2 #field_1_11 {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }
}
/* ==========================================================================
   MOBILE FRAMING — MOBILE STYLESHEET, ALL SECTIONS
   Breakpoint: <= 767px (with a 1024 tablet tidy where the desktop rules
   leave gaps).

   Values derived from the Figma mobile frame:
   file FV7LRaWs3NuDRhlzVrOeRO, node 1:3892 — "iPhone 16 Plus", 430 x 13782.

   Measured from that frame and used throughout:
     side gutter ......... 20px  (content starts x20-x38, cards x21)
     card width .......... 388px (= 430 - 21 - 21)
     eyebrow pill ........ 139-294 x 46, text 20px
     H2 .................. 287-347 wide x 74 tall (2 lines) -> 28px / 37px
     body ................ 374-401 wide, 29px line boxes  -> 16px / 29px
     button (b1) ......... 128 x 41, 36px circle, 18px label
     stat value .......... 144 x 57 -> 40px ; label 261 x 36 -> 20px
     section rhythm ...... ~40px top / ~48px bottom

   Paste AFTER all existing CSS. Fix the two stray braces first (the one
   after .mf-services__card--stretching, and the unclosed .stat__label whose
   @media block is nested inside it) or none of this will scope correctly.
   ========================================================================== */

/* ==========================================================================
   TABLET TIDY (<= 1024px) — only what the desktop rules miss
   ========================================================================== */
@media (max-width: 1024px) {

	.mf-products__inner,
	.mf-reviews__inner {
		padding-left: var(--mf-gutter);
		padding-right: var(--mf-gutter);
	}

	.stats-card {
		grid-template-columns: repeat(2, 1fr);
	}

	.about__top {
		gap: 16px;
	}
}

/* ==========================================================================
   MOBILE (<= 767px)
   ========================================================================== */
@media (max-width: 767px) {

	/* ----------------------------------------------------------------------
	   0. Global levers
	   --mf-gutter is used by most sections, so setting it once here fixes
	   the horizontal inset everywhere at a stroke.
	   ---------------------------------------------------------------------- */
	:root {
		--mf-gutter: 20px;
		--mf-grid-gap: 16px;
		--mf-card-pad: 18px;
		--mf-radius-card: 20px;
		--mf-radius-panel: 15px;
	}

	body {
		overflow-x: hidden;
	}

	img,
	video,
	iframe {
		max-width: 100%;
	}

	/* Shared components -------------------------------------------------- */
	.badge-pill {
		min-height: 46px;
		padding: 0 20px;
		font-size: 18px;
	}

	.quote-btn,
	.quote-btn.mf-loc__cta,
	.quote-btn.mf-connect__btn,
	.quote-btn.mf-bento__call {
		min-width: 128px;
		padding: 5px 5px 5px 18px;
		font-size: 18px;
	}

	.quote-btn .mf-next-btn__icon,
	.quote-btn.mf-loc__cta .mf-next-btn__icon,
	.quote-btn.mf-connect__btn .mf-next-btn__icon {
		width: 36px;
		height: 36px;
	}

	.quote-btn .mf-next-btn__icon img.arrow {
		top: 25%;
		right: 25%;
		width: 50%;
		height: 50%;
	}

	/* ----------------------------------------------------------------------
	   1. HERO  (Figma: component 405 wide inside 430 -> 12px gutters)
	   ---------------------------------------------------------------------- */
	    .mf-hero__content {
        padding: 75px 14px 20px 14px !important;
    }

	.mf-badge {
		width: 50%;
		
	}

	.mf-badge__text {
		font-size: 16px;
		white-space: normal;
	}

	.mf-headline,
	.mf-headline-quote,
	.mf-headline-2 {
		font-size: 34px !important;
		letter-spacing: -1.02px !important;
		white-space: normal;
	}

	.mf-subtext {
		width: 100% !important;
		font-size: 16px;
		line-height: 1.75;
	}

	.mf-quote-sec {
		width: 100% !important;
		margin-top: 70%;
	}

	.mf-quote-sec__divider {
		display: none;
	}
	#gform_wrapper_1 #input_1_3 .gchoice
 {
    flex: 0 0 calc((100% - 20px) / 2)
	}

	/* Progress card — 83px, label + circle, GF's bar pulled up into it */
	.mf-step-mini {
		box-sizing: border-box;
		width: 100% !important;
		margin: 0 0 16px !important;
		padding: 11px 8px 30px !important;
		border: 2px solid #fff;
		border-radius: 15px;
	}

	.mef-step-mini-wrapper {
		gap: 10px;
		padding-bottom: 0;
	}

	.mf-step-mini__label {
		min-width: 0;
		overflow: hidden;
		font-size: 20px !important;
		line-height: 39px;
		letter-spacing: -0.63px;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.mf-step-mini__circle {
		flex: 0 0 40px !important;
		width: 40px !important;
		height: 40px !important;
	}

	.mf-step-mini__circle span {
		font-size: 22px;
		letter-spacing: -0.66px;
	}

	.mf-gform-wrapper .gf_progressbar_wrapper {
		width: calc(100% - 16px) !important;
		margin: -34px 8px 18px !important;
	}

	.gform-theme--framework .gf_progressbar {
		height: 6px !important;
		margin-top: 0 !important;
		background-color: #fff !important;
		border-radius: 70px !important;
	}

	.gform-theme--framework .gf_progressbar .percentbar_blue {
		height: 6px !important;
		border-radius: 70px !important;
		box-shadow: 7px 4px 8px rgba(0, 0, 0, 0.25);
	}

	/* Form cards */
	.mf-gform-wrapper .gform_page,
	#gform_page_1_1,
	#gform_page_1_2 {
		box-sizing: border-box;
		padding: 20px 15px 21px !important;
		border: 2px solid #fff;
		border-radius: 15px;
	}

	/* Pills — 2 per row, 47px tall */
	#gform_wrapper_1 #input_1_3 {
		width: 100% !important;
		gap: 12px 27px !important;
	}

	#gform_wrapper_1 #input_1_3 .gchoice {
		flex: 0 0 calc((100% - 27px) / 2) !important;
	}

	#gform_wrapper_1 #input_1_3 .gchoice label {
		display: flex !important;
		justify-content: center;
		gap: 8px;
		width: 100% !important;
		min-height: 47px;
		padding: 6px 10px !important;
		font-size: 16px !important;
		line-height: 1.3;
		letter-spacing: -0.72px;
		text-align: center;
		background: rgba(217, 217, 217, 0.2);
		border: 0 !important;
		border-radius: 100px;
	}

	#gform_wrapper_1 #input_1_3 .gchoice label::before {
		flex-basis: 22px;
		width: 22px;
		height: 22px;
		font-size: 12px;
	}

	.gform-theme--foundation fieldset#field_1_3 .gform-field-label__text {
		font-size: 20px !important;
		letter-spacing: -0.6px;
	}

	/* Form buttons — centred, 128 x 41 */
	#gform_wrapper_1 .gform_page_footer,
	#gform_wrapper_1 .gform_footer {
		position: static !important;
		display: flex;
		justify-content: center;
		gap: 12px;
		margin-top: 14px !important;
	}

	#gform_wrapper_1 .gform_next_button,
	#gform_wrapper_1 .gform_previous_button,
	#gform_wrapper_1 .gform_button {
		width: 20%;
		min-width: 128px;
		height: 41px !important;
		padding: 0 6px 0 18px !important;
		font-size: 18px !important;
		        margin: 0 auto;
	}

	#gform_wrapper_1 .gform_next_button::after,
	#gform_wrapper_1 .gform_previous_button::after,
	#gform_wrapper_1 .gform_button::after {
		flex-basis: 36px;
		width: 36px;
		height: 36px;
		background-size: 14px 14px;
	}

	#gform_page_1_2 {
		padding-top: 62px !important;
	}

	#gform_page_1_2::before {
		top: 20px;
		left: 15px;
		font-size: 18px;
	}

	#gform_page_1_2 .gform_fields > .gfield {
		grid-column: 1 / -1 !important;
		grid-row: auto !important;
	}

	#gform_page_1_2 textarea {
		height: auto !important;
		min-height: 120px;
	}

	/* ----------------------------------------------------------------------
	   2. ABOUT  (Figma y1163 — pill, H2 347x74, copy 390x174, then cards)
	   ---------------------------------------------------------------------- */
	.about {
		padding: 40px 20px 48px;
	}

	.about__intro,
	.about__features {
		grid-template-columns: 1fr;
		gap: 20px;
		margin-bottom: 24px;
	}

	.about__heading {
		font-size: 28px;
		line-height: 1.32;
		letter-spacing: -0.84px;
	}

	.about__text {
		font-size: 16px;
		line-height: 1.8;
	}
span.mf-headline__accent {
    color: #39B2AB;
}
	.profile-card {
		flex-direction: column;
		gap: 16px;
		padding: 20px;
		border-radius: 20px;
	}

	.profile-card__title {
		max-width: none;
		margin-bottom: 12px;
		font-size: 24px;
		line-height: 1.3;
	}

	.profile-card__desc {
		width: 100%;
		max-width: none;
		font-size: 16px;
		line-height: 1.7;
	}

	.profile-card__photo {
		position: relative;
		width: 100%;
		height: 240px;
	}

	.profile-card__photo img {
		position: absolute;
		left: 0;
		right: 0;
		width: 100%;
		object-fit: contain;
		object-position: center bottom;
	}

	.profile-card__footer {
		gap: 12px;
		padding-top: 16px;
	}

	.profile-card__footer-label {
		font-size: 18px;
		white-space: normal;
	}

	.badge-float {
    display:none;
	}

	.media-card {
		aspect-ratio: 16 / 10;
		border-radius: 20px;
	}

	/* ----------------------------------------------------------------------
	   3. STATS  (Figma: 4 rows, value 40px, label 20px, 211px rules)
	   ---------------------------------------------------------------------- */
	.stats-section {
		padding: 40px 20px 48px;
	}

	.stats-section__heading {
		margin-bottom: 24px;
		font-size: 20px;
		line-height: 1.32;
		letter-spacing: -0.84px;
	}

	.stats-card {
		grid-template-columns: 1fr;
		padding: 16px 18px;
		border-radius: 24px;
	}

	.stat {
		gap: 8px;
		padding: 20px 12px;
		border-left: none !important;
		border-top: 1px solid var(--mf-teal);
	}

	.stat:first-child {
		border-top: none;
	}

	.stat__value {
		font-size: 30px;
		letter-spacing: -1.2px;
	}

	.stat__label {
		font-size: 18px;
	}

	/* The .mf-legacy variant of the same section */
	.mf-legacy {
		padding-block: 40px 48px;
	}

	.mf-legacy__panel {
		padding-block: 20px 20px;
		border-radius: 24px;
	}

	.mf-legacy__stats {
		grid-template-columns: 1fr;
		row-gap: 22px;
		padding-inline: 12px;
	}

	.mf-legacy__value {
		font-size: 40px;
	}

	.mf-legacy__label {
		font-size: 18px;
	}

	/* ----------------------------------------------------------------------
	   4. WHY CHOOSE US  (Figma y3121 — icon 47px at x14, copy 350 wide at x77)
	   ---------------------------------------------------------------------- */
	    .mf-why {
        padding: 40px 20px 48px;
    }

	.mf-why__grid {
		row-gap: 20px;
		margin-top: 16px;
	}

	.mf-why__title {
		font-size: 28px;
		line-height: 1.32;
	}

	.mf-why__lead {
		font-size: 16px;
		line-height: 1.8;
	}

	.mf-why__figure {
		aspect-ratio: 388 / 252;
		border-radius: 20px;
	}

	.mf-why__more {
		top: 10px;
		right: 10px;
	}

	.mf-btn--glass {
		display: none;
	}

	.why-icon {
		width: 32px;
		height: 32px;
		top: 6px;
		right: 5px;
	}

	/* icon stays beside the copy, as the design draws it */
	.mf-why__item {
		flex-direction: row;
		gap: 14px;
		align-items: flex-start;
		min-height: 0;
		padding-block: 22px;
	}

	.mf-why__icon {
		width: 47px;
		height: 47px;
	}

	.mf-why__item-title {
		font-size: 22px;
		line-height: 1.3;
	}

	.mf-why__item-text {
		font-size: 16px;
		line-height: 1.75;
	}

	/* ----------------------------------------------------------------------
	   5. HOW IT WORKS / PROCESS  (Figma y4522 — full-width cards, 01/02/03)
	   ---------------------------------------------------------------------- */
	.mf-process {
		padding-block: 40px 48px;
	}

	.mf-process__grid {
		row-gap: 24px;
	}

	.mf-process__title {
		margin-top: 16px;
		font-size: 28px;
		line-height: 1.32;
	}

	.mf-process__lead {
		font-size: 16px;
		line-height: 1.8;
	}

	.mf-process__steps {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.mf-process__step--1 .mf-process__card,
	.mf-process__step--2 .mf-process__card,
	.mf-process__step--3 .mf-process__card {
		aspect-ratio: 383 / 405;
		border-radius: 20px;
	}

	.mf-process__num {
		top: 14px;
		left: 14px;
		font-size: 36px;
	}

	.mf-process__pill,
	.mf-process__pill--inline {
		right: 12px;
		bottom: 12px;
		left: 12px;
		min-height: 44px;
		font-size: 16px;
	}

	.mf-process__note {
		font-size: 16px;
		line-height: 1.7;
	}

	/* ----------------------------------------------------------------------
	   6. PRODUCTS  (Figma y5327 — 378x560 image, 351x61 price bar)
	   ---------------------------------------------------------------------- */
	.mf-products {
		padding-block: 40px 48px;
	}

	.mf-products__inner {
		padding-left: 20px;
		padding-right: 20px;
	}

	.mf-products__title,
	.mf-products__product-title {
		font-size: 28px;
		line-height: 1.32;
	}

	.mf-products__lead,
	.mf-products__desc,
	.mf-products__rating-label {
		font-size: 16px;
		line-height: 1.8;
	}

	.badge-pill.mf-products__pill {
		min-height: 46px;
		padding: 0 20px;
		font-size: 18px;
	}

	.mf-products__featured {
		aspect-ratio: 378 / 560;
		border-radius: 20px;
	}

	.mf-products__bar {
		right: 4%;
		left: 4%;
		height: auto;
		min-height: 56px;
		padding: 6px 6px 6px 18px;
		gap: 10px;
	}

	.mf-products__price {
		font-size: 20px;
	}

	.mf-products__buy {
		font-size: 16px;
	}

	.mf-products__cart {
		width: 40px;
		height: 40px;
	}

	.mf-products__rating {
		margin-top: 20px;
	}

	.mf-products__arrow {
		width: 56px;
		height: 56px;
	}

	.mf-products__card {
		flex: 0 0 62%;
	}

	/* ----------------------------------------------------------------------
	   7. BENTO / JERSEY + OFFER  (Figma y7611 — 388-wide cards)
	   ---------------------------------------------------------------------- */
	.mf-bento {
		padding-block: 40px;
	}

	.mf-bento__title {
		font-size: 28px;
		line-height: 1.32;
	}

	.mf-bento__card-title {
		font-size: 24px;
		line-height: 1.35;
	}

	.mf-bento__card-text {
		font-size: 16px;
		line-height: 1.7;
	}

	.mf-bento__offer-title {
		font-size: 26px;
		line-height: 1.32;
	}

	.mf-bento__offer-pill {
		min-height: 46px;
		font-size: 18px;
	}

	.mf-bento__card--jersey,
	.mf-bento__card--unique {
		padding: 22px 22px 96px;
		border-radius: 20px;
	}

	.mf-bento__card--offer {
		padding: 22px;
		border-radius: 20px;
	}

	.mf-bento__badge {
		bottom: 22px;
		right: 22px;
		width: 56px !important;
	}

	/* ----------------------------------------------------------------------
	   8. SERVICES  (Figma y6459 / y7241 — cards stack, no hover expansion)
	   ---------------------------------------------------------------------- */
	.mf-services {
		padding-block: 40px 48px;
	}

	.mf-services__container {
		padding-inline: 20px;
	}

	.mf-services__title {
		padding-bottom: 12px;
		font-size: 28px;
		line-height: 1.32;
	}

	.mf-services__lead {
		font-size: 16px;
		line-height: 1.8;
	}

	.mf-services__row {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.mf-services__card,
	.mf-services__card--active {
		aspect-ratio: 388 / 260;
		border-radius: 20px;
	}

	.mf-services__name {
		font-size: 22px;
	}

	.mf-services__go {
		width: 48px;
		height: 48px;
		padding: 11px;
	}

	/* ----------------------------------------------------------------------
	   9. INSTAGRAM FEED  (Figma y8982 — one 368x542 post, arrows below)
	   ---------------------------------------------------------------------- */
	.mf-feed {
		padding: 40px 0 48px;
	}

	.mf-feed__container {
		padding-inline: 20px;
		row-gap: 24px;
	}

	.mf-feed__title {
		font-size: 28px;
		line-height: 1.32;
	}

	.mf-feed__lead {
		padding-bottom: 20px;
		font-size: 16px;
		line-height: 1.8;
	}

	.mf-feed__cta {
		margin-top: 0;
	}

	.mf-feed__post {
		flex: 0 0 86%;
		border-radius: 20px;
	}

	/* ----------------------------------------------------------------------
	   10. TEAM
	   ---------------------------------------------------------------------- */
	.mf-team {
		padding: 40px 0 48px;
	}

	.mf-team__head {
		padding-inline: 20px;
		row-gap: 12px;
	}

	.mf-team__title {
		padding-bottom: 10px;
		font-size: 28px;
		line-height: 1.32;
	}

	.mf-team__lead {
		font-size: 16px;
		line-height: 1.8;
	}

	.mf-team__scroller {
		padding-left: 20px;
	}

	.mf-team .mf-team__row > .mf-team__card {
		flex-basis: 86%;
	}

	.mf-team__name {
		font-size: 22px;
	}

	.mf-team__role {
		font-size: 16px;
	}

	.mf-team .mf-team__arrow {
		width: 46px;
		height: 46px;
	}

	/* ----------------------------------------------------------------------
	   11. FAQ
	   ---------------------------------------------------------------------- */
	.mf-faq {
		padding: 40px 0 48px;
	}

	.mf-faq__container {
		padding-inline: 20px;
		row-gap: 20px;
	}

	.mf-faq__title {
		font-size: 28px;
		line-height: 1.32;
	}

	.mf-faq__lead,
	.mf-faq__a {
		font-size: 16px;
		line-height: 1.8;
	}

	.mf-faq__q {
		gap: 12px;
		font-size: 18px;
		line-height: 1.45;
	}

	.mf-faq__toggle {
		width: 38px;
		height: 38px;
	}

	.mf-faq__item {
		padding-block: 16px;
	}

	/* ----------------------------------------------------------------------
	   12. LOCATIONS  (Figma y9973 — 2-up cards, 292x212 each)
	   ---------------------------------------------------------------------- */
	.mf-loc {
		padding: 40px 20px 48px;
	}

	.mf-loc__stage {
		grid-template-columns: repeat(2, 1fr);
		gap: 26px 14px;
	}

	.mf-loc__center {
		margin-bottom: 12px;
	}

	.mf-loc__pill {
		padding: 7px 18px;
		font-size: 18px;
	}

	.mf-loc__title {
		font-size: 28px;
		line-height: 1.32;
	}

	.mf-loc__lead {
		font-size: 16px;
		line-height: 1.75;
	}

	.mf-loc__name {
		font-size: 15px;
		line-height: 2;
	}

	/* ----------------------------------------------------------------------
	   13. CONNECT  (Figma y11876 — 3-across photo grid, then centred copy)
	   ---------------------------------------------------------------------- */
    .mf-connect {
        padding: 20px 10px 50px 10px;
        height: 88vh;
        background-image: url(/wp-content/uploads/2026/09/memories-sec-bg.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

	.mf-connect__strip {
		gap: 10px;
		padding-inline: 20px;
	}

	.mf-connect__photo {
		width: clamp(110px, 30vw, 130px);
		border-radius: 12px;
	}

	.mf-connect__copy {
		margin-top: 24px;
		padding-inline: 20px;
	}

	.mf-connect__pill {
		padding: 7px 18px;
		font-size: 18px;
	}

	.mf-connect__title {
		font-size: 28px;
		line-height: 1.32;
	}

	.mf-connect__lead {
		min-height: 0;
		font-size: 16px;
		line-height: 1.8;
	}

	/* ----------------------------------------------------------------------
	   14. TESTIMONIALS / REVIEWS  (Figma y11098 — 383x409 card, 58px avatar)
	   ---------------------------------------------------------------------- */
	.mf-reviews {
		--mfr-card-w: 88%;
		padding-block: 40px 48px;
	}

	.mf-reviews__inner {
		padding-left: 20px;
		padding-right: 20px;
	}

	.mf-reviews__copy {
		padding-top: 20px;
	}

	.mf-reviews__title {
		margin-top: 14px;
		font-size: 28px;
		line-height: 1.32;
	}

	.mf-reviews__lead {
		font-size: 16px;
		line-height: 1.8;
	}

	.badge-pill.mf-reviews__pill {
		min-height: 46px;
		padding: 0 20px;
		font-size: 18px;
	}

	.mf-reviews__arrows {
		gap: 16px;
		margin-top: 20px;
	}

	.mf-reviews__arrow {
		width: 52px;
		height: 52px;
	}

	.mf-reviews__track {
		margin-top: 24px;
	}

	.mf-reviews__slot {
		padding-left: 20px;
		padding-right: 20px;
	}

	.mf-reviews__dots {
		margin-top: 24px;
	}

	/* ----------------------------------------------------------------------
	   15. FOOTER  (Figma y12874 — 2 link columns, stacked CTAs)
	   ---------------------------------------------------------------------- */
	.site-footer {
		padding: 32px 0 28px;
	}

	.site-footer__inner {
		width: calc(100% - 40px);
	}

	.site-footer__headline {
		font-size: 30px;
		line-height: 1.2;
	}

	.site-footer__intro {
		font-size: 16px;
		line-height: 1.7;
	}

	.site-footer__trust {
		column-gap: 20px;
		row-gap: 8px;
		margin-top: 20px;
	}

	.site-footer__trust li {
		font-size: 16px;
		white-space: normal;
	}

	.site-footer__trust img {
		width: 22px;
		height: 22px;
	}

	.site-footer__ctas {
		align-items: stretch;
		gap: 12px;
		margin-top: 20px;
	}

	.site-footer__quote,
	.site-footer__call {
		justify-content: space-between;
		min-height: 50px;
		font-size: 17px;
	}

	.site-footer__call {
		justify-content: center;
	}

	.site-footer__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 26px 16px;
		margin-top: 28px;
	}

	.site-footer__brand {
		grid-column: 1 / -1;
		width: 150px;
		height: 80px;
	}

	.site-footer__col-title {
		font-size: 18px;
	}

	.site-footer__col-links a {
		font-size: 16px;
	}

	.site-footer__col-links li + li {
		margin-top: 10px;
	}

	.site-footer__social-list img {
		width: 38px;
		height: 38px;
	}

	.site-footer__legal {
		margin-top: 20px;
		text-align: left;
	}

	.site-footer__legal a {
		font-size: 16px;
	}

	.site-footer__bottom {
		justify-content: flex-start;
		margin-top: 20px;
		font-size: 15px;
		line-height: 1.6;
	}

	.site-footer__rule {
		margin-top: 24px;
	}
}

/* ==========================================================================
   SMALL PHONES (<= 400px) — only where 2-up stops fitting
   ========================================================================== */
@media (max-width: 400px) {

	#gform_wrapper_1 #input_1_3 {
		gap: 10px !important;
	}

	#gform_wrapper_1 #input_1_3 .gchoice {
		flex: 0 0 calc(50% - 5px) !important;
	}

	#gform_wrapper_1 #input_1_3 .gchoice label {
		min-height: 44px;
		font-size: 14px !important;
	}

	.mf-step-mini__label {
		font-size: 17px !important;
	}

	.mf-loc__stage {
		grid-template-columns: 1fr;
	}

	.site-footer__cols {
		grid-template-columns: 1fr;
	}

	.mf-headline,
	.mf-headline-quote,
	.mf-headline-2 {
		font-size: 29px !important;
	}
}
@media (max-width: 767px) {

    /* Full-bleed 60px bar, flush to the top */
    .site-header {
        top: 0;
        padding-inline: 0;
    }

    .site-header__bar {
        min-height: 60px;
        max-width: none;
        gap: 0;
        padding: 5px 9px 5px 8px;
        border-radius: 0;
    }

    /* Logo plate — 100 x 48 */
    .site-branding {
        width: 100px;
        height: 48px;
        padding: 4px 8px;
        border-radius: 12px;
    }

    .site-branding .custom-logo,
    .site-branding .custom-logo-link {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    /* The design shows only the menu icon at this width */
    .site-header__actions {
        margin-left: auto;
    }

    .site-header__cart,
    .site-header__contact {
        display: none;
    }

    /* Menu icon — 38 x 38, 9px from the right edge */
    .menu-toggle {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

    .menu-toggle__bars,
    .menu-toggle__bars::before,
    .menu-toggle__bars::after {
        width: 18px;
    }

    .menu-toggle__bars::before { top: -6px; }
    .menu-toggle__bars::after  { top: 6px; }

    /* Dropdown spans the full width under the bar */
    .main-navigation > ul {
        top: calc(100% + 0px);
        right: 9px;
        left: 8px;
        min-width: 0;
        padding: 10px;
        border-radius: 12px;
    }

    .main-navigation > ul a {
        padding: 11px 12px;
        font-size: 17px;
    }
}
/* Make the nav the positioning context for the panel */

@media (max-width: 1200px) {

    .main-navigation > ul,
    .main-navigation > div > ul {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        z-index: 5;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        min-width: min(320px, calc(100vw - 32px));
        padding: 12px;
        background-color: rgba(0, 0, 0, 0.88);
        border-radius: 14px;
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .main-navigation.toggled > ul,
    .main-navigation.toggled > div > ul {
        display: flex;
    }

    .main-navigation > ul a,
    .main-navigation > div > ul a {
        padding: 10px 12px;
        font-size: clamp(16px, 2.4vw, 20px);
        border-radius: 9px;
    }
}

@media (max-width: 767px) {

       .main-navigation > ul, .main-navigation > div > ul {
        top: calc(100% + 0px);
        right: 0;
        left: 0;
        min-width: 0;
        padding: 10px;
        border-radius: 12px;
        width: 100%;
    }

    .main-navigation > ul a,
    .main-navigation > div > ul a {
        padding: 11px 12px;
        font-size: 17px;
    }
    .mf-hero {
        background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url(/wp-content/uploads/2026/10/mobile-banner-hero.webp);
        background-position: top;
    }
	.mf-hero--about {
    background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url(/wp-content/uploads/2026/10/Frame-2095585406-1.png) !important;
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
}
	.mf-hero--shop {
    background-image: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.45)), url(/wp-content/uploads/2026/09/Frame-2095585416.png) !important;
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
}.mf-hero--artist {
    background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url(/wp-content/uploads/2026/09/Frame-2095585415.png) !important;
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
}
	.mf-hero--gallery {
    background-image: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.45)), url(/wp-content/uploads/2026/09/Frame-2095585422-3.png) !important;
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
}
	.mf-hero--service {
    background-image: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.45)), url(/wp-content/uploads/2026/09/Frame-2095585413-1.png) !important;
}
}
@media (max-width: 1200px) {

    /* No white plate — the icon sits straight on the bar */
    .menu-toggle {
        width: 38px;
        height: 38px;
        padding: 0;
        background-color: transparent;
        border: 0;
        border-radius: 0;
    }

    /* The span becomes the icon */
    .menu-toggle__bars {
        width: 38px;
        height: 38px;
        background-color: transparent;
        background-image: url("/wp-content/uploads/2026/09/ad1c6ce2-570c-456b-ae5a-a82349c44dd7.svg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        border-radius: 0;
    }

    .menu-toggle__bars::before,
    .menu-toggle__bars::after {
        display: none;
    }

    /* Open state — the grid becomes a close mark */
    .main-navigation.toggled .menu-toggle__bars {
        background-image: none;
        background-color: transparent;
    }

    .main-navigation.toggled .menu-toggle__bars::before,
    .main-navigation.toggled .menu-toggle__bars::after {
        display: block;
        top: 50%;
        left: 50%;
        width: 22px;
        height: 2px;
        margin: -1px 0 0 -11px;
        background-color: #fff;
    }

    .main-navigation.toggled .menu-toggle__bars::before {
        transform: rotate(45deg);
    }

    .main-navigation.toggled .menu-toggle__bars::after {
        transform: rotate(-45deg);
    }
}
/* ==========================================================================
   STEP 2 — "Tell Us About Your Project"   (Gravity Forms page 1_2)
   Fields: 1_5 Name · 1_6 Phone · 1_7 Email · 1_8 Location
           1_9 Notes · 1_10 File · 1_11 CAPTCHA
   GF lays these out on its own 12-column grid — do not override it.
   ========================================================================== */

#gform_page_1_2 {
	position: relative;
	box-sizing: border-box;
	padding: 86px 32px 32px !important;
	background: rgba(25, 28, 30, 0.55);
	-webkit-backdrop-filter: blur(35px);
	backdrop-filter: blur(35px);
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-radius: 15px;
	box-shadow: -20px 22px 70px rgba(0, 0, 0, 0.25);
}

#gform_page_1_2::before {
	content: "Tell Us About Your Project";
	position: absolute;
	top: 32px;
	left: 32px;
	color: #6cdbd5;
	font-size: 22px;
	font-weight: 500;
	line-height: 1;
}

/* Back / Submit, pinned top-right beside the heading */
#gform_page_1_2 .gform_page_footer {
	position: absolute;
	top: 22px;
	right: 32px;
	display: flex;
	gap: 14px;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ---- Labels ---- */
#gform_page_1_2 .gfield_label {
	color: #fff !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	margin-bottom: 8px !important;
}

#gform_page_1_2 .gfield_required {
	color: #fff !important;
}

/* Hide the First / Country / Street Address sub-labels and the upload hint */
#gform_page_1_2 .gform-field-label--type-sub,
#gform_page_1_2 .gfield_fileupload_rules {
	display: none !important;
}

/* ---- Inputs ---- */
#gform_page_1_2 input[type="text"],
#gform_page_1_2 input[type="email"],
#gform_page_1_2 input[type="tel"],
#gform_page_1_2 select {
	box-sizing: border-box;
	width: 100% !important;
	height: 52px !important;
	padding: 0 16px !important;
	background: rgba(255, 255, 255, 0.75) !important;
	border: 0 !important;
	border-radius: 12px !important;
	font-size: 15px !important;
	color: #10403d !important;
}

#gform_page_1_2 textarea {
	box-sizing: border-box;
	width: 100% !important;
	height: 100% !important;
	min-height: 150px;
	padding: 14px 16px !important;
	background: rgba(255, 255, 255, 0.75) !important;
	border: 0 !important;
	border-radius: 12px !important;
	font-size: 15px !important;
	resize: none;
}

/* ---- Placement on GF's 12-column grid ---- */
#gform_page_1_2 .gform_fields {
	gap: 18px 20px !important;
}

#gform_page_1_2 #field_1_5  { grid-column: 1 / span 3 !important;  grid-row: 1 !important; }
#gform_page_1_2 #field_1_6  { grid-column: 4 / span 3 !important;  grid-row: 1 !important; }
#gform_page_1_2 #field_1_7  { grid-column: 1 / span 3 !important;  grid-row: 2 !important; }
/* #gform_page_1_2 #field_1_8  { grid-column: 4 / span 3 !important;  grid-row: 2 !important; } */
#gform_page_1_2 #field_1_10 { grid-column: 11 / span 2 !important; grid-row: 1 !important; }
#gform_page_1_2 #field_1_11 { grid-column: 4 / span 3 !important; grid-row: 2 !important; }

#gform_page_1_2 #field_1_9 {
	grid-column: 7 / span 4 !important;
	grid-row: 1 / span 2 !important;
	display: flex;
	flex-direction: column;
}

#gform_page_1_2 #field_1_9 .ginput_container {
	flex: 1;
}

/* ==========================================================================
   Tablet — two columns, Notes and File/CAPTCHA drop below
   ========================================================================== */
@media (max-width: 1024px) {

	#gform_page_1_2 #field_1_5,
	#gform_page_1_2 #field_1_7 { grid-column: 1 / span 6 !important; }

	#gform_page_1_2 #field_1_6,
	#gform_page_1_2 #field_1_8 { grid-column: 7 / span 6 !important; }

	#gform_page_1_2 #field_1_9 {
		grid-column: 1 / span 12 !important;
		grid-row: 3 !important;
	}

	#gform_page_1_2 #field_1_10 {
		grid-column: 1 / span 6 !important;
		grid-row: 4 !important;
	}

	#gform_page_1_2 #field_1_11 {
		grid-column: 7 / span 6;
		grid-row: 4;
	}
}

/* ==========================================================================
   Mobile — one column, buttons back into the flow
   ========================================================================== */
@media (max-width: 767px) {

	#gform_page_1_2 {
		padding: 62px 15px 21px !important;
		border: 2px solid #fff;
		border-radius: 15px;
	}

	#gform_page_1_2::before {
		top: 20px;
		left: 15px;
		font-size: 18px;
	}

	#gform_page_1_2 .gform_page_footer {
		position: static;
		justify-content: center;
		margin-top: 22px !important;
	}

	#gform_page_1_2 .gform_fields {
		gap: 16px !important;
	}

	/* one rule covers every field — no per-id spans at this width */
	#gform_page_1_2 .gform_fields > .gfield,
	#gform_page_1_2 #field_1_5,
	#gform_page_1_2 #field_1_6,
	#gform_page_1_2 #field_1_7,
	#gform_page_1_2 #field_1_8,
	#gform_page_1_2 #field_1_9,
	#gform_page_1_2 #field_1_10,
	#gform_page_1_2 #field_1_11 {
		grid-column: 1 / -1 !important;
		grid-row: auto !important;
	}

	#gform_page_1_2 textarea {
		height: auto !important;
		min-height: 120px;
	}

	#gform_page_1_2 input[type="text"],
	#gform_page_1_2 input[type="email"],
	#gform_page_1_2 input[type="tel"],
	#gform_page_1_2 select {
		height: 48px !important;
	}
}
/* ==========================================================================
   ABOUT PAGE — the three sections that are not already on the home page
   Figma: file FV7LRaWs3NuDRhlzVrOeRO, node 91:1689 (1920 x 8786)

   Everything else on the About page (stats, services, locations, reviews,
   connect, footer) reuses the home CSS untouched — no rules needed here.

   Uses your existing tokens: --mf-gutter, --mf-fs-h2, --mf-fs-lead,
   --mf-radius-card, --mf-teal, --mf-grey-600, --mf-tracking.
   Append to style.css.
   ========================================================================== */

/* ==========================================================================
   1. HERO VARIANT
   Breadcrumb at x74/y121 (22px), H1 at x61/y180 (702 wide, 2 lines of 101),
   lead at x61/y402 (648 wide, 3 lines of 36).
   ========================================================================== */

.mf-hero--about .mf-hero__content {
	padding: 121px 50px 40px;
}

/* ---- Breadcrumb — 17px icon, then 22px text ---------------------------- */
.mf-crumb {
	display: flex;
	align-items: center;
	gap: clamp(8px, 0.781vw, 15px);
	margin-bottom: clamp(16px, 1.51vw, 29px);
	font-family: var(--mf-font-display);
	font-size: var(--mf-fs-eyebrow);        /* 22 / 39 / -0.66 */
	line-height: 1.773;
	letter-spacing: var(--mf-tracking);
	color: rgba(255, 255, 255, 0.9);
	margin-top: 30px;
	
}

.mf-crumb__icon {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	object-fit: contain;
}

.mf-crumb__link {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.mf-crumb__link:hover,
.mf-crumb__link:focus-visible {
	color: var(--mf-teal);
}

.mf-crumb__sep {
	opacity: 0.7;
}

.mf-crumb__current {
	color: var(--mf-teal);
}

/* ---- H1 — 75px, two lines, 702px measure ------------------------------ */
.mf-headline--about {
	max-width: 702px;
	margin: 0;
	font-size: 75px;
	font-weight: 400;
	line-height: 101px;
	letter-spacing: -2.55px;
	color: #fff;
	white-space: normal;                    /* the home headline is nowrap */
}

.mf-hero--about .mf-subtext {
	width: 100%;
	max-width: 648px;
	margin-top: clamp(14px, 1.042vw, 20px);
	font-size: var(--mf-fs-lead);           /* 24 / 36 */
	line-height: 1.5;
}

/* ==========================================================================
   2. THE STORY BEHIND MOBILE FRAMING
   Copy 676 wide left, video 1094 x 615 right, 84px apart (68 -> 760).
   ========================================================================== */

.mf-story {
	box-sizing: border-box;
	padding-block: clamp(32px, 2.708vw, 52px) clamp(36px, 3.646vw, 70px);
	font-family: var(--mf-font-display);
	background-color: var(--mf-surface);
	letter-spacing: var(--mf-tracking);
}

.mf-story *,
.mf-story *::before,
.mf-story *::after {
	box-sizing: border-box;
}

.mf-story__inner {
	width: 100%;
	max-width: 1920px;
	margin-inline: auto;
	padding-inline: var(--mf-gutter);
}

/* Pill left, Get A Quote right — same row, as the design draws it */
.mf-story__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: clamp(20px, 2.031vw, 39px);
}

.mf-story__top .badge-pill {
	margin: 0;
}

/* 676 : 1094 of the 1790 content box, with the 84px gutter between */
.mf-story__grid {
	display: grid;
	grid-template-columns: minmax(0, 676fr) minmax(0, 1094fr);
	column-gap: clamp(24px, 4.375vw, 84px);
	align-items: start;
}

.mf-story__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.mf-story__title {
	max-width: 664px;
	margin: 0;
	font-size: var(--mf-fs-h2);             /* 45 / 57 / -1.35 */
	font-weight: 400;
	line-height: var(--mf-lh-h2);
	color: var(--mf-black);
	letter-spacing: var(--mf-tracking);
}

.mf-story__text {
	max-width: 539px;
	margin: clamp(14px, 1.51vw, 29px) 0 0;
	font-size: var(--mf-fs-lead);           /* 24 / 39 / -0.72 */
	line-height: var(--mf-lh-lead);
	color: var(--mf-grey-600);
}

/* The button sits at the foot of the copy column, level with the video's base */
.mf-story__cta {
	margin-top: auto;
	padding-top: clamp(18px, 2.083vw, 40px);
	text-decoration: none;
}

/* Video — 1094 x 615, same .media-card component as the home page */
.mf-story__media {
	width: 100%;
	margin: 0;
	aspect-ratio: 1094 / 615;
	border-radius: var(--mf-radius-card);
	overflow: hidden;
}

/* ==========================================================================
   3. OUR MISSION / OUR VISION
   Two 857 x 761 cards, 49px apart. Inside each: image 405 x 716 inset 24px
   from the card's left, copy 340 wide starting 480px in.
   ========================================================================== */

.mf-mv {
	box-sizing: border-box;
	padding-block: clamp(32px, 2.5vw, 48px) clamp(36px, 3.125vw, 60px);
	font-family: var(--mf-font-display);
	background-color: var(--mf-surface-muted);
	letter-spacing: var(--mf-tracking);
}

.mf-mv *,
.mf-mv *::before,
.mf-mv *::after {
	box-sizing: border-box;
}

.mf-mv__inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(20px, 2.552vw, 49px);
	width: 100%;
	max-width: 1920px;
	margin-inline: auto;
	padding-inline: var(--mf-gutter);
}

/* 857 x 761, padding read off the design: 22 top, 37 right, 23 bottom, 24 left */
.mf-mv__card {
    display: grid;
    grid-template-columns: minmax(0px, 405fr) minmax(0px, 340fr);
    column-gap: clamp(18px, 2.656vw, 51px);
    align-items: start;
    padding: clamp(14px, 1.146vw, 22px) clamp(18px, 1.927vw, 37px) clamp(14px, 1.198vw, 23px) clamp(14px, 1.25vw, 24px);
    border-radius: var(--mf-radius-card);
    box-shadow: var(--mf-shadow-card);
    box-shadow: 0px 4px 9px 0px #00000040;
    background: linear-gradient(99.22deg, #FFFFFF 2.45%, #B4EDEA 63.88%, #6CDBD5 123%);
}

/* Image — 405 x 716, fills the card's height */
.mf-mv__figure {
	height: 100%;
	margin: 0;
	overflow: hidden;
	border-radius: clamp(12px, 1.042vw, 20px);
}

.mf-mv__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mf-hero--about {
    background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url(/wp-content/uploads/2026/10/Frame-2095585406-1.png);
}
.mf-hero--floating {
    background-image: url(/wp-content/uploads/2026/09/Floating-Frames.jpg);
}
.mf-mv__body {
	padding-top: clamp(4px, 0.938vw, 18px);
}

.mf-mv__text {
    margin: clamp(10px, 0.781vw, 15px) 0px 0px;
    font-size: 20px;
    line-height: 36px;
    color: var(--mf-grey-600);
    color: #636363;
}
.mf-mv__title {
    margin: 0px;
    font-size: var(--mf-fs-h2);
    font-weight: 400;
    line-height: var(--mf-lh-h2);
    color: #008080;
    letter-spacing: var(--mf-tracking);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* ---- <= 1200: the mission cards stop holding a 405 + 340 split ---------- */
@media (max-width: 1200px) {

	.mf-mv__card {
		grid-template-columns: minmax(0, 1fr);
		row-gap: clamp(14px, 2vw, 22px);
		aspect-ratio: auto;
	}

	.mf-mv__figure {
		height: auto;
		aspect-ratio: 405 / 300;
	}

	.mf-mv__body {
		padding-top: 0;
	}
}

/* ---- <= 1024: story stacks, hero headline comes down ------------------- */
@media (max-width: 1024px) {

	.mf-hero--about .mf-hero__content {
		padding: 90px 30px 40px;
	}

	.mf-headline--about {
		font-size: clamp(38px, 5.2vw, 56px);
		line-height: 1.2;
		letter-spacing: -1.6px;
	}

	.mf-story__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: clamp(20px, 3vw, 32px);
	}

	.mf-story__copy {
		order: 1;
	}

	.mf-story__media {
		order: 2;
		aspect-ratio: 16 / 9;
	}

	.mf-story__title,
	.mf-story__text {
		max-width: 62ch;
	}

	.mf-story__cta {
		margin-top: 0;
		padding-top: clamp(14px, 2vw, 22px);
	}

	.mf-mv__inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---- <= 767: mobile --------------------------------------------------- */
@media (max-width: 767px) {

	/* Hero — 12px gutters, matching the home mobile frame */
	.mf-hero--about .mf-hero__content {
		padding: 70px 12px 40px !important;
	}

	.mf-crumb {
		gap: 8px;
		margin-bottom: 14px;
		font-size: 16px;
		line-height: 1.6;
	}

	.mf-crumb__icon {
		width: 14px;
		height: 14px;
	}

	.mf-headline--about {
		font-size: 34px;
		line-height: 1.15;
		letter-spacing: -1.02px;
	}

	.mf-hero--about .mf-subtext {
		max-width: none;
		font-size: 16px;
		line-height: 1.75;
	}

	/* Story */
	.mf-story {
		padding-block: 32px 40px;
	}

	.mf-story__inner {
		padding-inline: 20px;
	}

	.mf-story__top {
		flex-wrap: nowrap;
		gap: 10px;
		margin-bottom: 22px;
	}

	.mf-story__top .badge-pill {
		min-height: 46px;
		padding: 3px 13px;
		font-size: 16px;
		line-height: 1.4;
	}

	.mf-story__title {
		font-size: 26px;
		line-height: 37px;
		letter-spacing: -0.78px;
	}

	.mf-story__text {
		font-size: 19px;
		line-height: 29px;
		letter-spacing: -0.57px;
	}

	.mf-story__media {
		aspect-ratio: 388 / 218;
		border-radius: 22px;
	}

	/* Mission / Vision */
	.mf-mv {
		padding-block: 32px 40px;
	}

	.mf-mv__inner {
		gap: 18px;
		padding-inline: 20px;
	}

	.mf-mv__card {
		padding: 16px;
		border-radius: 22px;
	}

	.mf-mv__figure {
		aspect-ratio: 388 / 260;
		border-radius: 16px;
	}

	.mf-mv__title {
		font-size: 26px;
		line-height: 37px;
		letter-spacing: -0.78px;
	}

	.mf-mv__text {
		font-size: 17px;
		line-height: 27px;
	}
}
/* ==========================================================================
   THE STORY BEHIND MOBILE FRAMING  —  node 91:1727
   Teal card 676 x 615 (radius 40) left; video 1094 x 615 right with a 1px
   teal border. Copy and CTA sit INSIDE the card.
   ========================================================================== */

.mf-story__grid {
    display: grid;
    grid-template-columns: minmax(0, 997fr) minmax(0, 1094fr);
    column-gap: clamp(24px, 0.833vw, 16px);
    align-items: stretch;
}

/* ---- The teal card ---- */
.mf-story__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: clamp(20px, 1.406vw, 27px) clamp(20px, 1.458vw, 28px)
	         clamp(20px, 1.354vw, 26px);
	aspect-ratio: 676 / 615;
	background-color: var(--mf-teal);          /* #6cdbd5 */
	border-radius: 40px;
}

.mf-story__title {
	max-width: 664px;
	margin: 0;
	font-family: var(--mf-font-display);
	font-size: var(--mf-fs-h2);                /* 45 */
	font-weight: 400;
	line-height: 57px;
	letter-spacing: -1.35px;
	color: #fff;                               /* white, not ink */
}

.mf-story__text {
	max-width: 539px;
	margin: clamp(14px, 1.51vw, 29px) 0 0;
	font-family: var(--mf-font-display);
	font-size: 24px;
	line-height: 37px;                         /* 37, not the 39 of --mf-lh-lead */
	letter-spacing: -0.72px;
	color: rgba(113, 113, 113, 0.9);
}

/* ---- "Explore Our Services" — WHITE pill, teal circle, 290 x 54 ---- */
.mf-story__cta {
	margin-top: auto;
	text-decoration: none;
}

.mf-story__cta .quote-btn {
	min-width: 290px;
	min-height: 54px;
	padding: 3px 3px 3px 18px;
	font-size: 22px;
	line-height: 39px;
	letter-spacing: -0.66px;
	color: #004e4a;
	background-color: var(--mf-surface);       /* white, not teal */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.19);
}

.mf-story__cta .quote-btn .mf-next-btn__icon {
	width: 48px;
	height: 48px;
	background-color: var(--mf-teal);          /* teal circle on the white pill */
}

/* ---- Video — 1094 x 615, 1px teal border, radius 40 ---- */
.mf-story__media {
	width: 100%;
	margin: 0;
	aspect-ratio: 1094 / 615;
	border: 1px solid var(--mf-teal);
	border-radius: 40px;
	overflow: hidden;
}
@media (max-width: 1024px) {
	.mf-story__grid { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
	.mf-story__copy { aspect-ratio: auto; }
	.mf-story__cta { margin-top: 24px; }
	.mf-story__media { aspect-ratio: 16 / 9; }
}

@media (max-width: 767px) {
	.mf-story__copy {
		padding: 20px;
		border-radius: 22px;
	}
	.mf-story__title { font-size: 26px; line-height: 37px; letter-spacing: -0.78px; }
	.mf-story__text  { font-size: 19px; line-height: 29px; letter-spacing: -0.57px; }
	.mf-story__cta .quote-btn {
		min-width: 0;
		width: 100%;
		justify-content: space-between;
		font-size: 18px;
		padding: 3px 3px 3px 16px;
	}
	.mf-story__cta .quote-btn .mf-next-btn__icon { width: 40px; height: 40px; }
	.mf-story__media { aspect-ratio: 388 / 218; border-radius: 22px; }
}
.mf-story__media {
	width: 100%;
	margin: 0;
	border: 1px solid var(--mf-teal);
	border-radius: 40px;
	overflow: hidden;
}

.mf-story__media .media-card__video {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
/* ==========================================================================
   SERVICES PAGE (Canvas Stretching)
   Figma: file FV7LRaWs3NuDRhlzVrOeRO, node 98:2403 (1920 x 12901)

   Only the sections that are NOT already on the home page are styled here.
   Stats, FAQ, Locations, Testimonials, Connect and the footer reuse the home
   CSS untouched.

   TYPE SCALE — read this first
   ---------------------------
   The Figma frame is 1920 wide. The previous version pinned each Figma value
   as a hard pixel size, so on a 1512px screen everything rendered ~27% larger
   than the design intends (45px headings where the design wants 45 x 1512/1920
   = 35px). That is the "font size is a little high" you were seeing.

   Every size below is now anchored so it equals the Figma value at exactly
   1920px and scales down with the viewport, with a floor so it never gets too
   small. The conversion is: design px / 1920 * 100 = vw.

   Letter-spacing is -3% of the font size in EVERY text node in this design
   (-1.35/45, -0.72/24, -2.55/85, -0.66/22, -0.96/32, -0.63/21 all = -0.03),
   so it is written once as -0.03em and scales by itself.

   Line-heights are written as ratios of the Figma pair, so they scale too:
     H2      45 / 57  = 1.267        panel body  24 / 37 = 1.542
     body    24 / 39  = 1.625        step body   24 / 34 = 1.417
     hero H1 85 / 101 = 1.188        area title  32 / 57 = 1.781
     hero lead 22 / 36 = 1.636       area body   21 / 36 = 1.714

   NO CSS NESTING is used anywhere in this file, and every block is closed.
   Append the whole thing to style.css in one go — do not paste it in pieces.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens for this template.

   Declared on the sections themselves, NOT on the body class: if the page's
   slug happens to be "services", WordPress picks this file up through the
   template hierarchy instead of the Page Attributes box, and the body then
   gets no `page-template-page-services` class at all. Hung off the sections,
   the tokens work either way.
   -------------------------------------------------------------------------- */

.mf-hero--service,
.mf-brisbran,
.mf-svc-panel,
.mf-svc-why,
.mf-svc-split,
.mf-svc-cols,
.mf-svc-areas {
	/* ---- Fluid type scale. Cap = the Figma value, reached at 1920px. ---- */
	--fs-h1:         clamp(34px, 4.427vw, 85px);   /* 85 */
	--fs-h2:         clamp(24px, 2.344vw, 45px);   /* 45 */
	--fs-step-title: clamp(21px, 2.344vw, 32px);   /* 45, lower floor  */
	--fs-lead:       clamp(15px, 1.146vw, 22px);   /* 22 */
	--fs-body:       clamp(17px, 1.250vw, 24px);   /* 24 */
	--fs-area-title: clamp(20px, 1.667vw, 32px);   /* 32 */
	--fs-area-body:  clamp(16px, 1.094vw, 21px);   /* 21 */

	/* ---- Line-height ratios, straight off the Figma pairs ---- */
	--lh-h1: 1.188;
	--lh-h2: 1.267;
	--lh-body: 1.625;
	--lh-card-body: 1.542;
	--lh-step-body: 1.417;
	--lh-hero-lead: 1.636;
	--lh-area-title: 1.781;
	--lh-area-body: 1.714;

	--mf-svc-tracking: -0.03em;     /* every text node in this design */

	--mf-svc-gutter: clamp(20px, 3.542vw, 68px);   /* design x = 67..70 of 1920 */
	--mf-svc-h2-gap: clamp(12px, 1.146vw, 22px);
	--mf-svc-teal: #6cdbd5;
	--mf-svc-body-color: rgba(99, 99, 99, 0.9);
	--mf-svc-card-body-color: rgba(113, 113, 113, 0.9);
	--mf-svc-gradient: linear-gradient(107.47deg,
		rgb(255, 255, 255) 2.45%,
		rgb(180, 237, 234) 63.88%,
		rgb(108, 219, 213) 123%);
}
.mf-brisbrane {
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.2) 100%), url(/wp-content/uploads/2026/09/image-542-scaled.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    --fs-h1: clamp(34px, 4.427vw, 85px);
    --fs-h2: clamp(24px, 2.344vw, 45px);
    --fs-step-title: clamp(21px, 2.344vw, 32px);
    --fs-lead: clamp(15px, 1.146vw, 22px);
    --fs-body: clamp(17px, 1.250vw, 24px);
    --fs-area-title: clamp(20px, 1.667vw, 32px);
    --fs-area-body: clamp(16px, 1.094vw, 21px);
    --lh-h1: 1.188;
    --lh-h2: 1.267;
    --lh-body: 1.625;
    --lh-card-body: 1.542;
    --lh-step-body: 1.417;
    --lh-hero-lead: 1.636;
    --lh-area-title: 1.781;
    --lh-area-body: 1.714;
    --mf-svc-tracking: -0.03em;
    --mf-svc-gutter: clamp(20px, 3.542vw, 68px);
    --mf-svc-h2-gap: clamp(12px, 1.146vw, 22px);
    --mf-svc-teal: #6cdbd5;
    --mf-svc-body-color: rgba(99, 99, 99, 0.9);
    --mf-svc-card-body-color: rgba(113, 113, 113, 0.9);
    --mf-svc-gradient: linear-gradient(107.47deg, rgb(255, 255, 255) 2.45%, rgb(180, 237, 234) 63.88%, rgb(108, 219, 213) 123%);
}
.mf-byronbay {
  background-image:linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.2) 100%), url(/wp-content/uploads/2026/09/image-543-scaled.png);
	  --fs-h1: clamp(34px, 4.427vw, 85px);
    --fs-h2: clamp(24px, 2.344vw, 45px);
    --fs-step-title: clamp(21px, 2.344vw, 32px);
    --fs-lead: clamp(15px, 1.146vw, 22px);
    --fs-body: clamp(17px, 1.250vw, 24px);
    --fs-area-title: clamp(20px, 1.667vw, 32px);
    --fs-area-body: clamp(16px, 1.094vw, 21px);
    --lh-h1: 1.188;
    --lh-h2: 1.267;
    --lh-body: 1.625;
    --lh-card-body: 1.542;
    --lh-step-body: 1.417;
    --lh-hero-lead: 1.636;
    --lh-area-title: 1.781;
    --lh-area-body: 1.714;
    --mf-svc-tracking: -0.03em;
    --mf-svc-gutter: clamp(20px, 3.542vw, 68px);
    --mf-svc-h2-gap: clamp(12px, 1.146vw, 22px);
    --mf-svc-teal: #6cdbd5;
    --mf-svc-body-color: rgba(99, 99, 99, 0.9);
    --mf-svc-card-body-color: rgba(113, 113, 113, 0.9);
    --mf-svc-gradient: linear-gradient(107.47deg, rgb(255, 255, 255) 2.45%, rgb(180, 237, 234) 63.88%, rgb(108, 219, 213) 123%);
}
.mf-sydney {
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.2) 100%), url(/wp-content/uploads/2026/09/caleb-JmuyB_LibRo-unsplash-1-1-scaled.png);
  --fs-h1: clamp(34px, 4.427vw, 85px);
  --fs-h2: clamp(24px, 2.344vw, 45px);
  --fs-step-title: clamp(21px, 2.344vw, 32px);
  --fs-lead: clamp(15px, 1.146vw, 22px);
  --fs-body: clamp(17px, 1.250vw, 24px);
  --fs-area-title: clamp(20px, 1.667vw, 32px);
  --fs-area-body: clamp(16px, 1.094vw, 21px);
  --lh-h1: 1.188;
  --lh-h2: 1.267;
  --lh-body: 1.625;
  --lh-card-body: 1.542;
  --lh-step-body: 1.417;
  --lh-hero-lead: 1.636;
  --lh-area-title: 1.781;
  --lh-area-body: 1.714;
  --mf-svc-tracking: -0.03em;
  --mf-svc-gutter: clamp(20px, 3.542vw, 68px);
  --mf-svc-h2-gap: clamp(12px, 1.146vw, 22px);
  --mf-svc-teal: #6cdbd5;
  --mf-svc-body-color: rgba(99, 99, 99, 0.9);
  --mf-svc-card-body-color: rgba(113, 113, 113, 0.9);
  --mf-svc-gradient: linear-gradient(107.47deg, rgb(255, 255, 255) 2.45%, rgb(180, 237, 234) 63.88%, rgb(108, 219, 213) 123%);
}
/* --------------------------------------------------------------------------
   Shared typography
   H2   98:2504 / 98:2501 / 98:2522 / 98:2500 : Arial 45 / 57 / -1.35, #000
   Body 98:2498 / 98:2495 / 98:2521 / 98:2494 : Arial 24 / 39 / -0.72,
                                                rgba(99,99,99,0.9)
   -------------------------------------------------------------------------- */

.mf-svc-h2 {
	margin: 0;
	font-family: var(--mf-font-display);
	font-size: var(--fs-h2);
	font-weight: 400;
	line-height: var(--lh-h2);
	letter-spacing: var(--mf-svc-tracking);
	color: #000;
}

.mf-svc-h2--stacked {
	margin-top: clamp(20px, 2.396vw, 46px);
}

.mf-svc-body {
	margin-top: var(--mf-svc-h2-gap);
	font-family: var(--mf-font-display);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	letter-spacing: var(--mf-svc-tracking);
	color: var(--mf-svc-body-color);
}

/* One blank line between paragraphs, same as the design — expressed in em so
   it shrinks with the text instead of staying at a fixed 39px. */
.mf-svc-body p {
	margin: 0 0 1.05em;
}

.mf-svc-body p:last-child {
	margin-bottom: 0;
}

.mf-svc-body ul {
	margin: 0 0 1.05em;
	padding-left: 1.5em;         /* 98:2495 renders the bullets at ms-[36px] = 1.5em */
	list-style: disc;
}

.mf-svc-body ul:last-child {
	margin-bottom: 0;
}

.mf-svc-body li {
	margin: 0;
	line-height: var(--lh-body);
}

/* The Get A Quote pill repeated through the page (98:2429 / 2476 / 2506 / 2513 / 2523) */
.mf-svc-cta {
	display: inline-block;
	text-decoration: none;
}


/* ==========================================================================
   1. HERO VARIANT — node 98:2437
   Breadcrumb 98:2441 : 22 / 39 / -0.66, rgba(255,255,255,.9), last crumb #6cdbd5
   H1         98:2486 : 85 / 101 / -2.55, 702 wide, three spans
   Lead       98:2485 : 22 / 36 / -0.66, rgba(255,255,255,.9), 967 wide
   ========================================================================== */

.mf-hero--service .mf-hero__content {
	padding: clamp(70px, 6.302vw, 121px) clamp(20px, 2.604vw, 50px) clamp(30px, 2.083vw, 40px);

}

/* H1 — the middle span is the teal accent, exactly as the design draws it.
   702 of 1920 = 36.56vw, so the measure scales with the type. */
.mf-headline--service {
	max-width: 36.56vw;
	min-width: 0;
	margin: 0;
	font-size: var(--fs-h1);
	font-weight: 400;
	line-height: var(--lh-h1);
	letter-spacing: var(--mf-svc-tracking);
	color: #fff;
	white-space: normal;
}

.mf-headline--service .mf-headline__accent {
	color: var(--mf-svc-teal);
}

/* Lead — 967 of 1920 = 50.36vw. Note 22px here, NOT the home hero's 24px. */
.mf-subtext--service {
	width: 100%;
	max-width: 50.36vw;
	margin-top: clamp(10px, 0.677vw, 13px);
	font-size: var(--fs-lead);
	line-height: var(--lh-hero-lead);
	letter-spacing: var(--mf-svc-tracking);
	color: rgba(255, 255, 255, 0.9);
}

/* Breadcrumb — same 22px as the lead */
.mf-hero--service .mf-crumb {
	font-size: var(--fs-lead);
	line-height: 1.773;
	letter-spacing: var(--mf-svc-tracking);
}


/* ==========================================================================
   2 / 6 / 8. THE CARD + IMAGE PANEL
   One component, three placements:
     .mf-svc-panel--intro  98:2470  teal card 745 left,  image 1013 right
     .mf-svc-panel--who    98:2973  teal card 745 left,  image 1013 right
     .mf-svc-panel--flip   98:2520  image 745 left,      plain copy 942 right
   ========================================================================== */

.mf-svc-panel {
	box-sizing: border-box;
	padding-block: clamp(30px, 3.385vw, 65px);
	font-family: var(--mf-font-display);
	background-color: #fff;
}

.mf-svc-panel *,
.mf-svc-panel *::before,
.mf-svc-panel *::after {
	box-sizing: border-box;
}

.mf-svc-panel--intro {
	padding-block: clamp(26px, 2.708vw, 52px) clamp(32px, 3.698vw, 71px);
}

.mf-svc-panel__inner {
	width: 100%;
	max-width: 1920px;
	margin-inline: auto;
	padding-inline: var(--mf-svc-gutter);
}

/* Pill left / Get A Quote right — 98:2472 and 98:2476, both on the y52 line */
.mf-svc-panel__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: clamp(14px, 1.302vw, 25px);
}

.mf-svc-panel__top .badge-pill {
	margin: 0;
}

/* 745 : 1013 of the 1786 content box, 28px apart (image x841 - card right 813) */
.mf-svc-panel__grid {
	display: grid;
	grid-template-columns: minmax(0, 745fr) minmax(0, 1013fr);
	column-gap: clamp(16px, 1.458vw, 28px);
	align-items: stretch;
}

/* The teal card — 98:2471 / 98:2974: #6cdbd5, radius 40, 636 / 706 tall.
   min-height (not aspect-ratio) so the copy is free to grow.
   636 of 1920 = 33.13vw; the cap keeps it at the design height on big screens. */
.mf-svc-panel__card {
	display: flex;
	flex-direction: column;
	min-height: min(33.13vw, 636px);
	padding: clamp(16px, 0.99vw, 19px) clamp(18px, 2.083vw, 40px)
	         clamp(20px, 2.083vw, 40px) clamp(16px, 1.458vw, 28px);
	background-color: var(--mf-svc-teal);
	border-radius: clamp(20px, 2.083vw, 40px);
}

.mf-svc-panel--who .mf-svc-panel__card {
	min-height: min(36.77vw, 706px);
}

/* 98:2475 / 98:2975 — 45 / 57 / -1.35, white, 638 of 1920 = 33.23vw */
.mf-svc-panel__title {
	max-width: 33.23vw;
	margin: 0;
	font-size: var(--fs-h2);
	font-weight: 400;
	line-height: var(--lh-h2);
	letter-spacing: var(--mf-svc-tracking);
	color: #fff;
}

.mf-svc-panel__title--second {
	margin-top: clamp(14px, 1.198vw, 23px);
}

/* 98:2483 / 98:2977 — 24 / 37 / -0.72, rgba(113,113,113,.9), 677 = 35.26vw.
   Note the 1.542 line ratio here, against 1.625 on plain backgrounds. */
.mf-svc-panel__text {
	max-width: 35.26vw;
	margin-top: clamp(10px, 0.885vw, 17px);
	font-size: var(--fs-body);
	line-height: var(--lh-card-body);
	letter-spacing: var(--mf-svc-tracking);
	color: var(--mf-svc-card-body-color);
}

.mf-svc-panel__text p {
	margin: 0 0 1em;
}

.mf-svc-panel__text p:last-child {
	margin-bottom: 0;
}

.mf-svc-panel__text ul {
	margin: 0 0 1em;
	padding-left: 1.5em;
	list-style: disc;
}

.mf-svc-panel__text li {
	margin: 0;
	line-height: var(--lh-card-body);
}

/* Image — 98:2484 1013 x 636 radius 35, 98:2972 1013 x 706 */
.mf-svc-panel__media {
	margin: 0;
	overflow: hidden;
	border-radius: clamp(18px, 1.823vw, 35px);
}

.mf-svc-panel__media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: min(33.13vw, 636px);
	object-fit: cover;
}

.mf-svc-panel--who .mf-svc-panel__media img {
	min-height: min(36.77vw, 706px);
}

/* ---- 98:2520: image 745 left, copy 942 right, 71px apart ---------------- */
.mf-svc-panel--flip {
	padding-block: clamp(28px, 3.073vw, 59px) clamp(24px, 2.656vw, 51px);
}

.mf-svc-panel--flip .mf-svc-panel__grid {
	grid-template-columns: minmax(0, 745fr) minmax(0, 942fr);
	column-gap: clamp(20px, 3.698vw, 71px);
	align-items: start;
}

.mf-svc-panel__media--square {
	border-radius: clamp(20px, 2.083vw, 40px);
}

.mf-svc-panel__media--square img {
	min-height: 0;
	aspect-ratio: 745 / 636;
}

.mf-svc-panel__plain {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.mf-svc-panel__plain .mf-svc-cta {
	margin-top: clamp(18px, 2.24vw, 43px);
}


/* ==========================================================================
   4. WHY IT MATTERS + FOUR STEPS — node 98:2406 (1940 x 1178)
   H2   98:2408 : 45 / 57 / -1.35, #000, 568 wide
   Lead 98:2407 : 24 / 39 / -0.72, rgba(99,99,99,.9), 1022 wide
   ========================================================================== */

.mf-svc-why {
	box-sizing: border-box;
	padding-block: clamp(26px, 2.135vw, 41px) clamp(30px, 3.49vw, 67px);
	font-family: var(--mf-font-display);
	background-color: #fff;
	max-width: 1400px;
    margin: 0 auto;
}

.mf-svc-why *,
.mf-svc-why *::before,
.mf-svc-why *::after {
	box-sizing: border-box;
}

.mf-svc-why__inner {
	width: 100%;
	max-width: 1920px;
	margin-inline: auto;
	padding-inline: var(--mf-svc-gutter);
}

/* 568 : 1022, 156px apart (lead x792 - title right 636) */
.mf-svc-why__head {
	display: grid;
	grid-template-columns: minmax(0, 568fr) minmax(0, 1022fr);
	column-gap: clamp(24px, 8.125vw, 156px);
	align-items: start;
}

.mf-svc-why__title {
	margin: 0;
	font-size: var(--fs-h2);
	font-weight: 400;
	line-height: var(--lh-h2);
	letter-spacing: var(--mf-svc-tracking);
	color: #000;
}

.mf-svc-why__lead {
	margin: 0;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	letter-spacing: var(--mf-svc-tracking);
	color: var(--mf-svc-body-color);
}

/* 712 : 875, 160px apart (steps x939 - image right 779) */
.mf-svc-why__body {
	display: grid;
	grid-template-columns: minmax(0, 712fr) minmax(0, 875fr);
	column-gap: clamp(24px, 8.333vw, 160px);
	align-items: start;
	margin-top: clamp(16px, 1.458vw, 28px);
}

.mf-svc-why__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* Image 98:2491 — 712 x 850, sits 22px under the button */
.mf-svc-why__media {
	width: 100%;
	margin: clamp(12px, 1.146vw, 22px) 0 0;
	overflow: hidden;
	border-radius: clamp(18px, 1.823vw, 35px);
}

.mf-svc-why__media img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 712 / 850;
	object-fit: cover;
}

/* ---- The four steps — 98:2409 / 2413 / 2417 / 2421 ----------------------
   84px ellipse, 34px gutter, title 45/57/-1.35 #000,
   body 24/34/-0.72 rgba(99,99,99,.9), divider under each row (Lines 104-107)
   84 of 1920 = 4.375vw
   ------------------------------------------------------------------------ */

.mf-svc-steps {
	margin: 0;
	padding: 0;
	list-style: none;
	margin-top:90px;
}

.mf-svc-step {
	display: grid;
	grid-template-columns: clamp(48px, 4.375vw, 84px) minmax(0, 1fr);
	column-gap: clamp(14px, 1.771vw, 34px);
	align-items: center;
	padding-block: clamp(16px, 1.823vw, 35px) clamp(8px, 0.677vw, 13px);
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	padding-bottom:40px;
}

.mf-svc-step:first-child {
	padding-top: 0;
}

/* Ellipse 98:2412 etc. — 84px, teal. Pictogram inside is ~60 of 84 = 72%. */
.mf-svc-step__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(48px, 4.375vw, 84px);
	height: clamp(48px, 4.375vw, 84px);
	border-radius: 50%;
	background-color: var(--mf-svc-teal);
}

.mf-svc-step__icon img {
	display: block;
	width: 72%;
	height: 72%;
	object-fit: contain;
}

.mf-svc-step__title {
	margin: 0;
	font-size: var(--fs-step-title);
	font-weight: 400;
	line-height: var(--lh-h2);
	letter-spacing: var(--mf-svc-tracking);
	color: #000;
}

/* 1.417 ratio here — tighter than the 1.625 used elsewhere on the page */
.mf-svc-step__text {
	margin: clamp(3px, 0.313vw, 6px) 0 0;
	font-size: var(--fs-body);
	line-height: var(--lh-step-body);
	letter-spacing: var(--mf-svc-tracking);
	color: var(--mf-svc-body-color);
}


/* ==========================================================================
   5 / 7. MEDIA + LONG COPY SPLIT
     .mf-svc-split             y3541  video 478 left,  copy 1179 right
     .mf-svc-split--reverse    98:2404 copy 1179 left, video 478 right
   ========================================================================== */

.mf-svc-split {
	box-sizing: border-box;
	padding-block: clamp(30px, 3.385vw, 65px);
	font-family: var(--mf-font-display);
	background-color: #fff;
}

.mf-svc-split *,
.mf-svc-split *::before,
.mf-svc-split *::after {
	box-sizing: border-box;
}

.mf-svc-split__inner {
	display: grid;
	grid-template-columns: minmax(0, 478fr) minmax(0, 1179fr);
	column-gap: clamp(24px, 5.417vw, 104px);
	align-items: start;
	width: 100%;
	max-width: 1920px;
	margin-inline: auto;
	padding-inline: var(--mf-svc-gutter);
}

/* Video 98:2492 / 98:2493 — 478 x 850 */
.mf-svc-split__media {
	position: relative;
	width: 100%;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 478 / 850;
	border-radius: clamp(18px, 1.823vw, 35px);
	background-color: #000;
}

.mf-svc-split__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.mf-svc-split__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.mf-svc-split__copy .mf-svc-cta {
	margin-top: clamp(18px, 2.396vw, 46px);
}

/* ---- 98:2404 — gradient band, copy 1179 left, video 478 right ----------- */
.mf-svc-split--gradient {
	background-color: transparent;
	background-image: var(--mf-svc-gradient);
	padding-block: clamp(30px, 3.958vw, 76px) clamp(26px, 3.177vw, 61px);
}

.mf-svc-split--reverse .mf-svc-split__inner {
	grid-template-columns: minmax(0, 1179fr) minmax(0, 478fr);
	column-gap: clamp(24px, 5.26vw, 101px);
}


/* ==========================================================================
   9. TWO-COLUMN LONG FORM — node 98:2405 (gradient band 1918 x 911)
   Left  787 wide : 98:2501 + 98:2495
   Right 897 wide : 98:2502 + 98:2496, then 98:2503 + 98:2497
   103px apart (right column x960 - left column right 857)
   ========================================================================== */

.mf-svc-cols {
	box-sizing: border-box;
	padding-block: clamp(28px, 2.865vw, 55px) clamp(20px, 2.5vw, 48px);
	font-family: var(--mf-font-display);
	background-image: linear-gradient(108.86deg,
		rgb(255, 255, 255) 2.45%,
		rgb(180, 237, 234) 63.88%,
		rgb(108, 219, 213) 123%);
}

.mf-svc-cols *,
.mf-svc-cols *::before,
.mf-svc-cols *::after {
	box-sizing: border-box;
}

.mf-svc-cols__inner {
	display: grid;
	grid-template-columns: minmax(0, 787fr) minmax(0, 897fr);
	column-gap: clamp(24px, 5.365vw, 103px);
	align-items: start;
	width: 100%;
	max-width: 1920px;
	margin-inline: auto;
	padding-inline: var(--mf-svc-gutter);
}

.mf-svc-cols__col {
	min-width: 0;
}


/* ==========================================================================
   10. CANBERRA / BYRON BAY CARDS — nodes 98:2576 and 98:2579
   Card  : 862 x 378, 2px #fff border, radius 36, backdrop-filter blur(35px),
           background gradient rgba(255,255,255,.135) -> rgba(255,255,255,0),
           shadow -20px 22px 70px rgba(0,0,0,.16), 62px apart
   Title : Poppins Medium 32 / 57 / -0.96, #008080
   Body  : Poppins Medium 21 / 36 / -0.63, #989898, 790 measure
   ========================================================================== */

.mf-svc-areas {
	box-sizing: border-box;
	padding-block: clamp(24px, 2.656vw, 51px);
	font-family: var(--mf-font-display);
}

.mf-svc-areas *,
.mf-svc-areas *::before,
.mf-svc-areas *::after {
	box-sizing: border-box;
}

.mf-svc-areas__inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(16px, 3.229vw, 62px);
	width: 100%;
	max-width: 1920px;
	margin-inline: auto;
	padding-inline: clamp(20px, 3.438vw, 66px);
}

.mf-svc-area {
	min-height: min(19.69vw, 378px);
	padding: clamp(18px, 1.875vw, 36px) clamp(18px, 2.24vw, 43px);
	border: 2px solid #fff;
	border-radius: clamp(20px, 1.875vw, 36px);
	background-image: linear-gradient(180.59deg,
		rgba(255, 255, 255, 0.135) 1.15%,
		rgba(255, 255, 255, 0) 98.91%);
	box-shadow: -20px 22px 70px 0 rgba(0, 0, 0, 0.16);
	-webkit-backdrop-filter: blur(35px);
	backdrop-filter: blur(35px);
}

/* These two are the only Poppins Medium blocks on the page — everything else
   in the Services frame is Arial Regular. Same face the .badge-pill uses. */
.mf-svc-area__title {
	max-width: 41.15vw;                 /* 790 of 1920 */
	margin: 0;
	font-family: "Poppins", var(--mf-font-display), sans-serif;
	font-size: var(--fs-area-title);
	font-weight: 500;
	line-height: var(--lh-area-title);
	letter-spacing: var(--mf-svc-tracking);
	color: #008080;
}

.mf-svc-area__text {
	max-width: 41.15vw;
	margin-top: clamp(8px, 0.885vw, 17px);
	font-family: "Poppins", var(--mf-font-display), sans-serif;
	font-size: var(--fs-area-body);
	font-weight: 500;
	line-height: var(--lh-area-body);
	letter-spacing: var(--mf-svc-tracking);
	color: #989898;
}

.mf-svc-area__text p {
	margin: 0 0 1em;
}

.mf-svc-area__text p:last-child {
	margin-bottom: 0;
}


/* ==========================================================================
   RESPONSIVE

   The type no longer needs re-declaring per breakpoint — the clamps above
   handle 768px upward on their own. These blocks only change LAYOUT, plus the
   mobile frame's own type values below 768.
   ========================================================================== */

/* ---- <= 1200: the fixed vw measures stop making sense once columns narrow */
@media (max-width: 1200px) {

	.mf-headline--service,
	.mf-subtext--service,
	.mf-svc-panel__title,
	.mf-svc-panel__text,
	.mf-svc-area__title,
	.mf-svc-area__text {
		max-width: 100%;
	}

	.mf-svc-panel__card,
	.mf-svc-panel--who .mf-svc-panel__card,
	.mf-svc-area {
		min-height: 0;
	}

	.mf-svc-panel__media img,
	.mf-svc-panel--who .mf-svc-panel__media img {
		min-height: 0;
		height: 100%;
	}
}

/* ---- <= 1024: every two-column block becomes one column ------------------ */
@media (max-width: 1024px) {

	.mf-svc-panel__grid,
	.mf-svc-panel--flip .mf-svc-panel__grid,
	.mf-svc-split__inner,
	.mf-svc-split--reverse .mf-svc-split__inner,
	.mf-svc-why__head,
	.mf-svc-why__body,
	.mf-svc-cols__inner,
	.mf-svc-areas__inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: clamp(18px, 3vw, 32px);
	}

	/* Copy first, media after — in every split, including the reversed one */
	.mf-svc-panel__card,
	.mf-svc-panel__plain,
	.mf-svc-split__copy {
		order: 1;
	}

	.mf-svc-panel__media,
	.mf-svc-split__media {
		order: 2;
	}

	.mf-svc-panel__title,
	.mf-svc-panel__text,
	.mf-svc-why__lead,
	.mf-svc-body {
		max-width: 68ch;
	}

	/* The 478 x 850 portrait videos would be a mile tall in one column */
	.mf-svc-split__media {
		aspect-ratio: 16 / 9;
		max-width: 720px;
	}

	.mf-svc-panel__media--square img,
	.mf-svc-why__media img {
		aspect-ratio: 16 / 10;
	}

	.mf-svc-why__body {
		margin-top: clamp(16px, 3vw, 28px);
	}

	.mf-svc-why__aside {
		width: 100%;
	}

	.mf-svc-why__media {
		margin-top: clamp(12px, 2vw, 22px);
	}
}

/* ---- <= 767: mobile. These values come from the 430px mobile Figma frame,
   which has its own scale — they are not a shrink of the desktop numbers. --- */
@media (max-width: 767px) {

	.mf-hero--service,
	.mf-svc-panel,
	.mf-svc-why,
	.mf-svc-split,
	.mf-svc-cols,
	.mf-svc-areas {
		--mf-svc-gutter: 20px;
		--mf-svc-h2-gap: 12px;

		--fs-h1: 36px;              /* mobile frame 1:3910 */
		--fs-h2: 26px;
		--fs-step-title: 22px;
		--fs-lead: 16px;            /* mobile frame 1:3919 */
		--fs-body: 18px;
		--fs-area-title: 22px;
		--fs-area-body: 17px;

		--lh-h1: 1.139;             /* 36 / 41 */
		--lh-h2: 1.423;             /* 26 / 37 */
		--lh-body: 1.556;           /* 18 / 28 */
		--lh-card-body: 1.556;
		--lh-step-body: 1.5;
		--lh-hero-lead: 1.75;       /* 16 / 28 */
		--lh-area-title: 1.455;
		--lh-area-body: 1.647;
	}

	/* ---- Hero ---------------------------------------------------------- */
	.mf-hero--service .mf-hero__content {
		padding: 70px 12px 40px;
	}

	.mf-hero--service .mf-crumb {
		gap: 8px;
		margin-bottom: 14px;
		font-size: 15px;
		line-height: 1.6;
		flex-wrap: wrap;
	}

	.mf-hero--service .mf-crumb__icon {
		width: 14px;
		height: 14px;
	}

	.mf-subtext--service {
		margin-top: 12px;
	}

	/* ---- Shared -------------------------------------------------------- */
	.mf-svc-h2--stacked {
		margin-top: 22px;
	}

	.mf-svc-cta .quote-btn,
	.mf-svc-panel__top .badge-pill {
		min-height: 44px;
		padding: 3px 13px;
		font-size: 15px;
		line-height: 1.4;
	}

	/* ---- Card + image panels ------------------------------------------- */
	.mf-svc-panel,
	.mf-svc-panel--intro,
	.mf-svc-panel--flip {
		padding-block: 30px 36px;
	}

	.mf-svc-panel__top {
		flex-wrap: nowrap;
		gap: 10px;
		margin-bottom: 18px;
	}

	.mf-svc-panel__card {
		padding: 18px;
		border-radius: 22px;
	}

	.mf-svc-panel__title,
	.mf-svc-panel__text,
	.mf-svc-body,
	.mf-svc-why__lead {
		max-width: none;
	}

	.mf-svc-panel__text {
		margin-top: 10px;
	}

	.mf-svc-panel__media,
	.mf-svc-panel__media--square {
		border-radius: 22px;
	}

	.mf-svc-panel__media img {
		aspect-ratio: 388 / 260;
	}

	.mf-svc-panel__plain .mf-svc-cta {
		margin-top: 18px;
	}

	/* ---- Why + steps ---------------------------------------------------- */
	.mf-svc-why {
		padding-block: 30px 36px;
	}

	.mf-svc-why__media {
		border-radius: 22px;
		margin-top: 14px;
	}

	.mf-svc-why__media img {
		aspect-ratio: 388 / 280;
	}

	.mf-svc-step {
		grid-template-columns: 52px minmax(0, 1fr);
		column-gap: 14px;
		align-items: start;
		padding-block: 18px 12px;
	}

	.mf-svc-step__icon {
		width: 52px;
		height: 52px;
	}

	.mf-svc-step__text {
		margin-top: 5px;
	}

	/* ---- Splits --------------------------------------------------------- */
	.mf-svc-split,
	.mf-svc-split--gradient {
		padding-block: 30px 36px;
	}

	.mf-svc-split__media {
		aspect-ratio: 388 / 218;
		max-width: none;
		border-radius: 22px;
	}

	.mf-svc-split__copy .mf-svc-cta {
		margin-top: 18px;
	}

	/* ---- Two-column long form ------------------------------------------- */
	.mf-svc-cols {
		padding-block: 30px 36px;
	}

	.mf-svc-cols__inner {
		row-gap: 26px;
	}

	/* ---- Area cards ------------------------------------------------------ */
	.mf-svc-areas {
		padding-block: 26px 30px;
	}

	.mf-svc-areas__inner {
		padding-inline: 20px;
		gap: 16px;
	}

	.mf-svc-area {
		padding: 18px;
		border-radius: 22px;
	}

	.mf-svc-area__title,
	.mf-svc-area__text {
		max-width: none;
	}

	.mf-svc-area__text {
		margin-top: 8px;
	}
}

/* ---- <= 420: the narrowest phones ---------------------------------------- */
@media (max-width: 420px) {

	.mf-hero--service,
	.mf-svc-panel,
	.mf-svc-why,
	.mf-svc-split,
	.mf-svc-cols,
	.mf-svc-areas {
		--fs-h1: 32px;
		--fs-h2: 24px;
		--fs-step-title: 20px;
		--fs-body: 17px;
	}

	.mf-svc-step {
		grid-template-columns: 44px minmax(0, 1fr);
		column-gap: 12px;
	}

	.mf-svc-step__icon {
		width: 44px;
		height: 44px;
	}
}

.mf-hero--service {
    background-image: url(/wp-content/uploads/2026/09/service-banner.png);
}
.mf-hero--custom-framing
 {
    background-image: url(/wp-content/uploads/2026/09/Custom-Framing-1.png);
}
.glass-service {
    background-image: url(/wp-content/uploads/2026/09/Premium-Art-Glass-Framing.jpg);
}
/* ==========================================================================
   GALLERY PAGE
   Figma: file FV7LRaWs3NuDRhlzVrOeRO, node 114:3132 (1920 x 7194)

   Same construction rules as the Services page, for the same reasons — each
   one was a bug we already paid for once:

   1. TYPE SCALES WITH THE VIEWPORT. The Figma frame is 1920 wide, so a value
      pinned as hard px renders ~27% too large on a 1512 screen. Every size is
      anchored to equal the Figma value at exactly 1920 and scale down from
      there: design px / 1920 * 100 = vw, with a floor for readability.

   2. LETTER-SPACING IS -3% OF FONT SIZE on every text node in this design
      (-2.55/85, -1.35/45, -0.72/24, -0.66/22 all = -0.03), so it is written
      once as -0.03em and scales by itself.

   3. LINE-HEIGHTS ARE RATIOS of the Figma pairs, so they scale too:
        H1 85/101 = 1.188    H2 45/57 = 1.267
        lead 22/36 = 1.636   body 24/39 = 1.625

   4. THE H1 GUARD. `.mf-headline` carries the home page's word-rotator styles
      (style.css:933 line-height:16px, and style.css:7439
      `line-height: 0 !important` in a mobile query) which stack its words on
      one baseline on purpose. On a static three-span headline that prints
      every span on top of the others. The template omits that class; the
      guard below makes the page correct even if it creeps back in.

   5. TOKENS LIVE ON THE SECTIONS, not a body class — if the page slug is
      "gallery", WordPress loads the template through the hierarchy and the
      body never gets `page-template-page-gallery`.

   NO CSS NESTING is used anywhere, and every block is closed.
   Append the whole thing to style.css in one go — do not paste it in pieces.
   ========================================================================== */

.mf-hero--gallery,
.mf-gal {
	/* ---- Fluid type scale. Cap = the Figma value, reached at 1920px. ---- */
	--fs-h1:   clamp(34px, 4.427vw, 85px);   /* 85 */
	--fs-h2:   clamp(24px, 2.344vw, 45px);   /* 45 */
	--fs-lead: clamp(15px, 1.146vw, 22px);   /* 22 */
	--fs-body: clamp(17px, 1.250vw, 24px);   /* 24 */

	--lh-h1: 1.188;
	--lh-h2: 1.267;
	--lh-lead: 1.636;
	--lh-body: 1.625;

	--mf-gal-tracking: -0.03em;
	--mf-gal-teal: #6cdbd5;

	/* 74 of 1920 — this page insets a touch wider than Services' 68 */
	--mf-gal-gutter: clamp(20px, 3.854vw, 74px);
	--mf-gal-col-gap: clamp(10px, 2.560vw, 49px);   /* 49.16 measured */
	--mf-gal-row-gap: clamp(10px, 2.367vw, 45px);   /* 45.45 measured */
}


/* ==========================================================================
   1. HERO VARIANT — node 114:3135
   Breadcrumb 114:3166 : 22 / 39 / -0.66, rgba(255,255,255,.9)
   H1         114:3164 : 85 / 101 / -2.55, three spans, middle span #6cdbd5,
                         802 of 1920 = 41.77vw
   Lead       114:3162 : 22 / 36 / -0.66, rgba(255,255,255,.9),
                         753 of 1920 = 39.22vw
   ========================================================================== */

.mf-hero--gallery .mf-hero__content {
	padding: clamp(70px, 6.302vw, 121px) clamp(20px, 2.604vw, 50px) clamp(30px, 2.083vw, 40px);
}

.mf-headline--gallery {
	max-width: 41.77vw;
	min-width: 0;
	margin: 0;
	font-size: var(--fs-h1);
	font-weight: 400;
	line-height: var(--lh-h1);
	letter-spacing: var(--mf-gal-tracking);
	color: #fff;
	white-space: normal;
}

/* The middle span only — "Ideas, Crafted" */
.mf-headline--gallery .mf-headline__accent {
	color: var(--mf-gal-teal);
}

/* See note 4 in the header. Two classes + !important outranks the one-class
   !important rotator rule at every width, class present or not. */
.mf-hero--gallery .mf-headline--gallery {
	font-size: var(--fs-h1) !important;
	line-height: var(--lh-h1) !important;
	letter-spacing: var(--mf-gal-tracking) !important;
	white-space: normal !important;
}

.mf-subtext--gallery {
	width: 100%;
	max-width: 39.22vw;
	margin-top: clamp(10px, 1.042vw, 20px);
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
	letter-spacing: var(--mf-gal-tracking);
	color: rgba(255, 255, 255, 0.9);
}

.mf-hero--gallery .mf-crumb {
	font-size: var(--fs-lead);
	line-height: 1.773;
	letter-spacing: var(--mf-gal-tracking);
}


/* ==========================================================================
   2. OUR WORKS — heading block, y1059
   ========================================================================== */

.mf-gal {
	box-sizing: border-box;
	padding-block: clamp(30px, 3.229vw, 62px) clamp(40px, 5.313vw, 102px);
	font-family: var(--mf-font-display);
	background-color: #fff;
}

.mf-gal *,
.mf-gal *::before,
.mf-gal *::after {
	box-sizing: border-box;
}

.mf-gal__inner {
	width: 100%;
	max-width: 1920px;
	margin-inline: auto;
	padding-inline: var(--mf-gal-gutter);
}

/* Headline left, lead right — 696 : 1022 of the content box */
.mf-gal__head {
	display: grid;
	grid-template-columns: minmax(0, 696fr) minmax(0, 1022fr);
	column-gap: clamp(20px, 2.604vw, 50px);
	align-items: start;
	margin-bottom: clamp(24px, 4.583vw, 88px);   /* head y1059 -> grid y1327 */
}

/* 114:3172 — a teal 45px heading, not the outlined badge-pill used elsewhere */
.mf-gal__eyebrow {
	margin: 0;
	font-size: var(--fs-h2);
	font-weight: 400;
	line-height: var(--lh-h2);
	letter-spacing: var(--mf-gal-tracking);
	color: var(--mf-gal-teal);
	white-space: nowrap;
}

/* 114:3171 — 446 of 1920 = 23.23vw, which is what makes it break to two lines */
.mf-gal__title {
	max-width: 23.23vw;
	margin: clamp(4px, 0.573vw, 11px) 0 0;
	font-size: var(--fs-h2);
	font-weight: 400;
	line-height: var(--lh-h2);
	letter-spacing: var(--mf-gal-tracking);
	color: #000;
}

/* 114:3170 — Arial BOLD here, unlike every other lead in this design */
.mf-gal__lead {
	margin: clamp(6px, 1.25vw, 24px) 0 0;
	font-size: var(--fs-body);
	font-weight: 700;
	line-height: var(--lh-body);
	letter-spacing: var(--mf-gal-tracking);
	color: rgba(99, 99, 99, 0.9);
}


/* ==========================================================================
   3. MASONRY — node 114:3173 (1768 x 5043)
   Three 556.56 columns, 49.16 apart, 45.45 between rows. Each column is its
   own stack — the images deliberately do NOT line up in rows.

   Built as three real columns so the desktop arrangement matches the design
   exactly. Below 1024 the column wrappers become `display: contents`, which
   dissolves them and lets all 26 figures reflow as direct grid children —
   so the responsive layout needs no duplicate markup.
   ========================================================================== */

.mf-gal__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--mf-gal-col-gap);
	align-items: start;
}

.mf-gal__col {
	display: flex;
	flex-direction: column;
	gap: var(--mf-gal-row-gap);
	min-width: 0;
}

.mf-gal__item {
	margin: 0;
	overflow: hidden;
	aspect-ratio: var(--ratio, 4 / 3);
	background-color: #f3f3f3;   /* holds the slot while the image loads */
}

.mf-gal__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.mf-gal__item:hover .mf-gal__img,
.mf-gal__item:focus-within .mf-gal__img {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {

	.mf-gal__img {
		transition: none;
	}

	.mf-gal__item:hover .mf-gal__img,
	.mf-gal__item:focus-within .mf-gal__img {
		transform: none;
	}
}


/* ==========================================================================
   RESPONSIVE

   The type clamps handle 768px upward on their own — no per-breakpoint font
   sizes above mobile. These blocks change layout only, plus the mobile
   frame's own type values below 768.
   ========================================================================== */

/* ---- <= 1200: the fixed vw measures stop making sense as columns narrow --- */
@media (max-width: 1200px) {

	.mf-headline--gallery,
	.mf-subtext--gallery,
	.mf-gal__title {
		max-width: 100%;
	}

	.mf-gal__eyebrow {
		white-space: normal;
	}
}

/* ---- <= 1024: head stacks, masonry drops to two columns ------------------ */
@media (max-width: 1024px) {

	.mf-hero--gallery .mf-hero__content {
		padding: 90px 30px 40px;
	}

	.mf-gal__head {
		grid-template-columns: minmax(0, 1fr);
		row-gap: clamp(14px, 2.5vw, 24px);
		margin-bottom: clamp(20px, 3.5vw, 36px);
	}

	.mf-gal__title,
	.mf-gal__lead {
		max-width: 68ch;
	}

	/* Dissolve the three column wrappers and reflow all 26 figures as one
	   two-column masonry. `column-count` gives true masonry balancing here —
	   the exact desktop stacking no longer applies at this width anyway. */
	.mf-gal__grid {
		display: block;
		column-count: 2;
		column-gap: var(--mf-gal-col-gap);
	}

	.mf-gal__col {
		display: contents;
	}

	.mf-gal__item {
		display: block;
		width: 100%;
		margin-bottom: var(--mf-gal-row-gap);
		break-inside: avoid;
		-webkit-column-break-inside: avoid;
		page-break-inside: avoid;
	}
}

/* ---- <= 767: mobile. Type values come from the 430px mobile Figma frame,
   which has its own scale — not a shrink of the desktop numbers. ----------- */
@media (max-width: 767px) {

	.mf-hero--gallery,
	.mf-gal {
		--mf-gal-gutter: 20px;
		--mf-gal-col-gap: 12px;
		--mf-gal-row-gap: 12px;

		--fs-h1: 36px;              /* mobile frame 1:3910 */
		--fs-h2: 26px;
		--fs-lead: 16px;            /* mobile frame 1:3919 */
		--fs-body: 18px;

		--lh-h1: 1.139;             /* 36 / 41 */
		--lh-h2: 1.423;             /* 26 / 37 */
		--lh-lead: 1.75;            /* 16 / 28 */
		--lh-body: 1.556;           /* 18 / 28 */
	}

	/* ---- Hero ---------------------------------------------------------- */
	.mf-hero--gallery .mf-hero__content {
		padding: 70px 12px 40px;
	}

	.mf-hero--gallery .mf-crumb {
		gap: 8px;
		margin-bottom: 14px;
		font-size: 15px;
		line-height: 1.6;
		flex-wrap: wrap;
	}

	.mf-hero--gallery .mf-crumb__icon {
		width: 14px;
		height: 14px;
	}

	.mf-subtext--gallery {
		margin-top: 12px;
	}

	/* ---- Head ---------------------------------------------------------- */
	.mf-gal {
		padding-block: 30px 40px;
	}

	.mf-gal__head {
		margin-bottom: 20px;
		row-gap: 12px;
	}

	.mf-gal__title,
	.mf-gal__lead {
		max-width: none;
	}

	.mf-gal__title {
		margin-top: 4px;
	}

	.mf-gal__lead {
		margin-top: 12px;
	}

	/* ---- Masonry: still two columns at phone width, as the design shows -- */
	.mf-gal__grid {
		column-count: 2;
	}
}

/* ---- <= 480: one column — two 556px slots side by side stop reading ------ */
@media (max-width: 480px) {

	.mf-hero--gallery,
	.mf-gal {
		--fs-h1: 32px;
		--fs-h2: 24px;
		--fs-body: 17px;
		--mf-gal-row-gap: 14px;
	}

	.mf-gal__grid {
		column-count: 1;
	}
}
.mf-hero--gallery {
    background-image: url(/wp-content/uploads/2026/09/gallery-banner.png);
}
/* ==========================================================================
   CONTACT PAGE
   Figma: file FV7LRaWs3NuDRhlzVrOeRO, node 117:3370 (1920 x 4072)

   Same construction rules as the Services and Gallery pages — each one is a bug
   already paid for once on this project:

   1. TYPE SCALES WITH THE VIEWPORT. The Figma frame is 1920 wide, so a hard px
      value renders ~27% too large on a 1512 screen. Every size is anchored to
      equal the Figma value at exactly 1920 and scale down from there:
      design px / 1920 * 100 = vw, with a floor for readability.

   2. LETTER-SPACING IS -3% OF FONT SIZE on every text node in this design
      (-2.55/85, -1.35/45, -0.96/32, -0.72/24, -0.66/22, -0.57/19, -0.54/18
      all = -0.03), so it is written once as -0.03em and scales by itself.

   3. LINE-HEIGHTS ARE RATIOS of the Figma pairs, so they scale too.

   4. THE H1 GUARD. `.mf-headline` carries the home page's word-rotator styles
      (style.css:933, and style.css:7439 `line-height: 0 !important` in a mobile
      query) which stack its words on one baseline on purpose. On a static
      three-span headline that prints every span on top of the others. The
      template omits the class; the guard below wins even if it creeps back.

   5. NEVER OVERRIDE GRAVITY FORMS' GRID. GF lays fields out on its own
      12-column grid. The `.mf-gform-wrapper .gform_fields` rule at style.css
      line 6964 replaces it with 4 columns using !important, which is what
      crushed the step-1 pills and overlapped Name/Phone. Nothing here touches
      `grid-template-columns` on `.gform_fields` — field widths come from the
      GF editor (One Half / Full), and this file only restores 12 columns in
      case that old override is still present.

   6. TOKENS LIVE ON THE SECTIONS, not a body class — if the page slug is
      "contact", WordPress loads the template through the hierarchy and the body
      never gets `page-template-page-contact`.

   NO CSS NESTING is used anywhere, and every block is closed.
   Append the whole thing to style.css in one go — do not paste it in pieces.
   ========================================================================== */

.mf-hero--contact,
.mf-contact {
	/* ---- Fluid type scale. Cap = the Figma value, reached at 1920px. ---- */
	--fs-h1:      clamp(34px, 4.427vw, 85px);   /* 85 */
	--fs-h2:      clamp(24px, 2.344vw, 45px);   /* 45 */
	--fs-info:    clamp(20px, 1.667vw, 32px);   /* 32 — "Call" / "Address"  */
	--fs-state:   clamp(17px, 1.250vw, 24px);   /* 24 — "Victoria"          */
	--fs-lead:    clamp(15px, 1.146vw, 22px);   /* 22 — hero lead, addresses */
	--fs-field:   clamp(15px, 0.990vw, 19px);   /* 19 — input text           */
	--fs-label:   clamp(14px, 0.938vw, 18px);   /* 18 — field labels         */

	--lh-h1: 1.188;         /* 85 / 101 */
	--lh-h2: 1.267;         /* 45 / 57  */
	--lh-info: 1.094;       /* 32 / 35  */
	--lh-state: 1.5;        /* 24 / 36  */
	--lh-lead: 1.636;       /* 22 / 36  */
	--lh-field: 1.842;      /* 19 / 35  */
	--lh-label: 1.944;      /* 18 / 35  */

	--mf-ct-tracking: -0.03em;
	--mf-ct-teal: #6cdbd5;
	--mf-ct-teal-dark: #008080;
	--mf-ct-ink: #004e4a;
	--mf-ct-label: #656565;
	--mf-ct-placeholder: #bcbcbc;
	--mf-ct-value: rgba(152, 152, 152, 0.9);

	--mf-ct-gutter: clamp(20px, 3.542vw, 68px);
	--mf-ct-radius: clamp(18px, 1.563vw, 30px);   /* card radius 30 */
	--mf-ct-field-radius: 12px;
	--mf-ct-field-h: clamp(46px, 2.708vw, 52px);
	--mf-ct-field-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.07);
}


/* ==========================================================================
   1. HERO VARIANT — node 117:3376
   Breadcrumb 117:3407 : 22 / 39 / -0.66, rgba(255,255,255,.9)
   H1         117:3405 : 85 / 101 / -2.55, three spans, middle span #6cdbd5,
                         865 of 1920 = 45.05vw
   Lead       117:3403 : 22 / 36 / -0.66, rgba(255,255,255,.9),
                         742 of 1920 = 38.65vw
   ========================================================================== */

.mf-hero--contact .mf-hero__content {
	padding: clamp(70px, 6.302vw, 121px) clamp(20px, 2.604vw, 50px) clamp(30px, 2.083vw, 40px);
}

.mf-headline--contact {
	max-width: 45.05vw;
	min-width: 0;
	margin: 0;
	font-size: var(--fs-h1);
	font-weight: 400;
	line-height: var(--lh-h1);
	letter-spacing: var(--mf-ct-tracking);
	color: #fff;
	white-space: normal;
}

/* The middle span only — "Framing Ideas" */
.mf-headline--contact .mf-headline__accent {
	color: var(--mf-ct-teal);
}

/* See note 4 in the header. Two classes + !important outranks the one-class
   !important rotator rule at every width, whether the class is present or not. */
.mf-hero--contact .mf-headline--contact {
	font-size: var(--fs-h1) !important;
	line-height: var(--lh-h1) !important;
	letter-spacing: var(--mf-ct-tracking) !important;
	white-space: normal !important;
}

.mf-subtext--contact {
	width: 100%;
	max-width: 38.65vw;
	margin-top: clamp(10px, 1.042vw, 20px);
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
	letter-spacing: var(--mf-ct-tracking);
	color: rgba(255, 255, 255, 0.9);
}

.mf-hero--contact .mf-crumb {
	font-size: var(--fs-lead);
	line-height: 1.773;
	letter-spacing: var(--mf-ct-tracking);
}


/* ==========================================================================
   2. CONTACT BAND — node 117:3371
   ========================================================================== */

.mf-contact {
	box-sizing: border-box;
	padding-block: clamp(26px, 2.344vw, 45px) clamp(40px, 4.115vw, 79px);
	font-family: var(--mf-font-display);
	background-image: linear-gradient(106.09deg,
		rgb(188, 255, 251) 25.86%,
		rgb(255, 255, 255) 48.59%,
		rgb(186, 255, 251) 120.23%);
}

.mf-contact *,
.mf-contact *::before,
.mf-contact *::after {
	box-sizing: border-box;
}

.mf-contact__inner {
	width: 100%;
	max-width: 1920px;
	margin-inline: auto;
	padding-inline: var(--mf-ct-gutter);
}

/* 117:3429 — #008080, nowrap in the design */
.mf-contact__title {
	margin: 0 0 clamp(18px, 2.292vw, 44px);
	font-size: var(--fs-h2);
	font-weight: 400;
	line-height: var(--lh-h2);
	letter-spacing: var(--mf-ct-tracking);
	color: var(--mf-ct-teal-dark);
	white-space: nowrap;
}

/* 902 : 757 of the 1703 content box, 44px apart (info x1056 - form right 1012) */
.mf-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 902fr) minmax(0, 757fr);
	column-gap: clamp(18px, 2.292vw, 44px);
	align-items: stretch;
}

.mf-contact__card {
	border-radius: var(--mf-ct-radius);
	overflow: hidden;
}

/* 117:3372 — teal, 65 left / 67.8 right / 43 top padding read off the fields */
.mf-contact__card--form {
	padding: clamp(20px, 2.24vw, 43px) clamp(18px, 3.531vw, 68px) clamp(28px, 4.948vw, 95px);
	background-color: var(--mf-ct-teal);
}

/* 117:3373 — 31 left padding (icon x1087 - card x1056), 46 top */
.mf-contact__card--info {
	padding: clamp(20px, 2.396vw, 46px) clamp(18px, 1.615vw, 31px) clamp(24px, 2.604vw, 50px);
	background-color: #f2f2f2;
}

.mf-contact__notice {
	margin: 0;
	font-size: var(--fs-label);
	color: var(--mf-ct-ink);
}


/* ==========================================================================
   2a. THE GRAVITY FORM INSIDE THE TEAL CARD

   Styled by CLASS, never by field id, so your form id and field ids are free to
   change. Field widths come from the GF editor (One Half / Full) — see note 5.
   ========================================================================== */

/* Restore GF's own 12-column grid in case style.css:6964 is still overriding it */
.mf-contact__card--form .gform_fields {
	display: grid !important;
	grid-template-columns: repeat(12, 1fr) !important;
	gap: clamp(14px, 1.719vw, 33px) clamp(12px, 1.419vw, 27px);   /* 33 row / 27.25 col */
}

.mf-contact__card--form .gform_wrapper,
.mf-contact__card--form .gform_wrapper form {
	margin: 0;
	max-width: none;
}

/* ---- Labels — 117:3455: Arial 18 / 35 / -0.54, #656565 ------------------ */
.mf-contact__card--form .gfield_label,
.mf-contact__card--form legend.gfield_label {
	display: block;
	margin: 0;
	padding: 0;
	font-family: var(--mf-font-display);
	font-size: var(--fs-label);
	font-weight: 400;
	line-height: var(--lh-label);
	letter-spacing: var(--mf-ct-tracking);
	color: var(--mf-ct-label);
}

/* The design marks required fields with a plain asterisk, no colour change */
.mf-contact__card--form .gfield_required {
	color: inherit;
	margin-left: 1px;
}

.mf-contact__card--form .gfield_required .gfield_required_text {
	font-style: normal;
}

/* ---- Inputs — 117:3458: #fff, radius 12, shadow 2px 2px 6px rgba(0,0,0,.07),
   height 52. Text 117:3461: Arial Narrow 19 / 35 / -0.57 --------------------- */
.mf-contact__card--form input[type="text"],
.mf-contact__card--form input[type="email"],
.mf-contact__card--form input[type="tel"],
.mf-contact__card--form input[type="number"],
.mf-contact__card--form input[type="url"],
.mf-contact__card--form select,
.mf-contact__card--form textarea {
	width: 100%;
	padding: 0 clamp(14px, 1.198vw, 23px);
	font-family: "Arial Narrow", var(--mf-font-display), sans-serif;
	font-size: var(--fs-field);
	line-height: var(--lh-field);
	letter-spacing: var(--mf-ct-tracking);
	color: #333;
	background-color: #fff;
	border: 0;
	border-radius: var(--mf-ct-field-radius);
	box-shadow: var(--mf-ct-field-shadow);
	appearance: none;
	-webkit-appearance: none;
	transition: box-shadow 0.2s ease;
}

.mf-contact__card--form input[type="text"],
.mf-contact__card--form input[type="email"],
.mf-contact__card--form input[type="tel"],
.mf-contact__card--form input[type="number"],
.mf-contact__card--form input[type="url"],
.mf-contact__card--form select {
	height: var(--mf-ct-field-h);
}

/* Textarea 117:3436 — 225 of 1920 = 11.72vw, floored so it stays usable */
.mf-contact__card--form textarea {
	height: auto;
	min-height: clamp(140px, 11.719vw, 225px);
	padding-block: clamp(10px, 0.885vw, 17px);
	resize: vertical;
}

.mf-contact__card--form input::placeholder,
.mf-contact__card--form textarea::placeholder {
	color: var(--mf-ct-placeholder);
	opacity: 1;
}

.mf-contact__card--form input:focus,
.mf-contact__card--form select:focus,
.mf-contact__card--form textarea:focus {
	outline: 2px solid var(--mf-ct-ink);
	outline-offset: 2px;
}

/* ---- Drop downs — 117:3446 / 3449 / 3432 draw a 20px chevron at the right - */
.mf-contact__card--form select {
	padding-right: clamp(34px, 3.125vw, 60px);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23004e4a' stroke-width='2'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right clamp(14px, 1.198vw, 23px) center;
	background-size: 20px 20px;
	cursor: pointer;
}

/* An unchosen drop down shows "Select" in the placeholder grey */
.mf-contact__card--form select:invalid,
.mf-contact__card--form select option[value=""] {
	color: var(--mf-ct-placeholder);
}

/* ---- Footer row — reCAPTCHA left, Submit right (both on the y2121 line) --- */
.mf-contact__card--form .gform_footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	margin: clamp(24px, 5.26vw, 101px) 0 0;
	padding: 0;
}

/* Submit 117:3466 — a WHITE pill, not the teal one used elsewhere.
   195 x 59, radius 130; text Poppins Medium 24 / 39 / -0.72 in #004e4a */
.mf-contact__card--form .gform_button,
.mf-contact__card--form input[type="submit"],
.mf-contact__card--form .gform-theme-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: clamp(150px, 10.156vw, 195px);
	min-height: clamp(48px, 3.073vw, 59px);
	padding: 0 clamp(20px, 1.563vw, 30px);
	font-family: "Poppins", var(--mf-font-display), sans-serif;
	font-size: clamp(17px, 1.250vw, 24px);
	font-weight: 500;
	line-height: 1.625;
	letter-spacing: var(--mf-ct-tracking);
	color: var(--mf-ct-ink);
	background: #fff;
	border: 0;
	border-radius: 130px;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mf-contact__card--form .gform_button:hover,
.mf-contact__card--form input[type="submit"]:hover,
.mf-contact__card--form .gform-theme-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

/* Validation, kept legible on the teal card */
.mf-contact__card--form .gfield_description,
.mf-contact__card--form .validation_message {
	margin-top: 6px;
	padding: 0;
	font-size: clamp(13px, 0.833vw, 16px);
	line-height: 1.5;
	color: #7a1414;
	background: none;
	border: 0;
}

.mf-contact__card--form .gform_validation_errors {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-radius: var(--mf-ct-field-radius);
	background: #fff;
	border: 0;
	box-shadow: var(--mf-ct-field-shadow);
}


/* ==========================================================================
   2b. THE INFO CARD — node 117:3373
   ========================================================================== */

/* Call and Email sit side by side — icon x1087 and x1391, pitch 304 */
.mf-contact__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(14px, 1.25vw, 24px);
}

.mf-contact__block {
	display: grid;
	grid-template-columns: clamp(38px, 2.828vw, 54px) minmax(0, 1fr);
	column-gap: clamp(12px, 1.443vw, 28px);
	align-items: start;
}

/* Icon 117:3475 — 54.29 square */
.mf-contact__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(38px, 2.828vw, 54px);
	height: clamp(38px, 2.828vw, 54px);
}

.mf-contact__icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.mf-contact__block-body {
	min-width: 0;
}

/* 117:3472 — Poppins Regular 32 / 35 / -0.96, #008080 */
.mf-contact__label {
	margin: 0;
	font-family: "Poppins", var(--mf-font-display), sans-serif;
	font-size: var(--fs-info);
	font-weight: 400;
	line-height: var(--lh-info);
	letter-spacing: var(--mf-ct-tracking);
	color: var(--mf-ct-teal-dark);
}

/* 117:3411 — Arial 22 / 36 / -0.66, rgba(152,152,152,.9) */
.mf-contact__value {
	margin: clamp(3px, 0.313vw, 6px) 0 0;
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
	letter-spacing: var(--mf-ct-tracking);
	color: var(--mf-ct-value);
	overflow-wrap: anywhere;
}

.mf-contact__value a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.mf-contact__value a:hover,
.mf-contact__value a:focus-visible {
	color: var(--mf-ct-teal-dark);
}

/* The Address block sits on its own line — icon y1307 against the row at y1180 */
.mf-contact__block--address {
	margin-top: clamp(16px, 1.823vw, 35px);
}

/* State groups — heading y1375, first address 39 below, 28 between groups */
.mf-contact__state {
	margin-top: clamp(14px, 1.458vw, 28px);
	/* Text starts at x1166, i.e. aligned with the labels, not the icons */
	padding-left: clamp(50px, 4.271vw, 82px);
}

/* 117:3412 — Arial 24 / 36 / -0.72, #008080 */
.mf-contact__state-name {
	margin: 0;
	font-size: var(--fs-state);
	font-weight: 400;
	line-height: var(--lh-state);
	letter-spacing: var(--mf-ct-tracking);
	color: var(--mf-ct-teal-dark);
}

/* 117:3415 — a numbered list, indented 33px, 22 / 36 / -0.66 */
.mf-contact__addresses {
	margin: clamp(2px, 0.156vw, 3px) 0 0;
	padding-left: clamp(20px, 1.719vw, 33px);
	list-style: decimal;
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
	letter-spacing: var(--mf-ct-tracking);
	color: var(--mf-ct-value);
}

.mf-contact__addresses li {
	margin: 0;
	/* addresses are 57 apart on a 36 line box */
	padding-block: clamp(2px, 0.547vw, 10px);
}


/* ==========================================================================
   RESPONSIVE

   The type clamps handle 768px upward on their own — no per-breakpoint font
   sizes above mobile. These blocks change layout only, plus the mobile frame's
   own type values below 768.
   ========================================================================== */

/* ---- <= 1200: fixed vw measures stop making sense as columns narrow ------ */
@media (max-width: 1200px) {

	.mf-headline--contact,
	.mf-subtext--contact {
		max-width: 100%;
	}

	.mf-contact__title {
		white-space: normal;
	}

	.mf-contact__state {
		padding-left: clamp(30px, 3.5vw, 58px);
	}
}

/* ---- <= 1024: the two cards stack, the form goes single column ----------- */
@media (max-width: 1024px) {

	.mf-hero--contact .mf-hero__content {
		padding: 90px 30px 40px;
	}

	.mf-contact__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: clamp(18px, 3vw, 32px);
	}

	.mf-contact__card--form,
	.mf-contact__card--info {
		padding: clamp(20px, 3vw, 34px);
	}

	/* Every field full width — one rule, no per-id spans at this size */
	.mf-contact__card--form .gform_fields > .gfield {
		grid-column: 1 / -1 !important;
	}

	.mf-contact__card--form .gform_footer {
		justify-content: flex-start;
		margin-top: clamp(20px, 3.5vw, 32px);
	}

	.mf-contact__state {
		padding-left: 0;
	}

	.mf-contact__block--address {
		margin-top: clamp(14px, 2.5vw, 24px);
	}
}

/* ---- <= 767: mobile. Type values come from the 430px mobile Figma frame,
   which has its own scale — not a shrink of the desktop numbers. ----------- */
@media (max-width: 767px) {

	.mf-hero--contact,
	.mf-contact {
		--mf-ct-gutter: 20px;
		--mf-ct-radius: 22px;
		--mf-ct-field-h: 48px;

		--fs-h1: 36px;              /* mobile frame 1:3910 */
		--fs-h2: 26px;
		--fs-info: 22px;
		--fs-state: 19px;
		--fs-lead: 16px;            /* mobile frame 1:3919 */
		--fs-field: 16px;
		--fs-label: 15px;

		--lh-h1: 1.139;             /* 36 / 41 */
		--lh-h2: 1.423;             /* 26 / 37 */
		--lh-info: 1.273;
		--lh-state: 1.474;
		--lh-lead: 1.75;            /* 16 / 28 */
		--lh-field: 1.5;
		--lh-label: 1.6;
	}

	/* ---- Hero ---------------------------------------------------------- */
	.mf-hero--contact .mf-hero__content {
		padding: 70px 12px 40px;
	}

	.mf-hero--contact .mf-crumb {
		gap: 8px;
		margin-bottom: 14px;
		font-size: 15px;
		line-height: 1.6;
		flex-wrap: wrap;
	}

	.mf-hero--contact .mf-crumb__icon {
		width: 14px;
		height: 14px;
	}

	.mf-subtext--contact {
		margin-top: 12px;
	}

	/* ---- Band ---------------------------------------------------------- */
	.mf-contact {
		padding-block: 28px 36px;
	}

	.mf-contact__title {
		margin-bottom: 18px;
	}

	.mf-contact__card--form,
	.mf-contact__card--info {
		padding: 20px;
	}

	.mf-contact__card--form .gform_fields {
		gap: 16px !important;
	}

	.mf-contact__card--form textarea {
		min-height: 150px;
	}

	.mf-contact__card--form .gform_button,
	.mf-contact__card--form input[type="submit"],
	.mf-contact__card--form .gform-theme-button {
		width: 100%;
		min-width: 0;
	}

	/* ---- Info card ----------------------------------------------------- */
	.mf-contact__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.mf-contact__block {
		grid-template-columns: 38px minmax(0, 1fr);
		column-gap: 12px;
	}

	.mf-contact__icon {
		width: 38px;
		height: 38px;
	}

	.mf-contact__state {
		margin-top: 16px;
	}

	.mf-contact__addresses {
		padding-left: 20px;
	}

	.mf-contact__addresses li {
		padding-block: 3px;
	}
}

/* ---- <= 420: the narrowest phones --------------------------------------- */
@media (max-width: 420px) {

	.mf-hero--contact,
	.mf-contact {
		--fs-h1: 32px;
		--fs-h2: 24px;
		--fs-info: 20px;
		--fs-lead: 15px;
	}
}
.mf-hero--contact {
    background-image: url(/wp-content/uploads/2026/09/contact-banner.png);
}

#gform_wrapper_2 {
	--fs-label: clamp(14px, 0.938vw, 18px);   /* 18 */
	--fs-field: clamp(15px, 0.990vw, 19px);   /* 19 */
	--fs-btn:   clamp(17px, 1.250vw, 24px);   /* 24 */
 
	--field-h:      clamp(46px, 2.708vw, 52px);
	--field-pad-x:  clamp(14px, 1.198vw, 23px);
	--field-radius: 12px;
	--field-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.07);
 
	--row-gap: clamp(14px, 1.719vw, 33px);
	--col-gap: clamp(12px, 1.419vw, 27px);
 
	--btn-circle: clamp(42px, 2.760vw, 53px);
 
	--ink: #004e4a;
	--teal: #6cdbd5;
	--label-grey: #656565;
	--placeholder: #bcbcbc;
 
	/* Gravity Forms' orbital theme drives its controls from these. Setting them
	   here is what stops the default blue #204ce5 button coming back. */
	--gf-ctrl-btn-bg-color-primary: #fff;
	--gf-ctrl-btn-bg-color-hover-primary: #fff;
	--gf-ctrl-btn-color-primary: var(--ink);
	--gf-ctrl-btn-border-color-primary: transparent;
	--gf-ctrl-btn-size: auto;
	--gf-color-primary: var(--ink);
 
	max-width: none;
	margin: 0;
}
 
#gform_wrapper_2 form {
	margin: 0;
}
 
 
/* ==========================================================================
   1. GRID — GF's own 12 columns, left exactly as GF builds them
   ========================================================================== */
 
#gform_wrapper_2 .gform_fields {
	row-gap: var(--row-gap);
	column-gap: var(--col-gap);
}
 
/* The design's row order: Name | Email, Phone | City, Service, Subject,
   Message, Width | Height. Two ids beat GF's own .gfield--width-full rule, so
   no !important is needed — and if you later set "One Half" in the GF editor,
   these simply agree with it. */
#gform_wrapper_2 #field_2_1  { grid-column: 1 / span 6; }    /* Name        */
#gform_wrapper_2 #field_2_3  { grid-column: 7 / span 6; }    /* Email       */
#gform_wrapper_2 #field_2_4  { grid-column: 1 / span 6; }    /* Phone       */
#gform_wrapper_2 #field_2_6  { grid-column: 7 / span 6; }    /* City        */
#gform_wrapper_2 #field_2_7  { grid-column: 1 / span 12; }   /* Service     */
#gform_wrapper_2 #field_2_8  { grid-column: 1 / span 12; }   /* Subject     */
#gform_wrapper_2 #field_2_9  { grid-column: 1 / span 12; }   /* Message     */
#gform_wrapper_2 #field_2_10 { grid-column: 1 / span 6; }    /* Width (cm)  */
#gform_wrapper_2 #field_2_11 { grid-column: 7 / span 6; }    /* Height (cm) */
 
 
/* ==========================================================================
   2. LABELS — 117:3455
   ========================================================================== */
 
#gform_wrapper_2 .gfield_label,
#gform_wrapper_2 legend.gfield_label {
	display: block;
	margin: 0 0 2px;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: var(--fs-label);
	font-weight: 400;
	line-height: 1.944;                  /* 18 / 35 */
	letter-spacing: -0.03em;
	color: var(--label-grey);
}
 
/* The design shows a plain asterisk, same colour as the label */
#gform_wrapper_2 .gfield_required {
	margin-left: 1px;
	color: inherit;
}
 
#gform_wrapper_2 .gfield_required .gfield_required_text {
	font-style: normal;
}
 
/* GF's sub-labels (First / Last, address parts) are not in the design */
#gform_wrapper_2 .ginput_complex label,
#gform_wrapper_2 .gform_fileupload_rules {
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(12px, 0.729vw, 14px);
	color: var(--label-grey);
}
 
 
/* ==========================================================================
   3. INPUTS, SELECTS, TEXTAREA — 117:3458 / 117:3436 / 117:3461
   ========================================================================== */
 
/* !important is deliberate here. Gravity Forms' orbital theme styles its
   controls through `gform-theme--foundation` / `gform-theme--framework`, which
   sets them with logical properties (block-size, padding-inline, border-radius)
   from its own custom properties. On this site those kept winning over plain
   ID-scoped rules, so the appearance declarations are forced. The GRID rules
   above need no !important — they already win cleanly. */
#gform_wrapper_2 input[type="text"],
#gform_wrapper_2 input[type="email"],
#gform_wrapper_2 input[type="tel"],
#gform_wrapper_2 input[type="url"],
#gform_wrapper_2 input[type="number"],
#gform_wrapper_2 select,
#gform_wrapper_2 textarea {
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	padding-top: 8px;
    color: #BCBCBC !important;
	font-family: "Arial Narrow", Arial, Helvetica, sans-serif !important;
	font-size: var(--fs-field) !important;
	line-height: 1.842 !important;       /* 19 / 35 */
	letter-spacing: -0.03em !important;
	background-color: #fff !important;
	border: 0 !important;
	border-radius: var(--field-radius) !important;
	box-shadow: var(--field-shadow) !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	transition: box-shadow 0.2s ease;
}
 
#gform_wrapper_2 input[type="text"],
#gform_wrapper_2 input[type="email"],
#gform_wrapper_2 input[type="tel"],
#gform_wrapper_2 input[type="url"],
#gform_wrapper_2 input[type="number"],
#gform_wrapper_2 select {
	height: var(--field-h) !important;
	block-size: var(--field-h) !important;   /* orbital sets the logical one */
	min-height: 0 !important;
}
 
/* 117:3436 — 225 of 1920 = 11.72vw, floored so it stays usable on a laptop */
#gform_wrapper_2 textarea {
	height: auto !important;
	block-size: auto !important;
	min-height: clamp(140px, 11.719vw, 225px) !important;
	padding-block: clamp(10px, 0.885vw, 17px) !important;
	resize: vertical;
}
 
#gform_wrapper_2 input::placeholder,
#gform_wrapper_2 textarea::placeholder {
	color: var(--placeholder);
	opacity: 1;
}
 
#gform_wrapper_2 input:focus,
#gform_wrapper_2 select:focus,
#gform_wrapper_2 textarea:focus {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}
 
/* Drop downs — 117:3432 / 3446 / 3449 draw a 20px chevron at the right edge */
#gform_wrapper_2 select {
	padding-right: calc(var(--field-pad-x) * 2 + 20px);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23004e4a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--field-pad-x) center;
	background-size: 20px 20px;
	cursor: pointer;
}
 
/* An unchosen drop down shows its prompt in the placeholder grey */
#gform_wrapper_2 select:has(option[value=""]:checked) {
	color: var(--placeholder);
}
 
/* GF wraps some field types in an extra container that adds its own spacing */
#gform_wrapper_2 .ginput_container {
	margin-top: 0;
}
 
 
/* ==========================================================================
   4. SUBMIT — 117:3466
   A WHITE pill with a teal circle and arrow at its right, NOT the teal pill
   used elsewhere on the site. GF renders a bare <button>, so the circle is
   drawn with ::after rather than extra markup.
   ========================================================================== */
 
#gform_wrapper_2 .gform_footer,
#gform_wrapper_2 .gform-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	margin: clamp(22px, 3.281vw, 63px) 0 0;
	padding: 0;
}
 
#gform_wrapper_2 .gform_button,
#gform_wrapper_2 input[type="submit"] {
	position: relative !important;
	display: inline-flex !important;
	align-items: center;
	box-sizing: border-box !important;
	width: auto !important;
	min-width: clamp(160px, 10.156vw, 195px) !important;
	height: auto !important;
	min-height: clamp(48px, 3.073vw, 59px) !important;
	padding-left: clamp(20px, 1.563vw, 30px) !important;
	padding-right: calc(var(--btn-circle) + clamp(14px, 1.042vw, 20px)) !important;
	font-family: "Poppins", Arial, Helvetica, sans-serif !important;
	font-size: var(--fs-btn) !important;
	font-weight: 500 !important;
	line-height: 1.625 !important;       /* 24 / 39 */
	letter-spacing: -0.03em !important;
	color: var(--ink) !important;
	background: #fff !important;
	border: 0 !important;
	border-radius: 130px !important;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
 
/* The 53px teal circle sits 3px in from the right edge */
#gform_wrapper_2 .gform_button::after,
#gform_wrapper_2 input[type="submit"]::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 3px;
	width: var(--btn-circle);
	height: var(--btn-circle);
	transform: translateY(-50%);
	border-radius: 50%;
	background-color: var(--teal);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004e4a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 45%;
}
 
#gform_wrapper_2 .gform_button:hover,
#gform_wrapper_2 input[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}
 
#gform_wrapper_2 .gform_button:focus-visible,
#gform_wrapper_2 input[type="submit"]:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
}
 
@media (prefers-reduced-motion: reduce) {
 
	#gform_wrapper_2 .gform_button,
	#gform_wrapper_2 input[type="submit"] {
		transition: none;
	}
 
	#gform_wrapper_2 .gform_button:hover,
	#gform_wrapper_2 input[type="submit"]:hover {
		transform: none;
	}
}
 
 
/* ==========================================================================
   5. VALIDATION — kept legible on the teal card
   ========================================================================== */
 
#gform_wrapper_2 .gfield_description,
#gform_wrapper_2 .validation_message,
#gform_wrapper_2 .gfield_validation_message {
	margin-top: 6px;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(13px, 0.833vw, 16px);
	line-height: 1.5;
	color: #7a1414;
	background: none;
	border: 0;
}
 
#gform_wrapper_2 .gfield_error input,
#gform_wrapper_2 .gfield_error select,
#gform_wrapper_2 .gfield_error textarea {
	box-shadow: var(--field-shadow), 0 0 0 2px #7a1414;
}
 
#gform_wrapper_2 .gform_validation_errors {
	margin: 0 0 16px;
	padding: 12px 16px;
	background: #fff;
	border: 0;
	border-radius: var(--field-radius);
	box-shadow: var(--field-shadow);
}
 
#gform_wrapper_2 .gform_validation_errors h2,
#gform_wrapper_2 .gform_validation_errors .gform_submission_error {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(14px, 0.938vw, 18px);
	font-weight: 400;
	color: #7a1414;
}
 
#gform_wrapper_2 .gform_confirmation_message {
	font-family: Arial, Helvetica, sans-serif;
	font-size: var(--fs-field);
	line-height: 1.6;
	color: var(--ink);
}
 
 
/* ==========================================================================
   RESPONSIVE
 
   The clamps above already carry the type and control sizes from 768px up, so
   these blocks only change the grid.
   ========================================================================== */
 
/* ---- <= 1024: the card is roughly half its desktop width, so the paired
   fields stop fitting side by side. Everything goes full width. ------------ */
@media (max-width: 1024px) {
 
	#gform_wrapper_2 .gform_fields > .gfield,
	#gform_wrapper_2 #field_2_1,
	#gform_wrapper_2 #field_2_3,
	#gform_wrapper_2 #field_2_4,
	#gform_wrapper_2 #field_2_6,
	#gform_wrapper_2 #field_2_7,
	#gform_wrapper_2 #field_2_8,
	#gform_wrapper_2 #field_2_9,
	#gform_wrapper_2 #field_2_10,
	#gform_wrapper_2 #field_2_11 {
		grid-column: 1 / -1;
	}
 
	#gform_wrapper_2 .gform_footer,
	#gform_wrapper_2 .gform-footer {
		justify-content: flex-start;
		margin-top: clamp(20px, 3.5vw, 32px);
	}
}
 
/* ---- <= 767: mobile ------------------------------------------------------ */
@media (max-width: 767px) {
 
	#gform_wrapper_2 {
		--fs-label: 15px;
		--fs-field: 16px;
		--fs-btn: 17px;
		--field-h: 48px;
		--field-pad-x: 16px;
		--row-gap: 16px;
		--col-gap: 12px;
		--btn-circle: 42px;
	}
 
	#gform_wrapper_2 .gfield_label,
	#gform_wrapper_2 legend.gfield_label {
		line-height: 1.6;
	}
 
	#gform_wrapper_2 input[type="text"],
	#gform_wrapper_2 input[type="email"],
	#gform_wrapper_2 input[type="tel"],
	#gform_wrapper_2 input[type="url"],
	#gform_wrapper_2 input[type="number"],
	#gform_wrapper_2 select,
	#gform_wrapper_2 textarea {
		line-height: 1.5;
		/* 16px keeps iOS Safari from zooming the page on focus */
		font-size: max(16px, var(--fs-field));
	}
 
	#gform_wrapper_2 textarea {
		min-height: 150px;
	}
 
	/* Full-width tap target on a phone */
	#gform_wrapper_2 .gform_button,
	#gform_wrapper_2 input[type="submit"] {
		width: 100%;
		min-width: 0;
		justify-content: flex-start;
	}
}
 
/* ---- <= 420: the narrowest phones ---------------------------------------- */
@media (max-width: 420px) {
 
	#gform_wrapper_2 {
		--fs-label: 14px;
		--fs-btn: 16px;
		--btn-circle: 38px;
		--field-pad-x: 14px;
	}
}
/* ==========================================================================
   SHOP PAGE
   Figma: file FV7LRaWs3NuDRhlzVrOeRO, node 122:4001 (1920 x 3094)

   Same construction rules as the Services, Gallery and Contact pages — each one
   is a bug already paid for once on this project:

   1. TYPE SCALES WITH THE VIEWPORT. The Figma frame is 1920 wide, so a hard px
      value renders ~27% too large on a 1512 screen. Every size is anchored to
      equal the Figma value at exactly 1920 and scale down from there:
      design px / 1920 * 100 = vw, with a floor for readability.

   2. LETTER-SPACING IS -3% OF FONT SIZE on every text node in this design
      (-2.55/85, -1.35/45, -0.66/22 all = -0.03), so it is written once as
      -0.03em and scales by itself.

   3. LINE-HEIGHTS ARE RATIOS of the Figma pairs, so they scale too.

   4. THE H1 GUARD. `.mf-headline` carries the home page's word-rotator styles
      (style.css:933, and style.css:7439 `line-height: 0 !important` in a mobile
      query) which stack its words on one baseline on purpose. On a static
      three-span headline that prints every span on top of the others. The
      template omits the class; the guard below wins even if it creeps back.

   5. WOOCOMMERCE FIGHTS BACK, so the card's button forces its appearance.
      Woo and the theme both style `.button`, and on this site that has already
      cost us a blue #204ce5 Gravity Forms button. The rest of the card uses
      selectors Woo doesn't touch.

   6. TOKENS LIVE ON THE SECTIONS, not a body class — if the page slug is
      "shop", WordPress may load this through the template hierarchy and the
      body never gets `page-template-page-shop`.

   NO CSS NESTING is used anywhere, and every block is closed.
   Append the whole thing to style.css in one go — do not paste it in pieces.
   ========================================================================== */

.mf-hero--shop,
.mf-shop {
	/* ---- Fluid type scale. Cap = the Figma value, reached at 1920px. ---- */
	--fs-h1:    clamp(34px, 4.427vw, 85px);   /* 85 */
	--fs-h2:    clamp(24px, 2.344vw, 45px);   /* 45 */
	--fs-price: clamp(22px, 1.771vw, 34px);   /* 34 */
	--fs-name:  clamp(17px, 1.250vw, 24px);   /* 24 */
	--fs-btn:   clamp(16px, 1.250vw, 24px);   /* 24 */
	--fs-lead:  clamp(15px, 1.146vw, 22px);   /* 22 */

	--lh-h1: 1.188;        /* 85 / 101 */
	--lh-h2: 1.267;        /* 45 / 57  */
	--lh-name: 1.542;      /* 24 / 37  */
	--lh-price: 1.088;     /* 34 / 37  */
	--lh-lead: 1.636;      /* 22 / 36  */

	--mf-shop-tracking: -0.03em;
	--mf-shop-teal: #6cdbd5;
	--mf-shop-teal-dark: #008080;
	--mf-shop-ink: #131313;
	--mf-shop-border: #b5b5b5;

	/* The shop band insets at x104, wider than the hero's x68 */
	--mf-shop-gutter: clamp(20px, 5.417vw, 104px);
	--mf-shop-col-gap: clamp(12px, 1.892vw, 36px);   /* 36.33 measured */
	--mf-shop-row-gap: clamp(20px, 3.542vw, 68px);   /* 68 measured     */
	--mf-shop-radius: clamp(18px, 1.563vw, 30px);    /* card radius 30  */
	--mf-shop-img-radius: clamp(12px, 1.094vw, 21px);/* image radius 21 */
}


/* ==========================================================================
   1. HERO VARIANT — node 122:4004
   Breadcrumb 122:4035 : 22 / 39 / -0.66, rgba(255,255,255,.9)
   H1         122:4033 : 85 / 101 / -2.55, three spans, middle span #6cdbd5,
                         767 of 1920 = 39.95vw — that measure is what makes it
                         break to three lines
   Lead       122:4031 : 22 / 36 / -0.66, rgba(255,255,255,.9),
                         742 of 1920 = 38.65vw
   ========================================================================== */

.mf-hero--shop .mf-hero__content {
	padding: clamp(70px, 6.302vw, 121px) clamp(20px, 2.604vw, 50px) clamp(30px, 2.083vw, 40px);
}

.mf-headline--shop {
	max-width: 39.95vw;
	min-width: 0;
	margin: 0;
	font-size: var(--fs-h1);
	font-weight: 400;
	line-height: var(--lh-h1);
	letter-spacing: var(--mf-shop-tracking);
	color: #fff;
	white-space: normal;
}

/* The middle span only — "Frames & Canvases," */
.mf-headline--shop .mf-headline__accent {
	color: var(--mf-shop-teal);
}

/* See note 4 in the header. Two classes + !important outranks the one-class
   !important rotator rule at every width, class present or not. */
.mf-hero--shop .mf-headline--shop {
	font-size: var(--fs-h1) !important;
	line-height: var(--lh-h1) !important;
	letter-spacing: var(--mf-shop-tracking) !important;
	white-space: normal !important;
}

.mf-subtext--shop {
	width: 100%;
	max-width: 38.65vw;
	margin-top: clamp(10px, 0.677vw, 13px);
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
	letter-spacing: var(--mf-shop-tracking);
	color: rgba(255, 255, 255, 0.9);
}

.mf-hero--shop .mf-crumb {
	font-size: var(--fs-lead);
	line-height: 1.773;
	letter-spacing: var(--mf-shop-tracking);
}


/* ==========================================================================
   2. SHOP BAND
   ========================================================================== */

.mf-shop {
	box-sizing: border-box;
	padding-block: clamp(24px, 1.875vw, 36px) clamp(40px, 3.542vw, 68px);
	font-family: var(--mf-font-display);
	background-color: #fff;
}

.mf-shop *,
.mf-shop *::before,
.mf-shop *::after {
	box-sizing: border-box;
}

.mf-shop__inner {
	width: 100%;
	max-width: 1920px;
	margin-inline: auto;
	padding-inline: var(--mf-shop-gutter);
}

/* 122:4067 — teal, and the design really does carry a double space in
   "Shop Our  Products"; normal single spacing is used here. */
.mf-shop__title {
	margin: 0 0 clamp(22px, 4.844vw, 93px);
	font-size: var(--fs-h2);
	font-weight: 400;
	line-height: var(--lh-h2);
	letter-spacing: var(--mf-shop-tracking);
	color: var(--mf-shop-teal);
}


/* ==========================================================================
   3. PRODUCT GRID — 4 columns of 397 in a 1697 box, 36.33 apart, 68 between rows
   ========================================================================== */

.mf-shop__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: var(--mf-shop-col-gap);
	row-gap: var(--mf-shop-row-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Card 122:4044 — 397 x 555, radius 30, 1px #b5b5b5, no fill.
   Laid out as a column so the button always sits on the card's floor, however
   long a product name runs. The design's 555 height becomes a min-height. */
.mf-shop__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: min(28.91vw, 555px);
	padding: clamp(8px, 0.781vw, 15px) clamp(8px, 0.729vw, 14px) clamp(8px, 0.625vw, 12px);
	border: 1px solid var(--mf-shop-border);
	border-radius: var(--mf-shop-radius);
	background: transparent;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mf-shop__card:hover,
.mf-shop__card:focus-within {
	border-color: var(--mf-shop-teal);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

/* Image 122:4045 — 369 square inside a 397 card, radius 21 */
.mf-shop__media {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--mf-shop-img-radius);
	background-color: #f3f3f3;
}

.mf-shop__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.mf-shop__card:hover .mf-shop__img {
	transform: scale(1.04);
}

/* Title 122:4040 — Arial BOLD 24 / 37, #131313, centred */
.mf-shop__name {
	margin: clamp(6px, 0.521vw, 10px) 0 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: var(--fs-name);
	font-weight: 700;
	line-height: var(--lh-name);
	letter-spacing: var(--mf-shop-tracking);
	color: var(--mf-shop-ink);
	text-align: center;
}

.mf-shop__name a {
	color: inherit;
	text-decoration: none;
}

.mf-shop__name a:hover,
.mf-shop__name a:focus-visible {
	text-decoration: underline;
}

/* Price 122:4041 — Poppins SemiBold 34 / 37, #008080, centred.
   margin-bottom:auto is what pins the button to the card's floor. */
.mf-shop__price {
	margin: clamp(2px, 0.104vw, 2px) 0 auto;
	font-family: "Poppins", var(--mf-font-display), sans-serif;
	font-size: var(--fs-price);
	font-weight: 600;
	line-height: var(--lh-price);
	letter-spacing: var(--mf-shop-tracking);
	color: var(--mf-shop-teal-dark);
	text-align: center;
}

/* WooCommerce wraps ranges and sale prices in its own tags */
.mf-shop__price del {
	margin-right: 8px;
	opacity: 0.55;
	font-size: 0.75em;
}

.mf-shop__price ins {
	text-decoration: none;
}

/* Button 122:4042 — 245 x 61, radius 12, a teal fill with a soft top sheen,
   2px rgba(255,255,255,.56) border, shadow 0 1px 2px rgba(13,32,62,.5).
   Label 122:4043 — Poppins Regular 24 / 20, white, centred.
   !important throughout: both WooCommerce and the theme style `.button`. */
.mf-shop__btn,
.mf-shop .mf-shop__btn.button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: min(100%, 12.76vw);           /* 245 of 1920 */
	min-width: clamp(140px, 12.76vw, 245px);
	min-height: clamp(44px, 3.177vw, 61px);
	margin: clamp(12px, 2.552vw, 49px) 0 0 !important;
	padding: 11px 20px !important;
	font-family: "Poppins", var(--mf-font-display), sans-serif !important;
	font-size: var(--fs-btn) !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	letter-spacing: var(--mf-shop-tracking);
	color: #fff !important;
	text-align: center;
	text-decoration: none !important;
	text-shadow: 0 0 0.5px #fff;
	background-image:
		linear-gradient(180deg, rgba(108, 108, 108, 0.15) 0%, rgba(255, 255, 255, 0) 100%),
		linear-gradient(90deg, rgb(108, 219, 213) 0%, rgb(108, 219, 213) 100%) !important;
	background-color: var(--mf-shop-teal) !important;
	border: 2px solid rgba(255, 255, 255, 0.56) !important;
	border-radius: 12px !important;
	box-shadow: 0 1px 2px 0 rgba(13, 32, 62, 0.5) !important;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mf-shop__btn:hover,
.mf-shop__btn:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(13, 32, 62, 0.28) !important;
}

.mf-shop__btn:focus-visible {
	outline: 2px solid var(--mf-shop-teal-dark);
	outline-offset: 3px;
}

/* WooCommerce's AJAX "View cart" link, appended after a successful add */
.mf-shop__card .added_to_cart {
	margin-top: 8px;
	font-size: clamp(13px, 0.833vw, 16px);
	color: var(--mf-shop-teal-dark);
}

.mf-shop__empty {
	margin: 0;
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
	color: var(--mf-shop-ink);
}


/* ==========================================================================
   4. PAGINATION — not in the design (it shows exactly one page of 8), so this
   is deliberately quiet and only appears once the catalogue outgrows a page.
   ========================================================================== */

.mf-shop__pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: clamp(24px, 3.542vw, 68px);
}

.mf-shop__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	font-size: clamp(15px, 0.938vw, 18px);
	color: var(--mf-shop-ink);
	text-decoration: none;
	border: 1px solid var(--mf-shop-border);
	border-radius: 10px;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.mf-shop__pagination .page-numbers:hover {
	border-color: var(--mf-shop-teal);
}

.mf-shop__pagination .page-numbers.current {
	color: #fff;
	background-color: var(--mf-shop-teal);
	border-color: var(--mf-shop-teal);
}

.mf-shop__pagination .page-numbers.dots {
	border-color: transparent;
}


/* ==========================================================================
   RESPONSIVE

   The type clamps handle 768px upward on their own — no per-breakpoint font
   sizes above mobile. These blocks change layout only, plus the mobile frame's
   own type values below 768.
   ========================================================================== */

/* ---- <= 1400: four 397 cards stop fitting comfortably -------------------- */
@media (max-width: 1400px) {

	.mf-shop__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.mf-shop__card {
		min-height: 0;
	}

	.mf-shop__btn,
	.mf-shop .mf-shop__btn.button {
		width: 100%;
		min-width: 0;
	}
}

/* ---- <= 1200: the hero's fixed vw measures stop making sense ------------- */
@media (max-width: 1200px) {

	.mf-headline--shop,
	.mf-subtext--shop {
		max-width: 100%;
	}
}

/* ---- <= 1024: two across ------------------------------------------------ */
@media (max-width: 1024px) {

	.mf-hero--shop .mf-hero__content {
		padding: 90px 30px 40px;
	}

	.mf-shop__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: clamp(20px, 3vw, 36px);
	}

	.mf-shop__title {
		margin-bottom: clamp(20px, 3.5vw, 40px);
	}
}

/* ---- <= 767: mobile. Type values come from the 430px mobile Figma frame,
   which has its own scale — not a shrink of the desktop numbers. ----------- */
@media (max-width: 767px) {

	.mf-hero--shop,
	.mf-shop {
		--mf-shop-gutter: 20px;
		--mf-shop-col-gap: 12px;
		--mf-shop-row-gap: 20px;
		--mf-shop-radius: 20px;
		--mf-shop-img-radius: 14px;

		--fs-h1: 36px;              /* mobile frame 1:3910 */
		--fs-h2: 26px;
		--fs-price: 20px;
		--fs-name: 16px;
		--fs-btn: 15px;
		--fs-lead: 16px;            /* mobile frame 1:3919 */

		--lh-h1: 1.139;             /* 36 / 41 */
		--lh-h2: 1.423;             /* 26 / 37 */
		--lh-name: 1.375;
		--lh-price: 1.2;
		--lh-lead: 1.75;            /* 16 / 28 */
	}

	/* ---- Hero ---------------------------------------------------------- */
	.mf-hero--shop .mf-hero__content {
		padding: 70px 12px 40px;
	}

	.mf-hero--shop .mf-crumb {
		gap: 8px;
		margin-bottom: 14px;
		font-size: 15px;
		line-height: 1.6;
		flex-wrap: wrap;
	}

	.mf-hero--shop .mf-crumb__icon {
		width: 14px;
		height: 14px;
	}

	.mf-subtext--shop {
		margin-top: 12px;
	}

	/* ---- Grid: two across, as the mobile frame shows ------------------- */
	.mf-shop {
		padding-block: 26px 36px;
	}

	.mf-shop__title {
		margin-bottom: 18px;
	}

	.mf-shop__card {
		padding: 8px 8px 10px;
	}

	.mf-shop__name {
		margin-top: 8px;
	}

	.mf-shop__btn,
	.mf-shop .mf-shop__btn.button {
		min-height: 42px !important;
		margin-top: 12px !important;
		padding: 8px 10px !important;
		border-width: 1px !important;
		border-radius: 10px !important;
	}

	.mf-shop__pagination {
		margin-top: 24px;
	}

	.mf-shop__pagination .page-numbers {
		min-width: 40px;
		min-height: 40px;
		padding: 0 10px;
		font-size: 15px;
	}
}

/* ---- <= 420: one card across — two 190px cards stop reading ------------- */
@media (max-width: 420px) {

	.mf-hero--shop,
	.mf-shop {
		--fs-h1: 32px;
		--fs-h2: 24px;
		--fs-name: 18px;
		--fs-price: 22px;
		--fs-btn: 16px;
	}

	.mf-shop__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 18px;
	}

	.mf-shop__card {
		padding: 12px 12px 14px;
	}
}
.mf-hero--shop {
    background-image: url(/wp-content/uploads/2026/09/shop-banner.png);
}
/* ==========================================================================
   WOOCOMMERCE — SINGLE PRODUCT, CART, CHECKOUT, MY ACCOUNT
   Mobile Framing. Extends the design language from the Figma pages; these
   screens have no Figma frame of their own, so every value here is borrowed
   from a node that does, and the source is named in each comment.

   THE DESIGN LANGUAGE, and where each value came from
   ---------------------------------------------------
     teal            #6cdbd5      shop button 122:4042, headings 122:4067
     teal dark       #008080      price 122:4041, contact headings 117:3472
     ink             #004e4a      contact Submit label 117:3467
     product ink     #131313      product title 122:4040
     body grey       rgba(99,99,99,.9)     services body 98:2498
     muted grey      rgba(152,152,152,.9)  contact values 117:3411
     card border     #b5b5b5      shop card 122:4044
     card radius     30           shop card 122:4044
     image radius    21           shop image 122:4045
     field           #fff, radius 12, shadow 2px 2px 6px rgba(0,0,0,.07),
                     height 52    contact input 117:3458
     placeholder     #bcbcbc      contact 117:3461
     primary button  teal + top sheen, 2px rgba(255,255,255,.56),
                     radius 12, shadow 0 1px 2px rgba(13,32,62,.5)
                                  shop button 122:4042
     pill button     #fff, radius 130, Poppins Medium, #004e4a
                                  contact Submit 117:3466
     product title   Arial Bold 24 / 37      122:4040
     price           Poppins SemiBold 34 / 37 122:4041
     H2              45 / 57                  122:4067
     body            24 / 39                  98:2498

   THE RULES THIS PROJECT LEARNED THE HARD WAY, all applied here
   -------------------------------------------------------------
   1. Type is anchored to the 1920 Figma frame (design px / 1920 * 100 = vw),
      exact at 1920 and scaling down, with floors. Hard px renders ~27% too
      large on a 1512 screen.
   2. Letter-spacing is -3% of font size throughout this design, so it is
      written once as -0.03em and scales by itself.
   3. Line-heights are ratios of the Figma pairs.
   4. WooCommerce and the theme both style `.button`, and that combination has
      already produced a blue #204ce5 button on this site, so button
      appearance is forced.
   5. Never override a Gravity Forms or WooCommerce Blocks GRID with a column
      count of your own — style the cells, let the framework place them.

   MARKUP THIS WAS WRITTEN AGAINST, read from the live site
   --------------------------------------------------------
     single  main#primary.site-main > nav.woocommerce-breadcrumb
                                    > div.woocommerce-notices-wrapper
                                    > div#product-273.product.type-product
                                        > div.woocommerce-product-gallery
                                        > div.summary.entry-summary
                                            > h1.product_title
                                            > p.price
                                            > form.variations_form.cart
                                            > div.product_meta
                                        > div.woocommerce-tabs.wc-tabs-wrapper
                                        > section.related.products > ul.products
     cart    BLOCK cart — wp-block-woocommerce-cart, currently the
             wp-block-woocommerce-empty-cart-block state
     account classic — woocommerce-account

   Both the block and the classic markup are covered, so nothing breaks if you
   switch the cart or checkout page between them.

   NO CSS NESTING is used anywhere, and every block is closed.
   Append the whole thing to style.css in one go — do not paste it in pieces.
   ========================================================================== */

.woocommerce,
.woocommerce-page,
body.single-product,
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account {
	/* ---- Fluid type. Cap = the Figma value, reached at 1920px. ---- */
	--wc-fs-h1:    clamp(28px, 2.344vw, 45px);   /* 45 — product title       */
	--wc-fs-h2:    clamp(24px, 2.344vw, 45px);   /* 45 — section headings    */
	--wc-fs-price: clamp(24px, 1.771vw, 34px);   /* 34 — price               */
	--wc-fs-name:  clamp(17px, 1.250vw, 24px);   /* 24 — card title          */
	--wc-fs-body:  clamp(16px, 1.146vw, 22px);   /* 22 — body / meta         */
	--wc-fs-field: clamp(15px, 0.990vw, 19px);   /* 19 — inputs              */
	--wc-fs-label: clamp(14px, 0.938vw, 18px);   /* 18 — field labels        */
	--wc-fs-btn:   clamp(16px, 1.250vw, 24px);   /* 24 — buttons             */

	--wc-lh-h2: 1.267;        /* 45 / 57 */
	--wc-lh-name: 1.542;      /* 24 / 37 */
	--wc-lh-price: 1.088;     /* 34 / 37 */
	--wc-lh-body: 1.625;      /* 24 / 39 */

	--wc-tracking: -0.03em;

	--wc-teal: #6cdbd5;
	--wc-teal-dark: #008080;
	--wc-ink: #004e4a;
	--wc-product-ink: #131313;
	--wc-body: rgba(99, 99, 99, 0.9);
	--wc-muted: rgba(152, 152, 152, 0.9);
	--wc-border: #b5b5b5;
	--wc-placeholder: #bcbcbc;

	--wc-gutter: clamp(20px, 5.417vw, 104px);      /* shop band inset 104 */
	--wc-radius: clamp(18px, 1.563vw, 30px);       /* card radius 30      */
	--wc-img-radius: clamp(12px, 1.094vw, 21px);   /* image radius 21     */
	--wc-field-radius: 12px;
	--wc-field-h: clamp(46px, 2.708vw, 52px);
	--wc-field-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.07);
	--wc-gap: clamp(20px, 3.542vw, 68px);          /* the site's row gap  */

	/* WooCommerce Blocks reads these; setting them here saves fighting each
	   component individually on the block cart and checkout. */
	--wp--preset--color--primary: var(--wc-teal-dark);
	--wc-blocks-color-primary: var(--wc-teal-dark);
}


/* ==========================================================================
   1. PAGE SHELL — the Woo templates render straight into main#primary with no
   container of their own, so they would otherwise run edge to edge.
   ========================================================================== */

body.single-product main#primary,
body.woocommerce-cart main#primary,
body.woocommerce-checkout main#primary,
body.woocommerce-account main#primary,
body.post-type-archive-product main#primary,
body.tax-product_cat main#primary {
	box-sizing: border-box;
	width: 100%;
	max-width: 1920px;
	margin-inline: auto;
	padding-inline: var(--wc-gutter);
	padding-block: clamp(28px, 3.542vw, 68px);
	font-family: var(--mf-font-display);
}

/* The Shop archive brings its own hero and inner wrapper, so it must not get
   a second set of gutters on top. */
body.post-type-archive-product main#primary,
body.tax-product_cat main#primary {
	max-width: none;
	padding-inline: 0;
	padding-block: 0;
}

body.single-product main#primary *,
body.woocommerce-cart main#primary *,
body.woocommerce-checkout main#primary *,
body.woocommerce-account main#primary * {
	box-sizing: border-box;
}

/* Breadcrumb — matches .mf-crumb from the page heroes, in dark-on-light */
.woocommerce .woocommerce-breadcrumb {
	margin: 0 0 clamp(16px, 1.823vw, 35px);
	font-size: var(--wc-fs-body);
	line-height: 1.6;
	letter-spacing: var(--wc-tracking);
	color: var(--wc-muted);
}

.woocommerce .woocommerce-breadcrumb a {
	color: var(--wc-body);
	text-decoration: none;
}

.woocommerce .woocommerce-breadcrumb a:hover,
.woocommerce .woocommerce-breadcrumb a:focus-visible {
	color: var(--wc-teal-dark);
}


/* ==========================================================================
   2. BUTTONS — one primary look everywhere, taken from the shop card's
   "Select Options" (122:4042). !important throughout: both WooCommerce and the
   theme style `.button`, and that pairing has already produced a stray blue
   button on this site.
   ========================================================================== */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce #respond input#submit,
.wc-block-components-button,
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: clamp(44px, 3.177vw, 61px) !important;
	padding: 11px clamp(18px, 1.563vw, 30px) !important;
	font-family: "Poppins", var(--mf-font-display), sans-serif !important;
	font-size: var(--wc-fs-btn) !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	letter-spacing: var(--wc-tracking);
	color: #fff !important;
	text-align: center;
	text-decoration: none !important;
	text-shadow: 0 0 0.5px #fff;
	background-image:
		linear-gradient(180deg, rgba(108, 108, 108, 0.15) 0%, rgba(255, 255, 255, 0) 100%),
		linear-gradient(90deg, rgb(108, 219, 213) 0%, rgb(108, 219, 213) 100%) !important;
	background-color: var(--wc-teal) !important;
	border: 2px solid rgba(255, 255, 255, 0.56) !important;
	border-radius: 12px !important;
	box-shadow: 0 1px 2px 0 rgba(13, 32, 62, 0.5) !important;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .single_add_to_cart_button:hover,
.wc-block-components-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(13, 32, 62, 0.28) !important;
}

.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.wc-block-components-button:focus-visible {
	outline: 2px solid var(--wc-ink);
	outline-offset: 3px;
}

.woocommerce .button:disabled,
.woocommerce .button.disabled,
.wc-block-components-button:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none !important;
}

/* The quieter, secondary action — the white pill from the contact Submit
   (117:3466). Used for "Continue shopping", "Return to shop", tab-adjacent
   links and Woo's outlined block buttons. */
.woocommerce .button.wc-backward,
.woocommerce a.button.wc-forward.wp-element-button,
.wc-block-components-button.outlined,
.wp-block-woocommerce-empty-cart-block .wp-element-button {
	color: var(--wc-ink) !important;
	background-image: none !important;
	background-color: #fff !important;
	border: 1px solid var(--wc-border) !important;
	border-radius: 130px !important;
	box-shadow: none !important;
	text-shadow: none;
	font-family: "Poppins", var(--mf-font-display), sans-serif !important;
	font-weight: 500 !important;
}


/* ==========================================================================
   3. FORM CONTROLS — the contact card's field (117:3458 / 117:3461), reused
   for every Woo input, select, textarea and quantity box.
   ========================================================================== */

.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce input[type="search"],
.woocommerce select,
.woocommerce textarea,
.woocommerce .select2-container .select2-selection--single,
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select__container {
	box-sizing: border-box;
	width: 100%;
	padding: 0 clamp(14px, 1.198vw, 23px);
	font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
	font-size: var(--wc-fs-field);
	line-height: 1.842;
	letter-spacing: var(--wc-tracking);
	color: #333;
	background-color: #fff;
	border: 0;
	border-radius: var(--wc-field-radius);
	box-shadow: var(--wc-field-shadow);
	appearance: none;
	-webkit-appearance: none;
}

.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce input[type="search"],
.woocommerce select,
.woocommerce .select2-container .select2-selection--single,
.wc-block-components-text-input input,
.wc-block-components-select__container {
	height: var(--wc-field-h);
}

.woocommerce textarea,
.wc-block-components-textarea {
	height: auto;
	min-height: clamp(120px, 7.813vw, 150px);
	padding-block: clamp(10px, 0.885vw, 17px);
	resize: vertical;
}

.woocommerce input::placeholder,
.woocommerce textarea::placeholder,
.wc-block-components-text-input input::placeholder {
	color: var(--wc-placeholder);
	opacity: 1;
}

.woocommerce input:focus,
.woocommerce select:focus,
.woocommerce textarea:focus,
.wc-block-components-text-input input:focus {
	outline: 2px solid var(--wc-ink);
	outline-offset: 2px;
}

/* Drop downs get the same 20px chevron the contact form uses */
.woocommerce select {
	padding-right: clamp(34px, 3.125vw, 60px);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23004e4a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right clamp(14px, 1.198vw, 23px) center;
	background-size: 20px 20px;
	cursor: pointer;
}

.woocommerce label,
.wc-block-components-text-input label {
	font-family: Arial, Helvetica, sans-serif;
	font-size: var(--wc-fs-label);
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: var(--wc-tracking);
	color: #656565;
}

/* Quantity box — square-ish, same field skin */
.woocommerce .quantity .qty,
.wc-block-components-quantity-selector {
	width: auto;
	min-width: clamp(78px, 5.729vw, 110px);
	text-align: center;
	border-radius: var(--wc-field-radius);
	box-shadow: var(--wc-field-shadow);
	background: #fff;
}

.wc-block-components-quantity-selector {
	border: 0;
	overflow: hidden;
}

.wc-block-components-quantity-selector__button {
	color: var(--wc-ink);
	background: transparent;
	border: 0;
}


/* ==========================================================================
   4. NOTICES — Woo's messages, in the site's palette rather than its own green
   ========================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 clamp(16px, 1.563vw, 30px);
	padding: clamp(12px, 1.042vw, 20px) clamp(14px, 1.302vw, 25px);
	font-size: var(--wc-fs-body);
	line-height: 1.5;
	letter-spacing: var(--wc-tracking);
	color: #fff !important;
	background-color: #004e4a !important;
	border: 0;
	border-left: 4px solid #6cdbd5;
	border-radius: var(--wc-field-radius);
	box-shadow: none;
}

.woocommerce-message a:not(.button),
.woocommerce-info a:not(.button),
.woocommerce-error a:not(.button),
.wc-block-components-notice-banner a:not(.button) {
	color: #6cdbd5;
}

/* "View cart" / "View order" pill inside a notice */
.woocommerce .woocommerce-message a.button,
.woocommerce .woocommerce-info a.button,
.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button,
.woocommerce-message .button,
.woocommerce-info .button,
.wc-block-components-notice-banner .button {
	background-color: #6cdbd5 !important;
	background-image: none !important;
	color: #004e4a !important;
	border: 0 !important;
	border-radius: 130px !important;
	box-shadow: none !important;
	font-weight: 600 !important;
}

.woocommerce .woocommerce-message a.button:hover,
.woocommerce .woocommerce-info a.button:hover,
.woocommerce-message .button:hover,
.woocommerce-info .button:hover {
	background-color: #fff !important;
	color: #004e4a !important;
}

.woocommerce-error,
.wc-block-components-notice-banner.is-error {
	color: #fff !important;
	background-color: #8c1d1d !important;
	border-left-color: #ffb3ab;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	display: none;                    /* Woo's icon font, not in this design */
}


/* ==========================================================================
   5. SINGLE PRODUCT
   Gallery left, summary right. Woo's default 41/48 split leaves an odd gutter,
   so this uses an even two-column grid with the site's 68px gap.
   ========================================================================== */

body.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: var(--wc-gap);
	align-items: start;
}

/* The tabs and related products run the full width, under both columns */
body.single-product div.product .woocommerce-tabs,
body.single-product div.product .related.products,
body.single-product div.product .upsells.products {
	grid-column: 1 / -1;
}

/* ---- Gallery — image radius 21, matching the shop card (122:4045) ------- */
body.single-product .woocommerce-product-gallery {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
}

body.single-product .woocommerce-product-gallery__wrapper {
	margin: 0;
}

body.single-product .woocommerce-product-gallery__image,
body.single-product .woocommerce-product-gallery__image a {
	display: block;
	border-radius: var(--wc-img-radius);
	overflow: hidden;
}

body.single-product .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wc-img-radius);
}

/* Thumbnail strip */
body.single-product .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(8px, 0.781vw, 15px);
	margin: clamp(10px, 0.781vw, 15px) 0 0;
	padding: 0;
	list-style: none;
}

body.single-product .flex-control-thumbs li {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
}

body.single-product .flex-control-thumbs img {
	width: 100%;
	height: auto;
	border-radius: clamp(8px, 0.625vw, 12px);
	border: 1px solid transparent;
	opacity: 0.75;
	cursor: pointer;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

body.single-product .flex-control-thumbs img:hover,
body.single-product .flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: var(--wc-teal);
}

/* Woo's zoom / lightbox trigger */
body.single-product .woocommerce-product-gallery__trigger {
	top: clamp(12px, 1.042vw, 20px);
	right: clamp(12px, 1.042vw, 20px);
	z-index: 2;
}

/* ---- Summary ------------------------------------------------------------ */
body.single-product .summary.entry-summary {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
}

/* Product title — the shop card's title face, at heading size (122:4040) */
body.single-product .product_title {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: var(--wc-fs-h1);
	font-weight: 700;
	line-height: var(--wc-lh-h2);
	letter-spacing: var(--wc-tracking);
	color: var(--wc-product-ink);
}

/* Price — Poppins SemiBold 34 / 37, #008080 (122:4041) */
body.single-product .summary p.price,
body.single-product .summary .woocommerce-Price-amount {
	font-family: "Poppins", var(--mf-font-display), sans-serif;
	font-size: var(--wc-fs-price);
	font-weight: 600;
	line-height: var(--wc-lh-price);
	letter-spacing: var(--wc-tracking);
	color: var(--wc-teal-dark);
}

body.single-product .summary p.price {
	margin: clamp(10px, 0.885vw, 17px) 0 0;
}

body.single-product .summary p.price del {
	margin-right: 10px;
	opacity: 0.5;
	font-size: 0.7em;
}

body.single-product .summary p.price ins {
	text-decoration: none;
}

body.single-product .woocommerce-product-details__short-description {
	margin-top: clamp(12px, 1.25vw, 24px);
	font-size: var(--wc-fs-body);
	line-height: var(--wc-lh-body);
	letter-spacing: var(--wc-tracking);
	color: var(--wc-body);
}

/* ---- Variations table — Woo lays it out as a <table>; this makes it read
   as stacked label + control without breaking its JS ---------------------- */
body.single-product .variations_form.cart {
	margin: clamp(16px, 1.563vw, 30px) 0 0;
}

body.single-product table.variations {
	width: 100%;
	margin: 0 0 clamp(14px, 1.25vw, 24px);
	border: 0;
	border-collapse: collapse;
}

body.single-product table.variations tr,
body.single-product table.variations th,
body.single-product table.variations td {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
}

body.single-product table.variations tr {
	margin-bottom: clamp(12px, 1.042vw, 20px);
}

body.single-product table.variations th.label label {
	display: block;
	margin-bottom: 4px;
	font-size: var(--wc-fs-label);
	color: #656565;
}

body.single-product .reset_variations {
	display: inline-block;
	margin-top: 8px;
	font-size: clamp(13px, 0.833vw, 16px);
	color: var(--wc-teal-dark);
}

body.single-product .single_variation_wrap {
	margin-top: clamp(10px, 0.885vw, 17px);
}

body.single-product .woocommerce-variation-price {
	margin-bottom: clamp(10px, 0.885vw, 17px);
}

/* Quantity + add to cart on one row */
body.single-product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(10px, 0.885vw, 17px);
	margin: clamp(16px, 1.563vw, 30px) 0 0;
}

body.single-product form.cart .quantity {
	margin: 0 !important;
	float: none !important;
}

body.single-product form.cart .single_add_to_cart_button {
	flex: 1 1 auto;
	max-width: clamp(200px, 15.625vw, 300px);
}

body.single-product .variations_form .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(10px, 0.885vw, 17px);
}

/* Product meta — SKU, categories, tags */
body.single-product .product_meta {
	margin-top: clamp(16px, 1.563vw, 30px);
	padding-top: clamp(14px, 1.25vw, 24px);
	font-size: clamp(14px, 0.938vw, 18px);
	line-height: 1.8;
	letter-spacing: var(--wc-tracking);
	color: var(--wc-muted);
	border-top: 1px solid var(--wc-border);
}

body.single-product .product_meta a {
	color: var(--wc-teal-dark);
	text-decoration: none;
}

body.single-product .product_meta a:hover {
	text-decoration: underline;
}

/* ---- Tabs --------------------------------------------------------------- */
body.single-product .woocommerce-tabs {
	margin-top: var(--wc-gap);
}

body.single-product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 clamp(16px, 1.563vw, 30px);
	padding: 0;
	border: 0;
	list-style: none;
}

body.single-product .woocommerce-tabs ul.tabs::before,
body.single-product .woocommerce-tabs ul.tabs::after,
body.single-product .woocommerce-tabs ul.tabs li::before,
body.single-product .woocommerce-tabs ul.tabs li::after {
	display: none !important;         /* Woo's rounded tab bevels */
}

body.single-product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}

body.single-product .woocommerce-tabs ul.tabs li a {
	display: inline-flex;
	align-items: center;
	min-height: clamp(42px, 2.865vw, 55px);
	padding: 0 clamp(16px, 1.354vw, 26px);
	font-family: "Poppins", var(--mf-font-display), sans-serif;
	font-size: clamp(15px, 1.042vw, 20px);
	font-weight: 500;
	letter-spacing: var(--wc-tracking);
	color: var(--wc-body);
	text-decoration: none;
	background-color: #fff;
	border: 1px solid var(--wc-border);
	border-radius: 130px;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

body.single-product .woocommerce-tabs ul.tabs li.active a,
body.single-product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--wc-ink);
	background-color: var(--wc-teal);
	border-color: var(--wc-teal);
}

body.single-product .woocommerce-Tabs-panel {
	font-size: var(--wc-fs-body);
	line-height: var(--wc-lh-body);
	letter-spacing: var(--wc-tracking);
	color: var(--wc-body);
}

body.single-product .woocommerce-Tabs-panel h2 {
	margin: 0 0 clamp(10px, 0.885vw, 17px);
	font-size: var(--wc-fs-h2);
	font-weight: 400;
	line-height: var(--wc-lh-h2);
	letter-spacing: var(--wc-tracking);
	color: var(--wc-teal-dark);
}

body.single-product .shop_attributes {
	width: 100%;
	border-collapse: collapse;
}

body.single-product .shop_attributes th,
body.single-product .shop_attributes td {
	padding: clamp(8px, 0.625vw, 12px) clamp(10px, 0.781vw, 15px);
	text-align: left;
	border-bottom: 1px solid var(--wc-border);
}

body.single-product .shop_attributes th {
	width: 30%;
	font-weight: 700;
	color: var(--wc-product-ink);
}


/* ==========================================================================
   6. PRODUCT LOOPS — related products, upsells, cross-sells, and any Woo
   `ul.products`. Made to match the Shop card (122:4044) exactly.
   ========================================================================== */

.woocommerce .related.products > h2,
.woocommerce .upsells.products > h2,
.woocommerce .cross-sells > h2 {
	margin: 0 0 clamp(18px, 1.875vw, 36px);
	font-size: var(--wc-fs-h2);
	font-weight: 400;
	line-height: var(--wc-lh-h2);
	letter-spacing: var(--wc-tracking);
	color: var(--wc-teal);
}

.woocommerce ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: clamp(12px, 1.892vw, 36px);      /* 36.33 measured on the shop */
	row-gap: clamp(20px, 3.542vw, 68px);
	margin: 0 !important;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	display: none !important;                     /* Woo's clearfix */
}

.woocommerce ul.products li.product {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: clamp(8px, 0.781vw, 15px) clamp(8px, 0.729vw, 14px) clamp(8px, 0.625vw, 12px);
	border: 1px solid var(--wc-border);
	border-radius: var(--wc-radius);
	background: transparent;
	text-align: center;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce ul.products li.product:hover {
	border-color: var(--wc-teal);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

.woocommerce ul.products li.product a img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	margin: 0;
	object-fit: cover;
	border-radius: var(--wc-img-radius);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: clamp(6px, 0.521vw, 10px) 0 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: var(--wc-fs-name);
	font-weight: 700;
	line-height: var(--wc-lh-name);
	letter-spacing: var(--wc-tracking);
	color: var(--wc-product-ink);
}

.woocommerce ul.products li.product .price {
	margin: 2px 0 auto;
	font-family: "Poppins", var(--mf-font-display), sans-serif;
	font-size: clamp(20px, 1.771vw, 34px);
	font-weight: 600;
	line-height: var(--wc-lh-price);
	letter-spacing: var(--wc-tracking);
	color: var(--wc-teal-dark);
}

.woocommerce ul.products li.product .price del {
	margin-right: 8px;
	opacity: 0.55;
	font-size: 0.75em;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
}

.woocommerce ul.products li.product .button {
	width: min(100%, 12.76vw);                    /* 245 of 1920 */
	min-width: clamp(140px, 12.76vw, 245px);
	margin-top: clamp(12px, 2.552vw, 49px) !important;
}

/* Woo's star ratings, kept small and on-palette */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before {
	color: var(--wc-teal-dark);
}

.woocommerce ul.products li.product .star-rating {
	margin: 6px auto 0;
	font-size: 0.85em;
}

/* Sale flash — a small teal pill instead of Woo's circle */
.woocommerce span.onsale {
	top: clamp(12px, 1.042vw, 20px) !important;
	left: clamp(12px, 1.042vw, 20px) !important;
	right: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 4px 14px !important;
	font-family: "Poppins", var(--mf-font-display), sans-serif;
	font-size: clamp(12px, 0.729vw, 14px) !important;
	font-weight: 500;
	line-height: 1.6 !important;
	color: var(--wc-ink) !important;
	background-color: var(--wc-teal) !important;
	border-radius: 130px !important;
}


/* ==========================================================================
   7. CART — BLOCK version (this site's current cart) and the classic table
   ========================================================================== */

/* ---- Block cart --------------------------------------------------------- */
.wp-block-woocommerce-cart .wc-block-cart {
	font-family: var(--mf-font-display);
}

.wp-block-woocommerce-cart .wc-block-cart-items {
	border: 0;
}

.wp-block-woocommerce-cart .wc-block-cart-items__header {
	font-family: "Poppins", var(--mf-font-display), sans-serif;
	font-size: clamp(13px, 0.833vw, 16px);
	color: var(--wc-muted);
	border-bottom: 1px solid var(--wc-border);
}

.wp-block-woocommerce-cart .wc-block-cart-items__row {
	padding-block: clamp(14px, 1.25vw, 24px);
	border-bottom: 1px solid var(--wc-border);
}

.wp-block-woocommerce-cart .wc-block-cart-item__image img {
	border-radius: var(--wc-img-radius);
}

.wp-block-woocommerce-cart .wc-block-components-product-name {
	font-family: Arial, Helvetica, sans-serif;
	font-size: var(--wc-fs-name);
	font-weight: 700;
	line-height: var(--wc-lh-name);
	letter-spacing: var(--wc-tracking);
	color: var(--wc-product-ink);
	text-decoration: none;
}

.wp-block-woocommerce-cart .wc-block-components-product-price__value,
.wp-block-woocommerce-cart .wc-block-components-totals-item__value {
	font-family: "Poppins", var(--mf-font-display), sans-serif;
	font-weight: 600;
	letter-spacing: var(--wc-tracking);
	color: var(--wc-teal-dark);
}

/* Order summary card — the site's card treatment */
.wp-block-woocommerce-cart .wc-block-cart__sidebar .wc-block-components-sidebar,
.wc-block-components-sidebar-layout .wc-block-components-sidebar {
	padding: clamp(18px, 1.875vw, 36px);
	background-color: #f2f2f2;                    /* contact info card 117:3373 */
	border-radius: var(--wc-radius);
}

.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: var(--wc-fs-price);
	line-height: var(--wc-lh-price);
}

.wp-block-woocommerce-cart .wc-block-cart__submit-button {
	width: 100%;
}

.wc-block-components-panel__button,
.wc-block-components-totals-coupon__button {
	color: var(--wc-ink);
}

/* Empty cart state — its "New products" grid reuses the loop card above */
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
	font-size: var(--wc-fs-h2);
	font-weight: 400;
	line-height: var(--wc-lh-h2);
	letter-spacing: var(--wc-tracking);
	color: var(--wc-teal-dark);
}

.wc-block-grid__products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(12px, 1.892vw, 36px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wc-block-grid__product {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: clamp(8px, 0.781vw, 15px) clamp(8px, 0.729vw, 14px) clamp(8px, 0.625vw, 12px);
	border: 1px solid var(--wc-border);
	border-radius: var(--wc-radius);
	text-align: center;
}

.wc-block-grid__product-image img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--wc-img-radius);
}

.wc-block-grid__product-title {
	font-family: Arial, Helvetica, sans-serif;
	font-size: var(--wc-fs-name);
	font-weight: 700;
	line-height: var(--wc-lh-name);
	color: var(--wc-product-ink);
}

.wc-block-grid__product-price {
	margin-top: auto;
	font-family: "Poppins", var(--mf-font-display), sans-serif;
	font-size: clamp(20px, 1.771vw, 34px);
	font-weight: 600;
	color: var(--wc-teal-dark);
}

/* ---- Classic cart table, in case the page is switched back -------------- */
.woocommerce table.shop_table {
	width: 100%;
	margin: 0 0 clamp(18px, 1.563vw, 30px);
	border: 1px solid var(--wc-border);
	border-radius: var(--wc-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.woocommerce table.shop_table th {
	padding: clamp(12px, 1.042vw, 20px);
	font-family: "Poppins", var(--mf-font-display), sans-serif;
	font-size: clamp(13px, 0.833vw, 16px);
	font-weight: 500;
	text-align: left;
	color: var(--wc-muted);
	border-bottom: 1px solid var(--wc-border);
}

.woocommerce table.shop_table td {
	padding: clamp(12px, 1.042vw, 20px);
	font-size: var(--wc-fs-body);
	letter-spacing: var(--wc-tracking);
	color: var(--wc-body);
	border-top: 1px solid var(--wc-border);
}

.woocommerce table.shop_table .product-thumbnail img {
	width: clamp(64px, 5.208vw, 100px);
	height: auto;
	border-radius: clamp(8px, 0.625vw, 12px);
}

.woocommerce table.shop_table .product-name a {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
	color: var(--wc-product-ink);
	text-decoration: none;
}

.woocommerce table.shop_table .amount {
	font-family: "Poppins", var(--mf-font-display), sans-serif;
	font-weight: 600;
	color: var(--wc-teal-dark);
}

.woocommerce .cart_totals h2,
.woocommerce .cross-sells h2 {
	font-size: var(--wc-fs-h2);
	font-weight: 400;
	line-height: var(--wc-lh-h2);
	letter-spacing: var(--wc-tracking);
	color: var(--wc-teal-dark);
}


/* ==========================================================================
   8. CHECKOUT — block and classic
   ========================================================================== */

.wp-block-woocommerce-checkout .wc-block-checkout__form,
.woocommerce form.checkout {
	font-family: var(--mf-font-display);
}

.wc-block-components-checkout-step__title,
.woocommerce form.checkout h3,
.woocommerce-checkout h3 {
	font-family: "Poppins", var(--mf-font-display), sans-serif;
	font-size: clamp(19px, 1.667vw, 32px);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: var(--wc-tracking);
	color: var(--wc-teal-dark);
}

.wc-block-components-checkout-step {
	padding-block: clamp(14px, 1.25vw, 24px);
	border-bottom: 1px solid var(--wc-border);
}

/* Order summary panel — same grey card as the contact info card */
.wp-block-woocommerce-checkout .wc-block-components-sidebar,
.woocommerce #order_review {
	padding: clamp(18px, 1.875vw, 36px);
	background-color: #f2f2f2;
	border: 0;
	border-radius: var(--wc-radius);
}

.woocommerce-checkout #payment {
	background: transparent;
	border-radius: var(--wc-radius);
}

.woocommerce-checkout #payment ul.payment_methods {
	padding: 0;
	border-bottom: 1px solid var(--wc-border);
}

.woocommerce-checkout #payment div.payment_box {
	margin-top: 10px;
	padding: clamp(12px, 1.042vw, 20px);
	font-size: clamp(14px, 0.938vw, 18px);
	color: var(--wc-body);
	background-color: #fff;
	border-radius: var(--wc-field-radius);
	box-shadow: var(--wc-field-shadow);
}

.woocommerce-checkout #payment div.payment_box::before {
	display: none;                    /* Woo's little arrow */
}

.wc-block-components-checkout-place-order-button,
.woocommerce #place_order {
	width: 100%;
}

/* Thank-you / order received */
.woocommerce ul.order_details {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(14px, 1.25vw, 24px);
	margin: 0 0 clamp(20px, 1.875vw, 36px);
	padding: clamp(16px, 1.563vw, 30px);
	list-style: none;
	border: 1px solid var(--wc-border);
	border-radius: var(--wc-radius);
}

.woocommerce ul.order_details li {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: clamp(13px, 0.833vw, 16px);
	color: var(--wc-muted);
}

.woocommerce ul.order_details li strong {
	display: block;
	margin-top: 4px;
	font-family: "Poppins", var(--mf-font-display), sans-serif;
	font-size: var(--wc-fs-name);
	color: var(--wc-teal-dark);
}


/* ==========================================================================
   9. MY ACCOUNT
   ========================================================================== */

.woocommerce-account .woocommerce-MyAccount-navigation {
	width: 24% !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0 0 6px;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: clamp(10px, 0.781vw, 15px) clamp(12px, 1.042vw, 20px);
	font-size: clamp(15px, 1.042vw, 20px);
	letter-spacing: var(--wc-tracking);
	color: var(--wc-body);
	text-decoration: none;
	border: 1px solid var(--wc-border);
	border-radius: var(--wc-field-radius);
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	color: var(--wc-ink);
	background-color: var(--wc-teal);
	border-color: var(--wc-teal);
}

.woocommerce-account .woocommerce-MyAccount-content {
	width: 72% !important;
	font-size: var(--wc-fs-body);
	line-height: var(--wc-lh-body);
	color: var(--wc-body);
}

.woocommerce-account form.login,
.woocommerce-account form.register {
	padding: clamp(18px, 1.875vw, 36px);
	border: 1px solid var(--wc-border);
	border-radius: var(--wc-radius);
}


/* ==========================================================================
   RESPONSIVE
   The clamps carry the type from 768 up on their own; these blocks change
   layout only, plus mobile type below 768.
   ========================================================================== */

/* ---- <= 1400: loops drop to three across -------------------------------- */
@media (max-width: 1400px) {

	.woocommerce ul.products,
	.wc-block-grid__products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.woocommerce ul.products li.product .button {
		width: 100%;
		min-width: 0;
	}
}

/* ---- <= 1024: product goes one column, loops two across ----------------- */
@media (max-width: 1024px) {

	body.single-product div.product {
		grid-template-columns: minmax(0, 1fr);
		row-gap: clamp(18px, 3vw, 32px);
	}

	.woocommerce ul.products,
	.wc-block-grid__products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: clamp(20px, 3vw, 36px);
	}

	body.single-product .woocommerce-tabs ul.tabs {
		gap: 6px;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content {
		float: none !important;
		width: 100% !important;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation {
		margin-bottom: clamp(18px, 3vw, 28px);
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li {
		margin: 0;
	}
}

/* ---- <= 767: mobile ----------------------------------------------------- */
@media (max-width: 767px) {

	.woocommerce,
	.woocommerce-page,
	body.single-product,
	body.woocommerce-cart,
	body.woocommerce-checkout,
	body.woocommerce-account {
		--wc-gutter: 20px;
		--wc-radius: 20px;
		--wc-img-radius: 14px;
		--wc-field-h: 48px;
		--wc-gap: 24px;

		--wc-fs-h1: 26px;
		--wc-fs-h2: 26px;
		--wc-fs-price: 22px;
		--wc-fs-name: 16px;
		--wc-fs-body: 16px;
		--wc-fs-field: 16px;
		--wc-fs-label: 15px;
		--wc-fs-btn: 15px;

		--wc-lh-h2: 1.423;
		--wc-lh-name: 1.375;
		--wc-lh-body: 1.556;
	}

	body.single-product main#primary,
	body.woocommerce-cart main#primary,
	body.woocommerce-checkout main#primary,
	body.woocommerce-account main#primary {
		padding-block: 26px 36px;
	}

	/* 16px keeps iOS Safari from zooming the page when a field is focused */
	.woocommerce input[type="text"],
	.woocommerce input[type="email"],
	.woocommerce input[type="tel"],
	.woocommerce input[type="password"],
	.woocommerce input[type="number"],
	.woocommerce select,
	.woocommerce textarea,
	.wc-block-components-text-input input {
		font-size: max(16px, var(--wc-fs-field));
		line-height: 1.5;
	}

	body.single-product .flex-control-thumbs {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 8px;
	}

	body.single-product form.cart,
	body.single-product .variations_form .woocommerce-variation-add-to-cart {
		gap: 10px;
	}

	body.single-product form.cart .single_add_to_cart_button,
	body.single-product .single_add_to_cart_button {
		flex: 1 1 100%;
		max-width: none;
		width: 100%;
	}

	body.single-product .woocommerce-tabs ul.tabs li a {
		min-height: 40px;
		padding: 0 14px;
		font-size: 15px;
	}

	.woocommerce ul.products li.product {
		padding: 8px 8px 10px;
	}

	.woocommerce ul.products li.product .button {
		min-height: 42px !important;
		margin-top: 12px !important;
		padding: 8px 10px !important;
		border-width: 1px !important;
		border-radius: 10px !important;
	}

	/* Classic cart table stacks into rows on a phone */
	.woocommerce table.shop_table_responsive tr td {
		display: flex;
		justify-content: space-between;
		gap: 12px;
		text-align: right;
	}

	.woocommerce table.shop_table_responsive tr td::before {
		font-weight: 700;
		color: var(--wc-product-ink);
	}

	.wp-block-woocommerce-cart .wc-block-cart__sidebar .wc-block-components-sidebar,
	.wp-block-woocommerce-checkout .wc-block-components-sidebar,
	.woocommerce #order_review {
		padding: 18px;
	}
}

/* ---- <= 480: one card across -------------------------------------------- */
@media (max-width: 480px) {

	.woocommerce,
	.woocommerce-page,
	body.single-product,
	body.woocommerce-cart,
	body.woocommerce-checkout,
	body.woocommerce-account {
		--wc-fs-name: 18px;
		--wc-fs-price: 22px;
		--wc-fs-btn: 16px;
	}

	.woocommerce ul.products,
	.wc-block-grid__products {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 18px;
	}

	.woocommerce ul.products li.product {
		padding: 12px 12px 14px;
	}
}
/* Floating Frames page additions.
 * Existing shared Mobile Framing classes (.mf-hero, .mf-svc-panel, .mf-svc-split,
 * .mf-svc-why, .mf-svc-cols, .mf-faq, .mf-loc, .mf-reviews, .mf-connect) keep
 * their current global styling. This file only styles the extra page-specific sections.
 */

.mf-hero--floating .mf-hero__bg {
  background-image: url(/wp-content/uploads/2026/09/Floating-Frames.jpg);
  background-position: center;
  background-size: cover;
}

.mf-floating-explainer,
.mf-floating-benefits,
.mf-floating-handle,
.mf-floating-sydney {
  padding: 90px 0;
}

.mf-floating-explainer__inner,
.mf-floating-benefits__inner,
.mf-floating-handle__inner,
.mf-floating-sydney__inner {
  width: min(94%, 1760px);
  margin: 0 auto;
}

.mf-floating-explainer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
  gap: 70px;
  align-items: center;
}

.mf-floating-explainer__copy .badge-pill,
.mf-floating-benefits__head .badge-pill,
.mf-floating-handle__copy .badge-pill,
.mf-floating-sydney .badge-pill {
  margin-bottom: 24px;
}

.mf-floating-explainer__visual {
  min-height: 560px;
  border-radius: 36px;
  display: grid;
  place-items: center;
  padding: 45px;
  background: linear-gradient(135deg, #effcfb 0%, #b4edea 55%, #6cdbd5 100%);
  overflow: hidden;
}

.mf-floating-gap-card {
  width: min(100%, 520px);
  aspect-ratio: 1 / .82;
  background: #fff;
  border: 22px solid #1d1d1d;
  box-shadow: 0 24px 60px rgba(0,0,0,.16);
  display: grid;
  place-items: center;
  position: relative;
}

.mf-floating-gap-card__art {
  width: calc(100% - 54px);
  height: calc(100% - 54px);
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #0c5f65, #6cdbd5);
  color: #fff;
  font-size: clamp(28px, 3vw, 52px);
  font-weight: 600;
  letter-spacing: -.03em;
}

.mf-floating-gap-card__gap {
  position: absolute;
  bottom: -62px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 10px 18px;
  border-radius: 999px;
  background: #fff;
  color: #008080;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 8px 25px rgba(0,0,0,.12);
}

.mf-floating-gap-card__frame {
  position: absolute;
  top: -52px;
  right: 12px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 14px;
}

.mf-floating-benefits {
  background: #f8fdfd;
}

.mf-floating-benefits__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, .8fr);
  gap: 70px;
  align-items: end;
  margin-bottom: 50px;
}

.mf-floating-benefits__head > p,
.mf-floating-handle__copy > p,
.mf-floating-sydney p,
.mf-floating-sydney li {
  color: rgba(99,99,99,.92);
  font-size: clamp(17px, 1.25vw, 22px);
  line-height: 1.7;
}

.mf-floating-benefits__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.mf-floating-benefit {
  background: #fff;
  border: 1px solid #e7efef;
  border-radius: 28px;
  padding: 34px;
  box-shadow: 0 15px 40px rgba(16, 93, 99, .07);
  transition: transform .25s ease, box-shadow .25s ease;
}

.mf-floating-benefit:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 55px rgba(16, 93, 99, .12);
}

.mf-floating-benefit img {
  width: 68px;
  height: 68px;
  object-fit: contain;
  margin-bottom: 22px;
}

.mf-floating-benefit h3 {
    margin: 0 0 8px;

    font-family: var(--mf-font-display) !important;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: var(--mf-svc-tracking);
}


.mf-floating-benefit em {
  display: block;
  color: #008080;
  margin-bottom: 15px;
  font-style: normal;
  font-weight: 500;
}

.mf-floating-benefit p {
  margin: 0;
  color: #6f6f6f;
  line-height: 1.75;
}

.mf-svc-step__icon > span {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 700;
  color: #008080;
}

.mf-floating-handle {
  background: linear-gradient(110deg, #fff 0%, #d9f6f4 55%, #85dfda 100%);
}

.mf-floating-handle__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 80px;
  align-items: center;
}

.mf-floating-handle__copy h3 {
  margin: 30px 0 12px;
  font-size: 28px;
}

.mf-floating-phone {
  display: inline-flex;
  margin-top: 20px;
  padding: 15px 24px;
  border-radius: 999px;
  background: #008080;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.mf-floating-phone:hover {
  background: #006c6c;
  color: #fff;
}

.mf-floating-handle__card {
  min-height: 330px;
  border-radius: 36px;
  background: #008080;
  color: #fff;
  padding: 50px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0,128,128,.2);
}

.mf-floating-handle__card span {
  font-size: clamp(72px, 8vw, 120px);
  font-weight: 600;
  line-height: .9;
}

.mf-floating-handle__card strong {
  margin-top: 16px;
  font-size: 30px;
}

.mf-floating-handle__card p {
  margin: 8px 0 0;
  opacity: .86;
}

.mf-floating-photo {
  width: 100%;
  height: 100%;
  min-height: 620px;
  object-fit: cover;
  border-radius: 35px;
}

.mf-floating-sydney {
  background: #f8fdfd;
}

.mf-floating-sydney__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px;
}

.mf-floating-sydney__inner > div {
  background: #fff;
  border-radius: 32px;
  padding: 48px;
  border: 1px solid #e4efef;
}

.mf-floating-sydney ul {
  padding-left: 22px;
}

.mf-svc-body a,
.mf-svc-panel__text a,
.mf-floating-sydney a {
  color: #008080;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 1200px) {
  .mf-floating-benefits__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mf-floating-explainer__inner,
  .mf-floating-benefits__head,
  .mf-floating-handle__inner,
  .mf-floating-sydney__inner {
    gap: 40px;
  }
}

@media (max-width: 900px) {
  .mf-floating-explainer,
  .mf-floating-benefits,
  .mf-floating-handle,
  .mf-floating-sydney {
    padding: 65px 0;
  }

  .mf-floating-explainer__inner,
  .mf-floating-benefits__head,
  .mf-floating-handle__inner,
  .mf-floating-sydney__inner {
    grid-template-columns: 1fr;
  }

  .mf-floating-explainer__visual {
    min-height: 470px;
  }

  .mf-floating-handle__card {
    min-height: 260px;
  }
}

@media (max-width: 640px) {
  .mf-floating-explainer__inner,
  .mf-floating-benefits__inner,
  .mf-floating-handle__inner,
  .mf-floating-sydney__inner {
    width: 94%;
  }

  .mf-floating-benefits__grid {
    grid-template-columns: 1fr;
  }

  .mf-floating-benefit,
  .mf-floating-sydney__inner > div {
    padding: 28px 24px;
    border-radius: 24px;
  }

  .mf-floating-explainer__visual {
    min-height: 390px;
    padding: 30px 22px 65px;
    border-radius: 26px;
  }

  .mf-floating-gap-card {
    border-width: 14px;
  }

  .mf-floating-gap-card__art {
    width: calc(100% - 38px);
    height: calc(100% - 38px);
  }

  .mf-floating-gap-card__gap {
    bottom: -55px;
    font-size: 12px;
  }

  .mf-floating-photo {
    min-height: 420px;
  }
}

/* ========================================================================
   UPDATED FLOATING FRAME BASICS + LOCATIONS COPY + 3 VIDEO SHOWCASE
   Added 16 Sep 2026
   ======================================================================== */

.mf-floating-guide,
.mf-floating-locations-copy,
.mf-floating-videos {
  position: relative;
}

.mf-floating-guide {
  padding: 105px 0 95px;
  background: #fff;
  overflow: hidden;
}

.mf-floating-guide__inner,
.mf-floating-locations-copy__inner,
.mf-floating-videos__inner {
  width: min(94%, 1760px);
  margin: 0 auto;
}

.mf-floating-guide__head,
.mf-floating-videos__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .72fr);
  gap: 72px;
  align-items: end;
  margin-bottom: 48px;
}

.mf-floating-guide__head .badge-pill,
.mf-floating-videos__head .badge-pill,
.mf-floating-locations-copy .badge-pill {
  margin-bottom: 22px;
}

.mf-floating-guide__lead,
.mf-floating-videos__head > p {
  margin: 0 0 8px;
  color: rgba(99, 99, 99, .94);
  font-size: clamp(18px, 1.25vw, 22px);
  line-height: 1.7;
}

.mf-floating-guide__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(430px, .92fr);
  gap: 34px;
  align-items: stretch;
}

.mf-floating-guide__copy {
  padding: clamp(34px, 3.2vw, 58px);
  border: 1px solid #e2eeee;
  border-radius: 38px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(17, 93, 98, .08);
}

.mf-floating-guide__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 36px;
}

.mf-floating-guide__fact {
  min-height: 105px;
  padding: 20px 20px 18px;
  border: 1px solid #dceceb;
  border-radius: 22px;
  background: linear-gradient(145deg, #fff 0%, #f0fbfa 100%);
}

.mf-floating-guide__fact span {
  display: block;
  margin-bottom: 7px;
  color: #7d8a8a;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.mf-floating-guide__fact strong {
  display: block;
  color: #0b5557;
  font-size: clamp(17px, 1.15vw, 21px);
  line-height: 1.35;
}

.mf-floating-guide__body {
  padding-top: 4px;
}

.mf-floating-guide__visual {
  min-height: 650px;
  padding: 30px;
  border-radius: 38px;
  background:
    radial-gradient(circle at 82% 12%, rgba(255,255,255,.72), transparent 28%),
    linear-gradient(145deg, #effcfb 0%, #b5efec 48%, #6cdbd5 100%);
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.65);
}

.mf-floating-guide__visual-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 25px;
}

.mf-floating-guide__visual-head span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 13px;
  border: 1px solid rgba(0,128,128,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.76);
  color: #087a7c;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}

.mf-floating-guide__mockup {
  position: relative;
  flex: 1;
  min-height: 435px;
  display: grid;
  place-items: center;
  padding: 44px 28px 34px;
}

.mf-floating-guide__frame {
  width: min(88%, 470px);
  aspect-ratio: 1 / .88;
  padding: 18px;
  background: #181818;
  box-shadow: 0 28px 55px rgba(12, 76, 78, .22);
}

.mf-floating-guide__reveal {
  width: 100%;
  height: 100%;
  padding: 22px;
  background: #fff;
}

.mf-floating-guide__canvas {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 22%, rgba(255,255,255,.28), transparent 26%),
    linear-gradient(135deg, #0f6669 0%, #2f9697 47%, #6cdbd5 100%);
}

.mf-floating-guide__canvas::before,
.mf-floating-guide__canvas::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
}

.mf-floating-guide__canvas::before {
  width: 230px;
  height: 230px;
  left: -80px;
  bottom: -95px;
}

.mf-floating-guide__canvas::after {
  width: 170px;
  height: 170px;
  top: -70px;
  right: -55px;
}

.mf-floating-guide__canvas span {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: clamp(30px, 3.2vw, 54px);
  font-weight: 600;
  letter-spacing: -.04em;
}

.mf-floating-guide__label {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 15px;
  border-radius: 999px;
  background: #fff;
  color: #1d4f51;
  font-size: 13px;
  font-weight: 650;
  box-shadow: 0 12px 25px rgba(24, 93, 95, .12);
}

.mf-floating-guide__label::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #008080;
}

.mf-floating-guide__label--frame {
  top: 3px;
  right: 7%;
}

.mf-floating-guide__label--gap {
  left: 1%;
  bottom: 38px;
}

.mf-floating-guide__label--gap::before {
  background: #6cdbd5;
  box-shadow: 0 0 0 4px rgba(108,219,213,.22);
}

.mf-floating-guide__specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 24px;
  background: rgba(255,255,255,.68);
  backdrop-filter: blur(14px);
}

.mf-floating-guide__specs > div {
  padding: 12px 10px;
  text-align: center;
}

.mf-floating-guide__specs strong,
.mf-floating-guide__specs span {
  display: block;
}

.mf-floating-guide__specs strong {
  margin-bottom: 4px;
  color: #076f71;
  font-size: clamp(16px, 1.15vw, 21px);
}

.mf-floating-guide__specs span {
  color: #617878;
  font-size: 12px;
  line-height: 1.35;
}

/* Location/design copy now has no video inside it. */
.mf-floating-locations-copy {
  padding: 0 0 100px;
  background: #fff;
}

.mf-floating-locations-copy__card {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(310px, .58fr);
  gap: 34px;
  padding: clamp(35px, 4vw, 70px);
  border-radius: 40px;
  background: linear-gradient(112deg, #f9ffff 0%, #e1f8f6 52%, #a8ebe7 100%);
  overflow: hidden;
}

.mf-floating-locations-copy__main {
  align-self: center;
}

.mf-floating-locations-copy__aside {
  min-height: 420px;
  padding: 42px 35px;
  border-radius: 32px;
  background: #087b7d;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  box-shadow: 0 24px 60px rgba(6, 105, 107, .2);
}

.mf-floating-locations-copy__number {
  display: block;
  margin-bottom: 10px;
  color: #fff;
  font-size: clamp(72px, 7vw, 118px);
  font-weight: 600;
  letter-spacing: -.07em;
  line-height: .88;
}

.mf-floating-locations-copy__aside > strong {
  max-width: 260px;
  font-size: clamp(21px, 1.6vw, 29px);
  line-height: 1.25;
}

.mf-floating-locations-copy__cities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 25px 0 30px;
}

.mf-floating-locations-copy__cities span {
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 12px;
}

.mf-floating-locations-copy__aside .mf-svc-cta {
  margin-top: 2px;
}

.mf-floating-locations-copy__definition {
  display: grid;
  grid-template-columns: minmax(340px, .7fr) minmax(0, 1.3fr);
  gap: 70px;
  align-items: start;
  margin-top: 34px;
  padding: clamp(34px, 3.2vw, 58px);
  border: 1px solid #e2eeee;
  border-radius: 34px;
  background: #fff;
}

/* Three-video gallery: one landscape + two portrait videos. */
.mf-floating-videos {
  padding: 100px 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 11% 9%, rgba(108,219,213,.18), transparent 27%),
    linear-gradient(180deg, #f7fcfc 0%, #edf9f8 100%);
}

.mf-floating-videos__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(470px, 1fr);
  gap: 24px;
  align-items: start;
}

.mf-floating-videos__portraits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.mf-floating-video-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(0,128,128,.12);
  border-radius: 30px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 22px 58px rgba(15, 89, 92, .1);
}

.mf-floating-video-card__top {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 3px 6px 13px;
}

.mf-floating-video-card__top span {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #dff7f5;
  color: #087b7d;
  font-size: 12px;
  font-weight: 700;
}

.mf-floating-video-card__top strong {
  color: #163f41;
  font-size: clamp(15px, 1vw, 18px);
  line-height: 1.3;
}

.mf-floating-video-card__media {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 22px;
  background: #101010;
}

.mf-floating-video-card__media--wide {
  aspect-ratio: 16 / 9;
}

.mf-floating-video-card__media--portrait {
  aspect-ratio: 9 / 16;
}

.mf-floating-video-card__media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 1200px) {
  .mf-floating-guide__head,
  .mf-floating-videos__head {
    gap: 40px;
  }

  .mf-floating-guide__grid {
    grid-template-columns: minmax(0, 1fr) minmax(390px, .88fr);
  }

  .mf-floating-videos__grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(410px, 1fr);
  }
}

@media (max-width: 1050px) {
  .mf-floating-guide,
  .mf-floating-videos {
    padding: 75px 0;
  }

  .mf-floating-locations-copy {
    padding-bottom: 75px;
  }

  .mf-floating-guide__head,
  .mf-floating-videos__head,
  .mf-floating-guide__grid,
  .mf-floating-locations-copy__card,
  .mf-floating-locations-copy__definition,
  .mf-floating-videos__grid {
    grid-template-columns: 1fr;
  }

  .mf-floating-guide__lead,
  .mf-floating-videos__head > p {
    max-width: 820px;
  }

  .mf-floating-guide__visual {
    min-height: 590px;
  }

  .mf-floating-locations-copy__aside {
    min-height: 330px;
  }

  .mf-floating-videos__portraits {
    width: min(100%, 760px);
    margin: 0 auto;
  }
}

@media (max-width: 700px) {
  .mf-floating-guide,
  .mf-floating-videos {
    padding: 58px 0;
  }

  .mf-floating-locations-copy {
    padding-bottom: 58px;
  }

  .mf-floating-guide__inner,
  .mf-floating-locations-copy__inner,
  .mf-floating-videos__inner {
    width: 94%;
  }

  .mf-floating-guide__head,
  .mf-floating-videos__head {
    gap: 22px;
    margin-bottom: 30px;
  }

  .mf-floating-guide__facts,
  .mf-floating-guide__specs,
  .mf-floating-videos__portraits {
    grid-template-columns: 1fr;
  }

  .mf-floating-guide__copy,
  .mf-floating-locations-copy__card,
  .mf-floating-locations-copy__definition {
    padding: 28px 22px;
    border-radius: 27px;
  }

  .mf-floating-guide__visual {
    min-height: 500px;
    padding: 20px;
    border-radius: 28px;
  }

  .mf-floating-guide__visual-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .mf-floating-guide__mockup {
    min-height: 325px;
    padding: 52px 6px 60px;
  }

  .mf-floating-guide__frame {
    width: 88%;
    padding: 12px;
  }

  .mf-floating-guide__reveal {
    padding: 14px;
  }

  .mf-floating-guide__label--frame {
    top: 7px;
    right: 4px;
  }

  .mf-floating-guide__label--gap {
    left: 4px;
    bottom: 12px;
  }

  .mf-floating-locations-copy__aside {
    min-height: 300px;
    padding: 34px 26px;
    border-radius: 25px;
  }

  .mf-floating-locations-copy__definition {
    gap: 20px;
    margin-top: 20px;
  }

  .mf-floating-videos__portraits {
    gap: 24px;
  }

  .mf-floating-video-card {
    padding: 11px;
    border-radius: 24px;
  }

  .mf-floating-video-card--portrait {
    width: min(100%, 430px);
    margin: 0 auto;
  }

  .mf-floating-video-card__media {
    border-radius: 18px;
  }
}
/* ================================================================
   Floating Frames — video + content sections
   These sections intentionally follow the Canvas Stretching layout.
   Add this AFTER your existing service-page CSS.
   ================================================================ */

.mf-floating-video-section {
  overflow: hidden;
}

.mf-floating-video-section .badge-pill {
  margin-bottom: 26px;
}

/* Keep the iframe inside a clean rounded media frame. */
.mf-floating-video-media {
  position: relative;
  width: 100%;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden;
  border-radius: 35px;
  background: #111;
  box-shadow: 0 24px 55px rgba(15, 89, 92, 0.14);
}

.mf-floating-video-media iframe,
.mf-floating-video-media .mf-svc-split__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

/* Portrait videos — same visual proportion as the Canvas Stretching videos. */
.mf-floating-video-section--portrait .mf-floating-video-media {
  width: min(100%, 478px);
  aspect-ratio: 9 / 16;
}

/* Small specification row inside the first content block. */
.mf-floating-spec-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 30px;
}

.mf-floating-spec-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 15px;
  border: 1px solid rgba(0, 128, 128, 0.18);
  border-radius: 999px;
  background: #f4fbfb;
  color: #636363;
  font-size: 14px;
  line-height: 1.35;
	text-transform: capitalize;
}

.mf-floating-spec-row strong {
  color: #008080;
  font-weight: 600;
}

/* Horizontal-video section. The base Canvas Stretching component is retained,
   but this modifier gives the media a true 16:9 proportion. */
.mf-floating-video-section--landscape .mf-svc-split__inner {
  grid-template-columns: minmax(0, 1.05fr) minmax(520px, 0.95fr);
  align-items: center;
  gap: clamp(45px, 5vw, 90px);
}

.mf-floating-video-section--landscape .mf-floating-video-media {
  width: 100%;
  max-width: none;
  aspect-ratio: 16 / 9;
}

/* Give the landscape embed a little more visual presence without turning it
   into a separate video-gallery component. */
.mf-floating-video-section--landscape .mf-svc-split__media {
  align-self: center;
}

/* Links inside the new copy keep the site's teal treatment. */
.mf-floating-video-section .mf-svc-body a {
  color: #008080;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 1100px) {
  .mf-floating-video-section--landscape .mf-svc-split__inner {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .mf-floating-video-section--landscape .mf-floating-video-media {
    width: min(100%, 900px);
    margin-inline: auto;
  }
}

@media (max-width: 767px) {
  .mf-floating-video-section .badge-pill {
    margin-bottom: 20px;
  }

  .mf-floating-video-section--portrait .mf-floating-video-media {
    width: min(100%, 430px);
    margin-inline: auto;
    border-radius: 28px;
  }

  .mf-floating-video-section--landscape .mf-floating-video-media {
    border-radius: 24px;
  }

  .mf-floating-spec-row {
    display: grid;
    grid-template-columns: 1fr;
    margin: 22px 0 26px;
  }

  .mf-floating-spec-row span {
    width: 100%;
    justify-content: flex-start;
    border-radius: 14px;
  }
}
/* ================================================================
   Floating Frames - page-specific additions only
   Paste this at the END of your existing style.css.

   IMPORTANT:
   - No font-family overrides
   - No font-size overrides for headings/body copy
   - No font-weight overrides
   - No letter-spacing overrides
   - Typography is inherited from the existing Mobile Framing classes
   ================================================================ */

/* ---------------------------------------------------------------
   1. Video + content sections
   Uses existing .mf-svc-split, .mf-svc-h2 and .mf-svc-body typography.
   --------------------------------------------------------------- */
.mf-floating-video-section {
    overflow: hidden;
}

.mf-floating-video-section .badge-pill {
    margin-bottom: 26px;
}

.mf-floating-video-media {
    position: relative;
    width: 100%;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden;
    border-radius: 35px;
    background: #111;
    box-shadow: 0 24px 55px rgba(15, 89, 92, 0.14);
}

.mf-floating-video-media iframe,
.mf-floating-video-media .mf-svc-split__video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

/* Two vertical videos */
.mf-floating-video-section--portrait .mf-floating-video-media {
    width: min(100%, 478px);
    aspect-ratio: 9 / 16;
}

/* One horizontal video */
.mf-floating-video-section--landscape .mf-svc-split__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(520px, 0.95fr);
    align-items: center;
    gap: clamp(45px, 5vw, 90px);
}

.mf-floating-video-section--landscape .mf-floating-video-media {
    width: 100%;
    max-width: none;
    aspect-ratio: 16 / 9;
}

.mf-floating-video-section--landscape .mf-svc-split__media {
    align-self: center;
}

.mf-floating-video-section .mf-svc-body a {
    color: #008080;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Specification pills - layout/colour only; typography inherits. */
.mf-floating-spec-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 28px 0 30px;
}

.mf-floating-spec-row span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 15px;
    border: 1px solid rgba(0, 128, 128, 0.18);
    border-radius: 999px;
    background: #f4fbfb;
    color: #636363;
}

.mf-floating-spec-row strong {
    color: #008080;
}

/* ---------------------------------------------------------------
   2. Why Choose Mobile Framing
   New layout only. Text deliberately uses existing classes:
   .mf-svc-h2, .mf-svc-body, .mf-svc-area__title, .mf-svc-area__text
   --------------------------------------------------------------- */
.mf-floating-features {
    padding: 90px 0;
    background: #f8fdfd;
}

.mf-floating-features__inner {
    width: calc(100% - 128px);
    max-width: 1810px;
    margin: 0 auto;
}

.mf-floating-features__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 0.8fr);
    gap: 70px;
    align-items: end;
    margin-bottom: 50px;
}

.mf-floating-features__heading .badge-pill {
    margin-bottom: 26px;
}

.mf-floating-features__intro > :first-child {
    margin-top: 0;
}

.mf-floating-features__intro > :last-child {
    margin-bottom: 0;
}

.mf-floating-features__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}


/*
 * TYPOGRAPHY NOTE
 * The Why Choose cards also carry .mf-svc-area and use the exact
 * .mf-svc-area__title / .mf-svc-area__text markup from Canvas Stretching.
 * Do not add font properties here.
 */
.mf-floating-feature-card.mf-svc-area {
    width: auto;
    max-width: none;
}

.mf-floating-feature-card {
    min-width: 0;
    background: #fff;
    border: 1px solid #e7efef;
    border-radius: 28px;
    padding: 34px;
    box-shadow: 0 15px 40px rgba(16, 93, 99, 0.07);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.mf-floating-feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 55px rgba(16, 93, 99, 0.12);
}

.mf-floating-feature-card__icon {
    width: 68px;
    height: 68px;
    object-fit: contain;
    display: block;
    margin-bottom: 22px;
}

.mf-floating-feature-card .mf-svc-area__title {
    margin-top: 0;
    margin-bottom: 14px;
}

.mf-floating-feature-card .mf-svc-area__text > :first-child {
    margin-top: 0;
}

.mf-floating-feature-card .mf-svc-area__text > :last-child {
    margin-bottom: 0;
}

.mf-floating-feature-card__tagline {
    color: #008080;
}

/* ---------------------------------------------------------------
   3. Sydney cards
   No new styling is needed here.
   The PHP now uses the exact Canvas Stretching classes:
   .mf-svc-areas / .mf-svc-areas__inner / .mf-svc-area /
   .mf-svc-area__title / .mf-svc-area__text
   --------------------------------------------------------------- */

@media (max-width: 1200px) {
    .mf-floating-features__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mf-floating-features__head {
        gap: 40px;
    }
}

@media (max-width: 1100px) {
    .mf-floating-video-section--landscape .mf-svc-split__inner {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .mf-floating-video-section--landscape .mf-floating-video-media {
        width: min(100%, 900px);
        margin-inline: auto;
    }
}

@media (max-width: 767px) {
    .mf-floating-video-section .badge-pill {
        margin-bottom: 20px;
    }

    .mf-floating-video-section--portrait .mf-floating-video-media {
        width: min(100%, 430px);
        margin-inline: auto;
        border-radius: 28px;
    }

    .mf-floating-video-section--landscape .mf-floating-video-media {
        border-radius: 24px;
    }

    .mf-floating-spec-row {
        display: grid;
        grid-template-columns: 1fr;
        margin: 22px 0 26px;
    }

    .mf-floating-spec-row span {
        width: 100%;
        justify-content: flex-start;
        border-radius: 14px;
    }

    .mf-floating-features {
        padding: 65px 0;
    }

    .mf-floating-features__inner {
        width: 94%;
    }

    .mf-floating-features__head {
        grid-template-columns: 1fr;
        gap: 26px;
        margin-bottom: 34px;
    }

    .mf-floating-features__grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .mf-floating-feature-card {
        padding: 28px;
        border-radius: 24px;
    }
}
/* Jersey benefit cards - larger typography */

.mf-jersey-benefit-card .mf-svc-area__title {
    font-size: 24px !important;
    line-height: 1.3 !important;
}

.mf-jersey-benefit-card .mf-svc-area__text,
.mf-jersey-benefit-card .mf-svc-area__text p {
    font-size: 18px !important;
    line-height: 1.6 !important;
}
/* ================================================================
   Jersey Framing - page-specific additions only
   Add this at the END of the existing style.css.

   TYPOGRAPHY:
   This file deliberately does NOT set:
   - font-family
   - font-size
   - font-style
   - font-weight
   - line-height
   - letter-spacing
   - text-transform

   All typography comes from the existing Canvas Stretching / Floating Frames
   classes already used in the PHP template.
   ================================================================ */

/* ---------------------------------------------------------------
   1. Three vertical video + content sections
   The surrounding layout is still the existing .mf-svc-split component.
   --------------------------------------------------------------- */
.mf-jersey-video-section {
    overflow: hidden;
}

.mf-jersey-video-section .badge-pill {
    margin-bottom: 26px;
}

.mf-jersey-video-media {
    position: relative;
    width: min(100%, 478px);
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border-radius: 35px;
    background: #111;
    box-shadow: 0 24px 55px rgba(15, 89, 92, 0.14);
}

.mf-jersey-video-media iframe,
.mf-jersey-video-media .mf-svc-split__video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

/* Keep the vertical video centred inside whichever side of the split it uses. */
.mf-jersey-video-section .mf-svc-split__media {
    justify-self: center;
}

/* ---------------------------------------------------------------
   2. Three image benefit cards
   Card headings/body reuse .mf-svc-area__title and .mf-svc-area__text.
   --------------------------------------------------------------- */
.mf-jersey-benefits {
    padding: 90px 0;
    background: #f8fdfd;
}

.mf-jersey-benefits__inner {
    width: calc(100% - 128px);
    max-width: 1810px;
    margin: 0 auto;
}

.mf-jersey-benefits__head {
    margin-bottom: 44px;
}

.mf-jersey-benefits__head .badge-pill {
    margin-bottom: 26px;
}

.mf-jersey-benefits__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.mf-jersey-benefit-card.mf-svc-area {
    width: auto;
    max-width: none;
    min-width: 0;
    overflow: hidden;
    padding: 0 0 32px;
}

.mf-jersey-benefit-card__image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    margin-bottom: 28px;
}

.mf-jersey-benefit-card .mf-svc-area__title,
.mf-jersey-benefit-card .mf-svc-area__text {
    margin-left: 34px;
    margin-right: 34px;
}

.mf-jersey-benefit-card .mf-svc-area__text > :last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------
   3. Small spacing support for linked copy inside existing components
   --------------------------------------------------------------- */
.mf-jersey-video-section .mf-svc-body a,
.mf-svc-why__lead a,
.mf-svc-cols .mf-svc-body a {
    color: #008080;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------------------------------------------------------------
   Responsive layout only - still no typography overrides.
   --------------------------------------------------------------- */
@media (max-width: 1200px) {
    .mf-jersey-benefits__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .mf-jersey-video-media {
        width: min(100%, 430px);
        margin-inline: auto;
    }
}

@media (max-width: 767px) {
    .mf-jersey-video-section .badge-pill {
        margin-bottom: 20px;
    }

    .mf-jersey-video-media {
        width: min(100%, 390px);
        border-radius: 28px;
    }

    .mf-jersey-benefits {
        padding: 65px 0;
    }

    .mf-jersey-benefits__inner {
        width: 94%;
    }

    .mf-jersey-benefits__head {
        margin-bottom: 32px;
    }

    .mf-jersey-benefits__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .mf-jersey-benefit-card.mf-svc-area {
        padding-bottom: 28px;
    }

    .mf-jersey-benefit-card__image {
        margin-bottom: 24px;
    }

    .mf-jersey-benefit-card .mf-svc-area__title,
    .mf-jersey-benefit-card .mf-svc-area__text {
        margin-left: 26px;
        margin-right: 26px;
    }
}
/* ================================================================
   Custom Framing - page-specific additions only
   Add this at the END of the existing style.css.

   TYPOGRAPHY:
   This file deliberately does NOT set:
   - font-family
   - font-size
   - font-style
   - font-weight
   - line-height
   - letter-spacing
   - text-transform

   Typography continues to come from the existing Canvas Stretching /
   Floating Frames classes used by the PHP template.
   ================================================================ */

/* Vertical video used inside the existing .mf-svc-split layout. */
.mf-custom-video-section {
    overflow: hidden;
}

.mf-custom-video-section .badge-pill {
    margin-bottom: 26px;
}

.mf-custom-video-media {
    position: relative;
    width: min(100%, 478px);
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border-radius: 35px;
    background: #111;
    box-shadow: 0 24px 55px rgba(15, 89, 92, 0.14);
    justify-self: center;
}

.mf-custom-video-media iframe,
.mf-custom-video-media .mf-svc-split__video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

/* Keep linked text consistent with the existing teal brand treatment. */
.mf-svc-panel__text a,
.mf-custom-video-section .mf-svc-body a,
.mf-svc-step__text a,
.mf-svc-cols .mf-svc-body a {
    color: #008080;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 1100px) {
    .mf-custom-video-media {
        width: min(100%, 430px);
        margin-inline: auto;
    }
}

@media (max-width: 767px) {
    .mf-custom-video-section .badge-pill {
        margin-bottom: 20px;
    }

    .mf-custom-video-media {
        width: min(100%, 390px);
        border-radius: 28px;
    }
}
/* ================================================================
   Custom Framing - page-specific additions only
   Add this at the END of the existing style.css.

   TYPOGRAPHY:
   This file deliberately does NOT set:
   - font-family
   - font-size
   - font-style
   - font-weight
   - line-height
   - letter-spacing
   - text-transform

   Typography continues to come from the existing Canvas Stretching /
   Floating Frames classes used by the PHP template.
   ================================================================ */

/* Vertical video used inside the existing .mf-svc-split layout. */
.mf-custom-video-section {
    overflow: hidden;
}

.mf-custom-video-section .badge-pill {
    margin-bottom: 26px;
}

.mf-custom-video-media {
    position: relative;
    width: min(100%, 478px);
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border-radius: 35px;
    background: #111;
    box-shadow: 0 24px 55px rgba(15, 89, 92, 0.14);
    justify-self: center;
}

.mf-custom-video-media iframe,
.mf-custom-video-media .mf-svc-split__video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

/* Keep linked text consistent with the existing teal brand treatment. */
.mf-svc-panel__text a,
.mf-custom-video-section .mf-svc-body a,
.mf-svc-step__text a,
.mf-svc-cols .mf-svc-body a {
    color: #008080;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 1100px) {
    .mf-custom-video-media {
        width: min(100%, 430px);
        margin-inline: auto;
    }
}

@media (max-width: 767px) {
    .mf-custom-video-section .badge-pill {
        margin-bottom: 20px;
    }

    .mf-custom-video-media {
        width: min(100%, 390px);
        border-radius: 28px;
    }
}

/* ================================================================
   Custom Framing - alternate 2 x 2 reason layout
   Typography is inherited from existing Mobile Framing classes.
   No font family, font size, font weight, line height or letter
   spacing is set here.
   ================================================================ */
.mf-custom-reasons {
    padding: 100px 0 120px;
    background: linear-gradient(135deg, #ffffff 0%, #f7fbfb 48%, #e8f8f7 100%);
    overflow: hidden;
}

.mf-custom-reasons__inner {
    width: min(94%, 1810px);
    margin: 0 auto;
}

.mf-custom-reasons__head {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 70px;
    align-items: end;
    margin-bottom: 58px;
}

.mf-custom-reasons__head .badge-pill {
    margin-bottom: 28px;
}

.mf-custom-reasons__intro {
    max-width: 760px;
    justify-self: end;
}

.mf-custom-reasons__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px;
    align-items: start;
}

.mf-custom-reason-card {
    position: relative;
    padding: 42px 44px 46px;
    border: 1px solid rgba(0, 128, 128, 0.12);
    border-radius: 34px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 24px 60px rgba(18, 80, 80, 0.09);
    overflow: hidden;
}

.mf-custom-reason-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 44px;
    right: 44px;
    height: 4px;
    border-radius: 0 0 8px 8px;
    background: #6cdbd5;
}

.mf-custom-reason-card--offset {
    margin-top: 46px;
}

.mf-custom-reason-card__top {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 22px;
    align-items: center;
    margin-bottom: 26px;
}

.mf-custom-reason-card__top .mf-svc-area__title {
    margin: 0;
}

.mf-custom-reason-card__icon {
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e7f9f8;
    border: 1px solid rgba(0, 128, 128, 0.12);
}

.mf-custom-reason-card__icon img {
    display: block;
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.mf-custom-reason-card .mf-svc-area__text > :first-child {
    margin-top: 0;
}

.mf-custom-reason-card .mf-svc-area__text > :last-child {
    margin-bottom: 0;
}

.mf-custom-reason-card .mf-svc-area__text a {
    color: #008080;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mf-custom-reasons__cta {
    display: flex;
    justify-content: center;
    margin-top: 72px;
}

@media (max-width: 1100px) {
    .mf-custom-reasons {
        padding: 80px 0 95px;
    }

    .mf-custom-reasons__head {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-bottom: 46px;
    }

    .mf-custom-reasons__intro {
        max-width: none;
        justify-self: stretch;
    }

    .mf-custom-reasons__grid {
        gap: 24px;
    }

    .mf-custom-reason-card,
    .mf-custom-reason-card--offset {
        margin-top: 0;
    }
}

@media (max-width: 767px) {
    .mf-custom-reasons {
        padding: 62px 0 72px;
    }

    .mf-custom-reasons__inner {
        width: 92%;
    }

    .mf-custom-reasons__head {
        margin-bottom: 32px;
    }

    .mf-custom-reasons__head .badge-pill {
        margin-bottom: 20px;
    }

    .mf-custom-reasons__grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .mf-custom-reason-card {
        padding: 30px 26px 32px;
        border-radius: 26px;
    }

    .mf-custom-reason-card::before {
        left: 26px;
        right: 26px;
    }

    .mf-custom-reason-card__top {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 16px;
        margin-bottom: 20px;
    }

    .mf-custom-reason-card__icon {
        width: 58px;
        height: 58px;
    }

    .mf-custom-reason-card__icon img {
        width: 30px;
        height: 30px;
    }

    .mf-custom-reasons__cta {
        justify-content: flex-start;
        margin-top: 38px;
    }
}
/* =========================================================
   CUSTOM FRAMING - CARD TEXT SPACING
   ========================================================= */

.mf-custom-reason-card .mf-svc-area__text {
    margin-top: 24px;
}

.mf-custom-reason-card .mf-svc-area__text p {
    line-height: 1.7;
    margin: 0 0 20px;
}

.mf-custom-reason-card .mf-svc-area__text p:last-child {
    margin-bottom: 0;
}
/* ========================================================================
   MIRROR FRAMING PAGE — ADDITIONAL LAYOUT CSS ONLY
   ------------------------------------------------------------------------
   No font-family, font-size, font-weight, line-height or letter-spacing
   overrides are added here. Existing Mobile Framing typography is reused.
   ======================================================================== */

.mf-mirror-gallery {
    padding: 100px 0;
    background: linear-gradient(108.86deg, #ffffff 2.45%, #eefafa 63.88%, #d7f5f3 123%);
}

.mf-mirror-gallery__inner {
    width: min(1792px, 94%);
    margin: 0 auto;
}

.mf-mirror-gallery__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.75fr);
    gap: 80px;
    align-items: end;
    margin-bottom: 52px;
}

.mf-mirror-gallery__intro {
    max-width: 720px;
    justify-self: end;
}

.mf-mirror-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.mf-mirror-gallery__item {
    position: relative;
    display: block;
    overflow: hidden;
    border: 1px solid rgba(0, 128, 128, 0.12);
    border-radius: 32px;
    background: #ffffff;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.08);
}

.mf-mirror-gallery__item::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid rgba(108, 219, 213, 0);
    border-radius: inherit;
    pointer-events: none;
    transition: border-color 0.25s ease;
}

.mf-mirror-gallery__item img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.mf-mirror-gallery__item:hover img,
.mf-mirror-gallery__item:focus img {
    transform: scale(1.035);
}

.mf-mirror-gallery__item:hover::after,
.mf-mirror-gallery__item:focus::after {
    border-color: rgba(108, 219, 213, 0.8);
}

.mf-mirror-gallery__cta {
    display: flex;
    justify-content: center;
    margin-top: 44px;
}

@media (max-width: 1100px) {
    .mf-mirror-gallery {
        padding: 80px 0;
    }

    .mf-mirror-gallery__head {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-bottom: 38px;
    }

    .mf-mirror-gallery__intro {
        max-width: none;
        justify-self: stretch;
    }

    .mf-mirror-gallery__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mf-mirror-gallery__item:last-child {
        grid-column: 1 / -1;
        width: min(100%, 720px);
        justify-self: center;
    }
}

@media (max-width: 767px) {
    .mf-mirror-gallery {
        padding: 64px 0;
    }

    .mf-mirror-gallery__inner {
        width: 94%;
    }

    .mf-mirror-gallery__grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .mf-mirror-gallery__item,
    .mf-mirror-gallery__item:last-child {
        grid-column: auto;
        width: 100%;
        border-radius: 24px;
    }

    .mf-mirror-gallery__cta {
        margin-top: 32px;
        justify-content: flex-start;
    }
}
/* =========================================================
   GLASS FRAMING PAGE - ADDITIONAL LAYOUT CSS ONLY
   Existing Mobile Framing typography is intentionally reused.
   No font-family, font-size, font-weight or letter-spacing overrides.
   ========================================================= */

.mf-glass-types {
    padding: 100px 0;
    background: #f6fbfb;
}

.mf-glass-types__inner {
    width: min(94%, 1810px);
    margin: 0 auto;
}

.mf-glass-types__head {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 70px;
    align-items: end;
    margin-bottom: 56px;
}

.mf-glass-types__head .badge-pill {
    margin-bottom: 24px;
}

.mf-glass-types__intro {
    max-width: 760px;
    justify-self: end;
}

.mf-glass-types__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px;
}

.mf-glass-card {
    display: grid;
    grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
    min-height: 360px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(0, 128, 128, 0.10);
    border-radius: 36px;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.07);
}

.mf-glass-card__media {
    margin: 0;
    min-height: 100%;
    overflow: hidden;
}

.mf-glass-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
}

.mf-glass-card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 42px;
}

.mf-glass-card .mf-svc-area__title {
    margin: 0 0 20px;
}

.mf-glass-card .mf-svc-area__text p {
    margin: 0;
    line-height: 1.7;
}

.mf-glass-card:nth-child(4n + 2),
.mf-glass-card:nth-child(4n + 3) {
    background: linear-gradient(135deg, #ffffff 0%, #eefafa 100%);
}

@media (max-width: 1200px) {
    .mf-glass-types__head {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .mf-glass-types__intro {
        max-width: none;
        justify-self: stretch;
    }

    .mf-glass-types__grid {
        grid-template-columns: 1fr;
    }

    .mf-glass-card {
        grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
    }
}

@media (max-width: 767px) {
    .mf-glass-types {
        padding: 64px 0;
    }

    .mf-glass-types__inner {
        width: 94%;
    }

    .mf-glass-types__head {
        margin-bottom: 34px;
    }

    .mf-glass-types__grid {
        gap: 22px;
    }

    .mf-glass-card {
        display: block;
        min-height: 0;
        border-radius: 26px;
    }

    .mf-glass-card__media {
        aspect-ratio: 16 / 10;
    }

    .mf-glass-card__media img {
        min-height: 0;
    }

    .mf-glass-card__body {
        padding: 28px 24px 32px;
    }
}
.mf-glass-card .mf-svc-area__title {
    font-size: 30px;
    line-height: 1.25;
    margin: 0 0 20px;
}
/* Main heading */
.mf-custom-reasons__head .mf-svc-h2 {
    font-size: 40px !important;
}

/* Intro text */
.mf-custom-reasons__intro,
.mf-custom-reasons__intro p {
    font-size: 18px !important;
}

/* Card headings */
.mf-custom-reason-card .mf-svc-area__title {
    font-size: 30px !important;
}

/* Card body text */
.mf-custom-reason-card .mf-svc-area__text,
.mf-custom-reason-card .mf-svc-area__text p,
.mf-custom-reason-card .mf-svc-area__text li,
.mf-custom-reason-card .mf-svc-area__text a {
    font-size: 18px !important;
}
/* =========================================================
   GLASS TYPES - INCREASE ALL TEXT SIZE
   ========================================================= */

/* Badge */
.mf-glass-types .badge-pill {
    font-size: 20px !important;
    line-height: 1.4 !important;
}

/* Main section heading */
.mf-glass-types .mf-svc-h2 {
    font-size: 36px !important;
    line-height: 1.25 !important;
}

/* Intro paragraph */
.mf-glass-types__intro,
.mf-glass-types__intro p {
    font-size: 20px !important;
    line-height: 1.65 !important;
}

/* Glass card titles */
.mf-glass-card .mf-svc-area__title {
    font-size: 30px !important;
    line-height: 1.3 !important;
}

/* Glass card body text */
.mf-glass-card .mf-svc-area__text,
.mf-glass-card .mf-svc-area__text p,
.mf-glass-card .mf-svc-area__text li,
.mf-glass-card .mf-svc-area__text a {
    font-size: 18px !important;
    line-height: 1.7 !important;
}
/* ==========================================================================
   ARTIST PORTAL
   Figma: file FV7LRaWs3NuDRhlzVrOeRO, node 126:4523 (1920 x 5843)

   Same construction rules as every other page on this build — each one is a bug
   already paid for once:

   1. TYPE SCALES WITH THE VIEWPORT. The Figma frame is 1920 wide, so a hard px
      value renders ~27% too large on a 1512 screen. Every size is anchored to
      equal the Figma value at exactly 1920 and scale down from there:
      design px / 1920 * 100 = vw, with a floor for readability.
   2. LETTER-SPACING IS -3% OF FONT SIZE on every text node in this design
      (-2.55/85, -1.65/55, -1.38/46, -1.35/45, -1.02/34, -0.78/26, -0.72/24,
      -0.66/22 — all = -0.03), so it is written once as -0.03em.
   3. LINE-HEIGHTS ARE RATIOS of the Figma pairs.
   4. THE H1 GUARD. `.mf-headline` carries the home page's word-rotator styles
      (style.css:933, and style.css:7439 `line-height: 0 !important` in a mobile
      query) which stack its words on one baseline on purpose. On a static
      three-span headline that prints every span on top of the others. The
      template omits the class; the guard below wins even if it creeps back.
   5. TOKENS LIVE ON THE SECTIONS, not a body class — a slug-matched template
      loaded through the hierarchy never gets a page-template body class.

   HOVER / MOTION
   The design file carries no interaction data I can read, so the hover states
   at the end of this file are the site's own established behaviour: a 2px lift
   plus shadow on buttons, and a slow image scale with the name sliding up on
   the artist cards. Send the PROTOTYPE LINK (not a screen recording — video
   isn't something I can read) and I will match whatever it actually does.

   NO CSS NESTING is used anywhere, and every block is closed.
   Append the whole thing to style.css in one go — do not paste it in pieces.
   ========================================================================== */

.mf-hero--artist,
.mf-ap-local,
.mf-ap-partners,
.mf-ap-artists,
.mf-ap-warranty,
.mf-ap-plugin {
	/* ---- Fluid type. Cap = the Figma value, reached at 1920px. ---- */
	--fs-h1:      clamp(34px, 4.427vw, 85px);   /* 85 */
	--fs-plugin:  clamp(28px, 2.865vw, 55px);   /* 55 — the plugin heading  */
	--fs-quote:   clamp(22px, 2.396vw, 46px);   /* 46 — the pull quote      */
	--fs-h2:      clamp(24px, 2.344vw, 45px);   /* 45 */
	--fs-feature: clamp(20px, 1.771vw, 34px);   /* 34 — feature titles      */
	--fs-name:    clamp(18px, 1.354vw, 26px);   /* 26 — artist names        */
	--fs-body:    clamp(17px, 1.250vw, 24px);   /* 24 */
	--fs-lead:    clamp(15px, 1.146vw, 22px);   /* 22 */

	--lh-h1: 1.188;        /* 85 / 101 */
	--lh-h2: 1.267;        /* 45 / 57  */
	--lh-quote: 1.239;     /* 46 / 57  */
	--lh-body: 1.542;      /* 24 / 37  */
	--lh-body-wide: 1.625; /* 24 / 39  */
	--lh-feature-body: 1.417; /* 24 / 34 */
	--lh-lead: 1.636;      /* 22 / 36  */
	--lh-plugin-lead: 1.682;  /* 22 / 37 */

	--ap-tracking: -0.03em;
	--ap-teal: #6cdbd5;
	--ap-teal-dark: #007973;      /* plugin + feature headings 126:4622/4625 */
	--ap-ink: #004e4a;            /* button label 126:4560 */
	--ap-body: rgba(99, 99, 99, 0.9);
	--ap-on-dark: rgba(255, 255, 255, 0.9);

	--ap-gutter: clamp(20px, 4.844vw, 93px);    /* the page insets at x92-93 */
	--ap-gap: clamp(20px, 3.542vw, 68px);
}


/* ==========================================================================
   1. HERO — node 126:4529
   H1   126:4557 : 85 / 101 / -2.55, three spans, middle span #6cdbd5,
                   702 of 1920 = 36.56vw, three lines
   Lead 126:4555 : 22 / 36 / -0.66, rgba(255,255,255,.9), 742 = 38.65vw
   ========================================================================== */

.mf-hero--artist .mf-hero__content {
	padding: clamp(70px, 6.302vw, 121px) clamp(20px, 2.604vw, 50px) clamp(30px, 2.083vw, 40px);
}

.mf-headline--artist {
	max-width: 36.56vw;
	min-width: 0;
	margin: 0;
	font-size: var(--fs-h1);
	font-weight: 400;
	line-height: var(--lh-h1);
	letter-spacing: var(--ap-tracking);
	color: #fff;
	white-space: normal;
}

/* The middle span only — "Australia's Creative" */
.mf-headline--artist .mf-headline__accent {
	color: var(--ap-teal);
}

/* See note 4 in the header */
.mf-hero--artist .mf-headline--artist {
	font-size: var(--fs-h1) !important;
	line-height: var(--lh-h1) !important;
	letter-spacing: var(--ap-tracking) !important;
	white-space: normal !important;
}

.mf-subtext--artist {
	width: 100%;
	max-width: 38.65vw;
	margin-top: clamp(10px, 0.677vw, 13px);
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
	letter-spacing: var(--ap-tracking);
	color: var(--ap-on-dark);
}

.mf-hero--artist .mf-crumb {
	font-size: var(--fs-lead);
	line-height: 1.773;
	letter-spacing: var(--ap-tracking);
}

/* The two CTAs sit side by side at y577 — 126:4558 and 126:4565 — with the
   quote form directly beneath them. Confirmed against the running prototype. */
.mf-ap-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(12px, 1.302vw, 25px);
	margin-top: clamp(18px, 2.24vw, 43px);
	margin-bottom: clamp(14px, 2.083vw, 40px);
}


/* ==========================================================================
   2. THE BUTTON — 126:4558 / 4565 / 4577 / 4591 / 4612 / 4731
   A teal pill, radius 130, with the label in Poppins Medium 24 / 39 / -0.72
   #004e4a and a 48px circle + arrow at the right. The --lg variant is the
   347 x 59 one in the Local Artists band (126:4591), whose circle is 53.
   ========================================================================== */

.mf-ap-btn {
	display: inline-flex;
	align-items: center;
	gap: clamp(8px, 0.781vw, 15px);
	box-sizing: border-box;
	min-height: clamp(44px, 2.813vw, 54px);
	padding: 3px 3px 3px clamp(14px, 1.094vw, 21px);
	font-family: "Poppins", var(--mf-font-display), sans-serif;
	font-size: var(--fs-body);
	font-weight: 500;
	line-height: 1.625;               /* 24 / 39 */
	letter-spacing: var(--ap-tracking);
	color: var(--ap-ink);
	text-decoration: none;
	white-space: nowrap;
	background-color: var(--ap-teal);
	border: 0;
	border-radius: 130px;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.mf-ap-btn__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: clamp(38px, 2.5vw, 48px);
	height: clamp(38px, 2.5vw, 48px);
	border-radius: 50%;
	background-color: #fff;
	transition: transform 0.25s ease;
}

.mf-ap-btn__icon img {
	display: block;
	width: 62%;
	height: 62%;
	object-fit: contain;
}

/* 126:4591 — the wider 347 x 59 pill with a 53px circle */
.mf-ap-btn--lg {
	min-height: clamp(48px, 3.073vw, 59px);
	font-size: clamp(18px, 1.250vw, 24px);
}

.mf-ap-btn--lg .mf-ap-btn__icon {
	width: clamp(42px, 2.760vw, 53px);
	height: clamp(42px, 2.760vw, 53px);
}


/* ==========================================================================
   3. LOCAL ARTISTS — node 126:4584, a full-bleed photo band 1920 x 447
   Heading 126:4586 : 45 / 57 / -1.35, WHITE
   Body    126:4589 : 24 / 37 / -0.72, rgba(255,255,255,.9), 539 = 28.07vw
   Quote   126:4587 : 46 / 57 / -1.38, white, 664 = 34.58vw
   ========================================================================== */

.mf-ap-local {
    box-sizing: border-box;
    position: relative;
    padding-block: clamp(28px, 2.083vw, 40px);
    font-family: var(--mf-font-display);
    color: #fff;
    background-image: url(/wp-content/uploads/2026/09/local-artists-bg.png);
    background-size: auto;
    background-position: center;
    margin: 0;
    background-repeat: no-repeat;
}
.mf-hero--artist {
    background-image: url(/wp-content/uploads/2026/09/artist-portal-banner.png);
}
.mf-ap-local *,
.mf-ap-local *::before,
.mf-ap-local *::after {
	box-sizing: border-box;
}

.mf-ap-local__inner {
	display: grid;
	grid-template-columns: minmax(0, 607fr) minmax(0, 1093fr);
	column-gap: clamp(24px, 5vw, 96px);
	align-items: start;
	width: 100%;
	max-width: 1920px;
	margin-inline: auto;
	padding-inline: clamp(20px, 3.542vw, 68px);
}

.mf-ap-local__title {
	margin: 0 0 clamp(10px, 0.885vw, 17px);
	font-size: var(--fs-h2);
	font-weight: 400;
	line-height: var(--lh-h2);
	letter-spacing: var(--ap-tracking);
	color: #fff;
}

.mf-ap-local__text {
	max-width: 28.07vw;
	margin: 0 0 clamp(12px, 1.25vw, 24px);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	letter-spacing: var(--ap-tracking);
	color: var(--ap-on-dark);
}

.mf-ap-local__text:last-child {
	margin-bottom: 0;
}

.mf-ap-local__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

/* 126:4587 between the two 57px quote marks, 126:4588 and 126:4524 */
.mf-ap-quote {
	position: relative;
	max-width: 34.58vw;
	margin: clamp(14px, 1.354vw, 26px) 0 0;
	padding: 0 clamp(18px, 1.615vw, 31px);
}

.mf-ap-quote p {
	margin: 0;
	font-size: var(--fs-quote);
	line-height: var(--lh-quote);
	letter-spacing: var(--ap-tracking);
	color: #fff;
}

.mf-ap-quote::before,
.mf-ap-quote::after {
	position: absolute;
	font-size: var(--fs-h2);
	line-height: 1.267;
	color: #fff;
}

.mf-ap-quote::before {
	content: "\201C";
	top: 0;
	left: 0;
}

.mf-ap-quote::after {
	content: "\201D";
	right: 0;
	bottom: 0;
}


/* ==========================================================================
   4. OUR PARTNERS
   Eyebrow 126:4600 : 45 / 57 / -1.35, #6cdbd5
   H2      126:4599 : 45 / 57 / -1.35, #000, 568 = 29.58vw
   Body    126:4598 : 24 / 39 / -0.72, rgba(99,99,99,.9), 1022 = 53.23vw
   ========================================================================== */

.mf-ap-partners {
	box-sizing: border-box;
	padding-block: clamp(30px, 2.917vw, 56px) clamp(30px, 3.229vw, 62px);
	font-family: var(--mf-font-display);
	background-color: #fff;
}

.mf-ap-partners *,
.mf-ap-partners *::before,
.mf-ap-partners *::after {
	box-sizing: border-box;
}

.mf-ap-partners__inner {
	display: grid;
	grid-template-columns: minmax(0, 660fr) minmax(0, 1022fr);
	column-gap: clamp(24px, 1.875vw, 36px);
	align-items: start;
	width: 100%;
	max-width: 1920px;
	margin-inline: auto;
	padding-inline: var(--ap-gutter);
}

.mf-ap-eyebrow {
	margin: 0;
	font-size: var(--fs-h2);
	font-weight: 400;
	line-height: var(--lh-h2);
	letter-spacing: var(--ap-tracking);
	color: var(--ap-teal);
}

.mf-ap-partners__title {
	max-width: 29.58vw;
	margin: clamp(4px, 0.573vw, 11px) 0 0;
	font-size: var(--fs-h2);
	font-weight: 400;
	line-height: var(--lh-h2);
	letter-spacing: var(--ap-tracking);
	color: #000;
}

.mf-ap-partners__lead .mf-ap-btn {
	margin-top: clamp(16px, 1.979vw, 38px);
}

.mf-ap-partners__body {
	margin-top: clamp(0px, 1.25vw, 24px);
	font-size: var(--fs-body);
	line-height: var(--lh-body-wide);
	letter-spacing: var(--ap-tracking);
	color: var(--ap-body);
}

.mf-ap-partners__body p {
	margin: 0;
}


/* ==========================================================================
   5. FEATURE ARTISTS — nodes 126:4601 + the four card instances
   Heading 126:4601 : 45 / 57 / -1.35, #6cdbd5, centred
   Card    126:4484 : ~740 square-ish, image + a black wash, name bottom-left
   Grid    : two columns, x183 and x1010 -> 87 apart; rows 803 apart on a 739
             card -> 64 between
   ========================================================================== */

.mf-ap-artists {
	box-sizing: border-box;
	padding-block: clamp(30px, 3.542vw, 68px) clamp(30px, 3.385vw, 65px);
	font-family: var(--mf-font-display);
	background: linear-gradient(206.48deg, rgba(255, 255, 255, 0) 6.87%, rgba(108, 219, 213, 0.4) 88.53%);

}

.mf-ap-artists *,
.mf-ap-artists *::before,
.mf-ap-artists *::after {
	box-sizing: border-box;
}

.mf-ap-artists__inner {
	width: 100%;
	max-width: 1920px;
	margin-inline: auto;
	padding-inline: clamp(20px, 9.167vw, 176px);
}

.mf-ap-artists__title {
	margin: 0 0 clamp(20px, 2.396vw, 46px);
	font-size: var(--fs-h2);
	font-weight: 400;
	line-height: var(--lh-h2);
	letter-spacing: var(--ap-tracking);
	color: var(--ap-teal);
	text-align: center;
}

.mf-ap-artists__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(16px, 4.531vw, 87px);
	row-gap: clamp(16px, 3.333vw, 64px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mf-ap-artist {
	margin: 0;
}

.mf-ap-artist__link {
	position: relative;
	display: block;
	aspect-ratio: 743 / 739;
	overflow: hidden;
	text-decoration: none;
	background-color: #000;
}

.mf-ap-artist__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 126:4487 — Arial 26 / 57 / -0.78, #6cdbd5, inset 5.11% left / 3.52% bottom */
.mf-ap-artist__name {
	position: absolute;
	left: 5.11%;
	right: 5%;
	bottom: 3.52%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: var(--fs-name);
	line-height: 1.5;
	letter-spacing: var(--ap-tracking);
	color: var(--ap-teal);
	transition: transform 0.35s ease;
}


/* ==========================================================================
   6. 10 YEARS WARRANTY — node 126:4606, a photo band 1920 x 571
   Heading 126:4609 : 45 / 57 / -1.35, WHITE
   Body    126:4610 : 24 / 37 / -0.72, rgba(255,255,255,.9), 648 = 33.75vw
   Image   126:4611 : 522 square
   ========================================================================== */

.mf-ap-warranty {
    box-sizing: border-box;
    padding-block: clamp(28px, 3.281vw, 63px) clamp(28px, 2.188vw, 42px);
    font-family: var(--mf-font-display);
    color: #fff;
    background-image: url(/wp-content/uploads/2026/09/Frame-2095585432.png);
    background-size: cover;
    background-position: center;
}

.mf-ap-warranty *,
.mf-ap-warranty *::before,
.mf-ap-warranty *::after {
	box-sizing: border-box;
}

.mf-ap-warranty__inner {
	display: grid;
	grid-template-columns: minmax(0, 1242fr) minmax(0, 522fr);
	column-gap: clamp(24px, 3.125vw, 60px);
	align-items: center;
	width: 100%;
	max-width: 1920px;
	margin-inline: auto;
	padding-inline: var(--ap-gutter);
}

.mf-ap-warranty__title {
	margin: 0 0 clamp(10px, 0.885vw, 17px);
	font-size: var(--fs-h2);
	font-weight: 400;
	line-height: var(--lh-h2);
	letter-spacing: var(--ap-tracking);
	color: #fff;
}

.mf-ap-warranty__text {
	max-width: 33.75vw;
	margin: 0 0 clamp(16px, 2.188vw, 42px);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	letter-spacing: var(--ap-tracking);
	color: var(--ap-on-dark);
}

.mf-ap-warranty__media {
	margin: 0;
}

.mf-ap-warranty__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}


/* ==========================================================================
   7. WORDPRESS PLUGIN — node 126:4619, a photo band 1920 x 913
   Heading 126:4622 : 55 / 57 / -1.65, #007973 — the largest H2 on the page
   Lead    126:4639 : 22 / 37 / -0.66, rgba(13,13,13,.9), 615 = 32.03vw
   Feature 126:4625 : 34 / 57 / -1.02, #007973
           126:4624 : 24 / 34 / -0.72, rgba(9,9,9,.9)
   Image   126:4620 : 454 x 807
   ========================================================================== */

.mf-ap-plugin {
    box-sizing: border-box;
    padding-block: clamp(28px, 1.875vw, 36px) clamp(30px, 3.021vw, 58px);
    font-family: var(--mf-font-display);
    background-color: #eef7f6;
    background-image: url(/wp-content/uploads/2026/09/plugin-bg-img.png);
    background-size: cover;
    background-position: center;
}
.mf-ap-plugin *,
.mf-ap-plugin *::before,
.mf-ap-plugin *::after {
	box-sizing: border-box;
}

.mf-ap-plugin__inner {
	width: 100%;
	max-width: 1920px;
	margin-inline: auto;
	padding-inline: var(--ap-gutter);
}

.mf-ap-plugin__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: clamp(16px, 1.667vw, 32px);
	margin-bottom: clamp(20px, 2.396vw, 46px);
}

.mf-ap-plugin__title {
	margin: 0;
	font-size: var(--fs-plugin);
	font-weight: 400;
	line-height: 1.036;               /* 55 / 57 */
	letter-spacing: var(--ap-tracking);
	color: var(--ap-teal-dark);
}

.mf-ap-plugin__lead {
	max-width: 32.03vw;
	margin: clamp(10px, 0.885vw, 17px) 0 0;
	font-size: var(--fs-lead);
	line-height: var(--lh-plugin-lead);
	letter-spacing: var(--ap-tracking);
	color: rgba(13, 13, 13, 0.9);
}

/* Feature list left (789 wide), promo image right (454) */
.mf-ap-plugin__body {
	display: grid;
	grid-template-columns: minmax(0, 850fr) minmax(0, 454fr);
	column-gap: clamp(24px, 5.313vw, 102px);
	align-items: start;
}

/* ---- The four features — 155 apart with a 1px rule between --------------- */
.mf-ap-features {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: mf-ap-feature;
}

.mf-ap-feature {
	display: grid;
	grid-template-columns: clamp(14px, 0.990vw, 19px) minmax(0, 1fr);
	column-gap: clamp(12px, 1.667vw, 32px);
	align-items: start;
	padding-block: clamp(14px, 1.458vw, 28px);
	border-bottom: 1px solid rgba(0, 0, 0, 0.14);
}

.mf-ap-feature:first-child {
	padding-top: 0;
}

.mf-ap-feature:last-child {
	border-bottom: 0;
}

/* 126:4635 — a 19px dot, aligned with the title's cap height */
.mf-ap-feature__dot {
	width: clamp(14px, 0.990vw, 19px);
	height: clamp(14px, 0.990vw, 19px);
	margin-top: clamp(8px, 0.781vw, 15px);
	border-radius: 50%;
	background-color: var(--ap-teal-dark);
}

.mf-ap-feature__title {
	margin: 0;
	font-size: var(--fs-feature);
	font-weight: 400;
	line-height: 1.676;               /* 34 / 57 */
	letter-spacing: var(--ap-tracking);
	color: var(--ap-teal-dark);
}

.mf-ap-feature__text {
	margin: 0;
	font-size: var(--fs-body);
	line-height: var(--lh-feature-body);
	letter-spacing: var(--ap-tracking);
	color: rgba(9, 9, 9, 0.9);
}

.mf-ap-plugin__media {
	margin: 0;
}

.mf-ap-plugin__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 454 / 807;
	object-fit: cover;
	border-radius: clamp(12px, 1.094vw, 21px);
}


/* ==========================================================================
   8. HOVER AND FOCUS
   The design file carries no readable interaction data, so these follow the
   behaviour already established elsewhere on this site. Send the prototype
   link and I will replace them with the real thing.
   ========================================================================== */

.mf-ap-btn:hover,
.mf-ap-btn:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}

.mf-ap-btn:hover .mf-ap-btn__icon,
.mf-ap-btn:focus-visible .mf-ap-btn__icon {
	transform: translateX(3px) rotate(45deg);
}

.mf-ap-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

a.mf-ap-artist__link:hover .mf-ap-artist__img,
a.mf-ap-artist__link:focus-visible .mf-ap-artist__img {
	transform: scale(1.05);
}

a.mf-ap-artist__link:hover .mf-ap-artist__name,
a.mf-ap-artist__link:focus-visible .mf-ap-artist__name {
	transform: translateY(-6px);
}

a.mf-ap-artist__link:focus-visible {
	outline: 2px solid var(--ap-teal);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

	.mf-ap-btn,
	.mf-ap-btn__icon,
	.mf-ap-artist__img,
	.mf-ap-artist__name {
		transition: none;
	}

	.mf-ap-btn:hover,
	.mf-ap-btn:hover .mf-ap-btn__icon,
	a.mf-ap-artist__link:hover .mf-ap-artist__img,
	a.mf-ap-artist__link:hover .mf-ap-artist__name {
		transform: none;
	}
}


/* ==========================================================================
   RESPONSIVE
   The clamps carry the type from 768 up; these blocks change layout only,
   plus the mobile frame's own type values below 768.
   ========================================================================== */

/* ---- <= 1200: the fixed vw measures stop making sense ------------------- */
@media (max-width: 1200px) {

	.mf-headline--artist,
	.mf-subtext--artist,
	.mf-ap-local__text,
	.mf-ap-quote,
	.mf-ap-partners__title,
	.mf-ap-warranty__text,
	.mf-ap-plugin__lead {
		max-width: 100%;
	}
}

/* ---- <= 1024: every two-column band becomes one column ------------------ */
@media (max-width: 1024px) {

	.mf-hero--artist .mf-hero__content {
		padding: 90px 30px 40px;
	}

	.mf-ap-local__inner,
	.mf-ap-partners__inner,
	.mf-ap-warranty__inner,
	.mf-ap-plugin__body {
		grid-template-columns: minmax(0, 1fr);
		row-gap: clamp(18px, 3vw, 32px);
	}

	.mf-ap-local__aside {
		align-items: flex-start;
	}

	.mf-ap-quote {
		margin-top: clamp(14px, 2.5vw, 22px);
	}

	.mf-ap-local__text,
	.mf-ap-partners__body,
	.mf-ap-warranty__text {
		max-width: 68ch;
	}

	/* Promo image above the feature list once stacked */
	.mf-ap-plugin__media {
		order: -1;
		max-width: 360px;
	}

	.mf-ap-warranty__media {
		max-width: 420px;
	}

	.mf-ap-artists__inner {
		padding-inline: clamp(20px, 5vw, 60px);
	}
}

/* ---- <= 767: mobile. Type values from the 430px mobile frame ------------- */
@media (max-width: 767px) {

	.mf-hero--artist,
	.mf-ap-local,
	.mf-ap-partners,
	.mf-ap-artists,
	.mf-ap-warranty,
	.mf-ap-plugin {
		--ap-gutter: 20px;
		--ap-gap: 24px;

		--fs-h1: 36px;              /* mobile frame 1:3910 */
		--fs-plugin: 30px;
		--fs-quote: 22px;
		--fs-h2: 26px;
		--fs-feature: 20px;
		--fs-name: 18px;
		--fs-body: 18px;
		--fs-lead: 16px;            /* mobile frame 1:3919 */

		--lh-h1: 1.139;             /* 36 / 41 */
		--lh-h2: 1.423;             /* 26 / 37 */
		--lh-quote: 1.364;
		--lh-body: 1.556;
		--lh-body-wide: 1.556;
		--lh-feature-body: 1.5;
		--lh-lead: 1.75;            /* 16 / 28 */
		--lh-plugin-lead: 1.625;
	}

	/* ---- Hero ---------------------------------------------------------- */
	.mf-hero--artist .mf-hero__content {
		padding: 70px 12px 40px;
	}

	.mf-hero--artist .mf-crumb {
		gap: 8px;
		margin-bottom: 14px;
		font-size: 15px;
		line-height: 1.6;
		flex-wrap: wrap;
	}

	.mf-hero--artist .mf-crumb__icon {
		width: 14px;
		height: 14px;
	}

	.mf-subtext--artist {
		margin-top: 12px;
	}

	.mf-ap-hero__actions {
		gap: 10px;
		margin-top: 18px;
	}

	/* ---- Buttons go full width and stop truncating ---------------------- */
	.mf-ap-btn,
	.mf-ap-btn--lg {
		width: 50;
		justify-content: space-between;
		min-height: 48px;
		font-size: 16px;
		white-space: normal;
	}

	.mf-ap-btn__icon,
	.mf-ap-btn--lg .mf-ap-btn__icon {
		width: 40px;
		height: 40px;
	}

	/* ---- Bands --------------------------------------------------------- */
	.mf-ap-local,
	.mf-ap-partners,
	.mf-ap-warranty,
	.mf-ap-plugin {
		padding-block: 30px 36px;
	}

	.mf-ap-local__inner {
		padding-inline: 20px;
	}

	.mf-ap-quote {
		padding-inline: 22px;
	}

	.mf-ap-partners__lead .mf-ap-btn {
		margin-top: 18px;
	}

	.mf-ap-partners__body {
		margin-top: 16px;
	}

	/* ---- Artists: one card across on a phone ---------------------------- */
	.mf-ap-artists {
		padding-block: 30px 36px;
	}

	.mf-ap-artists__title {
		margin-bottom: 18px;
	}

	.mf-ap-artists__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 16px;
	}

	/* ---- Warranty / plugin --------------------------------------------- */
	.mf-ap-warranty__text {
		margin-bottom: 20px;
	}

	.mf-ap-warranty__media,
	.mf-ap-plugin__media {
		max-width: none;
	}

	.mf-ap-plugin__head {
		margin-bottom: 20px;
	}

	.mf-ap-feature {
		grid-template-columns: 14px minmax(0, 1fr);
		column-gap: 12px;
		padding-block: 16px;
	}

	.mf-ap-feature__dot {
		width: 14px;
		height: 14px;
		margin-top: 8px;
	}

	.mf-ap-feature__title {
		line-height: 1.35;
	}
}

/* ---- <= 420: the narrowest phones --------------------------------------- */
@media (max-width: 420px) {

	.mf-hero--artist,
	.mf-ap-local,
	.mf-ap-partners,
	.mf-ap-artists,
	.mf-ap-warranty,
	.mf-ap-plugin {
		--fs-h1: 32px;
		--fs-plugin: 26px;
		--fs-h2: 24px;
		--fs-body: 17px;
		--fs-feature: 19px;
	}
}
/* =========================================================
   BLANK CANVAS PAGE - ADDITIONAL LAYOUT ONLY
   Existing site typography remains unchanged.
   ========================================================= */

.mf-blank-separator-media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 420px;
    background: linear-gradient(135deg, rgba(108, 219, 213, 0.14), rgba(255, 255, 255, 0.9));
    border-radius: 35px;
    overflow: hidden;
}

.mf-blank-separator-media img {
    width: min(78%, 560px);
    height: auto;
    object-fit: contain;
}

.mf-blank-intro-accent {
    margin: 0 0 20px;
}

.mf-blank-video-media {
    overflow: hidden;
    border-radius: 35px;
    min-height: 720px;
}

.mf-blank-video-media .mf-svc-split__video {
    width: 100%;
    height: 100%;
    min-height: 720px;
    border: 0;
    display: block;
}

.mf-blank-benefits {
    padding: 100px 0;
}

.mf-blank-benefits__inner {
    width: min(92%, 1760px);
    margin: 0 auto;
}

.mf-blank-benefits__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    margin-bottom: 50px;
}

.mf-blank-benefits__head > div {
    max-width: 900px;
}

.mf-blank-benefits__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.mf-blank-benefit-card {
    padding: 38px;
    border-radius: 30px;
    border: 1px solid rgba(0, 128, 128, 0.12);
    background: #fff;
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.07);
}

.mf-blank-benefit-card .mf-svc-area__text {
    margin-top: 18px;
}

.mf-blank-benefit-card .mf-svc-area__text p {
    margin: 0;
    line-height: 1.7;
}

.mf-blank-benefit-card--wide {
    grid-column: 1 / -1;
    background: linear-gradient(107deg, #fff 0%, rgba(180, 237, 234, 0.46) 65%, rgba(108, 219, 213, 0.42) 120%);
}

@media (max-width: 1100px) {
    .mf-blank-video-media,
    .mf-blank-video-media .mf-svc-split__video {
        min-height: 560px;
    }

    .mf-blank-benefits {
        padding: 80px 0;
    }
}

@media (max-width: 767px) {
    .mf-blank-separator-media {
        min-height: 260px;
    }

    .mf-blank-video-media,
    .mf-blank-video-media .mf-svc-split__video {
        min-height: 520px;
    }

    .mf-blank-benefits {
        padding: 60px 0;
    }

    .mf-blank-benefits__inner {
        width: 94%;
    }

    .mf-blank-benefits__head {
        display: block;
        margin-bottom: 32px;
    }

    .mf-blank-benefits__grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .mf-blank-benefit-card,
    .mf-blank-benefit-card--wide {
        grid-column: auto;
        padding: 26px;
        border-radius: 24px;
    }
}
/* =========================================================
   BLANK CANVAS BENEFITS - FONT SIZE ONLY
   ========================================================= */

/* Main section heading */
.mf-blank-benefits__head .mf-svc-h2 {
    font-size: 40px !important;
}

/* Section intro/body text */
.mf-blank-benefits__head .mf-svc-body,
.mf-blank-benefits__head .mf-svc-body p {
    font-size: 20px !important;
}

/* Card headings */
.mf-blank-benefit-card .mf-svc-area__title {
    font-size: 28px !important;
}

/* Card paragraph text */
.mf-blank-benefit-card .mf-svc-area__text,
.mf-blank-benefit-card .mf-svc-area__text p,
.mf-blank-benefit-card .mf-svc-area__text li,
.mf-blank-benefit-card .mf-svc-area__text a {
    font-size: 18px !important;
}
/* =========================================================
   BLANK CANVAS - HORIZONTAL VIDEO SECTION
   ========================================================= */

.mf-blank-video-section {
    padding: 90px 0;
    background: #fff;
}

.mf-blank-video-section__inner {
    width: min(92%, 1780px);
    margin: 0 auto;

    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
    gap: 70px;
}


/* VIDEO */
.mf-blank-video-section__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 36px;
    background: #000;
}

.mf-blank-video-section__media iframe {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;
    display: block;
}


/* CONTENT */
.mf-blank-video-section__content {
    min-width: 0;
}

.mf-blank-video-section__content .badge-pill {
    margin-bottom: 28px;
}

.mf-blank-video-section__content .mf-svc-h2 {
    margin-bottom: 28px;
}

.mf-blank-video-section__content .mf-svc-body {
    margin-bottom: 32px;
}

.mf-blank-video-section__content .mf-svc-body p {
    margin-bottom: 20px;
}

.mf-blank-video-section__content .mf-svc-body p:last-child {
    margin-bottom: 0;
}


/* TABLET */
@media (max-width: 1100px) {

    .mf-blank-video-section {
        padding: 70px 0;
    }

    .mf-blank-video-section__inner {
        grid-template-columns: 1fr;
        gap: 45px;
    }

}


/* MOBILE */
@media (max-width: 767px) {

    .mf-blank-video-section {
        padding: 55px 0;
    }

    .mf-blank-video-section__inner {
        width: 94%;
        gap: 32px;
    }

    .mf-blank-video-section__media {
        border-radius: 24px;
        aspect-ratio: 16 / 9;
    }

}
/* Blank Canvas video section typography only */

.mf-blank-video-section__content .mf-svc-h2 {
    font-size: 22px !important;
}

.mf-blank-video-section__content .mf-svc-body,
.mf-blank-video-section__content .mf-svc-body p {
    font-size: 18px !important;
     line-height: 1.6;
}
/* =========================================================
   BLANK CANVAS PAGE - ADDITIONAL LAYOUT ONLY
   Existing site typography and paragraph colours remain unchanged.
   ========================================================= */

/* Intro image / supplied separator */
.mf-blank-intro-media {
    overflow: hidden;
    border-radius: 35px;
}

.mf-blank-intro-media img {
    width: 100%;
    height: 100%;
    min-height: 560px;
    object-fit: cover;
    display: block;
}

.mf-blank-intro-accent {
    margin: 0 0 14px;
}

.mf-blank-divider {
    display: block;
    width: min(100%, 420px);
    height: auto;
    margin: 0 0 22px;
}

/* =========================================================
   HORIZONTAL VIDEO + CONTENT
   ========================================================= */
.mf-blank-video-section {
    padding: 90px 0;
    background: #fff;
}

.mf-blank-video-section__inner {
    width: min(92%, 1760px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    align-items: center;
    gap: 68px;
}

.mf-blank-video-section__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 35px;
    background: #000;
}

.mf-blank-video-section__media iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.mf-blank-video-section__content {
    min-width: 0;
}

.mf-blank-video-section__content .badge-pill {
    margin-bottom: 26px;
}

.mf-blank-video-section__content .mf-svc-h2 {
    margin-bottom: 26px;
    font-size: 18px;
}

.mf-blank-video-section__content .mf-svc-body {
    margin-bottom: 30px;
}

.mf-blank-video-section__content .mf-svc-body p {
    margin: 0 0 18px;
}

.mf-blank-video-section__content .mf-svc-body p:last-child {
    margin-bottom: 0;
}
/* Blank Canvas gallery text size */

.mf-blank-gallery__head .mf-svc-h2 {
    font-size: 22px !important;
}

.mf-blank-gallery__copy,
.mf-blank-gallery__copy p {
    font-size: 18px !important;
    line-height: 1.6;
}

/* =========================================================
   IMAGE DISPLAY / GALLERY
   No typography or paragraph colour overrides.
   ========================================================= */
.mf-blank-gallery {
    padding: 95px 0;
    background: linear-gradient(108deg, #fff 0%, rgba(180, 237, 234, .26) 68%, rgba(108, 219, 213, .26) 125%);
}

.mf-blank-gallery__inner {
    width: min(92%, 1760px);
    margin: 0 auto;
}

.mf-blank-gallery__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr);
    align-items: end;
    gap: 60px;
    margin-bottom: 48px;
}

.mf-blank-gallery__head .badge-pill {
    margin-bottom: 24px;
}

.mf-blank-gallery__copy {
    margin: 0;
}

.mf-blank-gallery__copy p {
    margin: 0;
}

.mf-blank-gallery__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: 260px;
    gap: 22px;
}

.mf-blank-gallery__item {
    grid-column: span 3;
    margin: 0;
    overflow: hidden;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 18px 55px rgba(0, 0, 0, .07);
}

.mf-blank-gallery__item--feature {
    grid-column: span 6;
    grid-row: span 2;
}

.mf-blank-gallery__item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .35s ease;
}

.mf-blank-gallery__item:hover img {
    transform: scale(1.035);
}

/* =========================================================
   BENEFITS
   Existing heading/body classes control typography + colour.
   ========================================================= */
.mf-blank-benefits {
    padding: 100px 0;
}

.mf-blank-benefits__inner {
    width: min(92%, 1760px);
    margin: 0 auto;
}

.mf-blank-benefits__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    margin-bottom: 50px;
}

.mf-blank-benefits__head > div {
    max-width: 900px;
}

.mf-blank-benefits__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.mf-blank-benefit-card {
    padding: 38px;
    border-radius: 30px;
    border: 1px solid rgba(0, 128, 128, .12);
    background: #fff;
    box-shadow: 0 18px 55px rgba(0, 0, 0, .07);
}

.mf-blank-benefit-card .mf-svc-area__text {
    margin-top: 18px;
}

.mf-blank-benefit-card .mf-svc-area__text p {
    margin: 0;
    line-height: 1.7;
}

.mf-blank-benefit-card--wide {
    grid-column: 1 / -1;
    background: linear-gradient(107deg, #fff 0%, rgba(180, 237, 234, .46) 65%, rgba(108, 219, 213, .42) 120%);
}

@media (max-width: 1200px) {
    .mf-blank-gallery__grid {
        grid-auto-rows: 220px;
    }
}

@media (max-width: 1100px) {
    .mf-blank-video-section {
        padding: 75px 0;
    }

    .mf-blank-video-section__inner {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .mf-blank-gallery {
        padding: 80px 0;
    }

    .mf-blank-gallery__head {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .mf-blank-gallery__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 300px;
    }

    .mf-blank-gallery__item,
    .mf-blank-gallery__item--feature {
        grid-column: auto;
        grid-row: auto;
    }

    .mf-blank-benefits {
        padding: 80px 0;
    }
}

@media (max-width: 767px) {
    .mf-blank-intro-media img {
        min-height: 340px;
    }

    .mf-blank-divider {
        width: min(100%, 300px);
    }

    .mf-blank-video-section {
        padding: 55px 0;
    }

    .mf-blank-video-section__inner,
    .mf-blank-gallery__inner,
    .mf-blank-benefits__inner {
        width: 94%;
    }

    .mf-blank-video-section__inner {
        gap: 30px;
    }

    .mf-blank-video-section__media {
        border-radius: 24px;
    }

    .mf-blank-gallery {
        padding: 60px 0;
    }

    .mf-blank-gallery__head {
        margin-bottom: 32px;
    }

    .mf-blank-gallery__grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 280px;
        gap: 16px;
    }

    .mf-blank-gallery__item {
        border-radius: 22px;
    }

    .mf-blank-benefits {
        padding: 60px 0;
    }

    .mf-blank-benefits__head {
        display: block;
        margin-bottom: 32px;
    }

    .mf-blank-benefits__grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .mf-blank-benefit-card,
    .mf-blank-benefit-card--wide {
        grid-column: auto;
        padding: 26px;
        border-radius: 24px;
    }
}

/* =========================================================
   PRINTING SERVICES SYDNEY - FRESH PAGE-SPECIFIC CSS
   ---------------------------------------------------------
   - No font-family overrides
   - Existing Mobile Framing heading/button typography remains
   - Paragraph copy is kept in the same grey theme colour
   - No forced section heights, so there are no large blank areas
   ========================================================= */

.mf-print-page {
    overflow: hidden;
}

.mf-print-shell {
    width: min(92%, 1780px);
    margin-inline: auto;
}

/* Keep page-specific paragraph text in the site's grey tone. */
.mf-print-page .mf-svc-body,
.mf-print-page .mf-svc-body p,
.mf-print-page .mf-svc-area__text,
.mf-print-page .mf-svc-area__text p,
.mf-print-page .mf-faq__lead,
.mf-print-page .mf-faq__a {
    color: rgba(99, 99, 99, .9);
}

.mf-print-page .mf-svc-body p,
.mf-print-page .mf-svc-area__text p {
    line-height: 1.7;
    margin: 0 0 18px;
}

.mf-print-page .mf-svc-body p:last-child,
.mf-print-page .mf-svc-area__text p:last-child {
    margin-bottom: 0;
}

.mf-print-page .mf-svc-body a,
.mf-print-page .mf-svc-area__text a {
    color: #008080;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* =========================================================
   INTRO
   ========================================================= */

.mf-print-intro {
    padding: 72px 0;
    background: #fff;
}

.mf-print-intro__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, .85fr);
    gap: 58px;
    align-items: center;
}

.mf-print-intro__copy {
    min-width: 0;
}

.mf-print-intro__copy .badge-pill {
    margin-bottom: 26px;
}

.mf-print-intro__copy .mf-svc-h2 {
    margin-bottom: 24px;
}

.mf-print-intro__copy .mf-svc-cta {
    display: inline-block;
    margin-top: 28px;
}

.mf-print-intro__media {
    margin: 0;
    width: 100%;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    border-radius: 36px;
    box-shadow: 0 24px 65px rgba(0, 0, 0, .09);
}

.mf-print-intro__media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* =========================================================
   PRIMARY PRINT / STRETCH / FRAME SECTION
   ========================================================= */

.mf-print-primary {
    padding: 76px 0;
    background: linear-gradient(108deg, #fff 2%, #effbfa 55%, #d9f5f3 100%);
}

.mf-print-primary__head {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 58px;
    align-items: start;
    margin-bottom: 38px;
}

.mf-print-primary__head .badge-pill {
    margin-bottom: 24px;
}

.mf-print-primary__cards {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
    gap: 26px;
    align-items: stretch;
}

.mf-print-content-card {
    position: relative;
    padding: 38px 40px;
    border-radius: 32px;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(0, 128, 128, .10);
    box-shadow: 0 18px 50px rgba(0,0,0,.06);
}

.mf-print-content-card--teal {
    background: linear-gradient(145deg, rgba(108,219,213,.20), rgba(255,255,255,.96));
}

.mf-print-content-card__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    min-height: 40px;
    padding: 6px 14px;
    margin-bottom: 20px;
    border: 1px solid rgba(0,128,128,.18);
    border-radius: 999px;
    color: #008080;
    background: rgba(108,219,213,.13);
}

.mf-print-content-card .mf-svc-area__title {
    margin-bottom: 20px;
}

.mf-print-content-card .mf-svc-cta {
    display: inline-block;
    margin-top: 26px;
}

/* =========================================================
   TRUSTED PRINTING SERVICES / 3 CARDS
   ========================================================= */

.mf-print-trusted {
    padding: 76px 0;
    background: #fff;
}

.mf-print-trusted__top {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 58px;
    align-items: start;
    margin-bottom: 36px;
}

.mf-print-trusted__top .badge-pill {
    margin-bottom: 24px;
}

.mf-print-trusted__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.mf-print-mini-card {
    padding: 34px 32px;
    border: 1px solid rgba(0,128,128,.10);
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 16px 46px rgba(0,0,0,.055);
}

.mf-print-mini-card .mf-svc-area__title {
    margin-bottom: 18px;
}

/* =========================================================
   FINE ART PRINTING
   ========================================================= */

.mf-print-fine {
    padding: 76px 0;
    background: #f4fbfa;
}

.mf-print-fine__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 34px;
    align-items: stretch;
}

.mf-print-fine__intro {
    padding: 42px;
    border-radius: 32px;
    background: linear-gradient(145deg, rgba(108,219,213,.16), #fff 72%);
    border: 1px solid rgba(0,128,128,.10);
}

.mf-print-fine__intro .badge-pill {
    margin-bottom: 24px;
}

.mf-print-fine__intro .mf-svc-h2 {
    margin-bottom: 24px;
}

.mf-print-fine__stack {
    display: grid;
    gap: 22px;
}

.mf-print-fine-card {
    padding: 34px 36px;
    border-radius: 30px;
    background: #fff;
    border: 1px solid rgba(0,128,128,.10);
    box-shadow: 0 14px 42px rgba(0,0,0,.05);
}

.mf-print-fine-card .mf-svc-area__title {
    margin-bottom: 16px;
}

/* =========================================================
   VISION / CTA SECTION
   ========================================================= */

.mf-print-vision {
    padding: 76px 0;
    background: #fff;
}

.mf-print-vision__grid {
    display: grid;
    grid-template-columns: minmax(380px, .85fr) minmax(0, 1.15fr);
    gap: 58px;
    align-items: center;
}

.mf-print-vision__media {
    margin: 0;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 36px;
    box-shadow: 0 24px 65px rgba(0,0,0,.08);
}

.mf-print-vision__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mf-print-vision__copy .badge-pill {
    margin-bottom: 24px;
}

.mf-print-vision__copy > .mf-svc-h2 {
    margin-bottom: 24px;
}

.mf-print-vision__points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.mf-print-vision__point {
    padding: 28px;
    border-radius: 26px;
    background: #f7fbfb;
    border: 1px solid rgba(0,128,128,.10);
}

.mf-print-vision__point .mf-svc-area__title {
    margin-bottom: 14px;
}

.mf-print-vision__copy .mf-svc-cta {
    display: inline-block;
    margin-top: 28px;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {
    .mf-print-intro,
    .mf-print-primary,
    .mf-print-trusted,
    .mf-print-fine,
    .mf-print-vision {
        padding: 64px 0;
    }

    .mf-print-intro__grid,
    .mf-print-primary__head,
    .mf-print-trusted__top,
    .mf-print-fine__layout,
    .mf-print-vision__grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .mf-print-primary__cards {
        grid-template-columns: 1fr 1fr;
    }

    .mf-print-trusted__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mf-print-intro__media,
    .mf-print-vision__media {
        aspect-ratio: 16 / 9;
        max-height: 600px;
    }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
    .mf-print-shell {
        width: 94%;
    }

    .mf-print-intro,
    .mf-print-primary,
    .mf-print-trusted,
    .mf-print-fine,
    .mf-print-vision {
        padding: 52px 0;
    }

    .mf-print-intro__grid,
    .mf-print-primary__head,
    .mf-print-trusted__top,
    .mf-print-fine__layout,
    .mf-print-vision__grid {
        gap: 28px;
    }

    .mf-print-primary__cards,
    .mf-print-trusted__grid,
    .mf-print-vision__points {
        grid-template-columns: 1fr;
    }

    .mf-print-content-card,
    .mf-print-mini-card,
    .mf-print-fine__intro,
    .mf-print-fine-card,
    .mf-print-vision__point {
        padding: 26px 24px;
        border-radius: 24px;
    }

    .mf-print-intro__media,
    .mf-print-vision__media {
        border-radius: 24px;
        aspect-ratio: 4 / 3;
    }
}
/* =========================================================
   PRINTING SERVICES - SLIGHTLY SMALLER TYPOGRAPHY
   ========================================================= */

/* Main section headings */
.mf-print-intro .mf-svc-h2,
.mf-print-primary .mf-svc-h2,
.mf-print-trusted .mf-svc-h2,
.mf-print-fine .mf-svc-h2,
.mf-print-vision .mf-svc-h2 {
    font-size: 38px !important;
}

/* General body text */
.mf-print-intro .mf-svc-body,
.mf-print-intro .mf-svc-body p,

.mf-print-primary .mf-svc-body,
.mf-print-primary .mf-svc-body p,
.mf-print-primary .mf-svc-body li,

.mf-print-trusted .mf-svc-body,
.mf-print-trusted .mf-svc-body p,
.mf-print-trusted .mf-svc-body li,

.mf-print-fine .mf-svc-body,
.mf-print-fine .mf-svc-body p,
.mf-print-fine .mf-svc-body li,

.mf-print-vision .mf-svc-body,
.mf-print-vision .mf-svc-body p,
.mf-print-vision .mf-svc-body li {
    font-size: 18px !important;
}

/* Card titles */
.mf-print-content-card .mf-svc-area__title,
.mf-print-mini-card .mf-svc-area__title,
.mf-print-fine-card .mf-svc-area__title {
    font-size: 27px !important;
}

/* Vision card titles */
.mf-print-vision__point .mf-svc-area__title {
    font-size: 25px !important;
}

/* Card body text */
.mf-print-content-card .mf-svc-area__text,
.mf-print-content-card .mf-svc-area__text p,

.mf-print-mini-card .mf-svc-area__text,
.mf-print-mini-card .mf-svc-area__text p,

.mf-print-fine-card .mf-svc-area__text,
.mf-print-fine-card .mf-svc-area__text p,

.mf-print-vision__point .mf-svc-area__text,
.mf-print-vision__point .mf-svc-area__text p {
    font-size: 18px !important;
}

@media (max-width: 767px) {

    .mf-print-intro .mf-svc-h2,
    .mf-print-primary .mf-svc-h2,
    .mf-print-trusted .mf-svc-h2,
    .mf-print-fine .mf-svc-h2,
    .mf-print-vision .mf-svc-h2 {
        font-size: 30px !important;
    }

    .mf-print-intro .mf-svc-body,
    .mf-print-intro .mf-svc-body p,
    .mf-print-primary .mf-svc-body,
    .mf-print-primary .mf-svc-body p,
    .mf-print-trusted .mf-svc-body,
    .mf-print-trusted .mf-svc-body p,
    .mf-print-fine .mf-svc-body,
    .mf-print-fine .mf-svc-body p,
    .mf-print-vision .mf-svc-body,
    .mf-print-vision .mf-svc-body p {
        font-size: 16px !important;
    }

    .mf-print-content-card .mf-svc-area__title,
    .mf-print-mini-card .mf-svc-area__title,
    .mf-print-fine-card .mf-svc-area__title,
    .mf-print-vision__point .mf-svc-area__title {
        font-size: 23px !important;
    }

    .mf-print-content-card .mf-svc-area__text,
    .mf-print-content-card .mf-svc-area__text p,
    .mf-print-mini-card .mf-svc-area__text,
    .mf-print-mini-card .mf-svc-area__text p,
    .mf-print-fine-card .mf-svc-area__text,
    .mf-print-fine-card .mf-svc-area__text p,
    .mf-print-vision__point .mf-svc-area__text,
    .mf-print-vision__point .mf-svc-area__text p {
        font-size: 17px !important;
    }
}

/* ==========================================================================
   ARTIST CARD HOVER — the newly added CSS, nothing else

   Behaviour, read frame by frame from your screen recording:
     at rest   image, gradient wash, teal name at bottom-left
     on hover  the wash deepens, the bio opens, and the name is pushed upward
               by it. The card itself never changes size.

   The name and bio share ONE bottom-anchored block. That is the whole trick —
   the name is not moved by a rule of its own, it rides up as the bio grows.

   IF YOU ALREADY PASTED THE EARLIER artist-portal.css:
   this REPLACES the old `.mf-ap-artist__name` rule (it used to be
   position:absolute with its own left/right/bottom). Delete that one first,
   or these insets will be applied twice.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. The bottom-anchored text block
   Insets are the design's own — 5.11% left, 3.52% bottom (node 126:4487).
   -------------------------------------------------------------------------- */

.mf-ap-artist__panel {
	position: absolute;
	left: 5.11%;
	right: 5%;
	bottom: 3.52%;
	display: flex;
	flex-direction: column;
}

/* 126:4487 — Arial 26 / 57 / -0.78, #6cdbd5.

   position:static and inset:auto are LOAD-BEARING. The earlier version of this
   rule had `position: absolute; left: 5.11%; right: 5%; bottom: 3.52%`. If that
   old rule is still anywhere in style.css, simply restating font and colour here
   does NOT undo its positioning — `position` and the insets keep cascading in,
   the name stays pinned to the bottom of the card, and the bio slides up behind
   it. Resetting them explicitly makes this correct whether or not the old rule
   was deleted. */
.mf-ap-artist__name {
	position: static;
	inset: auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: var(--fs-name);
	line-height: 1.5;
	letter-spacing: var(--ap-tracking);
	color: var(--ap-teal);
}


/* --------------------------------------------------------------------------
   2. The bio, closed at rest

   grid-template-rows animates 0fr -> 1fr, so the bio opens to whatever height
   the real copy needs. A max-height guess would either clip a long bio or ease
   at the wrong speed on a short one.
   -------------------------------------------------------------------------- */

.mf-ap-artist__bio {
	display: grid;
	grid-template-rows: 0fr;
	margin-top: 0;
	opacity: 0;
	color: #fff;
	font-size: var(--fs-lead);
	line-height: 1.545;                /* 22 / 34 */
	letter-spacing: var(--ap-tracking);
	transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1),
	            opacity 0.3s ease,
	            margin-top 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* The single inner wrapper is what gets clipped while the row collapses.
   min-height:0 is required — without it the grid item refuses to go below its
   content height and nothing animates at all. */
.mf-ap-artist__bio-inner {
	display: block;
	min-height: 0;
	overflow: hidden;
}

.mf-ap-artist__para {
	display: block;
}

.mf-ap-artist__para + .mf-ap-artist__para {
	margin-top: 0.5em;
}


/* --------------------------------------------------------------------------
   3. The hover itself

   Hung off .mf-ap-artist (the <li>) rather than the link, so it works whether
   the card renders as an <a> (artist has a URL) or a <div> (no URL).
   :focus-within gives keyboard users the same reveal.
   -------------------------------------------------------------------------- */

.mf-ap-artist:hover .mf-ap-artist__img,
.mf-ap-artist:focus-within .mf-ap-artist__img {
	transform: scale(1.05);
}

/* The wash lifts higher up the card so the longer text block stays legible
   against the photo. At rest it is 126:4486's original gradient. */
.mf-ap-artist:hover .mf-ap-artist__wash,
.mf-ap-artist:focus-within .mf-ap-artist__wash {
	background-image: linear-gradient(178.48deg,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.55) 34%,
		rgba(0, 0, 0, 0.88) 62%,
		rgb(0, 0, 0) 100%);
}

.mf-ap-artist:hover .mf-ap-artist__bio,
.mf-ap-artist:focus-within .mf-ap-artist__bio {
	grid-template-rows: 1fr;
	margin-top: 0.6em;
	opacity: 1;
}

.mf-ap-artist__link:focus-visible {
	outline: 2px solid var(--ap-teal);
	outline-offset: 3px;
}


/* --------------------------------------------------------------------------
   4. Touch devices — no hover exists, so the bio is simply always open
   -------------------------------------------------------------------------- */

@media (hover: none) {

	.mf-ap-artist__bio {
		grid-template-rows: 1fr;
		margin-top: 0.6em;
		opacity: 1;
	}

	.mf-ap-artist__wash {
		background-image: linear-gradient(178.48deg,
			rgba(0, 0, 0, 0) 0%,
			rgba(0, 0, 0, 0.55) 34%,
			rgba(0, 0, 0, 0.88) 62%,
			rgb(0, 0, 0) 100%);
	}
}


/* --------------------------------------------------------------------------
   5. Reduced motion — the bio still reveals, it just does not animate
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.mf-ap-artist__img,
	.mf-ap-artist__bio {
		transition: none;
	}

	.mf-ap-artist:hover .mf-ap-artist__img {
		transform: none;
	}
}
.mf-ap-warranty__media video, .mf-ap-plugin__media video {
    display: block;
    width: 100%;
    height: auto;
    border: 3px solid #fff;
    border-radius: 40px;
}
/* ========================================================================
   PICTURE HANGING SERVICE - COMPLETE PAGE-SPECIFIC CSS
   Add this below the existing Mobile Framing theme CSS.
   Existing site typography remains in control except where a larger service
   card title size is intentionally requested for the Installation Services.
   ======================================================================== */

.mf-hang-page {
    overflow: hidden;
}

.mf-hang-shell {
    width: min(92%, 1780px);
    margin-inline: auto;
}

/* ------------------------------------------------------------------------
   COPY COLOUR / READABILITY
   Keep paragraph copy in the same grey used on the Canvas Stretching page.
   ------------------------------------------------------------------------ */
.mf-hang-page .mf-svc-body,
.mf-hang-page .mf-svc-area__text,
.mf-hang-page .mf-svc-panel__text,
.mf-hang-page .mf-hang-checklist,
.mf-hang-page .mf-hang-detail-list {
    color: rgba(99, 99, 99, .9);
}

.mf-hang-page .mf-svc-body p,
.mf-hang-page .mf-svc-area__text p,
.mf-hang-page .mf-svc-panel__text p {
    color: rgba(99, 99, 99, .9);
    line-height: 1.7;
}

.mf-hang-page .mf-svc-body p + p,
.mf-hang-page .mf-svc-area__text p + p,
.mf-hang-page .mf-svc-panel__text p + p {
    margin-top: 18px;
}

.mf-hang-page .mf-svc-body a,
.mf-hang-page .mf-svc-area__text a,
.mf-hang-page .mf-svc-panel__text a,
.mf-hang-page .mf-hang-detail-list a {
    color: #008080;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ------------------------------------------------------------------------
   1. FIRST SECTION AFTER HERO
   Uses the existing Canvas Stretching .mf-svc-panel component.
   Only the video-specific behaviour is added here.
   ------------------------------------------------------------------------ */
.mf-hang-intro .mf-svc-panel__grid {
    align-items: stretch;
}

.mf-hang-intro .mf-svc-panel__card,
.mf-hang-intro .mf-svc-panel__media {
    min-height: 590px;
}

.mf-hang-intro__video {
    position: relative;
    overflow: hidden;
    background: #000;
}

.mf-hang-intro__video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ------------------------------------------------------------------------
   SHARED CONTENT / VIDEO SECTIONS
   ------------------------------------------------------------------------ */
.mf-hang-why,
.mf-hang-professional,
.mf-hang-style {
    padding: 90px 0;
}

.mf-hang-why__grid,
.mf-hang-professional__grid,
.mf-hang-style__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 90px);
    align-items: center;
}

.mf-hang-why__copy,
.mf-hang-professional__copy,
.mf-hang-style__copy {
    min-width: 0;
}

.mf-hang-why__copy .badge-pill,
.mf-hang-professional__copy .badge-pill,
.mf-hang-style__copy .badge-pill {
    margin-bottom: 26px;
}

.mf-hang-why__copy .mf-svc-h2,
.mf-hang-professional__copy .mf-svc-h2,
.mf-hang-style__copy .mf-svc-h2 {
    margin-bottom: 26px;
}

.mf-hang-why__copy .mf-svc-body,
.mf-hang-professional__copy .mf-svc-body,
.mf-hang-style__copy .mf-svc-body {
    margin-bottom: 30px;
}

/* Standard video - used only where a landscape ratio is wanted. */
.mf-hang-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 36px;
    background: #000;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .12);
}

.mf-hang-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Requested vertical video treatment for:
   - Why Choose Mobile Framing
   - Professional Installation
*/
.mf-hang-video--portrait {
    width: min(100%, 455px);
    aspect-ratio: 9 / 16;
    justify-self: center;
    border-radius: 34px;
}

/* ------------------------------------------------------------------------
   PROJECT GALLERY
   CSS columns remove awkward blank gaps between mixed image ratios.
   ------------------------------------------------------------------------ */
.mf-hang-gallery {
    padding: 90px 0;
    background: linear-gradient(110deg, #ffffff 0%, #f3fbfb 48%, #dcf6f4 100%);
}

.mf-hang-gallery__head,
.mf-hang-values__head,
.mf-hang-cities__intro {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 60px;
    align-items: end;
    margin-bottom: 52px;
}

.mf-hang-gallery__head .badge-pill,
.mf-hang-values__head .badge-pill,
.mf-hang-cities__intro .badge-pill {
    margin-bottom: 24px;
}

.mf-hang-gallery__masonry {
    column-count: 4;
    column-gap: 20px;
}

.mf-hang-gallery__masonry figure {
    margin: 0 0 20px;
    break-inside: avoid;
    overflow: hidden;
    border-radius: 28px;
    background: #eef7f7;
}

.mf-hang-gallery__masonry img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform .35s ease;
}

.mf-hang-gallery__masonry figure:hover img {
    transform: scale(1.025);
}

/* ------------------------------------------------------------------------
   WHY CHOOSE / BOOKING
   ------------------------------------------------------------------------ */
.mf-hang-why {
    background: linear-gradient(107deg, #ffffff 2%, #e3f8f7 59%, #a9ebe7 120%);
}

.mf-hang-booking,
.mf-hang-more {
    margin: 32px 0;
    padding: 28px 30px;
    border: 1px solid rgba(0, 128, 128, .14);
    border-radius: 28px;
    background: rgba(255, 255, 255, .72);
}

.mf-hang-booking .mf-svc-area__title,
.mf-hang-more .mf-svc-area__title {
    margin-bottom: 14px;
}

/* ------------------------------------------------------------------------
   INSTALLATION SERVICES
   Requested changes:
   - shorter cards
   - bigger service title text
   - less empty space inside each card
   ------------------------------------------------------------------------ */
.mf-hang-services {
    padding: 90px 0;
    background: #fff;
}

.mf-hang-services__head {
    max-width: 1180px;
    margin-bottom: 42px;
}

.mf-hang-services__head .badge-pill {
    margin-bottom: 24px;
}

.mf-hang-services__head .mf-svc-h2 {
    margin-bottom: 22px;
}

.mf-hang-services__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.mf-hang-service-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    min-height: 116px;
    padding: 20px 22px;
    border: 1px solid rgba(0, 128, 128, .12);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 14px 38px rgba(0, 0, 0, .05);
}

.mf-hang-service-card > span {
    flex: 0 0 46px;
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-radius: 50%;
    background: #dff8f7;
    color: #008080;
}

.mf-hang-service-card .mf-svc-area__title {
    margin: 0;
    font-size: clamp(22px, 1.45vw, 28px);
    line-height: 1.24;
}

/* ------------------------------------------------------------------------
   PROFESSIONAL INSTALLATION
   ------------------------------------------------------------------------ */
.mf-hang-professional {
    background: #f6fbfb;
}

.mf-hang-checklist {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
}

.mf-hang-checklist li {
    position: relative;
    padding: 0 0 14px 30px;
    line-height: 1.6;
}

.mf-hang-checklist li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #008080;
}

/* ------------------------------------------------------------------------
   SERVICE VALUE CARDS
   ------------------------------------------------------------------------ */
.mf-hang-values {
    padding: 90px 0;
    background: #fff;
}

.mf-hang-values__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.mf-hang-value-card {
    position: relative;
    padding: 42px;
    overflow: hidden;
    border: 1px solid rgba(0, 128, 128, .11);
    border-radius: 34px;
    background: #fff;
    box-shadow: 0 20px 55px rgba(0, 0, 0, .06);
}

.mf-hang-value-card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 5px;
    background: #6cdbd5;
}

.mf-hang-value-card .mf-svc-area__title {
    margin-bottom: 18px;
}

/* ------------------------------------------------------------------------
   WHAT'S INCLUDED / WHO WE SERVE
   ------------------------------------------------------------------------ */
.mf-hang-included {
    padding: 90px 0;
    background: linear-gradient(108deg, #ffffff 2%, #e9f9f8 63%, #c2efec 120%);
}

.mf-hang-included__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    align-items: stretch;
}

.mf-hang-included__panel {
    padding: 42px;
    border-radius: 36px;
    background: #fff;
    border: 1px solid rgba(0, 128, 128, .10);
}

.mf-hang-included__panel--teal {
    background: rgba(108, 219, 213, .14);
}

.mf-hang-included__panel .badge-pill {
    margin-bottom: 24px;
}

.mf-hang-included__panel .mf-svc-h2 {
    margin-bottom: 26px;
}

.mf-hang-detail-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}

.mf-hang-detail-list li {
    padding: 20px 0;
    border-bottom: 1px solid rgba(0, 128, 128, .12);
}

.mf-hang-detail-list li:first-child {
    padding-top: 0;
}

.mf-hang-detail-list strong,
.mf-hang-detail-list span {
    display: block;
}

.mf-hang-detail-list strong {
    color: #008080;
    margin-bottom: 6px;
}

.mf-hang-detail-list span {
    line-height: 1.6;
}

/* ------------------------------------------------------------------------
   STYLE / IMAGE SECTION
   ------------------------------------------------------------------------ */
.mf-hang-style__media {
    width: 100%;
    overflow: hidden;
    border-radius: 36px;
    background: #eef7f7;
}

.mf-hang-style__media img {
    width: 100%;
    height: auto;
    display: block;
}

/* ------------------------------------------------------------------------
   CITY CONTENT
   ------------------------------------------------------------------------ */
.mf-hang-cities {
    padding: 90px 0;
    background: #f5fbfb;
}

.mf-hang-cities__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.mf-hang-city-card {
    padding: 34px;
    border-radius: 30px;
    background: #fff;
    border: 1px solid rgba(0, 128, 128, .10);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .05);
}

.mf-hang-city-card .mf-svc-area__title {
    margin-bottom: 18px;
}

.mf-hang-brisbane {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) auto;
    gap: 36px;
    align-items: center;
    margin-top: 30px;
    padding: 38px 42px;
    border-radius: 32px;
    background: linear-gradient(105deg, #ffffff 0%, #dcf7f5 100%);
    border: 1px solid rgba(0, 128, 128, .12);
}

.mf-hang-brisbane .badge-pill {
    margin-bottom: 20px;
}

.mf-hang-brisbane .mf-svc-h2 {
    margin-bottom: 18px;
}

/* ------------------------------------------------------------------------
   RESPONSIVE - LARGE TABLET
   ------------------------------------------------------------------------ */
@media (max-width: 1200px) {
    .mf-hang-gallery__masonry {
        column-count: 3;
    }

    .mf-hang-services__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mf-hang-cities__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mf-hang-city-card:last-child {
        grid-column: 1 / -1;
    }

    .mf-hang-brisbane {
        grid-template-columns: 1fr 1fr;
    }

    .mf-hang-brisbane .mf-svc-cta {
        grid-column: 1 / -1;
    }
}

/* ------------------------------------------------------------------------
   RESPONSIVE - TABLET
   ------------------------------------------------------------------------ */
@media (max-width: 1024px) {
    .mf-hang-gallery,
    .mf-hang-why,
    .mf-hang-services,
    .mf-hang-professional,
    .mf-hang-values,
    .mf-hang-included,
    .mf-hang-style,
    .mf-hang-cities {
        padding: 72px 0;
    }

    .mf-hang-intro .mf-svc-panel__card,
    .mf-hang-intro .mf-svc-panel__media {
        min-height: 0;
    }

    .mf-hang-intro__video {
        min-height: 520px;
    }

    .mf-hang-why__grid,
    .mf-hang-professional__grid,
    .mf-hang-style__grid {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .mf-hang-professional__copy {
        order: -1;
    }

    .mf-hang-video--portrait {
        width: min(100%, 420px);
    }

    .mf-hang-gallery__head,
    .mf-hang-values__head,
    .mf-hang-cities__intro {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-bottom: 40px;
    }

    .mf-hang-services__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mf-hang-values__grid,
    .mf-hang-included__grid {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------------------
   RESPONSIVE - MOBILE
   ------------------------------------------------------------------------ */
@media (max-width: 767px) {
    .mf-hang-shell {
        width: 94%;
    }

    .mf-hang-gallery,
    .mf-hang-why,
    .mf-hang-services,
    .mf-hang-professional,
    .mf-hang-values,
    .mf-hang-included,
    .mf-hang-style,
    .mf-hang-cities {
        padding: 54px 0;
    }

    .mf-hang-intro__video {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .mf-hang-intro__video iframe {
        position: absolute;
    }

    .mf-hang-video,
    .mf-hang-style__media {
        border-radius: 24px;
    }

    .mf-hang-video--portrait {
        width: min(100%, 390px);
        border-radius: 26px;
    }

    .mf-hang-gallery__masonry {
        column-count: 2;
        column-gap: 12px;
    }

    .mf-hang-gallery__masonry figure {
        margin-bottom: 12px;
        border-radius: 18px;
    }

    .mf-hang-services__grid,
    .mf-hang-cities__grid {
        grid-template-columns: 1fr;
    }

    .mf-hang-service-card {
        min-height: 96px;
        padding: 18px 20px;
        border-radius: 22px;
    }

    .mf-hang-service-card > span {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
    }

    .mf-hang-service-card .mf-svc-area__title {
        font-size: 23px;
    }

    .mf-hang-city-card:last-child {
        grid-column: auto;
    }

    .mf-hang-value-card,
    .mf-hang-included__panel,
    .mf-hang-city-card {
        padding: 28px 24px;
        border-radius: 26px;
    }

    .mf-hang-booking,
    .mf-hang-more {
        padding: 24px;
        border-radius: 24px;
    }

    .mf-hang-brisbane {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 28px 24px;
        border-radius: 26px;
    }

    .mf-hang-brisbane .mf-svc-cta {
        grid-column: auto;
    }
}

@media (max-width: 520px) {
    .mf-hang-gallery__masonry {
        column-count: 1;
    }
}
/* =========================================================
   PICTURE HANGING - SLIGHTLY LARGER FONT SIZES
   ========================================================= */

/* Main section titles */
.mf-hang-page .mf-svc-h2,

.mf-hang-page .mf-svc-area__title {
    font-size: 22px !important;
}

/* General paragraph/body text */
.mf-hang-page .mf-svc-body,
.mf-hang-page .mf-svc-body p,
.mf-hang-page .mf-svc-panel__text,
.mf-hang-page .mf-svc-panel__text p {
    font-size: 18px !important;
}

/* Card body text */
.mf-hang-page .mf-svc-area__text,
.mf-hang-page .mf-svc-area__text p,
.mf-hang-page .mf-svc-area__text a {
    font-size: 17px !important;
}

/* Checklist + detail/list content */
.mf-hang-page .mf-hang-checklist,
.mf-hang-page .mf-hang-checklist li,
.mf-hang-page .mf-hang-detail-list,
.mf-hang-page .mf-hang-detail-list span {
    font-size: 17px !important;
}

/* Detail headings */
.mf-hang-page .mf-hang-detail-list strong {
    font-size: 18px !important;
        font-weight: 500;
}

/* Installation service card titles */
.mf-hang-page .mf-hang-service-card .mf-svc-area__title {
    font-size: 22px !important;
}
/* =========================================================
   ART COURIERS SYDNEY - PAGE-SPECIFIC STYLES
   Reuses the existing Mobile Framing typography system.
   ========================================================= */

.mf-courier-page .mf-svc-body,
.mf-courier-page .mf-svc-area__text,
.mf-courier-page .mf-svc-panel__text,
.mf-courier-page .mf-faq__a {
    color: rgba(99, 99, 99, .9);
}

.mf-courier-page a:not(.quote-btn):not(.mf-courier-delivery-nav__item):not(.mf-courier-text-link) {
    color: #008080;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* Delivery shortcut strip */
.mf-courier-delivery-nav {
    padding: 34px 0;
    background: #fff;
}

.mf-courier-delivery-nav__inner {
    width: min(92%, 1780px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.mf-courier-delivery-nav__item {
    min-height: 92px;
    padding: 20px 28px;
    border: 1px solid rgba(0, 128, 128, .14);
    border-radius: 28px;
    background: #f8ffff;
    display: flex;
    align-items: center;
    gap: 18px;
    color: #008080;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.mf-courier-delivery-nav__item:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .08);
    background: #fff;
}

.mf-courier-delivery-nav__number {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 50%;
    background: #6cdbd5;
    color: #000;
    display: grid;
    place-items: center;
}

/* Intro image */
.mf-courier-intro__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 3 image gallery */
.mf-courier-gallery {
    padding: 95px 0;
    background: #fff;
}

.mf-courier-gallery__inner {
    width: min(92%, 1780px);
    margin: 0 auto;
}

.mf-courier-gallery__head {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 70px;
    align-items: end;
    margin-bottom: 48px;
}

.mf-courier-gallery__head .badge-pill {
    margin-bottom: 22px;
}

.mf-courier-gallery__lead {
    margin: 0;
}

.mf-courier-gallery__grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr .8fr;
    gap: 22px;
    align-items: stretch;
}

.mf-courier-gallery__item {
    margin: 0;
    overflow: hidden;
    border-radius: 34px;
    background: #eefafa;
    min-height: 460px;
}

.mf-courier-gallery__item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .5s ease;
}

.mf-courier-gallery__item:hover img {
    transform: scale(1.035);
}

.mf-courier-gallery__item--portrait {
    min-height: 520px;
}

/* Trust section */
.mf-courier-trust {
    padding: 90px 0;
    background: linear-gradient(108.86deg, #fff 2.45%, #dff8f6 63.88%, #b4edea 123%);
}

.mf-courier-trust__inner {
    width: min(92%, 1780px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 80px;
    align-items: start;
}

.mf-courier-trust__heading .badge-pill {
    margin-bottom: 24px;
}

.mf-courier-trust__content p + p {
    margin-top: 20px;
}

/* Delivery service cards */
.mf-courier-services {
    padding: 95px 0;
    background: #f7fbfb;
}

.mf-courier-services__inner {
    width: min(92%, 1780px);
    margin: 0 auto;
}

.mf-courier-services__head {
    max-width: 1040px;
    margin-bottom: 44px;
}

.mf-courier-services__head .badge-pill {
    margin-bottom: 22px;
}

.mf-courier-services__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.mf-courier-service-card {
    padding: 38px;
    border-radius: 34px;
    background: #fff;
    border: 1px solid rgba(0, 128, 128, .12);
    box-shadow: 0 16px 48px rgba(0, 0, 0, .05);
    display: flex;
    flex-direction: column;
}

.mf-courier-service-card--featured {
    background: #6cdbd5;
}

.mf-courier-service-card--featured .mf-svc-area__title {
    color: #fff;
}

.mf-courier-service-card--featured .mf-svc-area__text {
    color: rgba(90, 90, 90, .95);
}

.mf-courier-service-card__eyebrow {
    display: inline-flex;
    align-self: flex-start;
    padding: 8px 16px;
    margin-bottom: 24px;
    border-radius: 999px;
    background: rgba(0, 128, 128, .09);
    color: #008080;
}

.mf-courier-service-card--featured .mf-courier-service-card__eyebrow {
    background: rgba(255, 255, 255, .55);
    color: #006f6f;
}

.mf-courier-service-card .mf-svc-area__title {
    margin-bottom: 18px;
}

.mf-courier-service-card .mf-svc-area__text {
    flex: 1;
}

.mf-courier-service-card .mf-svc-area__text p + p {
    margin-top: 18px;
}

.mf-courier-text-link {
    display: inline-flex;
    align-items: center;
    margin-top: 28px;
    color: #008080;
    text-decoration: none;
}

.mf-courier-text-link::after {
    content: "\2197";
    margin-left: 10px;
}

/* Sydney detail */
.mf-courier-sydney .mf-courier-subheading {
    margin: 28px 0 12px;
    color: #008080;
}

/* Why choose cards */
.mf-courier-reasons {
    padding: 95px 0;
    background: #fff;
}

.mf-courier-reasons__inner {
    width: min(92%, 1780px);
    margin: 0 auto;
}

.mf-courier-reasons__head {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 70px;
    margin-bottom: 48px;
}

.mf-courier-reasons__head .badge-pill {
    margin-bottom: 22px;
}

.mf-courier-reasons__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.mf-courier-reason {
    padding: 32px;
    border-radius: 30px;
    background: #f8ffff;
    border: 1px solid rgba(0, 128, 128, .12);
}

.mf-courier-reason:nth-child(4),
.mf-courier-reason:nth-child(5) {
    grid-column: span 1;
}

.mf-courier-reason__number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin-bottom: 22px;
    background: #6cdbd5;
    color: #000;
    display: grid;
    place-items: center;
}

.mf-courier-reason .mf-svc-area__title {
    margin-bottom: 14px;
}

/* Ready to book */
.mf-courier-book {
    padding: 90px 0;
    background: linear-gradient(110deg, #ffffff 0%, #e8fbfa 58%, #b4edea 100%);
}

.mf-courier-book__inner {
    width: min(92%, 1780px);
    margin: 0 auto;
    padding: 48px 54px;
    border-radius: 36px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(255, 255, 255, .9);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 50px;
    align-items: center;
}

.mf-courier-book__inner .badge-pill {
    margin-bottom: 22px;
}

.mf-courier-book__action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Keep content heights natural */
.mf-courier-page section {
    height: auto;
}

/* Large tablet */
@media (max-width: 1200px) {
    .mf-courier-gallery__grid {
        grid-template-columns: 1.1fr .9fr;
    }

    .mf-courier-gallery__item--wide {
        grid-row: span 2;
    }

    .mf-courier-gallery__item,
    .mf-courier-gallery__item--portrait {
        min-height: 360px;
    }

    .mf-courier-services__grid,
    .mf-courier-reasons__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Tablet */
@media (max-width: 900px) {
    .mf-courier-delivery-nav__inner,
    .mf-courier-gallery__head,
    .mf-courier-trust__inner,
    .mf-courier-reasons__head,
    .mf-courier-book__inner {
        grid-template-columns: 1fr;
    }

    .mf-courier-delivery-nav__inner {
        gap: 12px;
    }

    .mf-courier-delivery-nav__item {
        min-height: 78px;
    }

    .mf-courier-gallery,
    .mf-courier-trust,
    .mf-courier-services,
    .mf-courier-reasons,
    .mf-courier-book {
        padding: 70px 0;
    }

    .mf-courier-gallery__head,
    .mf-courier-trust__inner,
    .mf-courier-reasons__head {
        gap: 28px;
    }

    .mf-courier-book__action {
        justify-content: flex-start;
    }
}

/* Mobile */
@media (max-width: 680px) {
    .mf-courier-delivery-nav {
        padding: 24px 0;
    }

    .mf-courier-delivery-nav__inner,
    .mf-courier-gallery__grid,
    .mf-courier-services__grid,
    .mf-courier-reasons__grid {
        grid-template-columns: 1fr;
    }

    .mf-courier-gallery,
    .mf-courier-trust,
    .mf-courier-services,
    .mf-courier-reasons,
    .mf-courier-book {
        padding: 55px 0;
    }

    .mf-courier-gallery__item,
    .mf-courier-gallery__item--portrait,
    .mf-courier-gallery__item--wide {
        min-height: 0;
        aspect-ratio: 4 / 3;
    }

    .mf-courier-gallery__item--portrait {
        aspect-ratio: 4 / 5;
    }

    .mf-courier-service-card,
    .mf-courier-reason {
        padding: 26px 24px;
        border-radius: 26px;
    }

    .mf-courier-book__inner {
        width: 94%;
        padding: 32px 24px;
        border-radius: 28px;
        gap: 28px;
    }
}
/* =========================================================
   ART COURIER - TEXT SIZE INCREASE
   ========================================================= */

/* Main section headings */
.mf-courier-page .mf-svc-h2,
.mf-courier-page .mf-svc-area__title {
    font-size: 22px !important;
}

/* Main body text */
.mf-courier-page .mf-svc-body,
.mf-courier-page .mf-svc-body p,
.mf-courier-page .mf-svc-panel__text,
.mf-courier-page .mf-svc-panel__text p {
    font-size: 18px !important;
    line-height: 1.7;
}

/* Card body text */
.mf-courier-page .mf-svc-area__text,
.mf-courier-page .mf-svc-area__text p,
.mf-courier-page .mf-svc-area__text li {
    font-size: 18px !important;
    line-height: 1.7;
}

/* Delivery shortcut text */
.mf-courier-delivery-nav__item {
    font-size: 18px !important;
}

/* Service card title */
.mf-courier-service-card .mf-svc-area__title {
    font-size: 22px !important;
}

/* Service card body */
.mf-courier-service-card .mf-svc-area__text,
.mf-courier-service-card .mf-svc-area__text p {
    font-size: 18px !important;
}

/* Why choose card title */
.mf-courier-reason .mf-svc-area__title {
    font-size: 22px !important;
}

/* Why choose card body */
.mf-courier-reason .mf-svc-area__text,
.mf-courier-reason .mf-svc-area__text p {
    font-size: 17px !important;
}

/* Gallery intro */
.mf-courier-gallery__lead {
    font-size: 18px !important;
    line-height: 1.7;
}

/* Trust section paragraphs */
.mf-courier-trust__content,
.mf-courier-trust__content p {
    font-size: 18px !important;
    line-height: 1.7;
}

/* Small sub headings */
.mf-courier-subheading {
    font-size: 20px !important;
}

/* FAQ questions */

/* FAQ answers */
/* .mf-courier-page .mf-faq__a {
    font-size: 17px !important;
    line-height: 1.7;
} */

/* Text links */
.mf-courier-text-link {
    font-size: 17px !important;
}
.mf-ap-plugin__inner {
	display: grid;
	/* 871 : 405 : 460, straight off the node x-positions above */
	grid-template-columns: minmax(0, 871fr) minmax(0, 405fr) minmax(0, 460fr);
	column-gap: 0;
	row-gap: clamp(20px, 2.396vw, 46px);
	align-items: start;
	width: 100%;
	max-width: 1920px;
	margin-inline: auto;
	padding-inline: var(--ap-gutter);
}
 
/* Heading + lead — column 1, row 1 */
.mf-ap-plugin__intro {
	grid-column: 1;
	grid-row: 1;
}
 
/* The button — column 2, row 1. Left-aligned in its column, which is what
   lands it on x963. It sits 28px below the heading's cap line (4272 vs 4244). */
.mf-ap-plugin__inner > .mf-ap-btn {
	grid-column: 2;
	grid-row: 1;
	justify-self: start;
	margin-top: clamp(6px, 1.458vw, 28px);
}
 
/* Feature list — column 1, row 2. It runs x61-850, so column 1 only. */
.mf-ap-features {
	grid-column: 1;
	grid-row: 2;
	margin: 0;
	padding: 0;
	list-style: none;
}
 
/* Media panel — column 3, spanning both rows, right-aligned in its column.
   454 x 807 in the design = aspect-ratio 454/807. */
.mf-ap-plugin__media {
	grid-column: 3;
	grid-row: 1 / span 2;
	justify-self: end;
	width: 100%;
	margin: clamp(6px, 1.458vw, 28px) 0 0;
}
 
/* Both selectors are needed. A <video> is a replaced element like an <img>,
   but it does NOT inherit these from the img rule, and its UA default is
   300x150 with letterboxing — so without this it renders as a small grey box
   with square corners instead of the 454x807 panel the design shows. */
.mf-ap-plugin__media img,
.mf-ap-plugin__media video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 454 / 807;
	object-fit: cover;
	border-radius: clamp(12px, 1.094vw, 21px);
	background: #000;               /* letterbox bars, before the poster paints */
}
 
/* Safari/iOS ignores border-radius on a <video> with native controls, so the
   figure clips it instead. */
.mf-ap-plugin__media {
	overflow: hidden;
	border-radius: clamp(12px, 1.094vw, 21px);
}
 
/* The <figure> element carries a UA margin of 1em 40px — that alone would
   push the panel 40px off its x1368 column edge. */
figure.mf-ap-plugin__media {
	padding: 0;
}
 
 
/* --------------------------------------------------------------------------
   RESPONSIVE — the three columns collapse in two steps
   -------------------------------------------------------------------------- */
 
/* <= 1200: the button drops under the copy, media keeps its own column */
@media (max-width: 1200px) {
 
	.mf-ap-plugin__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 400fr);
	}
 
	.mf-ap-plugin__intro {
		grid-column: 1;
		grid-row: 1;
	}
 
	.mf-ap-plugin__inner > .mf-ap-btn {
		grid-column: 1;
		grid-row: 2;
		margin-top: 0;
	}
 
	.mf-ap-features {
		grid-column: 1;
		grid-row: 3;
	}
 
	.mf-ap-plugin__media {
		grid-column: 2;
		grid-row: 1 / span 3;
		margin-top: 0;
	}
}
 
/* <= 1024: one column, media last */
@media (max-width: 1024px) {
 
	.mf-ap-plugin__inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: clamp(18px, 3vw, 32px);
	}
 
	.mf-ap-plugin__intro {
		grid-column: 1;
		grid-row: auto;
	}
 
	.mf-ap-plugin__inner > .mf-ap-btn {
		grid-column: 1;
		grid-row: auto;
		justify-self: start;
	}
 
	.mf-ap-features {
		grid-column: 1;
		grid-row: auto;
	}
 
	.mf-ap-plugin__media {
		grid-column: 1;
		grid-row: auto;
		justify-self: stretch;
		max-width: 360px;
	}
}
 
/* <= 767: full-width button, as on the rest of the page */
@media (max-width: 767px) {
 
	.mf-ap-plugin__inner > .mf-ap-btn {
		justify-self: stretch;
	}
 
	.mf-ap-plugin__media {
		max-width: none;
	}
}

@media (max-width: 767px) {
 
	/* A little more air between cards now that each one is taller. */
	.mf-ap-artists .mf-ap-artists__grid {
		row-gap: 28px;
	}
 
	/* ---- The card: overlay -> vertical stack ---------------------------- */
	/* aspect-ratio MUST be reset to auto. Left at 743/739 the card keeps a
	   fixed height and the text block is clipped all over again. */
	.mf-ap-artists .mf-ap-artist__link {
		display: flex;
		flex-direction: column;
		aspect-ratio: auto;
		overflow: visible;
		background-color: #191919;
		border-radius: 10px;
	}
 
	/* The artwork keeps the design's square-ish crop; only the panel moves. */
	.mf-ap-artists .mf-ap-artist__img {
		width: 100%;
		height: auto;
		aspect-ratio: 743 / 739;
		object-fit: cover;
		border-radius: 10px 10px 0 0;
		transform: none;
		transition: none;
	}
 
	/* The gradient existed to make white text legible ON the photo. Nothing
	   sits on the photo any more, so it would only dim the artwork. */
	.mf-ap-artists .mf-ap-artist__wash {
		display: none;
	}
 
	/* Some phones report hover:hover; that rule would darken the image on tap
	   and leave it darkened. Killed here for both cases. */
	.mf-ap-artists .mf-ap-artist:hover .mf-ap-artist__img,
	.mf-ap-artists .mf-ap-artist:focus-within .mf-ap-artist__img {
		transform: none;
	}
 
	/* ---- The text block ------------------------------------------------- */
	/* position:static + inset:auto are the load-bearing pair — restating the
	   padding alone leaves `bottom: 3.52%` cascading in and the block stays
	   pinned over the photo. */
	.mf-ap-artists .mf-ap-artist__panel {
		position: static;
		inset: auto;
		padding: 18px 18px 22px;
		background-color: #191919;
		border-radius: 0 0 10px 10px;
	}
 
	.mf-ap-artists .mf-ap-artist__name {
		font-size: 20px;
		line-height: 1.3;
	}
 
	/* Opened directly rather than leaning on `@media (hover: none)`, so a
	   narrow desktop window gets the readable layout too instead of an
	   invisible bio. display:block replaces the 0fr/1fr grid animation, which
	   has no purpose once the bio is permanently open. */
	.mf-ap-artists .mf-ap-artist__bio {
		display: block;
		margin-top: 10px;
		opacity: 1;
		font-size: 16px;
		line-height: 1.65;
		color: rgba(255, 255, 255, 0.86);
		transition: none;
	}
 
	.mf-ap-artists .mf-ap-artist__bio-inner {
		overflow: visible;
	}
 
	.mf-ap-artists .mf-ap-artist__para + .mf-ap-artist__para {
		margin-top: 0.85em;
	}
}
 
 
/* --------------------------------------------------------------------------
   TOUCH TABLETS (768-1024, no hover)
 
   Same trap, same cause: two cards across, bios permanently open, clipped by
   the card's fixed height. A tablet with a mouse still gets the hover reveal.
   Drop this block if you only want the phone fix.
   -------------------------------------------------------------------------- */
 
@media (min-width: 768px) and (max-width: 1024px) and (hover: none) {
 
	.mf-ap-artists .mf-ap-artist__link {
		display: flex;
		flex-direction: column;
		aspect-ratio: auto;
		overflow: visible;
		background-color: #191919;
		border-radius: 10px;
	}
 
	.mf-ap-artists .mf-ap-artist__img {
		width: 100%;
		height: auto;
		aspect-ratio: 743 / 739;
		object-fit: cover;
		border-radius: 10px 10px 0 0;
	}
 
	.mf-ap-artists .mf-ap-artist__wash {
		display: none;
	}
 
	.mf-ap-artists .mf-ap-artist__panel {
		position: static;
		inset: auto;
		padding: 20px 20px 24px;
		background-color: #191919;
		border-radius: 0 0 10px 10px;
	}
 
	.mf-ap-artists .mf-ap-artist__bio {
		display: block;
		margin-top: 10px;
		opacity: 1;
		line-height: 1.6;
		color: rgba(255, 255, 255, 0.86);
		transition: none;
	}
 
	.mf-ap-artists .mf-ap-artist__bio-inner {
		overflow: visible;
	}
}
 @media (max-width: 767px) {
 
	.mf-ap-warranty {
		background-image:
			linear-gradient(180deg,
				rgba(0, 0, 0, 0.82) 0%,
				rgba(0, 0, 0, 0.72) 50%,
				rgba(0, 0, 0, 0.80) 100%),
			url("/wp-content/uploads/2026/09/Frame-2095585432.png");
		background-position: 50% 35%;
	}
 
	/* The body copy is rgba(255,255,255,.9). Full opacity on a phone —
	   small type over a photo needs the extra contrast. */
	.mf-ap-warranty__text {
		color: #fff;
	}
}

@media (min-width: 1201px) {
 
	/* 1. The positioning context for a full-width panel. ------------------- */
	.site-header .site-header__bar {
		position: relative;
	}
 
	/* 2. Release the <li> so the panel is not trapped at link width. -------- */
	.site-header__bar .main-navigation .menu-item-has-children {
		position: static;
	}
 
	/* ---------------------------------------------------------------------
	   3. The panel
	   --------------------------------------------------------------------- */
	.site-header__bar .main-navigation ul ul {
		/* Position: inset 52/1831 = 2.84% each side, 12px below the bar. */
		top: calc(100% + clamp(8px, 0.625vw, 12px));
		right: 2.84%;
		left: 2.84%;
		transform: none;          /* kills the old translateX(-50%) centring */
		min-width: 0;             /* the old 240px floor is meaningless now   */
 
		/* Grid: 4 columns, 47px between them, 3px between rows.
		   display AND gap must both be restated — `.main-navigation ul` sets
		   flex + a 62px gap on this element too. */
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: clamp(16px, 2.465vw, 47px);
		row-gap: clamp(2px, 0.156vw, 3px);
		align-content: start;
 
		/* Panel padding — 13 top, 25 bottom, 127 each side. */
		padding: clamp(8px, 0.677vw, 13px) clamp(24px, 6.615vw, 127px) clamp(14px, 1.302vw, 25px);
 
		/* Skin: white card, not the dark pill your other dropdowns use. */
		background-color: #fff;
		border-radius: clamp(10px, 0.833vw, 16px);
		box-shadow: 0 4px 4px rgba(0, 0, 0, 0.08);
		backdrop-filter: none;    /* pointless over an opaque white fill */
	}
 
	/* The hover bridge.
 
	   Without this the menu closes the moment the pointer leaves the link,
	   because the ~37px of dead space between the link's baseline and the
	   panel (the bar's own bottom padding, plus the 12px gap) belongs to
	   neither. This extends the link's hover box down through that space.
	   It is hung off the LINK, not the panel, so it is only ever as wide as
	   "Our Services" and never covers the Contact Now button. */
	.site-header__bar .main-navigation .menu-item-has-children > a {
		position: relative;
	}
 
	.site-header__bar .main-navigation .menu-item-has-children > a::before {
		content: "";
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		height: clamp(28px, 2.6vw, 50px);
	}
 
	/* ---------------------------------------------------------------------
	   4. The items
	   --------------------------------------------------------------------- */
	/* Your `.main-navigation ul ul li { width: 100% }` fights the grid track. */
	.site-header__bar .main-navigation ul ul li {
		width: auto;
	}
 
	.site-header__bar .main-navigation ul ul a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		min-height: clamp(36px, 2.5vw, 48px);
 
		/* 10px in on the left, 19px on the right — the chevron's own offset. */
		padding: clamp(4px, 0.313vw, 6px) clamp(10px, 0.990vw, 19px) clamp(4px, 0.313vw, 6px) clamp(6px, 0.521vw, 10px);
 
		/* Design is Lato Medium 20 / -0.6 tracking, #616162.
		   font-family is deliberately left to inherit your header font — add
		   `font-family: "Lato", sans-serif;` here if you enqueue Lato. */
		font-size: clamp(14px, 1.042vw, 20px);
		font-weight: 500;
		line-height: 1.3;
		letter-spacing: -0.03em;
		color: #616162;
		white-space: normal;
		border-radius: clamp(6px, 0.469vw, 9px);
		transition: background-color 0.18s ease, color 0.18s ease;
	}
 
	/* The chevron. Drawn from borders so it inherits the link colour and
	   needs no asset — swap in your exported 172458_down_arrow_icon.svg as a
	   background-image here if you would rather use the real glyph. */
	.site-header__bar .main-navigation ul ul a::after {
		content: "";
		flex: 0 0 auto;
		width: clamp(6px, 0.417vw, 8px);
		height: clamp(6px, 0.417vw, 8px);
		margin-right: 2px;
		border-top: 2px solid currentColor;
		border-right: 2px solid currentColor;
		border-radius: 1px;
		transform: rotate(45deg);
		transition: transform 0.18s ease;
	}
 
	/* Hover. The design's own item is white-on-white — invisible at rest and
	   with no hover variant drawn — so this is my addition: your teal at low
	   opacity with the darker teal for the label. Change the two colours if
	   you want something else; nothing else depends on them. */
	.site-header__bar .main-navigation ul ul a:hover,
	.site-header__bar .main-navigation ul ul a:focus-visible {
		color: #007973;
		background-color: rgba(108, 219, 213, 0.18);
	}
 
	.site-header__bar .main-navigation ul ul a:hover::after,
	.site-header__bar .main-navigation ul ul a:focus-visible::after {
		transform: rotate(45deg) translate(2px, -2px);
	}
 
	/* The current page, if it is one of the service pages. */
	.site-header__bar .main-navigation ul ul .current-menu-item > a,
	.site-header__bar .main-navigation ul ul .current_page_item > a {
		color: #007973;
	}
 
	.site-header__bar .main-navigation ul ul a:focus-visible {
		outline: 2px solid #007973;
		outline-offset: 2px;
	}
}
 
 
/* --------------------------------------------------------------------------
   No narrow-desktop fallback is needed.
 
   I tested this on your live page at 1512 and again at 1280 — the bottom of
   the desktop range, since your mobile menu takes over at 1200. At 1280 the
   four columns are 218px each and every label, including "Picture Hanging
   Service", still sits on one line (measured item height 36px = one line at
   every item). So the design's 4-column layout holds all the way down and
   dropping to 3 columns would only make it look less like the design.
 
   If you add a longer service name later it wraps rather than overflows —
   the items use `min-height` and `line-height: 1.3`, so a two-line label
   grows its own row and the grid stays aligned.
   -------------------------------------------------------------------------- */
 
 
/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
 
@media (prefers-reduced-motion: reduce) {
 
	.site-header__bar .main-navigation ul ul a,
	.site-header__bar .main-navigation ul ul a::after {
		transition: none;
	}
}
/* ==========================================================================
   MF MODAL — popup chrome + Gravity Forms styling
   Paste at the end of style.css, REPLACING the previous version of this file.
   ONE copy styles every popup on the site.

     1-4   popup chrome            (.mf-modal)
     5-7   two-column field layout
     8-12  any Gravity Form inside any popup  (.mf-modal .gform_wrapper)

   WHAT CHANGED FROM THE LAST VERSION
   ----------------------------------
   Two fields per row above 768px, and a flatter, tighter skin. The old one
   read as dated for three specific reasons, all now gone:

     - drop shadows on the inputs. Soft outer shadows on form fields are a
       2015 habit; they make a field look like a floating card rather than a
       place to type. Replaced with a 1px border on a faint tinted fill.
     - 52px fields with a 33px gap between rows. That is nearly 90px of
       vertical rhythm per field, so five fields filled a whole screen.
       Now 48px fields on an 18px gap.
     - a 45px heading inside a dialog. Page-scale type in a popup pushes the
       first field below the fold. Now capped at 32px.

   This is a deliberate step AWAY from the Contact page form (node 117:3370),
   which keeps the shadowed white fields the Figma file specifies. If you
   would rather the two match exactly, say so and I will port whichever
   direction you prefer — I did not change the Contact form on my own.

   Values are anchored to the 1920 Figma frame (design px / 1920 * 100 = vw)
   with floors, the same scale as the rest of your build.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

.mf-modal {
	--mf-ink: #004e4a;
	--mf-teal: #6cdbd5;
	--mf-teal-dark: #007973;
	--mf-label: #46524f;
	--mf-placeholder: #9aa5a3;
	--mf-field-bg: #f5f8f7;
	--mf-field-border: #e0e7e5;

	--mf-modal-radius: clamp(14px, 1.094vw, 21px);
	--mf-modal-pad: clamp(22px, 2.083vw, 40px);

	--fs-modal-title: clamp(22px, 1.667vw, 32px);
	--fs-modal-lead: clamp(14px, 0.885vw, 17px);
	--fs-label: clamp(13px, 0.781vw, 15px);
	--fs-field: clamp(15px, 0.833vw, 16px);
	--fs-btn: clamp(15px, 0.938vw, 18px);

	--field-h: clamp(44px, 2.500vw, 48px);
	--field-pad-x: clamp(13px, 0.833vw, 16px);
	--field-radius: 10px;

	--row-gap: clamp(14px, 0.938vw, 18px);
	--col-gap: clamp(12px, 1.042vw, 20px);
}


/* ==========================================================================
   2. THE OVERLAY

   position:fixed on the .mf-modal itself, which is why the markup has to sit
   outside every section — see the note on mf_modal() in mf-modal-functions.php.
   ========================================================================== */

.mf-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: clamp(16px, 3vw, 48px) clamp(12px, 2vw, 32px);
	overflow-y: auto;
	overscroll-behavior: contain;
	font-family: var(--mf-font-display, Arial, Helvetica, sans-serif);
}

/* [hidden] is only display:none at UA-stylesheet strength, so the display:flex
   above beats it and the popup would sit open on every page load. This rule is
   what actually keeps it closed. */
.mf-modal[hidden] {
	display: none;
}

.mf-modal__backdrop {
	position: fixed;
	inset: 0;
	background-color: rgba(8, 20, 19, 0.6);
	backdrop-filter: blur(8px);
	opacity: 0;
	transition: opacity 0.22s ease;
}

.mf-modal.is-open .mf-modal__backdrop {
	opacity: 1;
}

body.mf-modal-open {
	overflow: hidden;
}


/* ==========================================================================
   3. THE DIALOG
   ========================================================================== */

.mf-modal__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: clamp(320px, 56vw, 880px);
	margin: auto;
	padding: var(--mf-modal-pad);
	background-color: #fff;
	border-radius: var(--mf-modal-radius);
	box-shadow: 0 18px 50px rgba(0, 40, 38, 0.22);
	opacity: 0;
	transform: translateY(14px) scale(0.985);
	transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.mf-modal.is-open .mf-modal__dialog {
	opacity: 1;
	transform: none;
}

.mf-modal__close {
	position: absolute;
	top: clamp(12px, 0.833vw, 16px);
	right: clamp(12px, 0.833vw, 16px);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	background-color: rgba(0, 121, 115, 0.07);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.mf-modal__close:hover,
.mf-modal__close:focus-visible {
	background-color: rgba(0, 121, 115, 0.16);
}

/* The X, drawn from two rotated bars so there is no icon file to ship. */
.mf-modal__close span {
	position: relative;
	display: block;
	width: 14px;
	height: 14px;
}

.mf-modal__close span::before,
.mf-modal__close span::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	margin-top: -1px;
	background-color: var(--mf-teal-dark);
	border-radius: 2px;
}

.mf-modal__close span::before {
	transform: rotate(45deg);
}

.mf-modal__close span::after {
	transform: rotate(-45deg);
}


/* ==========================================================================
   4. DIALOG HEAD
   ========================================================================== */

.mf-modal__head {
	margin-bottom: clamp(18px, 1.250vw, 24px);
	padding-right: 46px;                 /* clear of the close button */
}

.mf-modal__title {
	margin: 0 0 6px;
	font-size: var(--fs-modal-title);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--mf-teal-dark);
}

.mf-modal__lead {
	margin: 0;
	font-size: var(--fs-modal-lead);
	line-height: 1.5;
	color: #6b7674;
}


/* ==========================================================================
   5. TWO FIELDS PER ROW

   Gravity Forms lays every form on its own 12-column grid, and each field
   carries the class that says how many columns it spans —
   gfield--width-full = 12, gfield--width-half = 6, and so on.

   So pairing fields is NOT done by changing the number of columns. Replacing
   grid-template-columns is what crushed the hero pills on the Services page
   (style.css:6964): it leaves every field's own span class pointing at tracks
   that no longer exist. The grid stays at 12 and only the SPANS change here.

   WHY THE LAST VERSION ONLY PAIRED SOME FIELDS
   --------------------------------------------
   It halved `.gfield--width-full` only. But GF adds that class solely to
   fields whose width you set explicitly in the editor — a field you never
   touched carries NO width class at all and falls back to GF's own
   `span 12` default. In your form that is exactly the split you saw:
   Location and Email carry the class and paired up; Full Name, Address and
   the textarea do not, so nothing reached them.

   So the default here is now every field, class or not. Name + Location and
   Address + Email pair up on their own, in the order they sit in the form.

   PER-FIELD CONTROL, no CSS edits: in the GF editor open a field, Appearance,
   Custom CSS Class, and type `mf-full` to give it a whole row or `mf-half` to
   force it back to half. Those two rules are at the end of this block.
   ========================================================================== */

@media (min-width: 768px) {

	.mf-modal .gform_wrapper .gform_fields > .gfield {
		grid-column: span 6;
	}

	/* Types that need the whole row back.

	   `name` and `address` are NOT in this list, and that is the fix for the
	   round before this one. I had excluded them on the theory that GF's
	   multi-input types need the room — but "Full Name" is a Name field and
	   "Address" is an Address field, so my own exception was the reason those
	   two stayed full width while everything else paired up. Measured on your
	   live popup: both render as a single visible input, and their sub-inputs
	   stack vertically, so 6 tracks is fine.

	   If you ever switch the Address field to the full street / city / state /
	   postcode layout and it feels cramped, give it the `mf-full` class below
	   rather than editing this list. */
	.mf-modal .gform_wrapper .gform_fields > .gfield.gfield--type-textarea,
	.mf-modal .gform_wrapper .gform_fields > .gfield.gfield--type-list,
	.mf-modal .gform_wrapper .gform_fields > .gfield.gfield--type-fileupload,
	.mf-modal .gform_wrapper .gform_fields > .gfield.gfield--type-consent,
	.mf-modal .gform_wrapper .gform_fields > .gfield.gfield--type-section,
	.mf-modal .gform_wrapper .gform_fields > .gfield.gfield--type-html,
	.mf-modal .gform_wrapper .gform_fields > .gfield.gfield--type-captcha {
		grid-column: span 12;
	}

	/* Your per-field overrides. Last in the block so they beat both rules above,
	   including the type list — `mf-half` really will halve a textarea if you
	   ask it to. */
	.mf-modal .gform_wrapper .gform_fields > .gfield.mf-full {
		grid-column: span 12;
	}

	.mf-modal .gform_wrapper .gform_fields > .gfield.mf-half {
		grid-column: span 6;
	}
}


/* ==========================================================================
   6. THE FORM — wrapper

   Gravity Forms' orbital theme drives its controls from these custom
   properties. Setting them here is what stops the default blue #204ce5
   button coming back on top of everything else.
   ========================================================================== */

.mf-modal .gform_wrapper {
	--gf-ctrl-btn-bg-color-primary: var(--mf-teal);
	--gf-ctrl-btn-bg-color-hover-primary: var(--mf-teal);
	--gf-ctrl-btn-color-primary: var(--mf-ink);
	--gf-ctrl-btn-border-color-primary: transparent;
	--gf-ctrl-btn-size: auto;
	--gf-color-primary: var(--mf-teal-dark);

	max-width: none;
	margin: 0;
}

.mf-modal .gform_wrapper form {
	margin: 0;
}


/* ==========================================================================
   7. GRID GAPS
   ========================================================================== */

.mf-modal .gform_wrapper .gform_fields {
	row-gap: var(--row-gap);
	column-gap: var(--col-gap);
}


/* ==========================================================================
   8. LABELS
   ========================================================================== */

.mf-modal .gform_wrapper .gfield_label,
.mf-modal .gform_wrapper legend.gfield_label {
	display: block;
	margin-bottom: 6px;
	font-family: inherit;
	font-size: var(--fs-label);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--mf-label);
}

/* "(Required)" in red.

   Both selectors are needed and they are not duplicates: GF nests the text in
   a .gfield_required_text INSIDE a .gfield_required span, and the inner one
   carries its own colour — set only the outer and the grey stays.

   Kept smaller than the label so it still reads as a marker rather than part
   of the field name; the colour is what does the work now. */
.mf-modal .gform_wrapper .gfield_required,
.mf-modal .gform_wrapper .gfield_required_text,
.mf-modal .gform_wrapper .gfield_required .gfield_required_asterisk {
	margin-left: 4px;
	font-size: 0.8em;
	font-weight: 500;
	color: #e02b2b;
}

.mf-modal .gform_wrapper .gfield_description {
	padding-top: 4px;
	font-size: 13px;
	line-height: 1.45;
	color: #7d8886;
}


/* ==========================================================================
   9. CONTROLS

   Flat: a faint tinted fill and a 1px border, no outer shadow. The field
   lightens to white on focus, so the active row is the only one that reads
   as "open".
   ========================================================================== */

.mf-modal .gform_wrapper input[type="text"],
.mf-modal .gform_wrapper input[type="email"],
.mf-modal .gform_wrapper input[type="tel"],
.mf-modal .gform_wrapper input[type="url"],
.mf-modal .gform_wrapper input[type="number"],
.mf-modal .gform_wrapper input[type="password"],
.mf-modal .gform_wrapper input[type="date"],
.mf-modal .gform_wrapper select,
.mf-modal .gform_wrapper textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--field-h);
	padding: 0 var(--field-pad-x);
	font-family: inherit;
	font-size: var(--fs-field);
	line-height: 1.4;
	color: #17201f;
	background-color: var(--mf-field-bg);
	border: 1px solid var(--mf-field-border);
	border-radius: var(--field-radius);
	box-shadow: none;
	transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

/* A textarea is multi-line, so the vertical centring the inputs get from
   min-height alone does not apply — it needs real padding. */
.mf-modal .gform_wrapper textarea {
	min-height: clamp(96px, 6.250vw, 120px);
	padding-top: 12px;
	padding-bottom: 12px;
	resize: vertical;
}

.mf-modal .gform_wrapper ::placeholder {
	color: var(--mf-placeholder);
	opacity: 1;                       /* Firefox dims placeholders by default */
}

.mf-modal .gform_wrapper input:hover,
.mf-modal .gform_wrapper select:hover,
.mf-modal .gform_wrapper textarea:hover {
	border-color: #c9d6d3;
}

.mf-modal .gform_wrapper input:focus,
.mf-modal .gform_wrapper select:focus,
.mf-modal .gform_wrapper textarea:focus {
	outline: none;
	background-color: #fff;
	border-color: var(--mf-teal-dark);
	box-shadow: 0 0 0 3px rgba(108, 219, 213, 0.3);
}

/* Native selects need the arrow drawn back in once appearance is reset.

   `height` rather than `min-height` is what fixes "Victoria" sitting high in
   the box. A select does not lay its text out the way an input does: with only
   a min-height it renders the selected option at the TOP of the content box
   and the extra height falls underneath, which reads as the text being lifted.
   Given a definite height the browser centres the option itself. line-height
   is reset for the same reason — a 1.4 line-height inside a select offsets the
   text on its own in Chrome. */
.mf-modal .gform_wrapper select {
	appearance: none;
	height: var(--field-h);
	min-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	line-height: normal;
	padding-right: calc(var(--field-pad-x) + 22px);
	background-image:
		linear-gradient(45deg, transparent 50%, var(--mf-label) 50%),
		linear-gradient(135deg, var(--mf-label) 50%, transparent 50%);
	background-position:
		calc(100% - 20px) calc(50% - 2px),
		calc(100% - 14px) calc(50% - 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

.mf-modal .gform_wrapper .gfield_checkbox label,
.mf-modal .gform_wrapper .gfield_radio label {
	font-family: inherit;
	font-size: var(--fs-field);
	color: #17201f;
}

.mf-modal .gform_wrapper input[type="checkbox"],
.mf-modal .gform_wrapper input[type="radio"] {
	accent-color: var(--mf-teal-dark);
}


/* ==========================================================================
   10. SUBMIT — the brand's teal pill
   ========================================================================== */

.mf-modal .gform_wrapper .gform_footer {
	margin: clamp(18px, 1.250vw, 24px) 0 0;
	padding: 0;
}

.mf-modal .gform_wrapper .gform_button,
.mf-modal .gform_wrapper input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(46px, 2.708vw, 52px);
	padding: 0 clamp(24px, 1.771vw, 34px);
	font-family: inherit;
	font-size: var(--fs-btn);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--mf-ink);
	background-color: var(--mf-teal);
	border: 0;
	border-radius: 130px;
	cursor: pointer;
	transition: filter 0.2s ease, transform 0.2s ease;
}

.mf-modal .gform_wrapper .gform_button:hover,
.mf-modal .gform_wrapper input[type="submit"]:hover {
	filter: brightness(1.06);
	transform: translateY(-1px);
}

.mf-modal .gform_wrapper .gform_button:focus-visible,
.mf-modal .gform_wrapper input[type="submit"]:focus-visible {
	outline: 2px solid var(--mf-ink);
	outline-offset: 3px;
}


/* ==========================================================================
   11. VALIDATION + CONFIRMATION
   ========================================================================== */

.mf-modal .gform_wrapper .gform_validation_errors {
	margin: 0 0 16px;
	padding: 12px 16px;
	font-size: 14px;
	color: #8a1c1c;
	background-color: rgba(214, 60, 60, 0.07);
	border: 1px solid rgba(214, 60, 60, 0.26);
	border-radius: 10px;
	box-shadow: none;
}

.mf-modal .gform_wrapper .gfield_error input,
.mf-modal .gform_wrapper .gfield_error select,
.mf-modal .gform_wrapper .gfield_error textarea {
	background-color: rgba(214, 60, 60, 0.04);
	border-color: rgba(214, 60, 60, 0.55);
}

.mf-modal .gform_wrapper .gfield_validation_message,
.mf-modal .gform_wrapper .validation_message {
	margin-top: 5px;
	padding: 0;
	font-size: 13px;
	color: #8a1c1c;
	background: none;
	border: 0;
}

.mf-modal .gform_confirmation_message {
	padding: clamp(20px, 2.083vw, 40px) 0;
	font-size: clamp(16px, 1.042vw, 20px);
	line-height: 1.55;
	color: var(--mf-teal-dark);
	text-align: center;
}
select#input_3_7 {
    padding-top: 15px;
}

/* ==========================================================================
   12. RESPONSIVE

   Below 768 the two-column rule in section 5 simply does not apply, so GF's
   own single-column stacking takes over with nothing to undo.
   ========================================================================== */

@media (max-width: 767px) {

	.mf-modal {
		padding: 0;
		align-items: stretch;
	}

	/* Full-screen sheet on a phone. A centred card holding a six-field form
	   just becomes a small scrolling box inside a scrolling page. */
	.mf-modal__dialog {
		max-width: none;
		min-height: 100%;
		margin: 0;
		padding: 54px 18px 28px;
		border-radius: 0;
	}

	.mf-modal__head {
		padding-right: 0;
	}

	.mf-modal .gform_wrapper .gform_button,
	.mf-modal .gform_wrapper input[type="submit"] {
		width: 100%;
	}
}


/* ==========================================================================
   13. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.mf-modal__backdrop,
	.mf-modal__dialog {
		transition: none;
	}

	.mf-modal__dialog {
		transform: none;
	}
}
/* =========================================
   BLANK CANVAS QUICK BUTTONS
   ========================================= */

.mf-blank-quick-links {
    padding: 26px 0 34px;
    background: #fff;
}

.mf-blank-quick-links__inner {
    width: min(92%, 1520px);
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.mf-blank-quick-links__btn {
    min-height: 54px;
    padding: 8px 10px 8px 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    border: 1px solid rgba(0, 124, 124, 0.22);
    border-radius: 999px;

    background: #61d2cf;
    color: #176b6b;
    text-decoration: none;

    box-shadow: 0 6px 16px rgba(0, 124, 124, 0.06);

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}


/* Remove old left line */
.mf-blank-quick-links__btn::before {
    display: none;
}


/* Arrow */
.mf-blank-quick-links__btn::after {
    content: "↗";

    width: 38px;
    height: 38px;
    flex: 0 0 38px;

    display: grid;
    place-items: center;

    border-radius: 50%;
    background: #ddf7f5;
    color: #007c7c;

    font-size: 17px;
    line-height: 1;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}


/* Hover */
.mf-blank-quick-links__btn:hover {
    background: #fff;
    border-color: #61d2cf;
    color: #073f3f;

    transform: translateY(-2px);

    box-shadow: 0 10px 20px rgba(0, 124, 124, 0.13);
}

.mf-blank-quick-links__btn:hover::after {
    background: #61d2cf;
    color: #073f3f;
    transform: rotate(45deg);
}


/* TABLET */
@media (max-width: 1100px) {

    .mf-blank-quick-links__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* MOBILE */
@media (max-width: 640px) {

    .mf-blank-quick-links {
        padding: 20px 0 28px;
    }

    .mf-blank-quick-links__inner {
        width: 94%;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .mf-blank-quick-links__btn {
        min-height: 50px;
        padding: 6px 8px 6px 18px;
    }

    .mf-blank-quick-links__btn::after {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

}
/* ==========================================================================
   MF MODAL — popup chrome + Gravity Forms styling
   Paste at the end of style.css, REPLACING the previous version of this file.
   ONE copy styles every popup on the site.

     1-4   popup chrome            (.mf-modal)
     5-7   two-column field layout
     8-12  any Gravity Form inside any popup  (.mf-modal .gform_wrapper)

   WHAT CHANGED FROM THE LAST VERSION
   ----------------------------------
   Two fields per row above 768px, and a flatter, tighter skin. The old one
   read as dated for three specific reasons, all now gone:

     - drop shadows on the inputs. Soft outer shadows on form fields are a
       2015 habit; they make a field look like a floating card rather than a
       place to type. Replaced with a 1px border on a faint tinted fill.
     - 52px fields with a 33px gap between rows. That is nearly 90px of
       vertical rhythm per field, so five fields filled a whole screen.
       Now 48px fields on an 18px gap.
     - a 45px heading inside a dialog. Page-scale type in a popup pushes the
       first field below the fold. Now capped at 32px.

   This is a deliberate step AWAY from the Contact page form (node 117:3370),
   which keeps the shadowed white fields the Figma file specifies. If you
   would rather the two match exactly, say so and I will port whichever
   direction you prefer — I did not change the Contact form on my own.

   Values are anchored to the 1920 Figma frame (design px / 1920 * 100 = vw)
   with floors, the same scale as the rest of your build.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

.mf-modal {
	--mf-ink: #004e4a;
	--mf-teal: #6cdbd5;
	--mf-teal-dark: #007973;
	--mf-label: #46524f;
	--mf-placeholder: #9aa5a3;
	--mf-field-bg: #f5f8f7;
	--mf-field-border: #e0e7e5;

	--mf-modal-radius: clamp(14px, 1.094vw, 21px);
	--mf-modal-pad: clamp(22px, 2.083vw, 40px);

	--fs-modal-title: clamp(22px, 1.667vw, 32px);
	--fs-modal-lead: clamp(14px, 0.885vw, 17px);
	--fs-label: clamp(13px, 0.781vw, 15px);
	--fs-field: clamp(15px, 0.833vw, 16px);
	--fs-btn: clamp(15px, 0.938vw, 18px);

	--field-h: clamp(44px, 2.500vw, 48px);
	--field-pad-x: clamp(13px, 0.833vw, 16px);
	--field-radius: 10px;

	--row-gap: clamp(14px, 0.938vw, 18px);
	--col-gap: clamp(12px, 1.042vw, 20px);
}


/* ==========================================================================
   2. THE OVERLAY

   position:fixed on the .mf-modal itself, which is why the markup has to sit
   outside every section — see the note on mf_modal() in mf-modal-functions.php.
   ========================================================================== */

.mf-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: clamp(16px, 3vw, 48px) clamp(12px, 2vw, 32px);
	overflow-y: auto;
	overscroll-behavior: contain;
	font-family: var(--mf-font-display, Arial, Helvetica, sans-serif);
}

/* [hidden] is only display:none at UA-stylesheet strength, so the display:flex
   above beats it and the popup would sit open on every page load. This rule is
   what actually keeps it closed. */
.mf-modal[hidden] {
	display: none;
}

.mf-modal__backdrop {
	position: fixed;
	inset: 0;
	background-color: rgba(8, 20, 19, 0.6);
	backdrop-filter: blur(8px);
	opacity: 0;
	transition: opacity 0.22s ease;
}

.mf-modal.is-open .mf-modal__backdrop {
	opacity: 1;
}

body.mf-modal-open {
	overflow: hidden;
}


/* ==========================================================================
   3. THE DIALOG
   ========================================================================== */

.mf-modal__dialog {
	position: relative;
	z-index: 1;
	/* 880 at most, otherwise the viewport less a gutter.

	   This was `clamp(320px, 56vw, 880px)`, which is wrong for a two-column
	   form at tablet sizes: 56vw of a 768px screen is a 430px dialog, and two
	   columns inside that are 183px each — narrower than the labels. Tying the
	   width to the viewport minus a gutter instead gives 737px at 768, so the
	   columns stay around 336px all the way down to the point where the layout
	   goes single-column anyway. */
	width: min(880px, calc(100vw - clamp(24px, 4vw, 64px)));
	max-width: none;
	margin: auto;
	padding: var(--mf-modal-pad);
	background-color: #fff;
	border-radius: var(--mf-modal-radius);
	box-shadow: 0 18px 50px rgba(0, 40, 38, 0.22);
	opacity: 0;
	transform: translateY(14px) scale(0.985);
	transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.mf-modal.is-open .mf-modal__dialog {
	opacity: 1;
	transform: none;
}

.mf-modal__close {
	position: absolute;
	top: clamp(12px, 0.833vw, 16px);
	right: clamp(12px, 0.833vw, 16px);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	background-color: rgba(0, 121, 115, 0.07);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.mf-modal__close:hover,
.mf-modal__close:focus-visible {
	background-color: rgba(0, 121, 115, 0.16);
}

/* The X, drawn from two rotated bars so there is no icon file to ship. */
.mf-modal__close span {
	position: relative;
	display: block;
	width: 14px;
	height: 14px;
}

.mf-modal__close span::before,
.mf-modal__close span::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	margin-top: -1px;
	background-color: var(--mf-teal-dark);
	border-radius: 2px;
}

.mf-modal__close span::before {
	transform: rotate(45deg);
}

.mf-modal__close span::after {
	transform: rotate(-45deg);
}


/* ==========================================================================
   4. DIALOG HEAD
   ========================================================================== */

.mf-modal__head {
	margin-bottom: clamp(18px, 1.250vw, 24px);
	padding-right: 46px;                 /* clear of the close button */
}

.mf-modal__title {
	margin: 0 0 6px;
	font-size: var(--fs-modal-title);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--mf-teal-dark);
}

.mf-modal__lead {
	margin: 0;
	font-size: var(--fs-modal-lead);
	line-height: 1.5;
	color: #6b7674;
}


/* ==========================================================================
   5. TWO FIELDS PER ROW

   Gravity Forms lays every form on its own 12-column grid, and each field
   carries the class that says how many columns it spans —
   gfield--width-full = 12, gfield--width-half = 6, and so on.

   So pairing fields is NOT done by changing the number of columns. Replacing
   grid-template-columns is what crushed the hero pills on the Services page
   (style.css:6964): it leaves every field's own span class pointing at tracks
   that no longer exist. The grid stays at 12 and only the SPANS change here.

   WHY THE LAST VERSION ONLY PAIRED SOME FIELDS
   --------------------------------------------
   It halved `.gfield--width-full` only. But GF adds that class solely to
   fields whose width you set explicitly in the editor — a field you never
   touched carries NO width class at all and falls back to GF's own
   `span 12` default. In your form that is exactly the split you saw:
   Location and Email carry the class and paired up; Full Name, Address and
   the textarea do not, so nothing reached them.

   So the default here is now every field, class or not. Name + Location and
   Address + Email pair up on their own, in the order they sit in the form.

   PER-FIELD CONTROL, no CSS edits: in the GF editor open a field, Appearance,
   Custom CSS Class, and type `mf-full` to give it a whole row or `mf-half` to
   force it back to half. Those two rules are at the end of this block.
   ========================================================================== */

@media (min-width: 768px) {

	.mf-modal .gform_wrapper .gform_fields > .gfield {
		grid-column: span 6;
	}

	/* Types that need the whole row back.

	   `name` and `address` are NOT in this list, and that is the fix for the
	   round before this one. I had excluded them on the theory that GF's
	   multi-input types need the room — but "Full Name" is a Name field and
	   "Address" is an Address field, so my own exception was the reason those
	   two stayed full width while everything else paired up. Measured on your
	   live popup: both render as a single visible input, and their sub-inputs
	   stack vertically, so 6 tracks is fine.

	   If you ever switch the Address field to the full street / city / state /
	   postcode layout and it feels cramped, give it the `mf-full` class below
	   rather than editing this list. */
	.mf-modal .gform_wrapper .gform_fields > .gfield.gfield--type-textarea,
	.mf-modal .gform_wrapper .gform_fields > .gfield.gfield--type-list,
	.mf-modal .gform_wrapper .gform_fields > .gfield.gfield--type-fileupload,
	.mf-modal .gform_wrapper .gform_fields > .gfield.gfield--type-consent,
	.mf-modal .gform_wrapper .gform_fields > .gfield.gfield--type-section,
	.mf-modal .gform_wrapper .gform_fields > .gfield.gfield--type-html,
	.mf-modal .gform_wrapper .gform_fields > .gfield.gfield--type-captcha {
		grid-column: span 12;
	}

	/* Your per-field overrides. Last in the block so they beat both rules above,
	   including the type list — `mf-half` really will halve a textarea if you
	   ask it to. */
	.mf-modal .gform_wrapper .gform_fields > .gfield.mf-full {
		grid-column: span 12;
	}

	.mf-modal .gform_wrapper .gform_fields > .gfield.mf-half {
		grid-column: span 6;
	}
}


/* ==========================================================================
   6. THE FORM — wrapper

   Gravity Forms' orbital theme drives its controls from these custom
   properties. Setting them here is what stops the default blue #204ce5
   button coming back on top of everything else.
   ========================================================================== */

.mf-modal .gform_wrapper {
	--gf-ctrl-btn-bg-color-primary: var(--mf-teal);
	--gf-ctrl-btn-bg-color-hover-primary: var(--mf-teal);
	--gf-ctrl-btn-color-primary: var(--mf-ink);
	--gf-ctrl-btn-border-color-primary: transparent;
	--gf-ctrl-btn-size: auto;
	--gf-color-primary: var(--mf-teal-dark);

	max-width: none;
	margin: 0;
}

.mf-modal .gform_wrapper form {
	margin: 0;
}


/* ==========================================================================
   7. GRID GAPS
   ========================================================================== */

.mf-modal .gform_wrapper .gform_fields {
	row-gap: var(--row-gap);
	column-gap: var(--col-gap);
}


/* ==========================================================================
   8. LABELS
   ========================================================================== */

.mf-modal .gform_wrapper .gfield_label,
.mf-modal .gform_wrapper legend.gfield_label {
	display: block;
	margin-bottom: 6px;
	font-family: inherit;
	font-size: var(--fs-label);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--mf-label);
}

/* "(Required)" in red.

   Both selectors are needed and they are not duplicates: GF nests the text in
   a .gfield_required_text INSIDE a .gfield_required span, and the inner one
   carries its own colour — set only the outer and the grey stays.

   Kept smaller than the label so it still reads as a marker rather than part
   of the field name; the colour is what does the work now. */
.mf-modal .gform_wrapper .gfield_required,
.mf-modal .gform_wrapper .gfield_required_text,
.mf-modal .gform_wrapper .gfield_required .gfield_required_asterisk {
	margin-left: 4px;
	font-size: 0.8em;
	font-weight: 500;
	color: #e02b2b;
}

.mf-modal .gform_wrapper .gfield_description {
	padding-top: 4px;
	font-size: 13px;
	line-height: 1.45;
	color: #7d8886;
}


/* ==========================================================================
   9. CONTROLS

   Flat: a faint tinted fill and a 1px border, no outer shadow. The field
   lightens to white on focus, so the active row is the only one that reads
   as "open".
   ========================================================================== */

.mf-modal .gform_wrapper input[type="text"],
.mf-modal .gform_wrapper input[type="email"],
.mf-modal .gform_wrapper input[type="tel"],
.mf-modal .gform_wrapper input[type="url"],
.mf-modal .gform_wrapper input[type="number"],
.mf-modal .gform_wrapper input[type="password"],
.mf-modal .gform_wrapper input[type="date"],
.mf-modal .gform_wrapper select,
.mf-modal .gform_wrapper textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--field-h);
	padding: 0 var(--field-pad-x);
	font-family: inherit;
	font-size: var(--fs-field);
	line-height: 1.4;
	color: #17201f;
	background-color: var(--mf-field-bg);
	border: 1px solid var(--mf-field-border);
	border-radius: var(--field-radius);
	box-shadow: none;
	transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

/* A textarea is multi-line, so the vertical centring the inputs get from
   min-height alone does not apply — it needs real padding. */
.mf-modal .gform_wrapper textarea {
	min-height: clamp(96px, 6.250vw, 120px);
	padding-top: 12px;
	padding-bottom: 12px;
	resize: vertical;
}

.mf-modal .gform_wrapper ::placeholder {
	color: var(--mf-placeholder);
	opacity: 1;                       /* Firefox dims placeholders by default */
}

.mf-modal .gform_wrapper input:hover,
.mf-modal .gform_wrapper select:hover,
.mf-modal .gform_wrapper textarea:hover {
	border-color: #c9d6d3;
}

.mf-modal .gform_wrapper input:focus,
.mf-modal .gform_wrapper select:focus,
.mf-modal .gform_wrapper textarea:focus {
	outline: none;
	background-color: #fff;
	border-color: var(--mf-teal-dark);
	box-shadow: 0 0 0 3px rgba(108, 219, 213, 0.3);
}

/* Native selects need the arrow drawn back in once appearance is reset.

   `height` rather than `min-height` is what fixes "Victoria" sitting high in
   the box. A select does not lay its text out the way an input does: with only
   a min-height it renders the selected option at the TOP of the content box
   and the extra height falls underneath, which reads as the text being lifted.
   Given a definite height the browser centres the option itself. line-height
   is reset for the same reason — a 1.4 line-height inside a select offsets the
   text on its own in Chrome. */
.mf-modal .gform_wrapper select {
	appearance: none;
	height: var(--field-h);
	min-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	line-height: normal;
	padding-right: calc(var(--field-pad-x) + 22px);
	background-image:
		linear-gradient(45deg, transparent 50%, var(--mf-label) 50%),
		linear-gradient(135deg, var(--mf-label) 50%, transparent 50%);
	background-position:
		calc(100% - 20px) calc(50% - 2px),
		calc(100% - 14px) calc(50% - 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}


/* ==========================================================================
   9b. SUBLABELS, MULTI-INPUT FIELDS AND CHOICES

   Added for form 4 (Blank Canvas), which uses field types form 3 does not:
   a Name field with its "First" sublabel showing, a phone field split into
   Country + Phone Number, and a radio group.
   ========================================================================== */

/* Sublabels — "First", "Country", "Phone Number".

   GF renders these as a plain <label> inside the input container, so without
   a rule of its own a sublabel inherits nothing and renders at body size,
   reading as a second field label rather than a caption under one. */
.mf-modal .gform_wrapper .ginput_complex label,
.mf-modal .gform_wrapper .gform-field-label--type-sub,
.mf-modal .gform_wrapper .gfield_label--sublabel {
	display: block;
	margin: 4px 0 0;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0;
	color: #8b9694;
}

/* When the theme places sublabels ABOVE the input (form_sublabel_above on the
   .gform_fields, which is what your forms use), the margin has to flip or the
   caption sits against the field below it instead of the one it describes. */
.mf-modal .gform_wrapper .form_sublabel_above .ginput_complex label {
	margin: 0 0 4px;
}

/* Multi-input containers (name, phone, address) carry their own inner grid.
   Only the gap is set — the column counts are GF's and depend on which
   sub-fields you enabled, so replacing them would break the moment you turn
   one on or off in the editor. */
.mf-modal .gform_wrapper .ginput_complex {
	row-gap: 8px;
	column-gap: 10px;
}

/* The country selector on the phone field must NOT be stretched to 100% the
   way the other controls are — it is sized to its flag + dial code and sits
   beside the number input. */
.mf-modal .gform_wrapper .ginput_container_phone select {
	width: auto;
	min-width: 0;
	flex: 0 0 auto;
}

/* ---- Radio and checkbox groups ---------------------------------------- */

.mf-modal .gform_wrapper .gfield_radio,
.mf-modal .gform_wrapper .gfield_checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
}

.mf-modal .gform_wrapper .gfield_radio .gchoice,
.mf-modal .gform_wrapper .gfield_checkbox .gchoice {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.mf-modal .gform_wrapper .gfield_radio label,
.mf-modal .gform_wrapper .gfield_checkbox label {
	margin: 0;
	font-family: inherit;
	font-size: var(--fs-field);
	font-weight: 400;
	line-height: 1.3;
	color: #17201f;
	cursor: pointer;
}

/* The box/dot itself. The min-width pair matters: these inputs sit in a flex
   row, and without it a long choice label squashes the control to nothing. */
.mf-modal .gform_wrapper input[type="checkbox"],
.mf-modal .gform_wrapper input[type="radio"] {
	flex: 0 0 auto;
	width: 18px;
	min-width: 18px;
	height: 18px;
	min-height: 0;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	accent-color: var(--mf-teal-dark);
	cursor: pointer;
}


/* ==========================================================================
   10. SUBMIT — the brand's teal pill
   ========================================================================== */

.mf-modal .gform_wrapper .gform_footer {
	margin: clamp(18px, 1.250vw, 24px) 0 0;
	padding: 0;
}

.mf-modal .gform_wrapper .gform_button,
.mf-modal .gform_wrapper input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(46px, 2.708vw, 52px);
	padding: 0 clamp(24px, 1.771vw, 34px);
	font-family: inherit;
	font-size: var(--fs-btn);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--mf-ink);
	background-color: var(--mf-teal);
	border: 0;
	border-radius: 130px;
	cursor: pointer;
	transition: filter 0.2s ease, transform 0.2s ease;
}

.mf-modal .gform_wrapper .gform_button:hover,
.mf-modal .gform_wrapper input[type="submit"]:hover {
	filter: brightness(1.06);
	transform: translateY(-1px);
}

.mf-modal .gform_wrapper .gform_button:focus-visible,
.mf-modal .gform_wrapper input[type="submit"]:focus-visible {
	outline: 2px solid var(--mf-ink);
	outline-offset: 3px;
}


/* ==========================================================================
   11. VALIDATION + CONFIRMATION
   ========================================================================== */

.mf-modal .gform_wrapper .gform_validation_errors {
	margin: 0 0 16px;
	padding: 12px 16px;
	font-size: 14px;
	color: #8a1c1c;
	background-color: rgba(214, 60, 60, 0.07);
	border: 1px solid rgba(214, 60, 60, 0.26);
	border-radius: 10px;
	box-shadow: none;
}

.mf-modal .gform_wrapper .gfield_error input,
.mf-modal .gform_wrapper .gfield_error select,
.mf-modal .gform_wrapper .gfield_error textarea {
	background-color: rgba(214, 60, 60, 0.04);
	border-color: rgba(214, 60, 60, 0.55);
}

.mf-modal .gform_wrapper .gfield_validation_message,
.mf-modal .gform_wrapper .validation_message {
	margin-top: 5px;
	padding: 0;
	font-size: 13px;
	color: #8a1c1c;
	background: none;
	border: 0;
}

.mf-modal .gform_confirmation_message {
	padding: clamp(20px, 2.083vw, 40px) 0;
	font-size: clamp(16px, 1.042vw, 20px);
	line-height: 1.55;
	color: var(--mf-teal-dark);
	text-align: center;
}


/* ==========================================================================
   12. RESPONSIVE

   Below 768 the two-column rule in section 5 simply does not apply, so GF's
   own single-column stacking takes over with nothing to undo.
   ========================================================================== */

@media (max-width: 767px) {

	.mf-modal {
		padding: 0;
		align-items: stretch;
	}

	/* Full-screen sheet on a phone. A centred card holding a six-field form
	   just becomes a small scrolling box inside a scrolling page.

	   `width: 100%` overrides the min() calculation above — the gutter that
	   formula reserves is exactly what a full-bleed sheet must not have. */
	.mf-modal__dialog {
		width: 100%;
		max-width: none;
		min-height: 100%;
		margin: 0;
		padding: 54px 18px 28px;
		border-radius: 0;
	}

	/* Long choice labels ("Stretched + Floating frame") want their own line at
	   phone width rather than wrapping mid-phrase beside the next option. */
	.mf-modal .gform_wrapper .gfield_radio,
	.mf-modal .gform_wrapper .gfield_checkbox {
		flex-direction: column;
		gap: 12px;
	}

	.mf-modal__head {
		padding-right: 0;
	}

	.mf-modal .gform_wrapper .gform_button,
	.mf-modal .gform_wrapper input[type="submit"] {
		width: 100%;
	}
	.mf-hero--mirror-framing {
    background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url(/wp-content/uploads/2026/09/Frame-2095585425-2.png) !important;
}
}


/* ==========================================================================
   13. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.mf-modal__backdrop,
	.mf-modal__dialog {
		transition: none;
	}

	.mf-modal__dialog {
		transform: none;
	}
}
.canvas-strech-bg {
    background-image: url(/wp-content/uploads/2026/09/Canvas-Printing-1.png);
}
.mf-hero--mirror-framing {
    background-image: url(/wp-content/uploads/2026/09/Mirror-Framing.jpg);
}
.picture-hanging {
    background-image: url(/wp-content/uploads/2026/09/Picture-Hanging-Services.jpg);
}
.mf-hero--jersey {
    background-image: url(/wp-content/uploads/2026/09/Jersy-framing.png);
}
.picture-hanging {
    background-image: url(/wp-content/uploads/2026/09/Picture-Hanging-Services.jpg);
}
.mf-hero--floating {
    background-image: url(/wp-content/uploads/2026/09/Floating-Frames.jpg);
}
.artcourier-bg {
    background-image: url(/wp-content/uploads/2026/09/Art-Courier-Service.png);
}
.blank-canvas-bg {
     background-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.8) 0%,
            rgba(0, 0, 0, 0.5) 50%,
            rgba(0, 0, 0, 0.15) 100%
        ),
        url("/wp-content/uploads/2026/09/0f526fa5-88e0-464b-b80f-e5ab64dc071a-1.png");
    background-size: cover;
    background-position: center;
}
/* ==========================================================================
   MF MODAL — popup chrome + Gravity Forms styling
   Paste at the end of style.css, REPLACING the previous version of this file.
   ONE copy styles every popup on the site.

     1-4   popup chrome            (.mf-modal)
     5-7   two-column field layout
     8-12  any Gravity Form inside any popup  (.mf-modal .gform_wrapper)

   WHAT CHANGED FROM THE LAST VERSION
   ----------------------------------
   Two fields per row above 768px, and a flatter, tighter skin. The old one
   read as dated for three specific reasons, all now gone:

     - drop shadows on the inputs. Soft outer shadows on form fields are a
       2015 habit; they make a field look like a floating card rather than a
       place to type. Replaced with a 1px border on a faint tinted fill.
     - 52px fields with a 33px gap between rows. That is nearly 90px of
       vertical rhythm per field, so five fields filled a whole screen.
       Now 48px fields on an 18px gap.
     - a 45px heading inside a dialog. Page-scale type in a popup pushes the
       first field below the fold. Now capped at 32px.

   This is a deliberate step AWAY from the Contact page form (node 117:3370),
   which keeps the shadowed white fields the Figma file specifies. If you
   would rather the two match exactly, say so and I will port whichever
   direction you prefer — I did not change the Contact form on my own.

   Values are anchored to the 1920 Figma frame (design px / 1920 * 100 = vw)
   with floors, the same scale as the rest of your build.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

.mf-modal {
	--mf-ink: #004e4a;
	--mf-teal: #6cdbd5;
	--mf-teal-dark: #007973;
	--mf-label: #46524f;
	--mf-placeholder: #9aa5a3;
	--mf-field-bg: #f5f8f7;
	--mf-field-border: #e0e7e5;

	--mf-modal-radius: clamp(14px, 1.094vw, 21px);
	--mf-modal-pad: clamp(22px, 2.083vw, 40px);

	--fs-modal-title: clamp(22px, 1.667vw, 32px);
	--fs-modal-lead: clamp(14px, 0.885vw, 17px);
	--fs-label: clamp(13px, 0.781vw, 15px);
	--fs-field: clamp(15px, 0.833vw, 16px);
	--fs-btn: clamp(15px, 0.938vw, 18px);

	--field-h: clamp(44px, 2.500vw, 48px);
	--field-pad-x: clamp(13px, 0.833vw, 16px);
	--field-radius: 10px;

	--row-gap: clamp(14px, 0.938vw, 18px);
	--col-gap: clamp(12px, 1.042vw, 20px);
}


/* ==========================================================================
   2. THE OVERLAY

   position:fixed on the .mf-modal itself, which is why the markup has to sit
   outside every section — see the note on mf_modal() in mf-modal-functions.php.
   ========================================================================== */

.mf-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: clamp(16px, 3vw, 48px) clamp(12px, 2vw, 32px);
	overflow-y: auto;
	overscroll-behavior: contain;
	font-family: var(--mf-font-display, Arial, Helvetica, sans-serif);
}

/* [hidden] is only display:none at UA-stylesheet strength, so the display:flex
   above beats it and the popup would sit open on every page load. This rule is
   what actually keeps it closed. */
.mf-modal[hidden] {
	display: none;
}

.mf-modal__backdrop {
	position: fixed;
	inset: 0;
	background-color: rgba(8, 20, 19, 0.6);
	backdrop-filter: blur(8px);
	opacity: 0;
	transition: opacity 0.22s ease;
}

.mf-modal.is-open .mf-modal__backdrop {
	opacity: 1;
}

body.mf-modal-open {
	overflow: hidden;
}


/* ==========================================================================
   3. THE DIALOG
   ========================================================================== */

.mf-modal__dialog {
	position: relative;
	z-index: 1;
	/* 880 at most, otherwise the viewport less a gutter.

	   This was `clamp(320px, 56vw, 880px)`, which is wrong for a two-column
	   form at tablet sizes: 56vw of a 768px screen is a 430px dialog, and two
	   columns inside that are 183px each — narrower than the labels. Tying the
	   width to the viewport minus a gutter instead gives 737px at 768, so the
	   columns stay around 336px all the way down to the point where the layout
	   goes single-column anyway. */
	width: min(880px, calc(100vw - clamp(24px, 4vw, 64px)));
	max-width: none;
	margin: auto;
	padding: var(--mf-modal-pad);
	background-color: #fff;
	border-radius: var(--mf-modal-radius);
	box-shadow: 0 18px 50px rgba(0, 40, 38, 0.22);
	opacity: 0;
	transform: translateY(14px) scale(0.985);
	transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.mf-modal.is-open .mf-modal__dialog {
	opacity: 1;
	transform: none;
}

.mf-modal__close {
	position: absolute;
	top: clamp(12px, 0.833vw, 16px);
	right: clamp(12px, 0.833vw, 16px);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	background-color: rgba(0, 121, 115, 0.07);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.mf-modal__close:hover,
.mf-modal__close:focus-visible {
	background-color: rgba(0, 121, 115, 0.16);
}

/* The X, drawn from two rotated bars so there is no icon file to ship. */
.mf-modal__close span {
	position: relative;
	display: block;
	width: 14px;
	height: 14px;
}

.mf-modal__close span::before,
.mf-modal__close span::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	margin-top: -1px;
	background-color: var(--mf-teal-dark);
	border-radius: 2px;
}

.mf-modal__close span::before {
	transform: rotate(45deg);
}

.mf-modal__close span::after {
	transform: rotate(-45deg);
}


/* ==========================================================================
   4. DIALOG HEAD
   ========================================================================== */

.mf-modal__head {
	margin-bottom: clamp(18px, 1.250vw, 24px);
	padding-right: 46px;                 /* clear of the close button */
}

.mf-modal__title {
	margin: 0 0 6px;
	font-size: var(--fs-modal-title);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--mf-teal-dark);
}

.mf-modal__lead {
	margin: 0;
	font-size: var(--fs-modal-lead);
	line-height: 1.5;
	color: #6b7674;
}


/* ==========================================================================
   5. TWO FIELDS PER ROW

   Gravity Forms lays every form on its own 12-column grid, and each field
   carries the class that says how many columns it spans —
   gfield--width-full = 12, gfield--width-half = 6, and so on.

   So pairing fields is NOT done by changing the number of columns. Replacing
   grid-template-columns is what crushed the hero pills on the Services page
   (style.css:6964): it leaves every field's own span class pointing at tracks
   that no longer exist. The grid stays at 12 and only the SPANS change here.

   WHY THE LAST VERSION ONLY PAIRED SOME FIELDS
   --------------------------------------------
   It halved `.gfield--width-full` only. But GF adds that class solely to
   fields whose width you set explicitly in the editor — a field you never
   touched carries NO width class at all and falls back to GF's own
   `span 12` default. In your form that is exactly the split you saw:
   Location and Email carry the class and paired up; Full Name, Address and
   the textarea do not, so nothing reached them.

   So the default here is now every field, class or not. Name + Location and
   Address + Email pair up on their own, in the order they sit in the form.

   PER-FIELD CONTROL, no CSS edits: in the GF editor open a field, Appearance,
   Custom CSS Class, and type `mf-full` to give it a whole row or `mf-half` to
   force it back to half. Those two rules are at the end of this block.
   ========================================================================== */

@media (min-width: 768px) {

	.mf-modal .gform_wrapper .gform_fields > .gfield {
		grid-column: span 6;
	}

	/* Types that need the whole row back.

	   `name` and `address` are NOT in this list, and that is the fix for the
	   round before this one. I had excluded them on the theory that GF's
	   multi-input types need the room — but "Full Name" is a Name field and
	   "Address" is an Address field, so my own exception was the reason those
	   two stayed full width while everything else paired up. Measured on your
	   live popup: both render as a single visible input, and their sub-inputs
	   stack vertically, so 6 tracks is fine.

	   If you ever switch the Address field to the full street / city / state /
	   postcode layout and it feels cramped, give it the `mf-full` class below
	   rather than editing this list. */
	.mf-modal .gform_wrapper .gform_fields > .gfield.gfield--type-textarea,
	.mf-modal .gform_wrapper .gform_fields > .gfield.gfield--type-list,
	.mf-modal .gform_wrapper .gform_fields > .gfield.gfield--type-fileupload,
	.mf-modal .gform_wrapper .gform_fields > .gfield.gfield--type-consent,
	.mf-modal .gform_wrapper .gform_fields > .gfield.gfield--type-section,
	.mf-modal .gform_wrapper .gform_fields > .gfield.gfield--type-html,
	.mf-modal .gform_wrapper .gform_fields > .gfield.gfield--type-captcha {
		grid-column: span 12;
	}

	/* Your per-field overrides. Last in the block so they beat both rules above,
	   including the type list — `mf-half` really will halve a textarea if you
	   ask it to. */
	.mf-modal .gform_wrapper .gform_fields > .gfield.mf-full {
		grid-column: span 12;
	}

	.mf-modal .gform_wrapper .gform_fields > .gfield.mf-half {
		grid-column: span 6;
	}
}


/* ==========================================================================
   6. THE FORM — wrapper

   Gravity Forms' orbital theme drives its controls from these custom
   properties. Setting them here is what stops the default blue #204ce5
   button coming back on top of everything else.
   ========================================================================== */

.mf-modal .gform_wrapper {
	--gf-ctrl-btn-bg-color-primary: var(--mf-teal);
	--gf-ctrl-btn-bg-color-hover-primary: var(--mf-teal);
	--gf-ctrl-btn-color-primary: var(--mf-ink);
	--gf-ctrl-btn-border-color-primary: transparent;
	--gf-ctrl-btn-size: auto;
	--gf-color-primary: var(--mf-teal-dark);

	max-width: none;
	margin: 0;
}

.mf-modal .gform_wrapper form {
	margin: 0;
}


/* ==========================================================================
   7. GRID GAPS
   ========================================================================== */

.mf-modal .gform_wrapper .gform_fields {
	row-gap: var(--row-gap);
	column-gap: var(--col-gap);
}

/* Bottom-align the controls in every row.

   THIS IS THE BIG ONE for how "unfinished" the form looked. Measured on your
   live Blank Canvas popup, the fields in a row are different heights because
   their label blocks are:

     Name              93px   label + the "First" sublabel
     Email             66px   label only
     Phone             93px   label + "Country" / "Phone Number" sublabels
     Select your city  66px   label only
     Please select…    52px   label + one row of radios
     Width             38px   label hidden entirely

   Left alone, each field stacks from the TOP of its grid cell, so Name's input
   sits 27px below Email's, Phone's sits below the city select, and the Width
   box floats above the Size box. Every row is visibly out of true, which reads
   as sloppy even though nothing is technically broken.

   Making the field a flex column and pushing its input container down with
   `margin-top: auto` lines the CONTROLS up instead of the labels. Labels then
   sit at whatever height their own text needs, which is what the eye expects
   from a form — you scan the boxes, not the captions. */
.mf-modal .gform_wrapper .gform_fields > .gfield {
	display: flex;
	flex-direction: column;
}

.mf-modal .gform_wrapper .gform_fields > .gfield > .ginput_container {
	margin-top: auto;
}

/* GF's "* indicates required fields" legend. It renders at body size with no
   styling of its own, so it currently shouts as loudly as the field labels. */
.mf-modal .gform_wrapper .gform_required_legend {
	margin: 0 0 14px;
	font-size: 12px;
	line-height: 1.4;
	color: #98a3a1;
}


/* ==========================================================================
   8. LABELS
   ========================================================================== */

.mf-modal .gform_wrapper .gfield_label,
.mf-modal .gform_wrapper legend.gfield_label {
	display: block;
	margin-bottom: 6px;
	font-family: inherit;
	font-size: var(--fs-label);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--mf-label);
}

/* "(Required)" in red.

   Both selectors are needed and they are not duplicates: GF nests the text in
   a .gfield_required_text INSIDE a .gfield_required span, and the inner one
   carries its own colour — set only the outer and the grey stays.

   Kept smaller than the label so it still reads as a marker rather than part
   of the field name; the colour is what does the work now. */
.mf-modal .gform_wrapper .gfield_required,
.mf-modal .gform_wrapper .gfield_required_text,
.mf-modal .gform_wrapper .gfield_required .gfield_required_asterisk {
	margin-left: 4px;
	font-size: 0.8em;
	font-weight: 500;
	color: #e02b2b;
}

.mf-modal .gform_wrapper .gfield_description {
	padding-top: 4px;
	font-size: 13px;
	line-height: 1.45;
	color: #7d8886;
}


/* ==========================================================================
   9. CONTROLS

   Flat: a faint tinted fill and a 1px border, no outer shadow. The field
   lightens to white on focus, so the active row is the only one that reads
   as "open".
   ========================================================================== */

.mf-modal .gform_wrapper input[type="text"],
.mf-modal .gform_wrapper input[type="email"],
.mf-modal .gform_wrapper input[type="tel"],
.mf-modal .gform_wrapper input[type="url"],
.mf-modal .gform_wrapper input[type="number"],
.mf-modal .gform_wrapper input[type="password"],
.mf-modal .gform_wrapper input[type="date"],
.mf-modal .gform_wrapper select,
.mf-modal .gform_wrapper textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--field-h);
	padding: 0 var(--field-pad-x);
	font-family: inherit;
	font-size: var(--fs-field);
	line-height: 1.4;
	color: #17201f;
	background-color: var(--mf-field-bg);
	border: 1px solid var(--mf-field-border);
	border-radius: var(--field-radius);
	box-shadow: none;
	transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

/* A textarea is multi-line, so the vertical centring the inputs get from
   min-height alone does not apply — it needs real padding. */
.mf-modal .gform_wrapper textarea {
	min-height: clamp(96px, 6.250vw, 120px);
	padding-top: 12px;
	padding-bottom: 12px;
	resize: vertical;
}

.mf-modal .gform_wrapper ::placeholder {
	color: var(--mf-placeholder);
	opacity: 1;                       /* Firefox dims placeholders by default */
}

.mf-modal .gform_wrapper input:hover,
.mf-modal .gform_wrapper select:hover,
.mf-modal .gform_wrapper textarea:hover {
	border-color: #c9d6d3;
}

.mf-modal .gform_wrapper input:focus,
.mf-modal .gform_wrapper select:focus,
.mf-modal .gform_wrapper textarea:focus {
	outline: none;
	background-color: #fff;
	border-color: var(--mf-teal-dark);
	box-shadow: 0 0 0 3px rgba(108, 219, 213, 0.3);
}

/* Native selects need the arrow drawn back in once appearance is reset.

   `height` rather than `min-height` is what fixes "Victoria" sitting high in
   the box. A select does not lay its text out the way an input does: with only
   a min-height it renders the selected option at the TOP of the content box
   and the extra height falls underneath, which reads as the text being lifted.
   Given a definite height the browser centres the option itself. line-height
   is reset for the same reason — a 1.4 line-height inside a select offsets the
   text on its own in Chrome. */
.mf-modal .gform_wrapper select {
	appearance: none;
	height: var(--field-h);
	min-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	line-height: normal;
	padding-right: calc(var(--field-pad-x) + 24px);

	/* One chevron, drawn as an SVG, for every select.

	   The old version built the arrow from two crossed linear-gradients, which
	   renders as a fat solid triangle — and that is the mismatch in your
	   screenshot: three selects showed a heavy black triangle while "Select
	   your city" showed a thin chevron. A single SVG removes the question
	   entirely and matches the light chevron Gravity Forms draws itself, so
	   the popup and the rest of your forms look like one system. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2346524f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: right var(--field-pad-x) center;
	background-size: 10px 6px;
	background-repeat: no-repeat;
}


/* ==========================================================================
   9b. SUBLABELS, MULTI-INPUT FIELDS AND CHOICES

   Added for form 4 (Blank Canvas), which uses field types form 3 does not:
   a Name field with its "First" sublabel showing, a phone field split into
   Country + Phone Number, and a radio group.
   ========================================================================== */

/* Sublabels — "First", "Country", "Phone Number".

   GF renders these as a plain <label> inside the input container, so without
   a rule of its own a sublabel inherits nothing and renders at body size,
   reading as a second field label rather than a caption under one. */
.mf-modal .gform_wrapper .ginput_complex label,
.mf-modal .gform_wrapper .gform-field-label--type-sub,
.mf-modal .gform_wrapper .gfield_label--sublabel {
	display: block;
	margin: 4px 0 0;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0;
	color: #8b9694;
}

/* When the theme places sublabels ABOVE the input (form_sublabel_above on the
   .gform_fields, which is what your forms use), the margin has to flip or the
   caption sits against the field below it instead of the one it describes. */
.mf-modal .gform_wrapper .form_sublabel_above .ginput_complex label {
	margin: 0 0 4px;
}

/* Multi-input containers (name, phone, address) carry their own inner grid.
   Only the gap is set — the column counts are GF's and depend on which
   sub-fields you enabled, so replacing them would break the moment you turn
   one on or off in the editor. */
.mf-modal .gform_wrapper .ginput_complex {
	row-gap: 8px;
	column-gap: 10px;
}

/* The country selector on the phone field must NOT be stretched to 100% the
   way the other controls are — it is sized to its flag + dial code and sits
   beside the number input. */
.mf-modal .gform_wrapper .ginput_container_phone select {
	width: auto;
	min-width: 0;
	flex: 0 0 auto;
}

/* ---- Radio and checkbox groups ---------------------------------------- */

.mf-modal .gform_wrapper .gfield_radio,
.mf-modal .gform_wrapper .gfield_checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
}

.mf-modal .gform_wrapper .gfield_radio .gchoice,
.mf-modal .gform_wrapper .gfield_checkbox .gchoice {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.mf-modal .gform_wrapper .gfield_radio label,
.mf-modal .gform_wrapper .gfield_checkbox label {
	margin: 0;
	font-family: inherit;
	font-size: var(--fs-field);
	font-weight: 400;
	line-height: 1.3;
	color: #17201f;
	cursor: pointer;
}

/* The box/dot itself.

   WHY THE DOT WAS BLUE: I had set `accent-color`, which only works on a
   NATIVE control. Gravity Forms' orbital theme already sets
   `appearance: none` on these inputs and paints its own dot — measured on
   your live popup, the radio comes through as appearance:none with
   accent-color rgb(32,76,229), GF's default blue. accent-color on an
   appearance:none input does nothing at all, which is why the teal never
   arrived and why overriding --gf-color-primary did not help either.

   So these are drawn from scratch here instead of asking GF for a colour.

   The min-width pair also matters: these sit in a flex row, and without it a
   long choice label squashes the control to nothing. */
.mf-modal .gform_wrapper input[type="checkbox"],
.mf-modal .gform_wrapper input[type="radio"] {
	appearance: none;
	flex: 0 0 auto;
	width: 20px;
	min-width: 20px;
	height: 20px;
	min-height: 0;
	margin: 0;
	padding: 0;
	background-color: #fff;
	background-image: none;
	border: 1px solid #c2cfcc;
	box-shadow: none;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.mf-modal .gform_wrapper input[type="radio"] {
	border-radius: 50%;
}

.mf-modal .gform_wrapper input[type="checkbox"] {
	border-radius: 5px;
}

.mf-modal .gform_wrapper input[type="checkbox"]:hover,
.mf-modal .gform_wrapper input[type="radio"]:hover {
	border-color: var(--mf-teal-dark);
}

/* The dot, as a radial gradient rather than a ::before — a replaced element
   like an input cannot host pseudo-elements reliably across browsers. */
.mf-modal .gform_wrapper input[type="radio"]:checked {
	border-color: var(--mf-teal-dark);
	background-image: radial-gradient(circle at 50% 50%, var(--mf-teal-dark) 0 42%, transparent 46%);
}

/* The tick, as an inline SVG for the same reason. */
.mf-modal .gform_wrapper input[type="checkbox"]:checked {
	background-color: var(--mf-teal-dark);
	border-color: var(--mf-teal-dark);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: center;
	background-size: 12px 10px;
	background-repeat: no-repeat;
}

.mf-modal .gform_wrapper input[type="checkbox"]:focus-visible,
.mf-modal .gform_wrapper input[type="radio"]:focus-visible {
	outline: none;
	border-color: var(--mf-teal-dark);
	box-shadow: 0 0 0 3px rgba(108, 219, 213, 0.35);
}


/* ==========================================================================
   10. SUBMIT — the brand's teal pill
   ========================================================================== */

.mf-modal .gform_wrapper .gform_footer {
	margin: clamp(18px, 1.250vw, 24px) 0 0;
	padding: 0;
}

.mf-modal .gform_wrapper .gform_button,
.mf-modal .gform_wrapper input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(46px, 2.708vw, 52px);
	padding: 0 clamp(24px, 1.771vw, 34px);
	font-family: inherit;
	font-size: var(--fs-btn);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--mf-ink);
	background-color: var(--mf-teal);
	border: 0;
	border-radius: 130px;
	cursor: pointer;
	transition: filter 0.2s ease, transform 0.2s ease;
}

.mf-modal .gform_wrapper .gform_button:hover,
.mf-modal .gform_wrapper input[type="submit"]:hover {
	filter: brightness(1.06);
	transform: translateY(-1px);
}

.mf-modal .gform_wrapper .gform_button:focus-visible,
.mf-modal .gform_wrapper input[type="submit"]:focus-visible {
	outline: 2px solid var(--mf-ink);
	outline-offset: 3px;
}


/* ==========================================================================
   11. VALIDATION + CONFIRMATION
   ========================================================================== */

.mf-modal .gform_wrapper .gform_validation_errors {
	margin: 0 0 16px;
	padding: 12px 16px;
	font-size: 14px;
	color: #8a1c1c;
	background-color: rgba(214, 60, 60, 0.07);
	border: 1px solid rgba(214, 60, 60, 0.26);
	border-radius: 10px;
	box-shadow: none;
}

.mf-modal .gform_wrapper .gfield_error input,
.mf-modal .gform_wrapper .gfield_error select,
.mf-modal .gform_wrapper .gfield_error textarea {
	background-color: rgba(214, 60, 60, 0.04);
	border-color: rgba(214, 60, 60, 0.55);
}

.mf-modal .gform_wrapper .gfield_validation_message,
.mf-modal .gform_wrapper .validation_message {
	margin-top: 5px;
	padding: 0;
	font-size: 13px;
	color: #8a1c1c;
	background: none;
	border: 0;
}

.mf-modal .gform_confirmation_message {
	padding: clamp(20px, 2.083vw, 40px) 0;
	font-size: clamp(16px, 1.042vw, 20px);
	line-height: 1.55;
	color: var(--mf-teal-dark);
	text-align: center;
}


/* ==========================================================================
   12. RESPONSIVE

   Below 768 the two-column rule in section 5 simply does not apply, so GF's
   own single-column stacking takes over with nothing to undo.
   ========================================================================== */

@media (max-width: 767px) {

	.mf-modal {
		padding: 0;
		align-items: stretch;
	}

	/* Full-screen sheet on a phone. A centred card holding a six-field form
	   just becomes a small scrolling box inside a scrolling page.

	   `width: 100%` overrides the min() calculation above — the gutter that
	   formula reserves is exactly what a full-bleed sheet must not have. */
	.mf-modal__dialog {
		width: 100%;
		max-width: none;
		min-height: 100%;
		margin: 0;
		padding: 54px 18px 28px;
		border-radius: 0;
	}

	/* Long choice labels ("Stretched + Floating frame") want their own line at
	   phone width rather than wrapping mid-phrase beside the next option. */
	.mf-modal .gform_wrapper .gfield_radio,
	.mf-modal .gform_wrapper .gfield_checkbox {
		flex-direction: column;
		gap: 12px;
	}

	.mf-modal__head {
		padding-right: 0;
	}

	.mf-modal .gform_wrapper .gform_button,
	.mf-modal .gform_wrapper input[type="submit"] {
		width: 100%;
	}
	.picture-hanging {
    background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url(/wp-content/uploads/2026/09/Frame-2095585426-2.png) !important;
}
	.mf-hero--floating {
    background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url(/wp-content/uploads/2026/09/Frame-2095585424-3.png) !important;
}
    .blank-canvas-bg {
        background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.45)), url(/wp-content/uploads/2026/09/mobile-blank-banner.png) !important;
    }
	.mf-hero--jersey {
    background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.75)), url(/wp-content/uploads/2026/09/Frame-2095585431-1.png) !important;
}
	.canvas-strech-bg {
    background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.45)), url(/wp-content/uploads/2026/09/Frame-2095585428-1.png) !important;
}
	.artcourier-bg {
    background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url(/wp-content/uploads/2026/09/Frame-2095585429-1.png) !important;
}
	.mf-hero--custom-framing {
    background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url(/wp-content/uploads/2026/09/Frame-2095585427-2.png) !important;
}
.glass-service {
    background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url(/wp-content/uploads/2026/09/Frame-2095585430-2.png) !important;
}
}


/* ==========================================================================
   13. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.mf-modal__backdrop,
	.mf-modal__dialog {
		transition: none;
	}

	.mf-modal__dialog {
		transform: none;
	}
}
.mf-modal .gform_wrapper select {
    padding-top: 12px;
}

/* =========================================================
   MOBILE FRAMING - THANK YOU PAGE
   ========================================================= */

.mf-thankyou {
    background: #fff;
}

.mf-thankyou__hero {
    padding: 150px 0 110px;
    background:
        radial-gradient(circle at 50% 0%, rgba(85,197,209,.17), transparent 42%),
        linear-gradient(180deg, #f8ffff 0%, #ffffff 100%);
}

.mf-thankyou__inner {
    width: min(92%, 980px);
    margin: 0 auto;
    text-align: center;
}

.mf-thankyou__icon {
    width: 86px;
    height: 86px;
    margin: 0 auto 26px;
}

.mf-thankyou__icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #55c5d1;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mf-thankyou__inner .badge-pill {
    margin: 0 auto 28px;
}

.mf-thankyou__title {
    max-width: 920px;
    margin: 0 auto 24px;
    color: #123f40;
}

.mf-thankyou__title span {
    color: #55c5d1;
}

.mf-thankyou__lead {
    max-width: 760px;
    margin: 0 auto;
    color: rgba(99, 99, 99, .9);
    line-height: 1.75;
}

.mf-thankyou__actions {
    margin-top: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.mf-thankyou__btn {
    text-decoration: none;
}

.mf-thankyou__secondary {
    min-height: 52px;
    padding: 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0,124,124,.25);
    border-radius: 999px;
    color: #176b6b;
    text-decoration: none;
    background: #fff;
    transition: .25s ease;
}

.mf-thankyou__secondary:hover {
    background: #effafa;
    border-color: #55c5d1;
}

.mf-thankyou__next {
    padding: 90px 0;
}

.mf-thankyou__next-inner {
    width: min(92%, 1500px);
    margin: 0 auto;
}

.mf-thankyou__next-head {
    max-width: 780px;
    margin-bottom: 42px;
}

.mf-thankyou__next-head .badge-pill {
    margin-bottom: 20px;
}

.mf-thankyou__next-head .mf-svc-h2 {
    margin-bottom: 18px;
}

.mf-thankyou__steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.mf-thankyou__step {
    padding: 30px;
    border: 1px solid rgba(0,124,124,.14);
    border-radius: 28px;
    background: linear-gradient(145deg, #fff, #f7fcfc);
}

.mf-thankyou__step-number {
    width: 48px;
    height: 48px;
    margin-bottom: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #dff7f6;
    color: #007c7c;
}

.mf-thankyou__step h3 {
    margin: 0 0 14px;
    color: #123f40;
}

.mf-thankyou__step p {
    margin: 0;
    color: rgba(99, 99, 99, .9);
    line-height: 1.7;
}

.mf-thankyou__contact {
    padding: 0 0 100px;
}

.mf-thankyou__contact-inner {
    width: min(92%, 1500px);
    margin: 0 auto;
    padding: 44px 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    border-radius: 32px;
    background: linear-gradient(135deg, rgba(85,197,209,.20), rgba(255,255,255,.95));
}

.mf-thankyou__contact-inner > div {
    max-width: 820px;
}

.mf-thankyou__contact .badge-pill {
    margin-bottom: 18px;
}

.mf-thankyou__contact .mf-svc-h2 {
    margin-bottom: 14px;
}

.mf-thankyou__call {
    flex: 0 0 auto;
    text-decoration: none;
}

@media (max-width: 1000px) {
    .mf-thankyou__hero {
        padding: 120px 0 80px;
    }

    .mf-thankyou__steps {
        grid-template-columns: 1fr;
    }

    .mf-thankyou__contact-inner {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    .mf-thankyou__hero {
        padding: 90px 0 60px;
    }

    .mf-thankyou__inner,
    .mf-thankyou__next-inner,
    .mf-thankyou__contact-inner {
        width: 94%;
    }

    .mf-thankyou__icon {
        width: 70px;
        height: 70px;
    }

    .mf-thankyou__next {
        padding: 65px 0;
    }

    .mf-thankyou__step {
        padding: 24px;
        border-radius: 22px;
    }

    .mf-thankyou__contact {
        padding-bottom: 70px;
    }

    .mf-thankyou__contact-inner {
        padding: 30px 24px;
        border-radius: 24px;
    }

    .mf-thankyou__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .mf-thankyou__actions > * {
        width: 100%;
    }
}
/* ==========================================================================
   VIDEO GALLERY — paste into style.css
   Replaces every .mf-gal__* rule from the old image masonry. Delete those
   first: the markup no longer emits .mf-gal__grid / __col / __item / __img,
   so anything still matching them is dead weight, and .mf-gal__head's
   grid-template-columns will fight nothing but still confuse the next read.

   Namespace: .mf-vgal__*  (v = video), so a leftover .mf-gal rule cannot
   collide with these while you migrate.

   Every selector below is a single class or a class pair. Nothing selects
   `.parent element`, which in this stylesheet has hijacked the footer lists
   twice, and no value set inside a breakpoint is also set by a plain rule
   in a later file.
   ========================================================================== */

/* -- Tokens -----------------------------------------------------------------
   Written as var() WITH fallbacks on purpose. 35 referenced tokens are still
   undefined in :root as of 2026-09-09, and an undefined var() with no
   fallback makes font-size inherit and border-radius compute to 0 — silently.
   If you add these to :root later the fallbacks simply stop being used. */
.mf-vgal {
	--mf-vgal-teal: var(--mf-teal, #6cdbd5);
	--mf-vgal-ink: var(--mf-black, #000);
	--mf-vgal-body: var(--mf-grey-body, rgba(99, 99, 99, .9));
	--mf-vgal-radius: 24px;
	--mf-vgal-gap: clamp(24px, 2.56vw, 49px);   /* 49.16 column gap at 1920 */

	box-sizing: border-box;
	padding-block: clamp(48px, 5.5vw, 105px) clamp(56px, 6.2vw, 120px);
	background: #fff;
}

.mf-vgal *,
.mf-vgal *::before,
.mf-vgal *::after {
	box-sizing: border-box;
}

/* The shared 1790 content box every other section is built on.
   min() rather than percentage padding: percentage padding on a
   width:100%; max-width:Npx container keeps growing past the max-width,
   because it resolves against the CONTAINING block, not the element. */
.mf-vgal__inner {
	width: 100%;
	max-width: 1790px;
	margin-inline: auto;
	padding-inline: min(3.385%, 65px);
}

/* -- Heading block ---------------------------------------------------------
   Figma: teal eyebrow + 446-wide H2 on the left, 1022-wide lead on the right. */
.mf-vgal__head {
	display: grid;
	grid-template-columns: minmax(0, 446fr) minmax(0, 1022fr);
	column-gap: var(--mf-vgal-gap);
	align-items: start;
	margin-bottom: clamp(32px, 3.4vw, 65px);
}

.mf-vgal__headline {
	margin: 0;
}

.mf-vgal__eyebrow {
	margin: 0 0 6px;
	max-width: 100%;
	font-size: clamp(26px, 2.34vw, 45px);
	line-height: 1.267;
	letter-spacing: -0.03em;
	font-weight: 600;
	color: var(--mf-vgal-teal);
}

.mf-vgal__title {
	margin: 0;
	font-size: clamp(28px, 2.34vw, 45px);
	line-height: 1.267;
	letter-spacing: -0.03em;
	font-weight: 700;
	color: var(--mf-vgal-ink);
}

.mf-vgal__lead {
	margin: 0;
	font-size: clamp(16px, 1.25vw, 24px);
	line-height: 1.625;
	letter-spacing: -0.03em;
	font-weight: 700;
	color: var(--mf-vgal-body);
}

/* -- The grid --------------------------------------------------------------
   A <ul>, so the list reset lives here rather than on `ul` anywhere. */
.mf-vgal__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(32px, 3.4vw, 64px) var(--mf-vgal-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mf-vgal__item {
	margin: 0;
	min-width: 0;   /* without this a grid item refuses to shrink below its content */
}

/* -- Player ----------------------------------------------------------------
   The RATIO LIVES ON THE WRAPPER, never on the <img>. aspect-ratio is ignored
   on a broken image — it sizes to its alt text instead — and i.ytimg.com's
   maxresdefault legitimately 404s for non-HD uploads. This way a missing
   poster leaves a correctly sized black tile, not a collapsed one. */
.mf-vgal__player {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--mf-vgal-radius);
	overflow: hidden;
	background: #0b1413;
	box-shadow: 0 18px 44px rgba(0, 0, 0, .14);
}

.mf-vgal__facade {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: inherit;
	background: #0b1413;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.mf-vgal__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1);
	transition: transform .45s ease;
}

.mf-vgal__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .06) 0%, rgba(0, 0, 0, .42) 100%);
	transition: background .3s ease;
}

.mf-vgal__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(1);
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(64px, 5.2vw, 96px);
	height: clamp(64px, 5.2vw, 96px);
	border-radius: 100px;
	background: var(--mf-vgal-teal);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
	transition: transform .3s ease, background .3s ease;
}

.mf-vgal__play svg {
	width: 38%;
	height: 38%;
	margin-left: 6%;   /* optical centring — a triangle's visual centre is right of its box centre */
	fill: #003d3a;
}

/* Hover and keyboard focus get the same treatment. :focus-visible only, so a
   mouse click does not leave a ring behind on the tile. */
.mf-vgal__facade:hover .mf-vgal__poster,
.mf-vgal__facade:focus-visible .mf-vgal__poster {
	transform: scale(1.045);
}

.mf-vgal__facade:hover .mf-vgal__play,
.mf-vgal__facade:focus-visible .mf-vgal__play {
	transform: translate(-50%, -50%) scale(1.09);
	background: #8ee9e3;
}

.mf-vgal__facade:hover .mf-vgal__scrim,
.mf-vgal__facade:focus-visible .mf-vgal__scrim {
	background: linear-gradient(180deg, rgba(0, 0, 0, .02) 0%, rgba(0, 0, 0, .32) 100%);
}

.mf-vgal__facade:focus-visible {
	outline: 3px solid #003d3a;
	outline-offset: 3px;
}

/* The iframe that replaces the facade on click, and the <noscript> one. */
.mf-vgal__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: inherit;
	display: block;
}

/* -- Caption --------------------------------------------------------------- */
.mf-vgal__meta {
	margin-top: 20px;
}

.mf-vgal__name {
	margin: 0;
	font-size: clamp(19px, 1.35vw, 26px);
	line-height: 1.35;
	letter-spacing: -0.02em;
	font-weight: 700;
	color: var(--mf-vgal-ink);
}

.mf-vgal__caption {
	margin: 8px 0 0;
	font-size: clamp(15px, .94vw, 18px);
	line-height: 1.6;
	letter-spacing: -0.02em;
	font-weight: 400;
	color: var(--mf-vgal-body);
}

/* -- Responsive -------------------------------------------------------------
   Anything overridden here is NOT also set by a plain rule in a file that
   loads later — a media query adds no specificity, and that has already
   pinned one grid to three columns down to 320px in this project. */
@media (max-width: 1200px) {
	.mf-vgal__head {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 18px;
	}
}

@media (max-width: 900px) {
	.mf-vgal__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.mf-vgal {
		--mf-vgal-radius: 18px;
	}
}

@media (max-width: 560px) {
	.mf-vgal__inner {
		padding-inline: 20px;
	}

	.mf-vgal__meta {
		margin-top: 14px;
	}
}

/* Respect the OS "reduce motion" setting — the poster zoom is decorative. */
@media (prefers-reduced-motion: reduce) {
	.mf-vgal__poster,
	.mf-vgal__play,
	.mf-vgal__scrim {
		transition: none;
	}

	.mf-vgal__facade:hover .mf-vgal__poster,
	.mf-vgal__facade:focus-visible .mf-vgal__poster {
		transform: none;
	}
}
/* ====================== end video gallery ================================= */
/* ==========================================================================
   Mobile Framing — Blog index + single post
   Paste this WHOLE block at the very END of style.css, in one go.
   Pairs with the rewritten index.php and single.php.

   Notes
   - Every token used here is already defined in your :root. Nothing new is
     required, apart from the page-scoped --fs-* set below, which follows the
     exact pattern the Gallery / Shop / Contact / Artist pages already use.
   - `main#primary.mf-blog` and `main#primary.mf-post` are written with the id
     ON PURPOSE: there is a generic `main#primary { padding-block: ... }` rule
     earlier in this file, and a plain class would lose to it.
   - `.mf-blog__excerpt` and `.mf-blog__card-title` are clamped with
     max-height + overflow, NOT -webkit-line-clamp, because -webkit-box
     collapses to zero height inside a flex column.
   - The only place a class+element selector is used is inside
     `.mf-post__content`, where the markup comes from the editor and cannot
     carry classes. It is deliberately scoped so it cannot reach anything else.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page-scoped tokens
   Same scale as the other inner pages: 85px H1 at 1920, 22px lead.
   -------------------------------------------------------------------------- */
.mf-hero--blog,
.mf-hero--post,
.mf-blog,
.mf-post,
.mf-related {
	--fs-h1: clamp(34px, 4.427vw, 85px);
	--fs-lead: clamp(15px, 1.146vw, 22px);
	--lh-h1: 1.188;
	--lh-lead: 1.636;
	--mf-blog-tracking: -0.03em;

	--mf-blog-gap: clamp(18px, 1.771vw, 34px);
	--mf-blog-radius: clamp(18px, 1.771vw, 34px);
	--mf-blog-pad: clamp(16px, 1.302vw, 25px);
	--mf-blog-meta: clamp(13px, 0.833vw, 16px);
	--mf-blog-card-title: clamp(19px, 1.354vw, 26px);
	--mf-blog-card-text: clamp(14px, 0.938vw, 18px);
	--mf-blog-mint-wash: linear-gradient(180deg, #ffffff 0%, #f4fcfb 46%, #ffffff 100%);
}

.mf-blog *,
.mf-blog *::before,
.mf-blog *::after,
.mf-post *,
.mf-post *::before,
.mf-post *::after,
.mf-related *,
.mf-related *::before,
.mf-related *::after {
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   2. Hero — blog index
   Swap the URL below for a dedicated blog banner once one is uploaded; it
   currently borrows the gallery banner. The !important matches how every
   other .mf-hero--* modifier in this file beats the base .mf-hero rule.
   -------------------------------------------------------------------------- */
.mf-hero--blog {
	background-image:
		linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.45)),
		url(/wp-content/uploads/2026/09/gallery-banner.png) !important;
	background-position: top;
	background-size: cover;
	background-repeat: no-repeat;
}

.mf-hero--blog .mf-crumb,
.mf-hero--post .mf-crumb {
	font-size: var(--fs-lead);
	line-height: 1.773;
	letter-spacing: var(--mf-blog-tracking);
}

.mf-headline--blog {
	max-width: 41.77vw;
	min-width: 0;
	margin: 0;
	font-family: var(--mf-font-display);
	font-size: var(--fs-h1);
	font-weight: 400;
	line-height: var(--lh-h1);
	letter-spacing: var(--mf-blog-tracking);
	color: #fff;
	white-space: normal;
}

.mf-subtext--blog {
	width: 100%;
	max-width: 39.22vw;
	margin-top: clamp(10px, 1.042vw, 20px);
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
	letter-spacing: var(--mf-blog-tracking);
	color: rgba(255, 255, 255, 0.9);
}

/* --------------------------------------------------------------------------
   3. Hero — single post
   The image comes from the featured image as an inline background, so the
   only thing set here is how it sits.
   -------------------------------------------------------------------------- */
.mf-hero--post {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.mf-headline--post {
	max-width: 62.5vw;
	min-width: 0;
	margin: 0;
	font-family: var(--mf-font-display);
	font-size: clamp(30px, 3.385vw, 65px);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: var(--mf-blog-tracking);
	color: #fff;
	white-space: normal;
}

.mf-post__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(8px, 0.833vw, 16px);
	margin: clamp(14px, 1.302vw, 25px) 0 0;
	font-family: var(--mf-font-ui);
	font-weight: 500;
	font-size: clamp(13px, 0.938vw, 18px);
	line-height: 1.6;
	letter-spacing: var(--mf-blog-tracking);
	color: rgba(255, 255, 255, 0.9);
}

.mf-post__meta-tag {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	padding: 5px 16px;
	color: var(--mf-teal-deep);
	background-color: var(--mf-teal);
	border-radius: var(--mf-radius-pill);
}

.mf-post__meta-dot {
	display: inline-block;
	flex: 0 0 auto;
	width: 5px;
	height: 5px;
	background-color: var(--mf-teal);
	border-radius: 50%;
}

/* --------------------------------------------------------------------------
   4. Blog index — section shell
   -------------------------------------------------------------------------- */
main#primary.mf-blog {
	padding: clamp(38px, 3.958vw, 76px) 0 clamp(50px, 5.729vw, 110px);
	background: var(--mf-blog-mint-wash);
	font-family: var(--mf-font-display);
	letter-spacing: var(--mf-tracking);
}

.mf-blog__container {
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 var(--mf-gutter);
}

.mf-blog__head {
	max-width: 760px;
	margin: 0 0 clamp(26px, 2.604vw, 50px);
}

.mf-blog__head .badge-pill {
	max-width: 100%;
}

.mf-blog__title {
	margin: clamp(14px, 1.51vw, 29px) 0 0;
	font-size: var(--mf-fs-h2);
	font-weight: 400;
	line-height: var(--mf-lh-h2);
	letter-spacing: var(--mf-tracking);
	color: var(--mf-ink);
}

.mf-blog__lead {
	margin: clamp(10px, 1.042vw, 20px) 0 0;
	font-size: var(--mf-fs-lead);
	line-height: var(--mf-lh-lead);
	letter-spacing: var(--mf-tracking);
	color: var(--mf-grey-600);
}

/* --------------------------------------------------------------------------
   5. The card grid
   -------------------------------------------------------------------------- */
.mf-blog__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--mf-blog-gap);
}

.mf-blog__card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	margin: 0;
	background-color: var(--mf-surface);
	border: 1px solid var(--mf-hairline-soft);
	border-radius: var(--mf-blog-radius);
	box-shadow: var(--mf-shadow-post);
	transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.mf-blog__card:hover,
.mf-blog__card:focus-within {
	transform: translateY(-6px);
	border-color: rgba(var(--mf-teal-rgb), 0.6);
	box-shadow: var(--mf-shadow-card);
}

/* min-height as well as aspect-ratio: aspect-ratio is ignored on a broken
   <img>, so a post whose thumbnail 404s would otherwise collapse. */
.mf-blog__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 11;
	min-height: 170px;
	background-color: var(--mf-surface-photo);
}

.mf-blog__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.55s ease;
}

.mf-blog__card:hover .mf-blog__img {
	transform: scale(1.06);
}

.mf-blog__cat {
	position: absolute;
	top: clamp(10px, 0.833vw, 16px);
	left: clamp(10px, 0.833vw, 16px);
	display: inline-flex;
	align-items: center;
	max-width: calc(100% - 2 * clamp(10px, 0.833vw, 16px));
	padding: 6px 15px;
	font-family: var(--mf-font-ui);
	font-weight: 500;
	font-size: var(--mf-blog-meta);
	line-height: 1.45;
	letter-spacing: var(--mf-tracking);
	color: var(--mf-teal-deep);
	background-color: var(--mf-teal);
	border-radius: var(--mf-radius-pill);
	box-shadow: var(--mf-shadow-btn);
}

.mf-blog__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: clamp(7px, 0.625vw, 12px);
	padding: var(--mf-blog-pad);
}

.mf-blog__date {
	margin: 0;
	font-family: var(--mf-font-ui);
	font-size: var(--mf-blog-meta);
	line-height: 1.5;
	letter-spacing: var(--mf-tracking);
	color: var(--mf-grey-500);
}

.mf-blog__card-title {
	max-height: calc(1.3em * 3);
	overflow: hidden;
	margin: 0;
	font-size: var(--mf-blog-card-title);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: var(--mf-tracking);
	color: var(--mf-ink);
}

.mf-blog__link {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.mf-blog__link:hover,
.mf-blog__link:focus-visible {
	color: var(--mf-teal-dark);
}

/* Stretched hit area — the whole card is the link. */
.mf-blog__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.mf-blog__excerpt {
	max-height: calc(1.6em * 3);
	overflow: hidden;
	margin: 0;
	font-size: var(--mf-blog-card-text);
	line-height: 1.6;
	letter-spacing: var(--mf-tracking);
	color: var(--mf-grey-600);
}

.mf-blog__more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding-top: clamp(6px, 0.521vw, 10px);
	font-family: var(--mf-font-ui);
	font-weight: 500;
	font-size: clamp(14px, 0.938vw, 18px);
	letter-spacing: var(--mf-tracking);
	color: var(--mf-teal-deep);
}

/* Two classes so this beats .mf-next-btn__icon without relying on source
   order — that icon is white, which would vanish on a white card. */
.mf-blog__more .mf-blog__more-icon {
	width: clamp(32px, 2.083vw, 40px);
	height: clamp(32px, 2.083vw, 40px);
	background-color: var(--mf-teal);
	transition: transform 0.25s ease;
}

.mf-blog__more .mf-blog__more-icon img.arrow {
	top: 25%;
	right: 25%;
	width: 50%;
	height: 50%;
}

.mf-blog__card:hover .mf-blog__more-icon {
	transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   6. Pagination
   -------------------------------------------------------------------------- */
.mf-blog__pagination {
	margin-top: clamp(30px, 3.125vw, 60px);
}

.mf-blog__pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(6px, 0.625vw, 12px);
}

.mf-blog__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: clamp(38px, 2.5vw, 48px);
	height: clamp(38px, 2.5vw, 48px);
	padding: 0 14px;
	font-family: var(--mf-font-ui);
	font-weight: 500;
	font-size: clamp(14px, 0.938vw, 18px);
	letter-spacing: var(--mf-tracking);
	color: var(--mf-grey-800);
	text-decoration: none;
	background-color: var(--mf-surface);
	border: 1px solid var(--mf-hairline);
	border-radius: var(--mf-radius-pill);
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.mf-blog__pagination .page-numbers:hover,
.mf-blog__pagination .page-numbers:focus-visible {
	color: var(--mf-teal-deep);
	background-color: rgba(var(--mf-teal-rgb), 0.2);
	border-color: var(--mf-teal);
}

.mf-blog__pagination .current {
	color: var(--mf-teal-deep);
	background-color: var(--mf-teal);
	border-color: var(--mf-teal);
	box-shadow: var(--mf-shadow-btn);
}

.mf-blog__pagination .dots {
	background-color: transparent;
	border-color: transparent;
}

/* --------------------------------------------------------------------------
   7. Empty state
   -------------------------------------------------------------------------- */
.mf-blog__empty {
	max-width: 620px;
	padding: clamp(28px, 2.604vw, 50px);
	background-color: var(--mf-surface);
	border: 1px solid var(--mf-hairline-soft);
	border-radius: var(--mf-radius-panel);
	box-shadow: var(--mf-shadow-post);
}

.mf-blog__empty-title {
	margin: 0;
	font-size: var(--mf-fs-h2);
	font-weight: 400;
	line-height: var(--mf-lh-h2);
	letter-spacing: var(--mf-tracking);
	color: var(--mf-ink);
}

.mf-blog__empty-text {
	margin: clamp(10px, 0.833vw, 16px) 0 clamp(18px, 1.563vw, 30px);
	font-size: var(--mf-fs-lead);
	line-height: var(--mf-lh-lead);
	color: var(--mf-grey-600);
}

.mf-blog__empty-cta {
	display: inline-block;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   8. Single post — shell and reading column
   -------------------------------------------------------------------------- */
main#primary.mf-post {
	padding: clamp(34px, 3.646vw, 70px) 0 clamp(20px, 2.083vw, 40px);
	background-color: var(--mf-surface);
	font-family: var(--mf-font-display);
	letter-spacing: var(--mf-tracking);
}

.mf-post__container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--mf-gutter);
}

.mf-post__article {
	margin: 0;
}

/* --- Editor output ------------------------------------------------------
   The only class+element selectors in this block. Everything is prefixed
   with .mf-post__content so it cannot reach the header, footer or any
   other section. */
.mf-post__content {
	font-size: clamp(16px, 1.042vw, 19px);
	line-height: 1.75;
	letter-spacing: var(--mf-tracking);
	color: var(--mf-grey-800);
}

.mf-post__content > *:first-child {
	margin-top: 0;
}

.mf-post__content p {
	margin: 0 0 1.15em;
}

.mf-post__content h2 {
	margin: 1.85em 0 0.5em;
	font-size: clamp(24px, 1.875vw, 36px);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: var(--mf-tracking);
	color: var(--mf-ink);
}

.mf-post__content h3 {
	margin: 1.5em 0 0.45em;
	font-size: clamp(19px, 1.354vw, 26px);
	font-weight: 500;
	line-height: 1.32;
	letter-spacing: var(--mf-tracking);
	color: var(--mf-ink);
}

.mf-post__content h4 {
	margin: 1.4em 0 0.4em;
	font-size: clamp(17px, 1.146vw, 22px);
	font-weight: 500;
	line-height: 1.4;
	color: var(--mf-ink);
}

.mf-post__content ul,
.mf-post__content ol {
	margin: 0 0 1.2em;
	padding-left: 1.35em;
}

.mf-post__content li {
	margin-bottom: 0.5em;
}

.mf-post__content li::marker {
	color: var(--mf-teal-dark);
}

.mf-post__content a {
	color: #008080;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.mf-post__content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--mf-blog-radius);
}

.mf-post__content figure {
	margin: 1.6em 0;
}

.mf-post__content figcaption {
	margin-top: 0.6em;
	font-size: 0.85em;
	color: var(--mf-grey-500);
}

.mf-post__content blockquote {
	margin: 1.7em 0;
	padding: clamp(16px, 1.302vw, 25px) clamp(18px, 1.563vw, 30px);
	font-size: 1.05em;
	line-height: 1.6;
	color: var(--mf-ink);
	background: linear-gradient(113.759deg, rgba(108, 219, 213, 0.16) 0%, rgba(108, 219, 213, 0.04) 100%);
	border-left: 4px solid var(--mf-teal);
	border-radius: 0 var(--mf-blog-radius) var(--mf-blog-radius) 0;
}

.mf-post__content blockquote p:last-child {
	margin-bottom: 0;
}

.mf-post__content table {
	width: 100%;
	margin: 0 0 1.5em;
	border-collapse: collapse;
	font-size: 0.95em;
}

.mf-post__content th,
.mf-post__content td {
	padding: 12px 14px;
	text-align: left;
	border: 1px solid var(--mf-hairline);
}

.mf-post__content th {
	font-weight: 500;
	color: var(--mf-teal-deep);
	background-color: rgba(var(--mf-teal-rgb), 0.16);
}

.mf-post__content hr {
	height: 1px;
	margin: 2em 0;
	border: 0;
	background-color: var(--mf-hairline);
}

.mf-post__pagelinks {
	margin: 1.5em 0 0;
	font-family: var(--mf-font-ui);
	font-size: var(--mf-blog-meta);
	color: var(--mf-grey-600);
}

/* --- Tags ---------------------------------------------------------------- */
.mf-post__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: clamp(22px, 2.083vw, 40px) 0 0;
	padding: 0;
	list-style: none;
}

.mf-post__tag {
	display: inline-flex;
	align-items: center;
	padding: 6px 16px;
	font-family: var(--mf-font-ui);
	font-weight: 500;
	font-size: var(--mf-blog-meta);
	letter-spacing: var(--mf-tracking);
	color: var(--mf-grey-800);
	background-color: var(--mf-surface-muted);
	border-radius: var(--mf-radius-pill);
}

/* --------------------------------------------------------------------------
   9. Single post — CTA panel
   -------------------------------------------------------------------------- */
.mf-post__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: clamp(16px, 1.563vw, 30px);
	margin-top: clamp(30px, 3.125vw, 60px);
	padding: clamp(22px, 2.083vw, 40px);
	background: var(--mf-gradient-locations);
	border-radius: var(--mf-radius-panel);
	box-shadow: var(--mf-shadow-post);
}

.mf-post__cta-copy {
	flex: 1 1 320px;
	min-width: 0;
}

.mf-post__cta-title {
	margin: 0;
	font-size: clamp(22px, 1.667vw, 32px);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: var(--mf-tracking);
	color: var(--mf-teal-deep);
}

.mf-post__cta-text {
	margin: clamp(8px, 0.625vw, 12px) 0 0;
	font-size: var(--mf-blog-card-text);
	line-height: 1.6;
	letter-spacing: var(--mf-tracking);
	color: var(--mf-grey-800);
}

.mf-post__cta-link {
	flex: 0 0 auto;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   10. Single post — previous / next
   -------------------------------------------------------------------------- */
.mf-post__nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--mf-blog-gap);
	margin-top: clamp(24px, 2.344vw, 45px);
}

.mf-post__nav-link {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: clamp(16px, 1.302vw, 25px);
	text-decoration: none;
	background-color: var(--mf-surface);
	border: 1px solid var(--mf-hairline-soft);
	border-radius: var(--mf-blog-radius);
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.mf-post__nav-link:hover,
.mf-post__nav-link:focus-visible {
	transform: translateY(-3px);
	border-color: rgba(var(--mf-teal-rgb), 0.6);
	box-shadow: var(--mf-shadow-post);
}

.mf-post__nav-link--next {
	text-align: right;
	align-items: flex-end;
	grid-column: 2;
}

.mf-post__nav-label {
	font-family: var(--mf-font-ui);
	font-weight: 500;
	font-size: var(--mf-blog-meta);
	letter-spacing: var(--mf-tracking);
	color: var(--mf-teal-dark);
}

.mf-post__nav-title {
	max-height: calc(1.35em * 2);
	overflow: hidden;
	font-size: var(--mf-blog-card-text);
	line-height: 1.35;
	letter-spacing: var(--mf-tracking);
	color: var(--mf-ink);
}

.mf-post__comments {
	margin-top: clamp(30px, 3.125vw, 60px);
}

/* --------------------------------------------------------------------------
   11. Related posts
   -------------------------------------------------------------------------- */
.mf-related {
	padding: clamp(40px, 4.167vw, 80px) 0 clamp(48px, 5.208vw, 100px);
	background: var(--mf-blog-mint-wash);
	box-shadow: var(--mf-shadow-section-top);
	font-family: var(--mf-font-display);
	letter-spacing: var(--mf-tracking);
}

.mf-related__container {
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 var(--mf-gutter);
}

.mf-related__head {
	margin: 0 0 clamp(24px, 2.344vw, 45px);
}

.mf-related__head .badge-pill {
	max-width: 100%;
}

.mf-related__title {
	margin: clamp(14px, 1.51vw, 29px) 0 0;
	font-size: var(--mf-fs-h2);
	font-weight: 400;
	line-height: var(--mf-lh-h2);
	letter-spacing: var(--mf-tracking);
	color: var(--mf-ink);
}

.mf-related__foot {
	display: flex;
	justify-content: center;
	margin-top: clamp(28px, 2.604vw, 50px);
}

.mf-related__all {
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   12. Responsive
   Each breakpoint redeclares the values it changes; nothing later in this
   file overrides a value that is only set inside one of these queries.
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {

	.mf-blog__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 1024px) {

	.mf-headline--blog,
	.mf-subtext--blog {
		max-width: none;
	}

	.mf-headline--post {
		max-width: none;
	}

	.mf-post__container {
		max-width: 780px;
	}
}
.wc-block-grid__product-image {
    width: 300px;
}
@media (max-width: 767px) {

	.mf-hero--blog,
	.mf-hero--post,
	.mf-blog,
	.mf-post,
	.mf-related {
		--fs-h1: 36px;
		--fs-lead: 16px;
		--lh-h1: 1.139;
		--lh-lead: 1.75;
	}

	.mf-hero--blog .mf-crumb,
	.mf-hero--post .mf-crumb {
		flex-wrap: wrap;
		gap: 8px;
		margin-bottom: 14px;
		font-size: 15px;
		line-height: 1.6;
	}

	.mf-hero--blog .mf-crumb__icon,
	.mf-hero--post .mf-crumb__icon {
		width: 14px;
		height: 14px;
	}

	.mf-headline--post {
		font-size: 30px;
		line-height: 1.22;
	}

	.mf-blog__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.mf-blog__media {
		aspect-ratio: 16 / 9;
	}

	.mf-post__nav {
		grid-template-columns: minmax(0, 1fr);
	}

	.mf-post__nav-link--next {
		grid-column: 1;
		align-items: flex-start;
		text-align: left;
	}

	.mf-post__cta {
		justify-content: flex-start;
	}
	    .wc-block-grid.has-4-columns .wc-block-grid__products {
        display: block;
        gap: 22px;
        display: flex;
        padding: 27px;
    }
	    .wc-block-grid.has-4-columns .wc-block-grid__product {
        padding: 15px !important;
	}
}

@media (max-width: 480px) {

	.mf-hero--blog,
	.mf-hero--post,
	.mf-blog,
	.mf-post,
	.mf-related {
		--fs-h1: 32px;
	}

	.mf-headline--post {
		font-size: 26px;
	}

	.mf-blog__pagination .page-numbers {
		min-width: 36px;
		height: 36px;
		padding: 0 10px;
		font-size: 14px;
	}

	.mf-post__cta-link,
	.mf-blog__empty-cta,
	.mf-related__all {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   13. Motion and forced colours
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

	.mf-blog__card,
	.mf-blog__img,
	.mf-blog__more .mf-blog__more-icon,
	.mf-post__nav-link {
		transition: none;
	}

	.mf-blog__card:hover,
	.mf-blog__card:focus-within,
	.mf-post__nav-link:hover,
	.mf-post__nav-link:focus-visible {
		transform: none;
	}

	.mf-blog__card:hover .mf-blog__img,
	.mf-blog__card:hover .mf-blog__more-icon {
		transform: none;
	}
}

@media (forced-colors: active) {

	.mf-blog__card,
	.mf-post__nav-link,
	.mf-blog__pagination .page-numbers {
		border: 1px solid CanvasText;
	}
}
.products-wrapper {
    margin-top: 60px;
}
.gform-theme--framework .gf_progressbar {
    background-color: #fff !important;
}
/* Down arrow beside Our Services */
.mf-services-arrow > a::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 9px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    vertical-align: middle;
}/* Hover: arrow points up */
.mf-services-arrow:hover > a::after,
.mf-services-arrow:focus-within > a::after {
    transform: rotate(225deg);
}
.widget-area {
    display: none;
}.entry-header {
    margin-top: 100px;
}
/* =========================================================
   MOBILE FRAMING - 404 PAGE V2
   ========================================================= */

.mf404 {
    overflow: hidden;
    background: #fff;
}

.mf404__hero {
    position: relative;
    padding: 150px 0 110px;
    background:
        linear-gradient(180deg, #f8ffff 0%, #ffffff 86%);
}

.mf404__wrap {
    position: relative;
    z-index: 2;
    width: min(92%, 1480px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
    align-items: center;
    gap: 90px;
}

.mf404__content {
    max-width: 680px;
}

.mf404__content .badge-pill {
    margin-bottom: 24px;
}

.mf404__code {
    margin-bottom: 8px;
    color: rgba(0, 124, 124, .12);
    font-size: clamp(92px, 10vw, 162px);
    line-height: .8;
}

.mf404__title {
    margin: 0 0 24px;
    color: #123f40;
}

.mf404__title span {
    display: block;
    color: #55c5d1;
}

.mf404__text {
    max-width: 630px;
    margin: 0;
    color: rgba(99, 99, 99, .9);
    line-height: 1.75;
}

.mf404__actions {
    margin-top: 34px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.mf404__home {
    text-decoration: none;
}

.mf404__contact {
    min-height: 52px;
    padding: 0 22px 0 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border: 1px solid rgba(0, 124, 124, .20);
    border-radius: 999px;
    background: #fff;
    color: #176b6b;
    text-decoration: none;
    box-shadow: 0 7px 20px rgba(0, 124, 124, .06);
    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}

.mf404__contact span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e1f8f6;
    color: #007c7c;
}

.mf404__contact:hover {
    transform: translateY(-2px);
    border-color: #55c5d1;
    background: #fbffff;
    box-shadow: 0 12px 28px rgba(0, 124, 124, .10);
}


/* VISUAL */
.mf404__visual {
    position: relative;
    min-height: 560px;
}

.mf404__frame {
    position: absolute;
    padding: 16px;
    border-radius: 30px;
    background: #fff;
    box-shadow:
        0 24px 60px rgba(19, 94, 94, .12),
        inset 0 0 0 1px rgba(0, 124, 124, .08);
}

.mf404__frame::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 2px solid rgba(0, 124, 124, .10);
    border-radius: 22px;
    pointer-events: none;
}

.mf404__frame--back {
    width: 350px;
    height: 400px;
    top: 30px;
    left: 6%;
    transform: rotate(-9deg);
    opacity: .72;
}

.mf404__frame--middle {
    width: 355px;
    height: 430px;
    top: 68px;
    right: 3%;
    transform: rotate(8deg);
    opacity: .82;
}

.mf404__frame--front {
    width: 390px;
    height: 455px;
    top: 46px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    padding: 18px;
    border: 1px solid rgba(0, 124, 124, .12);
}

.mf404__frame-art {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background:
        radial-gradient(circle at 30% 30%, rgba(85, 197, 209, .58), transparent 30%),
        linear-gradient(135deg, #e5f9f7 0%, #cdeeed 45%, #f7ffff 100%);
}

.mf404__frame-art--two {
    background:
        linear-gradient(145deg, rgba(15, 60, 96, .10), rgba(85, 197, 209, .42)),
        linear-gradient(180deg, #eaf9f8, #ffffff);
}

.mf404__frame-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 22px;
    background:
        radial-gradient(circle at 50% 28%, rgba(85, 197, 209, .20), transparent 35%),
        linear-gradient(180deg, #f7ffff 0%, #eaf8f7 100%);
    overflow: hidden;
}

.mf404__frame-inner::before,
.mf404__frame-inner::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border: 1px solid rgba(0, 124, 124, .12);
    border-radius: 50%;
}

.mf404__frame-inner::before {
    top: -110px;
    left: -80px;
}

.mf404__frame-inner::after {
    right: -90px;
    bottom: -120px;
}

.mf404__mini {
    position: relative;
    z-index: 2;
    color: #176b6b;
    font-size: clamp(64px, 7vw, 100px);
    line-height: 1;
}

.mf404__mini-text {
    position: relative;
    z-index: 2;
    margin-top: 14px;
    color: rgba(99, 99, 99, .85);
}

.mf404__corner {
    position: absolute;
    width: 76px;
    height: 76px;
    border-color: rgba(85, 197, 209, .38);
    z-index: 4;
}

.mf404__corner--tl {
    top: 5px;
    left: 14%;
    border-top: 3px solid;
    border-left: 3px solid;
    border-top-left-radius: 24px;
}

.mf404__corner--br {
    right: 11%;
    bottom: 28px;
    border-right: 3px solid;
    border-bottom: 3px solid;
    border-bottom-right-radius: 24px;
}


/* DECORATIVE GLOWS */
.mf404__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    pointer-events: none;
}

.mf404__glow--one {
    width: 420px;
    height: 420px;
    top: -210px;
    right: 12%;
    background: rgba(85, 197, 209, .10);
}

.mf404__glow--two {
    width: 300px;
    height: 300px;
    left: -140px;
    bottom: -100px;
    background: rgba(0, 124, 124, .06);
}


/* SUPPORT BAR */
.mf404__support {
    padding: 0 0 95px;
}

.mf404__support-wrap {
    width: min(92%, 1480px);
    margin: 0 auto;
    padding: 38px 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    border: 1px solid rgba(0, 124, 124, .10);
    border-radius: 28px;
    background:
        linear-gradient(120deg, rgba(85, 197, 209, .11), rgba(255, 255, 255, .95));
}

.mf404__support-copy {
    max-width: 900px;
}

.mf404__support-copy .badge-pill {
    margin-bottom: 16px;
}

.mf404__support-copy .mf-svc-h2 {
    margin-bottom: 12px;
}

.mf404__support-copy .mf-svc-body {
    margin: 0;
    color: rgba(99, 99, 99, .9);
}

.mf404__support-btn {
    flex: 0 0 auto;
    text-decoration: none;
}


/* TABLET */
@media (max-width: 1100px) {

    .mf404__hero {
        padding: 120px 0 80px;
    }

    .mf404__wrap {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .mf404__content {
        max-width: 760px;
    }

    .mf404__visual {
        width: min(100%, 700px);
        min-height: 500px;
        margin: 0 auto;
    }

    .mf404__support-wrap {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* MOBILE */
@media (max-width: 640px) {

    .mf404__hero {
        padding: 90px 0 60px;
    }

    .mf404__wrap,
    .mf404__support-wrap {
        width: 94%;
    }

    .mf404__code {
        margin-bottom: 14px;
    }

    .mf404__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .mf404__actions > * {
        width: 100%;
    }

    .mf404__visual {
        min-height: 390px;
    }

    .mf404__frame--back {
        width: 220px;
        height: 270px;
        top: 38px;
        left: 2%;
    }

    .mf404__frame--middle {
        width: 220px;
        height: 285px;
        top: 62px;
        right: 1%;
    }

    .mf404__frame--front {
        width: 250px;
        height: 315px;
        top: 34px;
        padding: 12px;
    }

    .mf404__frame {
        border-radius: 22px;
    }

    .mf404__frame::before {
        border-radius: 16px;
    }

    .mf404__frame-inner {
        border-radius: 15px;
    }

    .mf404__corner {
        width: 52px;
        height: 52px;
    }

    .mf404__corner--tl {
        left: 8%;
    }

    .mf404__corner--br {
        right: 6%;
        bottom: 12px;
    }

    .mf404__support {
        padding-bottom: 65px;
    }

    .mf404__support-wrap {
        padding: 28px 24px;
        border-radius: 22px;
    }

    .mf404__support-btn {
        width: 100%;
    }
}
/* ===== Gold Coast: "Framing Experts / Complete Framing Solutions" tabs ===== */
.mf-gc-tabs {
  margin-bottom: 20px;
}
.mf-gc-tabs input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.mf-gc-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.mf-gc-tabs__btn {
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: #f0f0f0;
  color: #696768;
  transition: background 0.2s ease, color 0.2s ease;
}
.mf-gc-tabs__panel {
  display: none;
}
#mf-gc-tab-experts:checked ~ .mf-gc-tabs__panel--experts,
#mf-gc-tab-solutions:checked ~ .mf-gc-tabs__panel--solutions {
  display: block;
}
#mf-gc-tab-experts:checked ~ .mf-gc-tabs__nav .mf-gc-tabs__btn[for="mf-gc-tab-experts"],
#mf-gc-tab-solutions:checked ~ .mf-gc-tabs__nav .mf-gc-tabs__btn[for="mf-gc-tab-solutions"] {
  background: #6cdbd5;
  color: #ffffff;
}

/* ===== Gold Coast: "Why Gold Coast Clients Trust" checklist + video split ===== */
.mf-svc-why--goldcoast .mf-svc-why__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 60px);
  align-items: center;
}
.mf-svc-why--goldcoast .mf-svc-checklist {
  list-style: none;
  margin: 24px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mf-svc-why--goldcoast .mf-svc-checklist li {
  position: relative;
  padding-left: 32px;
  font-size: 17px;
  color: #333333;
}
.mf-svc-why--goldcoast .mf-svc-checklist li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: #6cdbd5;
  font-weight: 700;
}
.mf-svc-why--goldcoast {
    max-width: 1500px;
    padding: 50px;
}
.mf-svc-why__video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
}
.mf-svc-why__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 800px) {
  .mf-svc-why--goldcoast .mf-svc-why__split {
    grid-template-columns: 1fr;
  }
}
.about--video-only .about__features {
  grid-template-columns: 1fr;
  max-width: 800px;
  margin: 0 auto;
}
.about--video-only .media-card {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
.mf-svc-cols {
  padding: 80px 24px;
}
.mf-svc-cols__container {
  max-width: 1200px;
  margin: 0 auto;
}
.mf-svc-cols__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}
.mf-svc-cols__title {
  font-size: clamp(24px, 2.344vw, 45px);
  margin: 12px 0 0;
  line-height: 1.267;
}
.mf-svc-cols__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.mf-svc-cols__card {
  background: #ffffff;
  border-radius: 12px;
  padding: 32px 28px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.mf-svc-cols__card h3 {
  font-size: 1.25rem;
  margin: 0 0 12px;
}
.mf-svc-cols__card p {
  color: #555555;
  line-height: 1.7;
  margin: 0;
}
@media (max-width: 900px) {
  .mf-svc-cols__grid {
    grid-template-columns: 1fr;
  }
}
.mf-gc-tabs {
  margin-bottom: 20px;
}
.mf-gc-tabs input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.mf-gc-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.mf-gc-tabs__btn {
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: #f0f0f0;
  color: #696768;
  transition: background 0.2s ease, color 0.2s ease;
}
.mf-gc-tabs__panel {
  display: none;
}
.mf-gc-tabs input[type="radio"][id*="experts"]:checked ~ .mf-gc-tabs__panel--experts,
.mf-gc-tabs input[type="radio"][id*="solutions"]:checked ~ .mf-gc-tabs__panel--solutions {
  display: block;
}
.mf-gc-tabs input[type="radio"][id*="experts"]:checked ~ .mf-gc-tabs__nav .mf-gc-tabs__btn[for*="experts"],
.mf-gc-tabs input[type="radio"][id*="solutions"]:checked ~ .mf-gc-tabs__nav .mf-gc-tabs__btn[for*="solutions"] {
  background: #6cdbd5;
  color: #ffffff;
}
/* ==========================================================================
   Single product — variation labels inline with their dropdown, plus meta
   cleanup. Appended 2026-09-18. Overrides the earlier "Variations table"
   block further up this file.
   ========================================================================== */

body.single-product table.variations tr {
	display: flex;
	align-items: center;
	gap: clamp(10px, 1.042vw, 20px);
	width: 100%;
	margin-bottom: clamp(12px, 1.042vw, 20px);
	padding: 0;
	border: 0;
	background: none;
}

body.single-product table.variations th.label {
	flex: 0 0 clamp(110px, 9vw, 150px);
	width: auto;
	margin: 0;
	padding: 0;
	text-align: left;
}

body.single-product table.variations td.value {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
}

body.single-product table.variations th.label label {
	display: inline-block;
	margin-bottom: 0;
	font-size: var(--wc-fs-label);
	line-height: 1.2;
	color: #656565;
}

body.single-product table.variations td.value select {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}

body.single-product table.variations td.value .reset_variations {
	display: inline-block;
	margin-top: 6px;
}

/* "SKU: N/A" — no product carries a real SKU, so drop the line */
body.single-product .product_meta .sku_wrapper {
	display: none;
}
.mf-modal .gform_wrapper select {
    padding-top: 12px;
    padding-bottom: 16px;
}
.mf-modal .gform_wrapper .gform_required_legend {
    line-height: 3;
}


/* Blank Canvas video: fit the 16:9 box instead of rendering at native 1920x1080 (was cropped) */
.mf-blank-video-section__media video,
.mf-blank-video-section__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}


/* Local Artists: space between hero and Local Artists banner (both have full-width photo backgrounds) */
.mf-hero--artist + .mf-ap-local {
	margin-top: clamp(32px, 3.125vw, 60px);
}


/* ==========================================================
   Policy pages: Returns (13031), Shipping (13032) - simple legal layout
   ========================================================== */
:is(.page-id-13031, .page-id-13032) .site-main {
	background: linear-gradient(108.86deg, #ffffff 2.45%, #eefafa 63.88%, #d7f5f3 123%);
	padding: clamp(120px, 8.4vw, 170px) 0 clamp(60px, 5.2vw, 100px);
}
:is(.page-id-13031, .page-id-13032) .site-main > article {
	width: min(1100px, 90%);
	margin: 0 auto;
	background: #ffffff;
	border: 1px solid rgba(0, 128, 128, 0.12);
	border-radius: var(--mf-radius-panel, 30px);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.06);
	padding: clamp(28px, 3.6vw, 70px) clamp(22px, 4.2vw, 80px);
	font-family: var(--mf-font-display, Arial, sans-serif);
}
:is(.page-id-13031, .page-id-13032) .entry-header { margin: 0 0 clamp(18px, 1.6vw, 30px); padding-bottom: clamp(16px, 1.4vw, 26px); border-bottom: 2px solid var(--mf-teal, #6cdbd5); }
:is(.page-id-13031, .page-id-13032) .entry-title {
	margin: 0;
	font-size: var(--mf-fs-h2, 40px);
	font-weight: 400;
	letter-spacing: var(--mf-tracking, -0.03em);
	color: var(--mf-black, #000);
}
:is(.page-id-13031, .page-id-13032) .entry-content h2 {
	margin: clamp(26px, 2.3vw, 44px) 0 12px;
	font-size: var(--mf-fs-faq, 24px);
	font-weight: 500;
	color: var(--mf-black, #000);
}
:is(.page-id-13031, .page-id-13032) .entry-content p,
:is(.page-id-13031, .page-id-13032) .entry-content li {
	font-size: var(--mf-fs-lead, 18px);
	line-height: var(--mf-lh-lead, 1.625);
	color: var(--mf-grey-600, #636363);
}
:is(.page-id-13031, .page-id-13032) .entry-content p { margin: 0 0 12px; }
:is(.page-id-13031, .page-id-13032) .entry-content ul { margin: 4px 0 16px; padding-left: 0; list-style: none; }
:is(.page-id-13031, .page-id-13032) .entry-content li { position: relative; padding-left: 26px; margin-bottom: 6px; }
:is(.page-id-13031, .page-id-13032) .entry-content li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 0.72em;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--mf-teal, #6cdbd5);
}
:is(.page-id-13031, .page-id-13032) .entry-footer { display: none; }

:is(.page-id-13031, .page-id-13032) .entry-content a { color: #008080; text-decoration: underline; }


/* Standardised Get A Quote spacing: closing two-column sections + Picture Hanging 'included' section
   (matches .mf-svc-split__copy .mf-svc-cta used on other sections) */
.mf-svc-cols__col .mf-svc-cta,
.mf-hang-included .mf-svc-cta {
	margin-top: clamp(18px, 2.396vw, 46px);
}
@media (max-width: 767px) {
	.mf-svc-cols__col .mf-svc-cta,
	.mf-hang-included .mf-svc-cta {
		margin-top: 18px;
	}
}


/* ==========================================================================
   HERO CTA - "Get A Quote" inside the banner (Art Couriers Sydney)
   Sits under .mf-subtext--service inside .mf-hero__content. The hero has no
   fixed height, so it simply grows by the height of the button.
   ========================================================================== */

.mf-hero__cta {
	margin-top: clamp(18px, 1.771vw, 34px);
}

.mf-hero__cta .mf-svc-cta {
	display: inline-block;
	text-decoration: none;
}

@media (max-width: 767px) {

	.mf-hero__cta {
		margin-top: 18px;
	}

	.mf-hero__cta .quote-btn {
		min-height: 44px;
		padding: 3px 13px;
		font-size: 15px;
		line-height: 1.4;
	}
}


/* ==========================================================================
   Hero form (form 1) - page 2 "Tell Us About Your Project"
   Compact field sizing + tidy grid. Added 2026-09-30, revised same day.

   Why the big row gap was there: Notes (#field_1_9) spans grid rows 1-2 and
   its textarea had height:100% with no definite height to resolve against,
   so it fell back to its intrinsic size (rows="10", ~253px). That sized rows
   1 and 2 from the spanning item instead of from their own content. Every
   textarea height below is therefore a DEFINITE value, set to match exactly
   two field rows: (2 x 71px) + 14px gap - 25px label block = 130px.

   Field ids shifted when the form was rebuilt: Location is #field_1_11 and
   "Please specify your location" is #field_1_12. #field_1_8 no longer
   exists, so the earlier #field_1_8 rules above are dead.
   ========================================================================== */

/* --- card ------------------------------------------------------------- */

#gform_page_1_2 {
	padding: 78px 28px 24px !important;
}

#gform_page_1_2::before {
	top: 28px;
	left: 28px;
	font-size: 20px;
}

#gform_page_1_2 .gform_page_footer {
	top: 20px;
	right: 28px;
	gap: 10px;
}

/* --- grid ------------------------------------------------------------- */

#gform_page_1_2 .gform_fields {
	align-items: start !important;
	gap: 14px 18px !important;
}

#gform_page_1_2 #field_1_12 {
	grid-area: 3 / 4 / auto / span 3 !important;
}

/* --- labels and controls ---------------------------------------------- */

#gform_page_1_2 .gfield_label {
	font-size: 14px !important;
	margin-bottom: 5px !important;
}

#gform_page_1_2 input[type="text"],
#gform_page_1_2 input[type="email"],
#gform_page_1_2 input[type="tel"],
#gform_page_1_2 select,
#gform_page_1_2 input[type="file"] {
	height: 46px !important;
	padding: 0 14px !important;
	font-size: 14px !important;
	border-radius: 10px !important;
}

#gform_page_1_2 .gform_fileupload_rules {
	display: none !important;
}

/* --- Notes ------------------------------------------------------------ */

#gform_page_1_2 #field_1_9 {
	align-self: start !important;
}

#gform_page_1_2 #field_1_9 .ginput_container {
	flex: 0 0 auto !important;
}

#gform_page_1_2 textarea {
	height: 130px !important;
	min-height: 0 !important;
	max-height: 130px !important;
	padding: 11px 14px !important;
	font-size: 14px !important;
	border-radius: 10px !important;
}

/* --- buttons ---------------------------------------------------------- */

#gform_page_1_2 .gform_next_button,
#gform_page_1_2 .gform_previous_button,
#gform_page_1_2 .gform_button {
	font-size: 16px !important;
	padding: 3px 3px 3px 22px !important;
}

#gform_page_1_2 .gform_next_button::after,
#gform_page_1_2 .gform_previous_button::after,
#gform_page_1_2 .gform_button::after {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	background-size: 14px 14px;
}

/* --- tablet (768-1024) ------------------------------------------------ */
/* The older max-width:1024px block above still assumed the OLD field ids, so
   the whole placement is re-declared here. The Previous/Submit footer is
   absolutely positioned top-right on desktop; at this width the card is too
   narrow for that, so it drops below the fields. GF's own theme CSS also sets
   the footer to flex-direction:column here, which stacks the two buttons
   full-width - hence the explicit row + auto width. */

@media (min-width: 768px) and (max-width: 1024px) {

	#gform_page_1_2 {
		padding: 62px 24px 22px !important;
	}

	#gform_page_1_2 .gform_page_footer {
		position: static !important;
		flex-direction: row !important;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 10px;
		margin-top: 16px !important;
	}

	#gform_page_1_2 .gform_page_footer .gform_previous_button,
	#gform_page_1_2 .gform_page_footer .gform_button {
		flex: 0 0 auto !important;
		width: auto !important;
	}
}

@media (max-width: 1024px) {

	#gform_page_1_2 #field_1_5 {
		grid-area: 1 / 1 / auto / span 6 !important;
	}

	#gform_page_1_2 #field_1_6 {
		grid-area: 1 / 7 / auto / span 6 !important;
	}

	#gform_page_1_2 #field_1_7 {
		grid-area: 2 / 1 / auto / span 6 !important;
	}

	#gform_page_1_2 #field_1_11 {
		grid-area: 2 / 7 / auto / span 6 !important;
	}

	#gform_page_1_2 #field_1_12 {
		grid-area: 3 / 7 / auto / span 6 !important;
	}

	#gform_page_1_2 #field_1_9 {
		grid-area: 4 / 1 / auto / span 12 !important;
	}

	#gform_page_1_2 #field_1_10 {
		grid-area: 5 / 1 / auto / span 12 !important;
	}

	#gform_page_1_2 textarea {
		height: 118px !important;
		max-height: 118px !important;
	}
}

/* --- phone ------------------------------------------------------------ */
/* Every field is listed by id on purpose. A two-ID selector such as
   #gform_page_1_2 #field_1_5 in the 1024 block above outranks
   #gform_page_1_2 .gform_fields > .gfield, so the generic single-column rule
   loses and the grid stays two-up on a phone. Specificity, not order.
   16px on the controls is also deliberate: iOS Safari zooms the page when a
   focused input is under 16px. */

@media (max-width: 767px) {

	#gform_page_1_2 {
		padding: 58px 14px 18px !important;
	}

	#gform_page_1_2::before {
		top: 18px;
		left: 14px;
		font-size: 17px;
	}

	#gform_page_1_2 .gform_fields {
		gap: 12px !important;
	}

	#gform_page_1_2 .gform_fields > .gfield,
	#gform_page_1_2 #field_1_5,
	#gform_page_1_2 #field_1_6,
	#gform_page_1_2 #field_1_7,
	#gform_page_1_2 #field_1_9,
	#gform_page_1_2 #field_1_10,
	#gform_page_1_2 #field_1_11,
	#gform_page_1_2 #field_1_12 {
		grid-area: auto / 1 / auto / -1 !important;
	}

	#gform_page_1_2 .gfield_label {
		font-size: 13px !important;
		margin-bottom: 4px !important;
	}

	#gform_page_1_2 input[type="text"],
	#gform_page_1_2 input[type="email"],
	#gform_page_1_2 input[type="tel"],
	#gform_page_1_2 select,
	#gform_page_1_2 input[type="file"] {
		height: 46px !important;
		font-size: 16px !important;
	}

	#gform_page_1_2 textarea {
		height: 100px !important;
		max-height: 100px !important;
		font-size: 16px !important;
	}

	/* Previous / Submit side by side instead of wrapping onto two lines */
	#gform_page_1_2 .gform_page_footer {
		flex-direction: row !important;
		flex-wrap: nowrap;
		gap: 10px;
	}

	#gform_page_1_2 .gform_page_footer .gform_previous_button,
	#gform_page_1_2 .gform_page_footer .gform_button {
		flex: 1 1 0 !important;
		width: auto !important;
		min-width: 0 !important;
		margin: 0 !important;
		justify-content: center;
	}
}


/* Popup dialogs: let the white panel size to its content on mobile.
   .mf-modal is a fixed, scrolling flex container; align-items: stretch sized
   .mf-modal__dialog to the viewport (882px) while its content was 1342px, so
   long forms rendered past the white background onto the grey backdrop. */
@media ( max-width: 767px ) {

	.mf-modal {
		align-items: flex-start;
	}

	.mf-modal__dialog {
		height: auto;
	}
}


/* Printing (6) and Art Courier (8): keep the size pair on one row.
   Both forms place Length before Width, and the field before them is
   half-width, so the pair straddled a row boundary — Length on the right
   of one row, Width on the left of the next. Forcing Length to start a
   row lets Width auto-place beside it. Desktop only: below 768px the
   grid is a single column and the pair stacks, which is correct. */
@media ( min-width: 768px ) {

	#field_6_18,
	#field_8_8 {
		grid-column: 1 / span 6 !important;
	}
}


/* …and the field just above each size pair goes full width, so the row the
   pair was pushed out of is not left half empty. */
@media ( min-width: 768px ) {

	#field_6_20,
	#field_8_6 {
		grid-column: 1 / -1 !important;
	}
}


/* ==========================================================================
   mf-gal-grid-cap — cap the Our Works masonry so cells never approach the
   source files' native 557px.

   The 26 gallery JPEGs are 557px wide. At the full 1757px grid each of the
   three columns rendered at 553px, i.e. 1:1 on a standard screen and only
   half-resolution on a retina one, which is why they read as soft.

   Capping the grid at 1200px gives columns of about 367px: 1.5x headroom on
   a 1x screen and roughly 0.75x on a 2x screen. To trade more size for more
   sharpness, lower the max-width -- 3 columns + 2 x 49px gaps, so
   column = (max-width - 98) / 3. 932px would give full 2x sharpness at 278px
   columns, which is small for a desktop gallery.

   Only .mf-gal__grid is capped; .mf-gal__head keeps the section's full
   width. Nothing here touches display or column-count, so the
   @media (max-width: 1024px) multicol rule above is unaffected.
   ========================================================================== */
.mf-gal__grid {
	max-width: 1200px;
	margin-inline: auto;
}
.site-footer__col-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
	color: #808080;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.1;
	text-decoration: none;
	transition: gap 0.2s ease, color 0.2s ease;
}

.site-footer__col-more:visited {
	color: #808080;
}

.site-footer__col-more:hover,
.site-footer__col-more:focus-visible {
	gap: 10px;
	color: #6cdbd5;
	text-decoration: none;
}

.site-footer__col-more-arrow {
	line-height: 1;
}


/* ==========================================================================
   Inline body links (Areas We Serve) — were falling through to the default
   browser blue. Uses the same teal as .mf-svc-area__title (#008080); the
   brand #6cdbd5 is too light for text on white.
   ========================================================================== */
.mf-svc-area__text a,
.mf-svc-cols__card a:not([class]) {
	color: #008080;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(0, 128, 128, 0.45);
	transition: color 0.2s ease, border-color 0.2s ease;
}

.mf-svc-area__text a:visited,
.mf-svc-cols__card a:not([class]):visited {
	color: #008080;
}

.mf-svc-area__text a:hover,
.mf-svc-area__text a:focus-visible,
.mf-svc-cols__card a:not([class]):hover,
.mf-svc-cols__card a:not([class]):focus-visible {
	color: #004e4a;
	border-bottom-color: #004e4a;
}


/* ==================================================================
   Blog "Load More" — 2026-10-26
   Replaces .mf-blog__pagination on the blog index and on term archives.
   The numbered pagination is still emitted inside <noscript>, so these
   rules only cover the button, its loading state and the live region.
   ================================================================== */

.mf-blog__more-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-top: 56px;
}

/* Two classes, so it beats the single-class .quote-btn { display: flex }. */
.mf-blog__loadmore[hidden] {
	display: none;
}

.mf-blog__loadmore {
	padding: 7px 7px 7px 26px;
	transition: opacity 0.2s ease;
}

.mf-blog__loadmore:disabled {
	cursor: progress;
}

.mf-blog__loadmore.is-loading {
	opacity: 0.65;
}

.mf-blog__loadmore.is-loading .mf-next-btn__icon {
	animation: mf-blog-more-spin 0.9s linear infinite;
}

@keyframes mf-blog-more-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mf-blog__loadmore.is-loading .mf-next-btn__icon {
		animation: none;
	}
}

.mf-blog__more-status {
	margin: 0;
	font-family: 'Poppins', sans-serif;
	font-size: 15px;
	line-height: 1.5;
	color: #5a6a6a;
}

.mf-blog__more-status:empty {
	display: none;
}

@media (max-width: 767px) {
	.mf-blog__more-wrap {
		margin-top: 36px;
	}
}


/* WP Rocket YouTube preview inside media cards */
.media-card .rll-youtube-player{position:absolute;inset:0;width:100%;height:100%;padding-bottom:0;margin:0;cursor:pointer}
.media-card .rll-youtube-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Footer: align "Follow Us On" column with the other link columns */
.site-footer__cols .site-footer__social {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
}

.site-footer__cols .site-footer__legal {
	align-self: flex-start;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	text-align: left;
	float: none;
	list-style: none;
}

.site-footer__cols .site-footer__legal li {
	text-align: left;
}
/* Footer fixes — client changes 27/10/2026 */

/* 1. Equal columns + fixed gap (desktop) */
@media (min-width: 1201px) {
	.site-footer__cols {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		column-gap: 40px;
		justify-content: stretch;
	}
}

/* 3. "View all areas" — same gap as the links above */
.site-footer__col-links .site-footer__col-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	line-height: inherit;
}

/* 2. Policies in the bottom bar */
.site-footer__copy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	margin: 0;
}
.site-footer__policies {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.site-footer__policies::before,
.site-footer__sep { opacity: 0.6; }
.site-footer__policies::before { content: "\00B7"; }
.site-footer__copy a { color: inherit; text-decoration: none; }
.site-footer__copy a:hover,
.site-footer__copy a:focus-visible { text-decoration: underline; }

@media (max-width: 767px) {
	.site-footer__copy { flex-direction: column; align-items: flex-start; }
	.site-footer__policies::before { content: none; }
	.site-footer__bottom { padding-bottom: 70px; } /* clear the floating call button */
}

/* mf-team-snap-fix: on <=1024px the team cards overflow and snap to their start edge. With 20px left padding the first snap point was 20px, so the browser auto-scrolled the carousel right after layout; that early scroll stopped Chrome recording LCP (mobile PageSpeed NO_LCP). Starting flush makes 0 a snap point. Same look: the first card already rested flush after the snap. */
@media (max-width: 1024px) {
	.mf-team .mf-team__scroller { padding-left: 0; }
	.mf-team .mf-team__row { width: calc(100% - var(--mf-gutter)); } /* keep card widths as they were with the padding */
}
@media (max-width: 767px) {
	.mf-team .mf-team__row { width: calc(100% - 20px); }
}

/* ---------------------------------------------------------------
   Jersey video media — WP Rocket lazy-load fix
   Videos are 16:9 but the frame was locked to 9:16, and WP Rocket
   swaps the iframe for a .rll-youtube-player placeholder
   (padding-bottom:56.23%; height:0) that the existing
   .mf-jersey-video-media iframe rule never matched — leaving a large
   #111 block under the thumbnail on mobile.
   --------------------------------------------------------------- */
.mf-jersey-video-media {
	aspect-ratio: 16 / 9;
	width: min(100%, 560px);
}
.mf-jersey-video-media .rll-youtube-player {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding-bottom: 0;
	margin: 0;
	cursor: pointer;
}
.mf-jersey-video-media .rll-youtube-player > div {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.mf-jersey-video-media .rll-youtube-player img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}
.mf-jersey-video-media .rll-youtube-player iframe {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
}


/* ---------------------------------------------------------------
   Other service pages — landscape clips in portrait frames
   Same root cause as the jersey page: these frames are 9/16 but the
   videos in them are 16:9, so the clip is letterboxed (and where WP
   Rocket swaps in its .rll-youtube-player placeholder, the frame's
   background shows as a black slab under the thumbnail).
     /custom-framing/            .mf-custom-video-media
     /floating-frames/           .mf-floating-video-media--portrait
     /picture-hanging-service/   .mf-hang-video--portrait
   --------------------------------------------------------------- */
.mf-custom-video-media,
.mf-floating-video-media--portrait,
.mf-floating-video-section--portrait .mf-floating-video-media,
.mf-hang-video--portrait {
	aspect-ratio: 16 / 9;
	width: min(100%, 720px);
}
.mf-custom-video-media .rll-youtube-player,
.mf-floating-video-media .rll-youtube-player,
.mf-hang-video .rll-youtube-player {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding-bottom: 0;
	margin: 0;
	cursor: pointer;
}
.mf-custom-video-media .rll-youtube-player > div,
.mf-floating-video-media .rll-youtube-player > div,
.mf-hang-video .rll-youtube-player > div {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.mf-custom-video-media .rll-youtube-player img,
.mf-floating-video-media .rll-youtube-player img,
.mf-hang-video .rll-youtube-player img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}
.mf-custom-video-media .rll-youtube-player iframe,
.mf-floating-video-media .rll-youtube-player iframe,
.mf-hang-video .rll-youtube-player iframe {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
}

/* /picture-hanging-service/ intro: on desktop this panel stretched to
   the text card's height (min-height 590) with a black background, so
   the 16:9 clip sat letterboxed in a near-square box. */
@media (min-width: 768px) {
	.mf-svc-panel__media.mf-hang-intro__video {
		aspect-ratio: 16 / 9;
		min-height: 0;
		height: auto;
		width: 100%;
		align-self: center;
	}
}


/* ---------------------------------------------------------------
   Video split sections — floated video, copy wraps underneath
   Shared by /jersey-framing/, /floating-frames/ and /custom-framing/.
   Desktop only: the section runs as a plain block with the figure
   floated, so the heading and opening paragraphs sit beside the
   video and the copy continues from the left edge once it clears it.

   Three things are load-bearing:
   1. position: relative on the figure — NEVER static. The theme's
      iframe is position:absolute;inset:0 and needs the figure as its
      containing block, or it escapes and fills the viewport.
   2. display: block on .mf-svc-split__copy — it is a flex column in
      the theme, and a flex container (a BFC) will not wrap around a
      float. That costs align-items:flex-start, hence width:fit-content
      on the pill, the CTA and the spec row.
   3. The doubled .mf-svc-split__media.mf-*-video-media selector, so
      the width beats the per-page --portrait width rules.

   The --reverse sections needed their <figure> moved ahead of the
   copy in the template (a float can move sideways, never upwards):
   template-parts/Jersey Framing.php and Floating Frames.php.
   Phones keep the stacked single-column grid.
   --------------------------------------------------------------- */
@media (min-width: 1025px) {
	.mf-jersey-video-section .mf-svc-split__inner,
	.mf-floating-video-section .mf-svc-split__inner,
	.mf-custom-video-section .mf-svc-split__inner {
		display: block;
		max-width: 1680px;
		margin-inline: auto;
		padding-inline: clamp(28px, 2.2vw, 48px);
	}
	.mf-jersey-video-section .mf-svc-split__inner::after,
	.mf-floating-video-section .mf-svc-split__inner::after,
	.mf-custom-video-section .mf-svc-split__inner::after {
		content: "";
		display: block;
		clear: both;
	}
	.mf-jersey-video-section .mf-svc-split__media.mf-jersey-video-media,
	.mf-floating-video-section .mf-svc-split__media.mf-floating-video-media,
	.mf-custom-video-section .mf-svc-split__media.mf-custom-video-media {
		position: relative;
		float: left;
		width: min(42%, 520px);
		max-width: none;
		margin: 0 clamp(28px, 2.6vw, 44px) clamp(18px, 1.6vw, 26px) 0;
	}
	.mf-jersey-video-section.mf-svc-split--reverse .mf-svc-split__media.mf-jersey-video-media,
	.mf-floating-video-section.mf-svc-split--reverse .mf-svc-split__media.mf-floating-video-media,
	.mf-custom-video-section.mf-svc-split--reverse .mf-svc-split__media.mf-custom-video-media {
		float: right;
		margin: 0 0 clamp(18px, 1.6vw, 26px) clamp(28px, 2.6vw, 44px);
	}
	.mf-jersey-video-section .mf-svc-split__copy,
	.mf-floating-video-section .mf-svc-split__copy,
	.mf-custom-video-section .mf-svc-split__copy {
		display: block;
		width: auto;
		max-width: none;
	}
	.mf-jersey-video-section .mf-svc-split__copy > .badge-pill,
	.mf-jersey-video-section .mf-svc-split__copy > .mf-svc-cta,
	.mf-floating-video-section .mf-svc-split__copy > .badge-pill,
	.mf-floating-video-section .mf-svc-split__copy > .mf-svc-cta,
	.mf-floating-video-section .mf-svc-split__copy > .mf-floating-spec-row,
	.mf-custom-video-section .mf-svc-split__copy > .badge-pill,
	.mf-custom-video-section .mf-svc-split__copy > .mf-svc-cta {
		width: fit-content;
	}
}
@media (max-width: 1024px) {
	.mf-jersey-video-section .mf-svc-split__inner,
	.mf-floating-video-section .mf-svc-split__inner,
	.mf-custom-video-section .mf-svc-split__inner {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* ---------------------------------------------------------------
   Every remaining .mf-svc-split section that holds a video
   Catches the ones with no page-specific class of their own:
   /canvas-stretching/ (x2), /custom-framing-brisbane/,
   /custom-framing-sydney/, /custom-framing-byron-bay/.
   Their .mf-svc-split__media is aspect-ratio 478/850 (portrait) while
   the clips are landscape, and the media column is sized to match, so
   the video came out small in a tall frame.
   :has() scopes this to sections that actually contain a video —
   image-only split sections keep the portrait frame by design.
   Same three rules as the block above: relative (never static) so the
   absolute iframe stays contained, block copy so it wraps the float,
   fit-content on the pill and CTA.
   --------------------------------------------------------------- */
@supports selector(:has(*)) {
	.mf-svc-split:has(.mf-svc-split__video) .mf-svc-split__media,
	.mf-svc-split:has(.rll-youtube-player) .mf-svc-split__media {
		aspect-ratio: 16 / 9;
	}

	@media (min-width: 1025px) {
		.mf-svc-split:has(.mf-svc-split__video) .mf-svc-split__inner,
		.mf-svc-split:has(.rll-youtube-player) .mf-svc-split__inner {
			display: block;
			max-width: 1680px;
			margin-inline: auto;
			padding-inline: clamp(28px, 2.2vw, 48px);
		}
		.mf-svc-split:has(.mf-svc-split__video) .mf-svc-split__inner::after,
		.mf-svc-split:has(.rll-youtube-player) .mf-svc-split__inner::after {
			content: "";
			display: block;
			clear: both;
		}
		.mf-svc-split:has(.mf-svc-split__video) .mf-svc-split__media,
		.mf-svc-split:has(.rll-youtube-player) .mf-svc-split__media {
			position: relative;
			float: left;
			width: min(42%, 520px);
			max-width: none;
			margin: 0 clamp(28px, 2.6vw, 44px) clamp(18px, 1.6vw, 26px) 0;
		}
		.mf-svc-split--reverse:has(.mf-svc-split__video) .mf-svc-split__media,
		.mf-svc-split--reverse:has(.rll-youtube-player) .mf-svc-split__media {
			float: right;
			margin: 0 0 clamp(18px, 1.6vw, 26px) clamp(28px, 2.6vw, 44px);
		}
		.mf-svc-split:has(.mf-svc-split__video) .mf-svc-split__copy,
		.mf-svc-split:has(.rll-youtube-player) .mf-svc-split__copy {
			display: block;
			width: auto;
			max-width: none;
		}
		.mf-svc-split:has(.mf-svc-split__video) .mf-svc-split__copy > .badge-pill,
		.mf-svc-split:has(.mf-svc-split__video) .mf-svc-split__copy > .mf-svc-cta,
		.mf-svc-split:has(.rll-youtube-player) .mf-svc-split__copy > .badge-pill,
		.mf-svc-split:has(.rll-youtube-player) .mf-svc-split__copy > .mf-svc-cta {
			width: fit-content;
		}
	}
	@media (max-width: 1024px) {
		.mf-svc-split:has(.mf-svc-split__video) .mf-svc-split__inner,
		.mf-svc-split:has(.rll-youtube-player) .mf-svc-split__inner {
			grid-template-columns: minmax(0, 1fr);
		}
	}
}


/* ---------------------------------------------------------------
   /jersey-framing/ — "Why Frame Your Jersey?" — copy left, video right
   Section 1 only. The three jersey video sections share the same
   classes, so it is identified by the .mf-svc-why that follows it.
   Mirrors the --reverse float above (0,4,0 and later, so it wins).
   Desktop only — phones keep the stacked single column.
   --------------------------------------------------------------- */
@media (min-width: 1025px) {
	.mf-jersey-video-section:has(+ .mf-svc-why) .mf-svc-split__media.mf-jersey-video-media {
		float: right;
		margin: 0 0 clamp(18px, 1.6vw, 26px) clamp(28px, 2.6vw, 44px);
	}
}


/* ---------------------------------------------------------------
   /picture-hanging-service/ — same floated treatment
   These two sections use their own component (.mf-hang-*__grid with
   .mf-hang-why__copy / .mf-hang-professional__copy), not .mf-svc-split,
   so they need their own rules. Their copy divs are already
   display:block, so no flex/BFC workaround is needed here.
   The "why" section keeps the video on the right, "professional" on
   the left — the <figure> in the why section was moved ahead of the
   copy in template-parts/Picture Hanging Service.php so the float has
   something to float from (a float never moves upwards).
   --------------------------------------------------------------- */
@media (min-width: 1025px) {
	.mf-hang-why__grid,
	.mf-hang-professional__grid {
		display: block;
		max-width: 1680px;
		margin-inline: auto;
		padding-inline: clamp(28px, 2.2vw, 48px);
	}
	.mf-hang-why__grid::after,
	.mf-hang-professional__grid::after {
		content: "";
		display: block;
		clear: both;
	}
	.mf-hang-why__grid .mf-hang-video {
		position: relative;
		float: right;
		width: min(42%, 520px);
		margin: 0 0 clamp(18px, 1.6vw, 26px) clamp(28px, 2.6vw, 44px);
	}
	.mf-hang-professional__grid .mf-hang-video {
		position: relative;
		float: right;
		width: min(42%, 520px);
		margin: 0 0 clamp(18px, 1.6vw, 26px) clamp(28px, 2.6vw, 44px);
	}
	.mf-hang-why__copy #mf-hang-why-title {
		max-width: 720px;
	}
	.mf-hang-intro .mf-svc-panel__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	.mf-hang-intro .mf-svc-panel__grid > .mf-hang-intro__video {
		align-self: stretch;
		height: auto;
		aspect-ratio: auto;
		min-height: 0;
		margin: 0;
		overflow: hidden;
	}
	.mf-hang-intro .mf-hang-intro__video iframe {
		top: 50% !important;
		left: 50% !important;
		right: auto !important;
		bottom: auto !important;
		width: auto !important;
		height: 100% !important;
		min-width: 100%;
		aspect-ratio: 16 / 9;
		transform: translate(-50%, -50%);
	}
	.mf-hang-intro .mf-hang-intro__video .rll-youtube-player,
	.mf-hang-intro .mf-hang-intro__video .rll-youtube-player > div {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		padding-bottom: 0;
		margin: 0;
	}
	.mf-hang-intro .mf-hang-intro__video .rll-youtube-player img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		margin: 0;
	}
	.mf-hang-why__copy > .badge-pill,
	.mf-hang-why__copy > .mf-svc-cta,
	.mf-hang-professional__copy > .badge-pill,
	.mf-hang-professional__copy > .mf-svc-cta {
		width: fit-content;
	}
}
@media (max-width: 1024px) {
	.mf-hang-why__grid,
	.mf-hang-professional__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Picture Hanging: "Hanging Photo Frames with Style and Precision" image a little shorter on desktop (4 Nov 2026) */
@media (min-width: 1025px) {
	.mf-hang-style__media img {
		aspect-ratio: 1 / 1;
		height: auto;
		object-fit: cover;
		object-position: center 40%;
	}
}