/* ==========================================================================
   TFC — responsive system
   --------------------------------------------------------------------------
   Loaded last, after all GoHighLevel CSS, and shared by index.html and
   contact-us.html. This is the ONLY place layout/type should be tuned for
   screen size — edit here, not per-section inside the page.

   Why this file exists
   --------------------
   The GHL export ships only two breakpoints:
       @media (min-width:0px)   and (max-width:480px)     -> mobile
       @media (min-width:481px) and (max-width:10000px)   -> "desktop"
   ...plus one lone rule that stacks rows at <=767px. So every viewport from
   768px to 1170px received the full 1170px-wide desktop layout — three-across
   cards squeezed to ~230px and 67px display headings on an 820px screen.
   That is why fixing one section at one window size kept breaking others.

   The system
   ----------
   1. TYPE  — role-based fluid scale (clamp) applied once. Every heading grows
              and shrinks continuously with the viewport, so there is no width
              at which a heading is "wrong". No per-breakpoint font sizes.
   2. GUTTER— one fluid side padding for all sections below the design width.
   3. LAYOUT— real reflow tiers where the content needs a different shape:

        >= 1512px    root font grows with viewport (unchanged behaviour)
        1171-1511    reference design, root 16px
         992-1170    3-across holds; type eases down via clamp
         768- 991    3-across -> 2-across; side-by-side -> stacked
         481- 767    GHL stacks to one column; compact treatments
        <= 480       phone
   ========================================================================== */


/* ==========================================================================
   1. TYPE SCALE
   Each var hits its exact desktop value at >=1280px and eases down to a
   readable minimum at 360px. Assigned by ROLE below, so a new section only
   needs one line added to the matching group.
   ========================================================================== */

:root{
  /* hero display — 67px desktop / 34px phone */
  --tfc-display:   clamp(2.125rem, 1.318rem + 3.587vw, 4.1875rem);
  /* section heading, large — 50px / 30px */
  --tfc-h2:        clamp(1.875rem, 1.386rem + 2.174vw, 3.125rem);
  /* section heading, regular — 48px / 30px */
  --tfc-h2-alt:    clamp(1.875rem, 1.435rem + 1.957vw, 3rem);
  /* card / feature title — 25px / 19px */
  --tfc-h3:        clamp(1.1875rem, 1.041rem + 0.652vw, 1.5625rem);
  /* brand wordmark — 24px / 17px */
  --tfc-brand:     clamp(1.0625rem, 0.891rem + 0.761vw, 1.5rem);
  /* contact page title — 60px / 32px */
  --tfc-page-title:clamp(2rem, 1.32rem + 3.043vw, 3.75rem);

  /* fluid page gutter and vertical rhythm */
  --tfc-gutter:    clamp(1.25rem, 3.2vw, 2.5rem);
  --tfc-stack-gap: clamp(1rem, 2.5vw, 1.75rem);
}

/* NOTE ON SELECTORS
   GoHighLevel does not use semantic tags — a card title can be an <h1>, <h3>
   or a <p> in the same row, and review author names are <h2> sitting in the
   same section as the 48px section heading. So roles are assigned by ROW id
   (stable, one per design block), never by tag or by section. To restyle a
   new block, add its row id to the matching group below. */

/* --- role: hero display (67px) ------------------------------------------ */
#row-12eJ_VPGu8 h1,
#row-12eJ_VPGu8 h1 *{
  font-size: var(--tfc-display) !important;
}

/* --- role: section heading, large (50px) -------------------------------- */
#row-6Uj6LL2KGa h2, #row-6Uj6LL2KGa h2 *,           /* Gallery   */
#row-9eMeaRokAc h2, #row-9eMeaRokAc h2 *,           /* Services  */
#row-u2aygaqAAe h1, #row-u2aygaqAAe h1 *{           /* Location  */
  font-size: var(--tfc-h2) !important;
}

/* --- role: section heading, regular (48px) ------------------------------ */
#row-dskTBvow5O h2, #row-dskTBvow5O h2 *,           /* Reviews   */
#row-zHXchZtLf4 h2, #row-zHXchZtLf4 h2 *{           /* Features  */
  font-size: var(--tfc-h2-alt) !important;
}

/* --- role: card / feature title (25px) ---------------------------------- */
#row-pdJtS_--Nk .c-sub-heading :is(h1,h2,h3,h4,p),
#row-pdJtS_--Nk .c-sub-heading :is(h1,h2,h3,h4,p) *,
#row-nzIy0fzN1_ .c-sub-heading :is(h1,h2,h3,h4,p),
#row-nzIy0fzN1_ .c-sub-heading :is(h1,h2,h3,h4,p) *,
#row-I8WocvbJ5o .c-sub-heading :is(h1,h2,h3,h4,p),
#row-I8WocvbJ5o .c-sub-heading :is(h1,h2,h3,h4,p) *{
  font-size: var(--tfc-h3) !important;
}

/* --- role: brand wordmark (24px) ---------------------------------------- */
#section-EwwpJ6uuL0 .c-paragraph p,
#section-EwwpJ6uuL0 .c-paragraph p *{
  font-size: var(--tfc-brand) !important;
}

/* --- role: contact page title (60px) ------------------------------------ */
#row-P4ugH_nOPz h1,
#row-P4ugH_nOPz h1 *{
  font-size: var(--tfc-page-title) !important;
}

/* The contact form heading (#row-ww4CbCzNCy h1) is deliberately NOT given a
   role. Its <h1> computes to 40px but every visible character lives in a
   <span> set to 20px — an "h1 *" rule would double the rendered text and the
   block's height. 20px needs no fluid treatment; the <=599px tier below
   handles the phone case. Check for this span/host mismatch before adding any
   new heading role. */


/* ==========================================================================
   2. GUTTER
   Below the 1170px design width the page needs real side padding, applied
   once rather than re-declared at every breakpoint. Above 1232px the
   original per-section padding is left untouched.
   ========================================================================== */

html, body{ overflow-x: clip; }

@media screen and (max-width:1231px){
  .hl_page-preview--content .c-section{
    padding-left:  var(--tfc-gutter) !important;
    padding-right: var(--tfc-gutter) !important;
  }
}

/* Desktop-only optical offsets. The hero headline bleeds 50px past its
   column, which only fits while the leftover gutter is wider than the bleed:
   (viewport - 1170px content) / 2 >= 50px, i.e. from 1270px up. Below that it
   pushes the headline off the right edge, so it is cancelled from 1279px down. */
@media screen and (max-width:1279px){
  #heading-h9JxAh7S8Q{ margin-right: 0 !important; }
}

/* Hero has a heavy 100px desktop top padding; ease it down with the viewport. */
@media screen and (max-width:1170px){
  #section-juqFKzOvbo{
    padding-top:    clamp(3rem, 8vw, 6.25rem) !important;
    padding-bottom: clamp(3rem, 8vw, 6.25rem) !important;
  }
}


/* ==========================================================================
   3a. LAYOUT — 992px and below: side-by-side pairs stack
   ========================================================================== */

@media screen and (max-width:991px){
  /* Location: copy + map stop fighting for width */
  #row-u2aygaqAAe > .inner{ flex-direction: column !important; }
  #row-u2aygaqAAe > .inner > .c-column{ width:100% !important; flex:0 0 auto !important; }
  /* the desktop map pull-up + indent only make sense beside the copy */
  #col-D4cYBnK-SA{ margin-top:0 !important; margin-bottom:0 !important; margin-left:0 !important; }
  #col-D4cYBnK-SA .c-map, #col-D4cYBnK-SA iframe{ width:100% !important; }

  /* Contact page: intro copy + form stop sharing a line */
  #row-ww4CbCzNCy > .inner{ flex-direction: column !important; }
  #row-ww4CbCzNCy > .inner > .c-column{ width:100% !important; flex:0 0 auto !important; }
}


/* ==========================================================================
   3b. LAYOUT — 600-991px: three-across becomes two-across
   The band the export never had a design for. Below 768px GHL forces
   flex-direction:column on every row, which would drop these to a single
   ~700px-wide card per line, so the direction is put back to row here.
   ========================================================================== */

@media screen and (min-width:600px) and (max-width:991px){

  /* Rows lay out in a row again and may wrap instead of crushing columns. */
  .c-row > .inner{ flex-direction: row !important; flex-wrap: wrap !important; }

  /* Services (#row-pdJtS_--Nk) is deliberately absent from this tier — three
     cards can never split 2 + 1. It has its own ladder in section 3e. */

  /* -- Reviews: two rows of 3 -> one 2-column grid of 6 ------------------- */
  #section-xGpztvwA3I > .inner{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: var(--tfc-stack-gap);
    align-items: stretch;
  }
  #row-dskTBvow5O{ grid-column: 1 / -1; }
  #row-AC7zIdrHjG, #row-ayo-QDOhTB,
  #row-AC7zIdrHjG > .inner, #row-ayo-QDOhTB > .inner{ display: contents !important; }
  #section-xGpztvwA3I .c-column:has(.c-image-feature){
    width: auto !important;
    flex: none !important;
    margin: 0 !important;
    padding: 1.75rem 1.5rem !important;
  }
  /* grid rows stretch cards to equal height; keep the quote at the top
     instead of floating in the middle of the taller card */
  #section-xGpztvwA3I .c-column:has(.c-image-feature) > .inner{
    justify-content: flex-start !important;
  }

  /* -- Features: two rows of 3 -> one 2-column grid of 6 ------------------ */
  #section-if8uvpGSUz > .inner{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: var(--tfc-stack-gap);
    align-items: stretch;
  }
  #row-zHXchZtLf4{ grid-column: 1 / -1; }
  #row-nzIy0fzN1_, #row-I8WocvbJ5o,
  #row-nzIy0fzN1_ > .inner, #row-I8WocvbJ5o > .inner{ display: contents !important; }
  #section-if8uvpGSUz .c-column:has(.c-image){
    width: auto !important;
    flex: none !important;
    margin: 0 !important;
  }

  /* -- Contact page: even up the 3 detail tiles --------------------------
     The export pads each column differently (0 on the row's outer edges),
     which reads as three different tiles once they stop being a desktop
     row. Shape is set below, at the same breakpoint as the footer. */
  #row-HejIA9wTiq > .inner{ gap: var(--tfc-stack-gap); }
  #row-HejIA9wTiq > .inner > .c-column{
    margin:0 !important;
    padding:2.5rem 1.25rem !important;
  }

  /* -- Footer: left-align the columns once they leave the desktop shape ---
     The desktop columns carry mixed text alignment that reads as broken at
     any other width, whether they sit three across or stacked. */
  #row-_tf0r3lzcL > .inner{ gap: var(--tfc-stack-gap); }
  #row-_tf0r3lzcL > .inner > .c-column,
  #row-_tf0r3lzcL > .inner > .c-column p,
  #row-_tf0r3lzcL > .inner > .c-column h2,
  #row-_tf0r3lzcL > .inner > .c-column h3,
  #row-_tf0r3lzcL > .inner > .c-column a{ text-align: left !important; }
  #row-_tf0r3lzcL > .inner > .c-column > .inner{ align-items: flex-start !important; }
  #row-_tf0r3lzcL > .inner > .c-column ul,
  #row-_tf0r3lzcL > .inner > .c-column .nav-menu-wrapper{
    justify-content: flex-start !important;
    padding-left: 0 !important;
  }
}

/* -- The other two 3-column rows: three across, or stacked. Never 2 + 1. --
   The footer (#row-_tf0r3lzcL) and the contact page's email/phone/address
   tiles (#row-HejIA9wTiq) both split at GHL's own nav breakpoint, so the
   page changes character on one line — the hamburger appears and both rows
   stack together, rather than at three different widths.

   767 rather than lower because that is where each row stops fitting its
   longest unbreakable atom: the footer's opening-hours lines, and the
   contact tile's "info@tfctw.co.uk", which at 600px is forced to hyphenate
   mid-address across two lines.

   min-width:0 is required on the three-across case — without it a flex item
   refuses to shrink below its min-content width, and the long contact and
   opening-hours column drops its siblings onto their own line at some
   widths but not others. */
/* One content edge per footer column, same principle as the services card.
   The export indents each column's heading 20px and pads the Quick Links
   labels another 25px, which passes on a 360px desktop column and reads as
   three ragged edges on a narrow or stacked one. Left alone above 991px,
   where the desktop layout is untouched. */
@media screen and (max-width:991px){
  #row-_tf0r3lzcL .c-heading{ margin-left:0 !important; }
  /* Quick Links are text links, not pills — unlike the Call Us button in the
     first column, which keeps its padding because it has a visible fill.
     GHL renders them as <button>, not <a>, hence the :is(). The icon span is
     empty here but still reserves its 5px gutter. */
  #col-gJW-tM4_9- .c-button > :is(a,button){ padding-left:0 !important; }
  #col-gJW-tM4_9- .c-button .button-icon-start:empty{ margin-right:0 !important; }
}

@media screen and (min-width:768px) and (max-width:991px){
  #row-_tf0r3lzcL > .inner,
  #row-HejIA9wTiq > .inner{ flex-wrap:nowrap !important; }
  #row-_tf0r3lzcL > .inner > .c-column,
  #row-HejIA9wTiq > .inner > .c-column{
    margin-left:0 !important; margin-right:0 !important; min-width:0;
    flex:1 1 0 !important; max-width:none;
  }
}
@media screen and (min-width:600px) and (max-width:767px){
  #row-_tf0r3lzcL > .inner,
  #row-HejIA9wTiq > .inner{ flex-direction:column !important; flex-wrap:nowrap !important; }
  #row-_tf0r3lzcL > .inner > .c-column,
  #row-HejIA9wTiq > .inner > .c-column{
    margin-left:0 !important; margin-right:0 !important;
    flex:0 0 auto !important; width:100% !important; max-width:none;
  }
}


/* ==========================================================================
   3c. NAV — 767px and below: GHL's own nav breakpoint
   Kept separate from the layout tier so the hamburger appears exactly where
   the export expects it, regardless of where cards reflow.
   ========================================================================== */

@media screen and (max-width:767px){

  /* -- Nav: swap the desktop menu for the hamburger ---------------------- */
  .nav-menu-desktop{ display:none !important; }
  ul.nav-menu-ul:not(.nav-menu-desktop){
    display:flex !important;
    margin-left:auto !important;
    align-items:center;
    width:auto !important; height:auto !important;
    min-width:2.75rem; min-height:2.75rem;
  }
  ul.nav-menu-ul:not(.nav-menu-desktop) li{
    display:block !important; width:auto !important; height:auto !important;
  }
  .nav-menu-mobile{
    display:flex !important;
    width:2.75rem; height:2.75rem;
    align-items:center; justify-content:center; cursor:pointer;
  }
  .nav-menu-mobile span{
    display:block; width:1.625rem; height:0.14rem;
    background:#434e6e; position:relative; border-radius:1px;
  }
  /* `content` MUST carry !important. The burger is drawn three times over —
     the span's background is the middle bar, ::before the top, ::after the
     bottom — but the export also sets content:"\f0c9" on that same ::before,
     which is Font Awesome's "bars": a complete hamburger glyph in its own
     right, at 24px. Its rule outranks a plain declaration here, so the font
     hamburger rendered on top of the CSS one a few pixels out and the header
     showed what looked like two overlapping burgers.
     Blank the content, don't remove it — the pseudo-element is also the top
     bar, so `content:none` would delete a third of the icon. */
  .nav-menu-mobile span::before,
  .nav-menu-mobile span::after{
    content:"" !important; position:absolute; left:0;
    width:1.625rem; height:0.14rem; background:#434e6e; border-radius:1px;
  }
  .nav-menu-mobile span::before{ top:-0.5rem; }
  .nav-menu-mobile span::after{ top:0.5rem; }
}


/* ==========================================================================
   3d. LAYOUT — 599px and below: one column
   GHL already stacks rows here; this tier makes the stacked result compact
   rather than a column of very tall full-width blocks.
   ========================================================================== */

@media screen and (max-width:599px){

  /* Services keeps its own ladder in section 3e. */

  #section-if8uvpGSUz .c-row{ padding-top:0 !important; padding-bottom:0 !important; }

  /* -- Reviews: compact cards -------------------------------------------- */
  #section-xGpztvwA3I .c-paragraph p,
  #section-xGpztvwA3I .c-paragraph p *{ font-size:1rem !important; line-height:1.65 !important; }
  #section-xGpztvwA3I .featureHeadline h2,
  #section-xGpztvwA3I .featureHeadline h2 *{ font-size:1.25rem !important; line-height:1.3 !important; }
  #section-xGpztvwA3I .featureText p,
  #section-xGpztvwA3I .featureText p *{ font-size:0.875rem !important; }
  #section-xGpztvwA3I .c-column:has(.c-image-feature){ padding:1.5rem 1.25rem !important; }

  /* -- Features: six blocks become a 2-up grid of compact chips ---------- */
  #section-if8uvpGSUz > .inner{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    column-gap:0.75rem; row-gap:0.75rem;
    align-items:stretch;
  }
  #row-zHXchZtLf4{ grid-column:1/-1; margin:0 0 0.25rem !important; }
  #row-nzIy0fzN1_, #row-I8WocvbJ5o,
  #row-nzIy0fzN1_ > .inner, #row-I8WocvbJ5o > .inner{ display:contents !important; }
  #section-if8uvpGSUz .c-column:has(.c-image){
    width:auto !important; flex:none !important; margin:0 !important;
    padding:0.875rem 0.9375rem !important;
    background:#f5f6f8; border:0.0625rem solid #e6e9ef; border-radius:0.75rem;
    box-sizing:border-box;
  }
  #section-if8uvpGSUz .c-column:has(.c-image) > .inner{
    display:flex !important; flex-direction:row !important;
    align-items:center; gap:0.625rem; height:100%;
  }
  #section-if8uvpGSUz .c-column:has(.c-image) .c-image{ flex:0 0 auto; margin:0 !important; }
  #section-if8uvpGSUz .c-column:has(.c-image) .c-image img{
    width:1.5rem !important; height:1.5rem !important; object-fit:contain; display:block;
  }
  #section-if8uvpGSUz .c-column:has(.c-image) .c-sub-heading{
    flex:1 1 auto; text-align:left !important; margin:0 !important;
  }
  #section-if8uvpGSUz .c-column:has(.c-image) .c-paragraph{ display:none !important; }
  #section-if8uvpGSUz .c-column:has(.c-image) .c-sub-heading,
  #section-if8uvpGSUz .c-column:has(.c-image) .c-sub-heading *{
    font-size:0.9375rem !important; line-height:1.3 !important;
    font-weight:600 !important; color:#23252e !important;
  }

  /* -- Contact page: form + info panels ---------------------------------- */
  #section-AAiPTzD_Ip .c-column{
    padding:2rem 1.25rem !important; min-height:0 !important; height:auto !important;
    margin-bottom:0.75rem !important;
  }
  #section-AAiPTzD_Ip .c-image, #section-AAiPTzD_Ip .image-container{ height:auto !important; }
  #section-AAiPTzD_Ip .c-image{ margin:0 auto 0.5rem !important; }
  #section-AAiPTzD_Ip .c-image img{ width:3rem !important; height:3rem !important; object-fit:contain; }
  /* only the form heading, not the 18px contact-detail headings that also
     happen to be marked up as <h1> */
  #row-ww4CbCzNCy h1, #row-ww4CbCzNCy h1 *{ font-size:1.375rem !important; }
  #section-AAiPTzD_Ip .c-column:has(.form-builder--wrap){ padding-left:0 !important; padding-right:0 !important; }
  #section-AAiPTzD_Ip .hl_form-builder--main{ padding-left:0 !important; padding-right:0 !important; }

  /* -- Footer: one centred column ---------------------------------------- */
  #section-V_-evhpq5P .c-column{
    text-align:center;
    padding-top:0.75rem !important; padding-bottom:0.75rem !important;
  }
  #section-V_-evhpq5P .c-column .inner{ align-items:center !important; }
  #section-V_-evhpq5P .c-image{ margin-left:auto !important; margin-right:auto !important; }
  #section-V_-evhpq5P .c-paragraph p,
  #section-V_-evhpq5P .c-paragraph p *{ font-size:1rem !important; text-align:center !important; }
  #section-V_-evhpq5P .c-sub-heading h3,
  #section-V_-evhpq5P .c-sub-heading h3 *,
  #section-V_-evhpq5P h3{ font-size:1.25rem !important; text-align:center !important; }
  #section-V_-evhpq5P .nav-menu-wrapper,
  #section-V_-evhpq5P ul{ justify-content:center !important; padding-left:0 !important; }
  #section-V_-evhpq5P a{ letter-spacing:0.02em !important; font-size:1rem !important; }
  #section-V_-evhpq5P .c-button{ margin-left:auto !important; margin-right:auto !important; }
}


/* ==========================================================================
   3e. SERVICES CARDS — #section-X8fARHGVvC / #row-pdJtS_--Nk
   Three cards, so the count never divides into an even two-across row. The
   ladder therefore skips two-across entirely:

       >= 900px   three across (the reference design)
       600-899    one column of horizontal cards: media left, content right
       <= 599     one column of stacked cards: banner image on top

   900px is where three-across stops being comfortable, not a round number:
   each card needs ~260px to hold a 25px title, body copy and a 153px button,
   and 3x260 + 2 gaps + row padding + the fluid gutter resolves to ~897px.

   THE CONTENT EDGE. Everything below depends on the card having ONE inner
   edge. The export does not: the column pads 20px, then the image pulls back
   -5px and re-pads 10px, while the text blocks pad another 10px and the
   button pads none. That is four different left edges, and on phones GHL also
   overrides the column to padding-left:10px, which drops the button 10px from
   the white card edge — the "button touching the outside" in the report. The
   first rule flattens all of it so the card's own padding is the only inset.
   ========================================================================== */

/* --- the card shell and its single content edge (all widths) ------------- */
#row-pdJtS_--Nk > .inner > .c-column{
  padding: 1.25rem 1.25rem 2.5rem !important;
  box-sizing: border-box;
}
/* the image's -5px pull and its container's 10px re-pad both go */
#row-pdJtS_--Nk .c-image,
#row-pdJtS_--Nk .image-container{ margin:0 !important; padding:0 !important; }
/* the text blocks' 10px side pad goes; their top pad is real rhythm, so stays */
#row-pdJtS_--Nk .c-sub-heading .text-output,
#row-pdJtS_--Nk .c-paragraph .text-output{
  padding-left:0 !important; padding-right:0 !important;
}
/* images fill the content edge and crop rather than letterbox */
#row-pdJtS_--Nk .c-image img{
  display:block; width:100% !important; max-width:100% !important;
  object-fit:cover; object-position:center;
}
/* the button is a pill sized to its label, never a stretched block */
#row-pdJtS_--Nk .c-button{ text-align:left !important; }
#row-pdJtS_--Nk .c-button a{ display:inline-flex; align-items:center; width:auto !important; }

/* --- >= 900px: three across, the reference design ----------------------- */
@media screen and (min-width:900px){
  #row-pdJtS_--Nk > .inner{
    flex-direction:row !important; flex-wrap:nowrap !important;
    align-items:stretch !important;
  }
  /* equal thirds. min-width:0 is required — without it a flex item refuses to
     shrink below its content width and the row overflows below ~1170px. */
  #row-pdJtS_--Nk > .inner > .c-column{
    flex:1 1 0 !important; width:auto !important; max-width:none !important;
    min-width:0;
  }
  #row-pdJtS_--Nk .c-image img{ aspect-ratio:4/3; height:auto !important; }
  /* copy lengths differ, so pin the buttons to a flat baseline */
  #row-pdJtS_--Nk > .inner > .c-column > .inner{ justify-content:flex-start !important; }
  #row-pdJtS_--Nk > .inner > .c-column > .inner > .c-button{ margin-top:auto !important; }
}

/* --- 600-899px: one column of horizontal cards --------------------------
   Two-across would orphan the third card, and a full-width stacked card at
   this size gives the image a 900px-wide band. Turning the card on its side
   uses the width for content instead and keeps all three identical. */
@media screen and (min-width:600px) and (max-width:899px){
  #row-pdJtS_--Nk > .inner{
    flex-direction:column !important; flex-wrap:nowrap !important;
    gap: var(--tfc-stack-gap);
  }
  #row-pdJtS_--Nk > .inner > .c-column{
    width:100% !important; max-width:none !important; flex:0 0 auto !important;
    margin:0 !important;
    padding:1.25rem !important;
  }
  /* media | content. The card's four children are image, heading, copy and
     button, so the image is placed explicitly and the rest auto-flow into
     column 2 in order. */
  #row-pdJtS_--Nk > .inner > .c-column > .inner{
    display:grid !important;
    grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
    column-gap: 1.5rem;
    align-content:start;
  }
  #row-pdJtS_--Nk .c-image{ grid-column:1; grid-row:1 / span 3; align-self:stretch; }
  #row-pdJtS_--Nk .c-image .image-container,
  #row-pdJtS_--Nk .c-image .image-container > div,
  #row-pdJtS_--Nk .c-image .image-container > div > div{ height:100%; }
  #row-pdJtS_--Nk .c-image img{
    height:100% !important; min-height:10rem;
  }
  #row-pdJtS_--Nk .c-sub-heading{ grid-column:2; }
  #row-pdJtS_--Nk .c-paragraph{ grid-column:2; }
  #row-pdJtS_--Nk .c-button{ grid-column:2; }
  /* the heading's 10px top pad is only there to clear the image above it */
  #row-pdJtS_--Nk .c-sub-heading .text-output{ padding-top:0 !important; }
}

/* --- <= 599px: one column of stacked cards ------------------------------ */
@media screen and (max-width:599px){
  #row-pdJtS_--Nk > .inner{
    flex-direction:column !important; gap: var(--tfc-stack-gap);
  }
  #row-pdJtS_--Nk > .inner > .c-column{
    width:100% !important; max-width:none !important; flex:0 0 auto !important;
    margin:0 !important;
    padding:1.25rem !important;
  }
  /* a 16/9 banner instead of the export's near-square, which ate the fold */
  #row-pdJtS_--Nk .c-image img{
    aspect-ratio:16/9; height:auto !important; max-height:none !important;
  }
  #row-pdJtS_--Nk .c-paragraph p,
  #row-pdJtS_--Nk .c-paragraph p *{ font-size:1rem !important; }
  #row-pdJtS_--Nk .c-button a{
    padding:0.75rem 1.25rem !important; font-size:0.9375rem !important;
  }
}


/* ==========================================================================
   4. COMPONENTS that must behave at every width
   ========================================================================== */

/* Hero CTA cluster: natural-width pills that wrap evenly instead of
   stretching or overflowing. */
#row-kSE0YW8ldz > .inner{
  display:flex !important; flex-direction:row !important; flex-wrap:wrap;
  align-items:center; justify-content:flex-start; gap:0.75rem;
}
#row-qELaI_YVd7 > .inner{
  display:flex !important; flex-direction:row !important; flex-wrap:wrap; gap:0.75rem;
}
#col-RuDE6r9ihM,
#col-3tJeZazGmk,
#col-Qg1-TViGr_,
#col-58UhHP3BxB{
  width:auto !important; flex:0 0 auto !important; padding:0 !important; margin:0 !important;
}
#col-Qg1-TViGr_ > .inner,
#col-58UhHP3BxB > .inner,
#col-3tJeZazGmk > .inner{ align-items:flex-start; }
#col-Qg1-TViGr_ .c-button,
#col-58UhHP3BxB .c-button,
#col-3tJeZazGmk .c-button{ margin:0 !important; width:auto !important; min-width:0 !important; }
#col-Qg1-TViGr_ a,
#col-58UhHP3BxB a,
#col-3tJeZazGmk a{ white-space:nowrap; padding:0.9375rem 1.375rem !important; }

@media screen and (max-width:480px){
  /* centre the CTA pills once they wrap onto their own lines */
  #row-kSE0YW8ldz > .inner,
  #row-qELaI_YVd7 > .inner{ justify-content:center; }
}

/* Feature blocks: content top-aligned. (The services cards handle their own
   alignment in section 3e, where the button is pinned per layout mode.) */
#section-if8uvpGSUz .c-column .inner{ justify-content:flex-start !important; }

/* Footer columns keep their own inner padding at all sizes. */
#section-V_-evhpq5P .c-column{
  padding-left:1.5rem; padding-right:1.5rem; box-sizing:border-box;
}

/* Photo gallery: square, contained thumbnails at every width. */
.photo-video-gallery-grid{ gap:0.625rem !important; }
.photo-video-gallery-grid-item{ height:auto !important; aspect-ratio:1/1; background:#fff; }
.photo-video-gallery-grid-item-img{
  object-fit:contain !important;
  width:100% !important; height:100% !important; min-width:0 !important;
}

/* Media never overflows its column. */
.c-section img,
.c-section iframe{ max-width:100%; }


/* ==========================================================================
   5. WIDE SCREENS — the whole design grows with the viewport past 1512px
   ========================================================================== */

@media screen and (min-width:1512px){
  html{ font-size: calc(100vw / 94.5); }
}


/* ==========================================================================
   6. MOTION — no entrance animations; everything visible immediately
   ========================================================================== */

[data-animation-class], .animate__animated{
  animation:none !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
}

/* Nav links: quiet underline grow instead of the default grey pill. */
.nav-menu-ul a{ position:relative; transition:opacity .18s ease; }
.nav-menu-ul .pointer:hover,
.nav-menu-ul a:hover,
.nav-menu-ul li:hover > div{ background:transparent !important; }
.nav-menu-ul .menu-item a::after{
  content:""; position:absolute; left:0.15rem; right:0.15rem; bottom:-0.3rem;
  height:0.125rem; background:currentColor;
  transform:scaleX(0); transform-origin:left; transition:transform .22s ease;
}
.nav-menu-ul .menu-item a:hover::after{ transform:scaleX(1); }
.nav-menu-ul .menu-item a:hover{ opacity:.85; }


/* ==========================================================================
   7. GALLERY  —  #row-R1RnfdjpHa / #photo-video-gallery-oO2e8p2pxs
   Nine 1024x1024 photos. Three things are set here: the tile is made square,
   the phone tier goes two-across instead of one, and the odd tile out is
   centred. Paired with tfc-gallery.js, which adds tap-to-enlarge.
   ========================================================================== */

/* --- a. Tile shape is already handled ------------------------------------
   Section 4 ("Photo gallery: square, contained thumbnails at every width")
   already overrides the export's fixed 18.125rem tile height with a 1:1
   aspect-ratio, a 0.625rem gutter and `object-fit:contain` on a white tile,
   so nothing here needs to touch the tile shape. `contain` is the reason
   two-across is safe: the photo letterboxes inside the square instead of
   being cropped to fit it. Don't add a competing `cover` here. */

/* --- b. Column count ----------------------------------------------------
   Desktop keeps the reference three-across. Below 900 it goes to two rather
   than the export's one: nine full-width squares is roughly nine phone
   screens of scrolling before the reviews or the contact block are reached,
   and one photo at a time hides the range of work, which is the whole pitch.
   900 matches the services-card tier, so the page changes shape once rather
   than twice. The gutter is inherited from section 4 — not restated here,
   so there is one place to change it. */
#photo-video-gallery-oO2e8p2pxs .photo-video-gallery-grid{
  grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width:899px){
  /* Beats the export's repeat(1,1fr) at <=480: equal specificity, later. */
  #photo-video-gallery-oO2e8p2pxs .photo-video-gallery-grid{
    grid-template-columns: repeat(2, 1fr);
  }

  /* Nine into two leaves one over. A lone tile hard against the left edge
     reads as a mistake, so the odd one out is centred at its normal size.
     A column is (100% - gap) / 2, so the width has to subtract half the
     0.625rem gutter — a plain 50% renders it 5px wider than its neighbours.
     If the section 4 gutter changes, change the 0.3125rem with it. */
  #photo-video-gallery-oO2e8p2pxs .photo-video-gallery-grid-item:last-child:nth-child(odd){
    grid-column: 1 / -1;
    width: calc(50% - 0.3125rem);
    justify-self: center;
  }
}

/* --- c. Tap target and focus -------------------------------------------
   tfc-gallery.js promotes each tile to a real button, so it needs a visible
   focus ring. Keyboard-only (`:focus-visible`) to avoid a ring on tap. */
#photo-video-gallery-oO2e8p2pxs .photo-video-gallery-grid-item:focus-visible{
  outline: 0.1875rem solid #b08642;
  outline-offset: -0.1875rem;
}

/* --- d. Lightbox --------------------------------------------------------
   Built by tfc-gallery.js. Sits above the sticky header, below nothing. */
.tfc-lb{
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(0.75rem, 3vw, 2.5rem);
  background: rgba(24,26,32,.94);
  opacity: 0; visibility: hidden;
  /* visibility must NOT be part of the eased transition. It is a discrete
     property, so it holds `hidden` for the first half of the duration —
     long enough that the close button is still unfocusable when the script
     opens the dialog, and focus falls back to <body>, killing the tab trap.
     Flip it instantly on open; delay it to the end of the fade on close. */
  transition: opacity .2s ease, visibility 0s linear .2s;
}
.tfc-lb.is-open{
  opacity: 1; visibility: visible;
  transition: opacity .2s ease, visibility 0s linear 0s;
}
.tfc-lb img{
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;          /* never crop in the enlarged view */
  border-radius: 0.125rem;
  box-shadow: 0 1.5rem 3rem rgba(0,0,0,.5);
}
.tfc-lb button{
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;   /* 44px minimum tap target */
  padding: 0; border: 0; cursor: pointer;
  background: rgba(255,255,255,.12);
  color: #fff; font-size: 1.5rem; line-height: 1;
  border-radius: 50%;
  transition: background .15s ease;
}
.tfc-lb button:hover{ background: rgba(255,255,255,.22); }
.tfc-lb button:focus-visible{ outline: 0.125rem solid #fff; outline-offset: 0.125rem; }
.tfc-lb-close{ top: clamp(0.5rem, 2vw, 1.25rem); right: clamp(0.5rem, 2vw, 1.25rem); }
.tfc-lb-prev{ left:  clamp(0.5rem, 2vw, 1.25rem); top: 50%; transform: translateY(-50%); }
.tfc-lb-next{ right: clamp(0.5rem, 2vw, 1.25rem); top: 50%; transform: translateY(-50%); }
.tfc-lb-count{
  position: absolute; bottom: clamp(0.5rem, 2vw, 1.25rem); left: 0; right: 0;
  text-align: center; color: rgba(255,255,255,.75);
  font-size: 0.875rem; letter-spacing: .04em;
}
/* Arrows would sit on top of the photo on a narrow screen; drop them to the
   bottom corners there and let swipe-free tapping through the count do. */
@media screen and (max-width:599px){
  .tfc-lb-prev, .tfc-lb-next{ top: auto; bottom: clamp(0.5rem, 2vw, 1.25rem); transform: none; }
  .tfc-lb-count{ bottom: calc(clamp(0.5rem, 2vw, 1.25rem) + 0.875rem); }
}
@media (prefers-reduced-motion: reduce){
  .tfc-lb{ transition: none; }
}


/* ==========================================================================
   8. MOBILE DRAWER — built by tfc-nav.js
   The export drops the nav links from the DOM below 768px and leaves a
   hamburger wired to a Vue router that never hydrates here, so the phone had
   no working navigation at all. This styles the replacement.
   ========================================================================== */

.tfc-drawer{
  position: fixed; inset: 0; z-index: 99998;
  background: rgba(24,26,32,.55);
  opacity: 0; visibility: hidden;
  /* Same discrete-property trap as the lightbox — see section 7d. */
  transition: opacity .2s ease, visibility 0s linear .2s;
}
.tfc-drawer.is-open{
  opacity: 1; visibility: visible;
  transition: opacity .2s ease, visibility 0s linear 0s;
}
.tfc-drawer-panel{
  position: absolute; top: 0; right: 0;
  width: min(20rem, 82vw); height: 100%;
  box-sizing: border-box;
  padding: 4.5rem 1.75rem 2rem;
  background: #404868;                      /* the brand navy from the logo */
  box-shadow: -0.5rem 0 2rem rgba(0,0,0,.3);
  transform: translateX(100%);
  transition: transform .22s ease;
  overflow-y: auto;
}
.tfc-drawer.is-open .tfc-drawer-panel{ transform: translateX(0); }
.tfc-drawer-panel ul{ list-style: none; margin: 0; padding: 0; }
.tfc-drawer-panel li + li{ margin-top: 0.25rem; }
.tfc-drawer-panel a{
  display: block;
  padding: 0.875rem 0.25rem;               /* >=44px tap target */
  color: #fff; text-decoration: none;
  font-size: 1.125rem; letter-spacing: .01em;
  border-bottom: 0.0625rem solid rgba(255,255,255,.14);
}
.tfc-drawer-panel a:hover{ color: #e8dec9; }
.tfc-drawer-panel a[aria-current="page"]{ color: #d8c9a3; font-weight: 600; }
.tfc-drawer-panel a:focus-visible,
.tfc-drawer-close:focus-visible{ outline: 0.125rem solid #fff; outline-offset: 0.125rem; }
.tfc-drawer-close{
  position: absolute; top: 1rem; right: 1rem;
  width: 2.75rem; height: 2.75rem; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff;
  font-size: 1.75rem; line-height: 1;
}
.tfc-drawer-close:hover{ background: rgba(255,255,255,.24); }

/* The drawer is only ever opened by the burger, which the export itself hides
   above 767px — but if a wide window is resized down mid-session, close it. */
@media screen and (min-width:768px){
  .tfc-drawer{ display: none; }
}
@media (prefers-reduced-motion: reduce){
  .tfc-drawer, .tfc-drawer-panel{ transition: none; }
}

/* ==========================================================================
   9. CONTACT FORM
   Replaces GoHighLevel's form component, which pulled reCAPTCHA, two Google
   Font sheets and a phone-input library straight from their CDN and posted to
   their backend. This one is plain HTML posting to Netlify Forms, so it keeps
   working after the GHL subscription ends. Colours are lifted from the
   original card so the page looks unchanged: #434E6E navy, #E3CCA1 button.
   ========================================================================== */

.tfc-formwrap{ box-sizing: border-box; }
.tfc-form{
  /* The export sets fonts per element rather than on <body>, which computes
     to Times — so new markup must name its own. Archivo is what the contact
     tiles beside this form use; Titillium Web is the heading face. */
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: #434E6E;
  border: 0.0625rem solid #F5F5F5;
  border-radius: 0.625rem;
  box-shadow: 0 0.25rem 1rem rgba(0,0,0,.10);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  padding-top: clamp(2rem, 5vw, 3.75rem);
  box-sizing: border-box;
}
/* Honeypot: a field only a bot fills in. Hidden from sight and from
   screen readers, but NOT with display:none — some bots skip those. */
.tfc-form-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.tfc-form-intro{
  font-family: 'Titillium Web', 'Archivo', system-ui, sans-serif;
  color:#fff; text-align:center; margin:0 0 1.75rem;
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem); font-weight:600; line-height:1.35;
}
.tfc-form-intro span{ display:inline-block; font-weight:400; font-size:0.9375rem; opacity:.85; margin-top:0.35rem; }

.tfc-field{ margin-bottom:1.125rem; }
.tfc-field label{
  display:block; color:#fff; font-size:0.875rem; font-weight:600;
  margin-bottom:0.4375rem; letter-spacing:.01em;
}
.tfc-field abbr{ color:#E3CCA1; text-decoration:none; border:0; }
.tfc-field input:not([type=checkbox]),
.tfc-field textarea{
  width:100%; box-sizing:border-box;
  padding:0.75rem 0.875rem;
  font: inherit; font-size:1rem;      /* >=16px stops iOS zooming on focus */
  color:#1c2233; background:#fff;
  border:0.0625rem solid #d7dae3; border-radius:0.5rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.tfc-field textarea{ resize:vertical; min-height:6.5rem; }
.tfc-field input:focus, .tfc-field textarea:focus{
  outline:none; border-color:#E3CCA1; box-shadow:0 0 0 0.1875rem rgba(227,204,161,.35);
}
/* Only flag a bad value once the visitor has actually typed something —
   :invalid alone would paint every required field red on page load. */
.tfc-field input:not(:placeholder-shown):invalid,
.tfc-field textarea:not(:placeholder-shown):invalid{ border-color:#e2725b; }

.tfc-field--check{ display:flex; align-items:flex-start; gap:0.625rem; margin-top:1.25rem; }
.tfc-field--check input{ width:1.125rem; height:1.125rem; margin:0.125rem 0 0; flex:0 0 auto; accent-color:#E3CCA1; }
.tfc-field--check label{ margin:0; font-size:0.8125rem; font-weight:400; line-height:1.45; opacity:.9; }

.tfc-form-submit{
  width:100%; margin-top:1.5rem;
  padding:0.75rem 1.25rem;
  min-height:2.75rem;                 /* 44px minimum tap target */
  background:#E3CCA1; color:#000;
  font-size:1rem; font-weight:600; font-family:inherit;
  border:0; border-radius:0.5rem; cursor:pointer;
  box-shadow:0 0.0625rem 0.125rem rgba(0,0,0,.08);
  transition: filter .15s ease;
}
.tfc-form-submit:hover{ filter:brightness(.95); }
.tfc-form-submit:focus-visible{ outline:0.1875rem solid #fff; outline-offset:0.125rem; }
.tfc-form-submit[disabled]{ opacity:.6; cursor:default; }

.tfc-form-status{ margin:1rem 0 0; text-align:center; font-size:0.9375rem; color:#fff; min-height:1.25rem; }
.tfc-form-status.is-error{ color:#ffc9bd; }
.tfc-form.is-sent .tfc-field,
.tfc-form.is-sent .tfc-form-submit,
.tfc-form.is-sent .tfc-form-intro{ display:none; }
.tfc-form.is-sent .tfc-form-status{ font-size:1.0625rem; font-weight:600; }

/* The hero's second button was "Text Us" and is now "Email Us" (the number it
   texted belonged to GoHighLevel; the replacement is a landline). The export
   gives both hero buttons a speech-bubble glyph from one shared rule and then
   overrides the CALL US one to a handset — so the email button needs its own
   override or it keeps advertising SMS. \f0e0 is Font Awesome's envelope. */
.button-Nliq09PSHB .button-icon-start:before{ content:"\f0e0"; }

/* "Check Our Reviews!" is wrapped in a real link by tfc-nav.js; keep it
   looking exactly as it did, since it already reads as tappable.
   GHL styles bare `a` as its link blue (#188bf6) with enough weight to beat a
   plain `color:inherit`, and it cascades into the wrapped <p>. The original
   text is white on the hero image, so both the link and its descendants are
   pinned back to the inherited colour. */
.tfc-reviews-link,
.tfc-reviews-link *{ color: inherit !important; text-decoration: none !important; }
.tfc-reviews-link{ display: inline-block; }
.tfc-reviews-link:hover{ opacity: .85; }


/* ==========================================================================
   10. CONTACT PAGE — the map panel  (#row-ww4CbCzNCy / #map-nN5-M1iohs)
   The map is a 1100x1280 *portrait* image with no height constraint, so it
   renders at its own aspect ratio scaled to the column: a 703px slab at
   1568px wide and 1148px at 2560px. It grows faster than everything around
   it, which is why this row stopped looking like the rest of the site on a
   large screen.
   Above the stacking breakpoint the map is instead told to fill whatever
   height the form beside it occupies, so the row reads as two balanced
   panels at every width. Below it, a plain 4:3 panel.
   ========================================================================== */

@media screen and (min-width:992px){
  #row-ww4CbCzNCy > .inner{ align-items: stretch; }

  /* The column has two children — the map and the opening-hours line. Make it
     a flex column so the map can take the leftover height and the hours stay
     their natural size. */
  #col-ZTk5kk8jXg > .inner{ display: flex; flex-direction: column; }
  /* flex-basis MUST be 0, not auto. With `auto` the map's own 1100x1280 height
     is its basis, so it inflates the column it is supposed to be fitting into
     and nothing changes — the map still sets the row height. At 0 the column's
     natural height is just the opening-hours line, the form beside it becomes
     the tallest thing in the row, and the map grows into whatever is left. */
  #map-nN5-M1iohs{
    flex: 1 1 0;
    min-height: 18rem;        /* never collapse to a sliver if the form is short */
    overflow: hidden;
  }
  /* height:100% only cascades if EVERY link in the chain has a height, and the
     export nests the map five deep: .c-map > .cmap-* > <a> > <picture> > <img>.
     The <a> is display:inline by default, so it swallows the chain entirely. */
  #map-nN5-M1iohs > div,
  #map-nN5-M1iohs a,
  #map-nN5-M1iohs picture,
  #map-nN5-M1iohs .hl-image-picture{ display: block; height: 100%; }
  #map-nN5-M1iohs img{
    width: 100%; height: 100%;
    /* !important: the export puts object-fit:unset in a style attribute on the
       img, which a plain declaration cannot beat. Without this the map is
       stretched instead of cropped. */
    object-fit: cover !important;
    object-position: center;
    display: block;
  }
}

/* Stacked: a map the height of a portrait phone photo is absurd, so pin it to
   a normal landscape panel. */
@media screen and (max-width:991px){
  #map-nN5-M1iohs img{
    width: 100%; height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover !important;   /* beats the inline object-fit:unset */
    display: block;
  }
}


/* ==========================================================================
   11. CONTACT TILE ICONS  (#row-HejIA9wTiq)
   The envelope / keypad / pin are 80x80 PNGs pinned to 80px by the export.
   Everything else on the page scales because it is sized in rem and the root
   font grows with the viewport past 1512px (section 5) — these stayed 80px,
   so on a large screen they shrank relative to the tiles around them.
   80px at the 16px root is exactly 5rem, so this is the same size at the
   design width and grows with everything else above it.
   ========================================================================== */

#row-HejIA9wTiq .c-image img{
  width:  5rem !important;
  height: 5rem !important;
}


/* ==========================================================================
   12. HERO ON SMALL SCREENS — spacing polish, not a re-layout
   At 390px the hero was 35px type on a 52px line-height (1.48), which reads
   thin and airy at display size, with only 10px between the headline and the
   copy beneath it. Everything below then felt packed. These are type and
   spacing tweaks only — the layout is untouched.
   ========================================================================== */

@media screen and (max-width:767px){

  /* 1.48 line-height suits body copy, not a 35px headline. 1.12 closes the
     lines up so the headline reads as one solid block, and the height it
     gives back is what pays for the breathing room added below. */
  #heading-h9JxAh7S8Q :is(h1,h2,p),
  #heading-h9JxAh7S8Q :is(h1,h2,p) *{
    line-height: 1.12 !important;
  }
  #heading-h9JxAh7S8Q{ margin-bottom: 1.375rem !important; }

  /* Body copy had no line-height of its own ("normal", ~1.2) — tight for five
     lines of 16px on a phone. */
  #paragraph-6QL38ssogD :is(p,span),
  #paragraph-6QL38ssogD{ line-height: 1.55 !important; }
  #paragraph-6QL38ssogD{ margin-bottom: 1.5rem !important; }

  /* The stars and "Check Our Reviews!" are pulled together with a -30px top
     margin meant for desktop; it drags the line off the stars' centre here. */
  #paragraph-EIPIhrYT8C{ margin-bottom: 1.75rem !important; }

  /* CALL US and EMAIL US sat 5px out of line. They are not siblings — CALL US
     is one level deeper, in a nested row that carries a 10px top padding the
     other button has no counterpart for. Centring alone only halved it to 5px;
     the padding itself has to go. Desktop keeps it (this tier is <=767px). */
  #row-kSE0YW8ldz > .inner,
  #row-qELaI_YVd7 > .inner{ align-items: center !important; }
  #row-qELaI_YVd7{ padding-top: 0 !important; }
}


/* ==========================================================================
   13. THREE FIXES
   ========================================================================== */

/* --- a. Feature chips laid out 2,1,2,1 instead of 2,2,2 ------------------
   The six chips live in two rows of three, and sections 3b/3d flatten those
   rows with `display:contents` so all six become items of one 2-column grid.
   GHL leaves an empty <span> as a direct child of each row — invisible in the
   original flex layout, but `display:contents` promotes it to a grid item too,
   and it silently eats a cell. Three chips plus a phantom = two lines of two,
   which is where the orphan came from. The same trick is used for the reviews
   rows, so they are covered here before it bites there as well. */
@media screen and (max-width:991px){
  #row-nzIy0fzN1_ > span:empty,
  #row-I8WocvbJ5o > span:empty,
  #row-AC7zIdrHjG > span:empty,
  #row-ayo-QDOhTB > span:empty{ display: none !important; }
}

/* --- b. The second hamburger --------------------------------------------
   GET IN TOUCH carried Font Awesome f036 (align-justify) — four stacked bars,
   which next to the header's burger reads as a second menu button sitting on
   a call-to-action. f1d8 is the paper plane. */
.button-NqlJcxXpW1 .button-icon-start:before{ content: "\f1d8"; }

/* --- c. Contact email breaking across two lines --------------------------
   theframingcentre1@gmail.com is 27 characters. At the tile's 22px it needs
   314px against 270px of usable width at 390px wide, so it wrapped mid-word
   to "...gmail.co / m". Nothing sensible to hyphenate on, so the type shrinks
   to fit instead: 4.6vw stays under the ~18.9px that fits at 390px and keeps
   proportion at other widths, capped so it never exceeds the original 22px. */
@media screen and (max-width:767px){
  #row-HejIA9wTiq a[href^="mailto:"]{
    font-size: min(1.375rem, 4.6vw) !important;
    white-space: nowrap;
  }
}


/* --- Hero Google rating line ---------------------------------------------
   Was "Check Our Reviews!", now the 4.7 rating. The number carries the weight;
   the separator is quietened so it reads as one line rather than two labels. */
.tfc-reviews-link strong{ font-weight: 700; }
.tfc-rating-sep{ opacity: .55; padding: 0 0.125rem; }