@layer theme-custom {
/* ==========================================================
   IN-N-YOUNG  /  THEME CUSTOM CSS
   File    : theme-css-nav-v4.1-20260922.css
   Version : v4.1
   Date    : 2026-09-22
   Paste into: Admin > System > Theme Custom CSS  (replace all)

   ----------------------------------------------------------
   WHAT THIS FILE DOES
   ----------------------------------------------------------
   1. Navbar over the hero
      Scope : body.b_service_detail   (treatment pages)
              body.b_about_detail     (about page /about/detail/N)
              The homepage is NOT affected.
      Effect: navbar floats over the hero image, sticks to the
              top on scroll, logo swapped to .web-title, menu
              right aligned, plus a 901-1180px size tweak.

   4. Mobile menu (site-wide, <=992px)
      Ivory drawer, gold hairlines, English kicker under each
      label, LINE item rendered as a CTA pill, restyled second
      level, staggered entrance. Top bar stays SOLID WHITE.

   7. Footer redesign (site-wide)
      Brand wordmark, English kickers, brand orange accents,
      outlined social buttons, quieter copyright. A column with
      no items collapses instead of leaving a hole.

   6. Footer policy links hidden
      Hides the footer line holding the privacy / refund /
      anti-fraud links. Visual only - the pages still exist.

   5. Home shell width guard (homepage only, ALL widths)
      Was <=767px only; the same overflow existed on desktop.

   2. Dropdown menu (site-wide, desktop only)
      Translucent frosted panel, centred under its label,
      centred item text, hover underline, entrance animation.
      Also fixes the homepage bug where dropdown text was
      white on a white background.

   ----------------------------------------------------------
   VERSION HISTORY
   ----------------------------------------------------------
   v4.1  2026-09-22  Mobile footer fix. The phone layout was
                     being driven by TWO older stylesheets that
                     are not in this file and that neither the
                     v3.x nor the v4.0 work knew about:
                       (a) Admin > Custom CSS (Custom CSS) > record
                           "Style B", site-wide, <=767px
                       (b) a <style id="iy-mobile-polish"> block
                           pasted into the HOME PAGE content,
                           <=900px, holding the same rules
                     Verified live by disabling them one at a
                     time in the browser: (a) alone printed the
                     brand blurb on div:first-child ul::before
                     with text-align:left, (b) alone kept the
                     row as a 1fr grid and zeroed the container
                     gutter. New block 7 sub-rule overrides all
                     of it from inside @layer theme-custom.
                     Nothing else changed from v4.0.
   v4.0  2026-09-22  Social icons enlarged: ring 36 -> 44px,
                     glyph 15 -> 19px, gap 12 -> 14px, top
                     margin 24 -> 26px. Nothing else changed.
   v3.9  2026-09-22  Block 7 only: the three social icons.
                     The template's Font Awesome brand glyphs are
                     drawn at three different weights (facebook-
                     square solid, instagram outline, line solid),
                     which is why the row looked unrefined. The
                     <i> is now hidden and one matched 1.7px
                     outline set is painted on a::before with
                     mask-image, so the icon still inherits the
                     link colour and the hover works. Ring 38px
                     orange .45 -> 36px ivory .16, glyph ivory at
                     70%; on hover ring and glyph both go orange
                     (no solid fill). Nothing else changed.
   v3.8  2026-09-22  Comment-only correction. The summary at the
                     top still described block 4 as <=900px; the
                     rule itself has been <=992px since v3.5.
                     No declaration changed from v3.7.
   v3.7  2026-09-21  New block 7: footer redesign.
                     BRAND COLOUR: #f08300. It is the CTA button
                     colour and was already the footer heading
                     colour; an earlier draft replaced it with
                     gold #d5ab00, which removed the brand colour
                     from the footer. Orange is back and is the
                     only accent here. Gold stays in blocks 1-4
                     (navbar, dropdown, mobile drawer).
                     What changed:
                       - brand wordmark + positioning line drawn
                         with ::before/::after on .container,
                         because the markup has no logo element
                       - headings 16px/500 orange -> 13px/400
                         ivory with an orange English kicker
                       - links salmon #f2c18d -> ivory at 76%
                       - phone number 16px -> 17px in #f08300
                       - social icons -> 38px outlined circles,
                         filling solid orange on hover
                       - top edge: 2px orange gradient hairline
                       - copyright 13px -> 10.5px at 30%
                       - a column with no <li> is hidden. NOTE:
                         :empty cannot be used, the template
                         renders <ul> </ul> with a whitespace
                         node inside.
                     Checked at 320 / 390 / 430 / 768 / 1280:
                     horizontal overflow 0 everywhere, social
                     buttons 38px, columns centred below 768.
                     CONTENT TODO (not CSS): the TREATMENTS
                     column is empty in the admin.
   v3.5  2026-09-20  Two changes to block 4.
                     (a) Hamburger: the template rotated it into
                     a right-pointing arrow while the drawer was
                     open. The drawer is on the left, so the
                     direction read wrong, and 2px black was
                     heavier than the logo. It now stays three
                     lines, 24x1.5px, identical open and closed.
                     (b) Breakpoint 900px -> 992px. The template
                     hides the mobile menu at 993px and up, so
                     901-992px was showing the drawer with none
                     of this styling - white panel, grey lines,
                     bold 16px items. Now the whole range matches.
   v3.4  2026-09-20  REAL FIX for the missing second level.
                     v3.3 guessed the panel width was to blame; it
                     was not. Reproduced locally against the
                     plugin's own CSS at 390px and measured it:
                     the entrance animation was on the <li>, and
                     the second level (.submenu) is a position:
                     fixed box INSIDE that <li>. An animated
                     element becomes the containing block for
                     fixed descendants, so the submenu was being
                     squashed into the row: 295x99 at y=184
                     instead of 295x777 at y=67. Moving the
                     animation to the <li> > a fixes it with the
                     stagger intact. Verified both ways locally.
                     Also: the back row's gold dash was landing on
                     top of the text, because the plugin parks its
                     own arrow at left:26px and our dash inherited
                     it. left/top/transform now reset and the
                     plugin's arrow sprite turned off.
   v3.3  2026-09-20  Block 4 no longer touches the drawer's
                     geometry. v3.2 set on .mobile-nav:
                       width: min(86vw, 344px)
                       height: calc(100vh - 67px)
                       overflow-y / overflow-x
                       transition: transform
                     Tapping a parent item then showed only the
                     "back" row and no second level. Cause: the
                     zeynep plugin hard-codes the panel width in
                     its own CSS - the closed submenu is parked at
                     left: 295px and slides to left: 0 - so a
                     different panel width leaves the second level
                     mispositioned. All four declarations removed;
                     the panel keeps the plugin's own size and
                     scrolling. Colours, type, kicker, CTA pill,
                     second level styling and motion unchanged.
   v3.2  2026-09-20  Block 5 unwrapped from its 767px media
                     query. Measured live after publishing v3.1:
                     the homepage had 15px of horizontal overflow
                     at 996px AND at 1590px. Cause is the same one
                     the mobile guard already fixed - the .row that
                     holds #iy-home keeps Bootstrap's -15px side
                     margins while its parent has 0 padding
                     (AGENTS.md rule 1.4). The original guard was
                     scoped to <=767px, so desktop kept the bug.
                     Verified live: overflow 15 -> 0 at 996px.
                     Not caused by v3.1 - pre-existing.
   v3.1  2026-09-20  New block 6: hides the three footer policy
                     links (privacy / refund / anti-fraud) at the
                     owner's request. One <li> holds all three, so
                     one rule removes the whole line. Visual only -
                     the pages remain live at their URLs.
   v3.0  2026-09-20  Mobile menu redesign, ivory palette.
                     Major number because this file now merges
                     two lines that had both been called v2.7:
                       - the live v2.7 (2026-09-01), which added
                         the homepage mobile shell width guard.
                         That block is carried over UNCHANGED as
                         block 5. Nothing of it was lost.
                       - the mobile menu work (v2.7/v2.8/v2.9
                         2026-09-18..20), added as block 4.
                     Block 4 detail: the drawer was the template
                     default - white panel, grey hairlines, bold
                     16px items, grey chevron. Markup belongs to
                     the zeynep plugin and cannot be changed from
                     the admin, so the redesign is pure CSS on the
                     existing classes. Palette is ivory:
                       panel   #fdfbf7 -> #f1ebdf
                       text    #2b211c
                       accent  #b08d16 / #c9a227 (darker gold,
                               readable on a light panel)
                       divider rgba(43,33,28,.07)
                       scrim   rgba(43,33,28,.42)
                     The top bar stays solid white so the logo,
                     a dark mark on white, never sits on a tint.
                     PUBLISH THIS ONE. The 2026-09-18..20 files
                     named v2.7, v2.8 and v2.9 are all dead - they
                     were built before the live v2.7 was noticed
                     and would have deleted block 5.
   v2.7  2026-09-01  Homepage mobile shell width guard.
                     (Live version, by another hand. Preserved
                     here as block 5.)
   v2.6  2026-08-30  IMPORTANT ENVIRONMENT FINDING.
                     The admin wraps everything pasted into
                     Theme Custom CSS inside
                        @layer theme-custom { ... }
                     Under CSS cascade layers, a NORMAL
                     declaration in a layer always loses to the
                     theme's own unlayered CSS, no matter the
                     source order or the selector. An
                     !important declaration in a layer wins.
                     Every rule in blocks 1 and 2 already uses
                     !important, so they were never affected.
                     Block 3 did not, so v2.5 published fine but
                     word-break stayed break-all on the live
                     site. Verified on the homepage:
                     :root word-break = break-all,
                     overflow-wrap = anywhere (the second one
                     applied only because the theme does not
                     set it at all).
                     Fix: !important on block 3, and the same
                     rule repeated for  a  because the theme
                     also sets  a { word-break: break-all }
                     directly, which inheritance cannot beat.
                     Verified live on the homepage and
                     /about/detail/1: root and a both become
                     normal, horizontal overflow stays 0.
   v2.5  2026-08-30  Word-break fix corrected and regression
                     tested. v2.4 used overflow-wrap:break-word,
                     which made auto-layout TABLES push the page
                     235px wider at 375px (break-word does not
                     shrink min-content width). Changed to
                     overflow-wrap:anywhere. Retested at 375 /
                     768 / 1440: zero horizontal overflow on
                     long URLs, long English names, table cells,
                     breadcrumbs, buttons, fixed-width cards,
                     flex and grid columns. DO NOT PUBLISH v2.4.
   v2.4  2026-08-30  Site-wide word-break fix. SUPERSEDED, do
                     not publish - broke tables on mobile.
   v2.3  2026-08-29  Versioned filename + this header. No CSS change.
   v2.2  2026-08-29  Fixed the about-page body class:
                     b_about_list -> b_about_detail (25 places).
                     Sticky state now matches any body class
                     containing "nav-scrolled", so each page keeps
                     its own script name (iy-service-nav-scrolled,
                     iy-about-nav-scrolled, ...).
   v2.1  2026-08-29  Dropdown: translucent panel, centred panel
                     and centred item text.
   v2.0  2026-08-29  Dropdown redesigned and made site-wide.
   v1.0  2026-08-29  Navbar rules moved here out of each page's
                     inline <style>.

   ----------------------------------------------------------
   RULES FOR EDITING
   ----------------------------------------------------------
   - Bump the version, the filename and the history above
     every time this file changes.
   - Comments must stay ASCII only. The admin field mangles
     non-ASCII characters into garbage.
   - New treatment/about pages do NOT copy these rules into
     their page content. Page inline CSS holds page-specific
     rules only (see AGENTS.md rule 1.9).
   ========================================================== */

@media(min-width:901px) {body.b_service_detail .content.nav-logo,
  body.b_about_detail .content.nav-logo {
    position: relative !important
  }body.b_service_detail .content.nav-logo>nav.navbar,
  body.b_about_detail .content.nav-logo>nav.navbar {
    position: absolute !important;
    top: 24px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
    width: 100% !important;
    height: 72px !important;
    min-height: 72px !important;
    display: grid !important;
    grid-template-columns: 220px minmax(0, 1fr) !important;
    grid-template-rows: 72px !important;
    align-items: center !important;
    padding: 0 clamp(32px, 5vw, 80px) !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: top .35s ease, background-color .35s ease, box-shadow .35s ease !important
  }body.b_service_detail .content.nav-logo>nav.navbar>.navi-item:first-child,
  body.b_about_detail .content.nav-logo>nav.navbar>.navi-item:first-child {
    display: none !important
  }body.b_service_detail .content.nav-logo>nav.navbar>.navi-item:nth-child(2),
  body.b_about_detail .content.nav-logo>nav.navbar>.navi-item:nth-child(2) {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 220px !important;
    margin: 0 !important;
    padding: 0 !important
  }body.b_service_detail .content.nav-logo>nav.navbar>.navi-item:nth-child(2)>.container,
  body.b_about_detail .content.nav-logo>nav.navbar>.navi-item:nth-child(2)>.container {
    width: 220px !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important
  }body.b_service_detail .content.nav-logo>nav.navbar .navbar-brand,
  body.b_about_detail .content.nav-logo>nav.navbar .navbar-brand {
    display: none !important
  }body.b_service_detail .content.nav-logo>nav.navbar .web-title,
  body.b_about_detail .content.nav-logo>nav.navbar .web-title {
    display: block !important;
    width: 205px !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 !important
  }body.b_service_detail .content.nav-logo>nav.navbar .web-title a,
  body.b_about_detail .content.nav-logo>nav.navbar .web-title a {
    display: block !important;
    width: 205px !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    text-indent: -9999px !important;
    font-size: 0 !important;
    background: url("https://in-n-young.com/images/in-n-young.com/upload_file/350ec4a2-9ef4-4d86-baa1-03bce73ae0ed.png") left center/contain no-repeat !important
  }body.b_service_detail .content.nav-logo>nav.navbar>.naviMain,
  body.b_about_detail .content.nav-logo>nav.navbar>.naviMain {
    display: block !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important
  }body.b_service_detail .content.nav-logo>nav.navbar>.naviMain>.container,
  body.b_about_detail .content.nav-logo>nav.navbar>.naviMain>.container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important
  }body.b_service_detail .content.nav-logo>nav.navbar>.naviMain ul,
  body.b_about_detail .content.nav-logo>nav.navbar>.naviMain ul {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: clamp(16px, 2.2vw, 34px) !important;
    margin: 0 !important;
    padding: 0 !important
  }body.b_service_detail .content.nav-logo>nav.navbar>.naviMain li,
  body.b_about_detail .content.nav-logo>nav.navbar>.naviMain li {
    margin: 0 !important;
    padding: 0 !important
  }body.b_service_detail .content.nav-logo>nav.navbar>.naviMain a,
  body.b_about_detail .content.nav-logo>nav.navbar>.naviMain a,
  body.b_service_detail .content.nav-logo>nav.navbar>.naviMain span,
  body.b_about_detail .content.nav-logo>nav.navbar>.naviMain span,
  body.b_service_detail .content.nav-logo>nav.navbar>.naviMain i,
  body.b_about_detail .content.nav-logo>nav.navbar>.naviMain i {
    color: #fff !important;
    font-size: 15px !important;
    letter-spacing: .07em !important
  }body.b_service_detail[class*="nav-scrolled"] .content.nav-logo>nav.navbar,
  body.b_about_detail[class*="nav-scrolled"] .content.nav-logo>nav.navbar {
    position: fixed !important;
    top: 0 !important;
    z-index: 1000 !important;
    height: 76px !important;
    min-height: 76px !important;
    background: rgba(43, 33, 28, .94) !important;
    box-shadow: 0 8px 24px rgba(43, 33, 28, .14) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important
  }

}

@media(min-width:901px) and (max-width:1180px) {body.b_service_detail .content.nav-logo>nav.navbar,
  body.b_about_detail .content.nav-logo>nav.navbar {
    grid-template-columns: 180px minmax(0, 1fr) !important;
    padding-left: 4vw !important;
    padding-right: 4vw !important
  }body.b_service_detail .content.nav-logo>nav.navbar>.navi-item:nth-child(2),
  body.b_about_detail .content.nav-logo>nav.navbar>.navi-item:nth-child(2),
  body.b_service_detail .content.nav-logo>nav.navbar>.navi-item:nth-child(2)>.container,
  body.b_about_detail .content.nav-logo>nav.navbar>.navi-item:nth-child(2)>.container {
    width: 180px !important
  }body.b_service_detail .content.nav-logo>nav.navbar .web-title,
  body.b_about_detail .content.nav-logo>nav.navbar .web-title,
  body.b_service_detail .content.nav-logo>nav.navbar .web-title a,
  body.b_about_detail .content.nav-logo>nav.navbar .web-title a {
    width: 176px !important;
    height: 46px !important
  }body.b_service_detail .content.nav-logo>nav.navbar>.naviMain ul,
  body.b_about_detail .content.nav-logo>nav.navbar>.naviMain ul {
    gap: 16px !important
  }body.b_service_detail .content.nav-logo>nav.navbar>.naviMain a,
  body.b_about_detail .content.nav-logo>nav.navbar>.naviMain a,
  body.b_service_detail .content.nav-logo>nav.navbar>.naviMain span,
  body.b_about_detail .content.nav-logo>nav.navbar>.naviMain span,
  body.b_service_detail .content.nav-logo>nav.navbar>.naviMain i,
  body.b_about_detail .content.nav-logo>nav.navbar>.naviMain i {
    font-size: 13px !important;
    letter-spacing: .035em !important
  }

}

/* ==========================================================
   Global dropdown menu  (site-wide, desktop only)
   Added 2026-08-29 (theme CSS v2)
   v2.1 2026-08-29: translucent frosted panel, centred panel
                    and centred item text.

   Replaces the old service-detail-only dropdown rules and now
   applies to EVERY page. This also fixes the homepage bug where
   dropdown text was white on a white background (invisible).

   The long selector prefix is deliberate: the theme sets the
   menu colour with !important at a high specificity, and a
   shorter selector loses to it.

   Mobile is untouched (it uses .mobile-nav, not .naviMain).
   ========================================================== */

@media(min-width:901px) {

  /* ---- panel: translucent frosted glass, centred under the label ---- */
  body .content.nav-logo nav.navbar .naviMain li.dropdown > .dropdown-menu {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    min-width: 212px !important;
    margin-top: 14px !important;
    padding: 8px !important;
    background: rgba(255, 255, 255, .82) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
    backdrop-filter: blur(20px) saturate(1.4) !important;
    border: 1px solid rgba(255, 255, 255, .55) !important;
    border-radius: 14px !important;
    box-shadow:
      0 20px 44px rgba(43, 33, 28, .18),
      0 2px 8px rgba(43, 33, 28, .08) !important;
  }

  /* invisible bridge across the gap, so the menu does not close
     while the cursor travels from the label down to the panel */
  body .content.nav-logo nav.navbar .naviMain li.dropdown > .dropdown-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -16px;
    height: 16px;
  }

  /* ---- items: centred text ---- */
  body .content.nav-logo nav.navbar .naviMain li.dropdown > .dropdown-menu > a.dropdown-item {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 46px !important;
    padding: 0 18px !important;
    border-radius: 10px !important;
    color: #2b211c !important;
    background: transparent !important;
    font-size: 14.5px !important;
    letter-spacing: .06em !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    transition:
      color .24s cubic-bezier(.16, 1, .3, 1),
      background-color .24s cubic-bezier(.16, 1, .3, 1) !important;
  }

  /* centred underline that grows out from the middle on hover */
  body .content.nav-logo nav.navbar .naviMain li.dropdown > .dropdown-menu > a.dropdown-item::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 9px;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: #c96500;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform .24s cubic-bezier(.16, 1, .3, 1);
  }

  body .content.nav-logo nav.navbar .naviMain li.dropdown > .dropdown-menu > a.dropdown-item:hover,
  body .content.nav-logo nav.navbar .naviMain li.dropdown > .dropdown-menu > a.dropdown-item:focus {
    color: #c96500 !important;
    background: rgba(247, 243, 236, .9) !important;
  }

  body .content.nav-logo nav.navbar .naviMain li.dropdown > .dropdown-menu > a.dropdown-item:hover::after,
  body .content.nav-logo nav.navbar .naviMain li.dropdown > .dropdown-menu > a.dropdown-item:focus::after {
    transform: translateX(-50%) scaleX(1);
  }

}

/* ---- entrance animation
        (skipped for visitors who ask for reduced motion)
        NOTE: keyframes must keep translateX(-50%), otherwise the
        animation would undo the horizontal centring. ---- */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {

  body .content.nav-logo nav.navbar .naviMain li.dropdown > .dropdown-menu.show {
    animation: innyDropIn .24s cubic-bezier(.16, 1, .3, 1) both;
  }

  @keyframes innyDropIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
    to   { opacity: 1; transform: translateX(-50%); }
  }

}


/* ==========================================================
   3. Word breaking  (site-wide)
   Added 2026-08-30 (v2.4), corrected 2026-08-30 (v2.5)

   The theme sets  :root { word-break: break-all }  which is
   inherited by every element. break-all may break INSIDE a
   normal word, so English headings render as "beau / ty" on
   narrow screens. Chinese is unaffected.

   overflow-wrap: anywhere keeps the original intent - long
   unbreakable strings such as URLs still wrap instead of
   overflowing - without cutting normal words.

   Why "anywhere" and not "break-word":
   break-word does NOT reduce an element's min-content width.
   Inside an auto-layout <table> the cell therefore keeps
   demanding the full width of the longest URL, and the table
   pushes the whole page sideways. Measured at 375px: 235px of
   horizontal overflow. "anywhere" does reduce min-content
   width, so tables, flex items and grid items all stay inside
   the viewport.

   Why !important here (v2.6):
   the admin wraps this whole file in @layer theme-custom.
   Normal declarations in a layer lose to the theme's own
   unlayered CSS. !important declarations in a layer win.
   The  a  selector is repeated on purpose: the theme sets
   a { word-break: break-all } directly on the element, and
   an inherited value from :root can never beat that.

   Regression tested 2026-08-30 at 375 / 768 / 1440 px:
   long URL with query string, long English treatment name,
   very long single English word, long email address, Chinese
   paragraph, table cell with URL, breadcrumb, pill button,
   fixed-width card, flex column, grid column.
   Result: horizontal overflow 0 everywhere, same as the
   current live break-all. Only effect is that some blocks
   grow 1 line taller because words no longer split.
   ========================================================== */

:root,
a{
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}


/* ==========================================================
   4. Mobile menu  (site-wide, <=992px)
   Added 2026-09-18 (v2.7), ivory palette 2026-09-20 (v2.9)

   The drawer is the zeynep drilldown plugin. Markup cannot be
   changed from CSS, so everything here works on the existing
   classes:
     .mobile-menu   top bar
     .overlayer     dimming layer
     .mobile-nav    the sliding panel
     .submenu       second level panel

   All declarations use !important: the admin wraps this file
   in @layer theme-custom, where normal declarations always
   lose to the template's own CSS (see AGENTS.md rule 1.10).
   ========================================================== */

@media (max-width: 992px) {

  /* ---- dimming layer ---- */
  .overlayer {
    background: rgba(43, 33, 28, .42) !important;
    -webkit-backdrop-filter: blur(3px) saturate(1.1) !important;
    backdrop-filter: blur(3px) saturate(1.1) !important;
  }

  /* ---- top bar ----
     Stays solid white on purpose: the logo is a dark mark on
     white, so any tint or translucency here makes it look dirty.
     No backdrop-filter, no alpha. ---- */
  .mobile-menu {
    background: #ffffff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid rgba(43, 33, 28, .08) !important;
    box-shadow: 0 1px 16px rgba(43, 33, 28, .06) !important;
  }

  /* ---- hamburger ----
     The template turns the three lines into a right-pointing
     arrow when the drawer is open (.model1.is-active rotates
     lines 1 and 3). The drawer opens on the LEFT, so an arrow
     pointing right reads as the wrong direction, and at 2px it
     is heavier than the logo beside it.
     Here it simply stays three lines, thinner, in both states,
     so nothing jumps when the menu opens. ---- */
  .mobile-menu .hamburger .line,
  .mobile-menu .hamburger.is-active .line {
    width: 24px !important;
    height: 1.5px !important;
    background-color: #2b211c !important;
    transform: none !important;
    opacity: 1 !important;
  }

  /* ---- the panel ----
     GEOMETRY IS THE PLUGIN'S, NOT OURS.
     Do not set width, height or overflow here. The zeynep
     plugin hard-codes the panel width in its own rules - the
     closed submenu sits at  left: 295px  - so changing the
     width leaves the second level in the wrong place and it
     stops appearing. v3.2 set width/height/overflow and broke
     the submenu on phones. Colour and shadow only. ---- */
  .mobile-nav {
    background:
      radial-gradient(120% 70% at 0% 0%, rgba(213, 171, 0, .10) 0%, rgba(213, 171, 0, 0) 55%),
      linear-gradient(168deg, #fdfbf7 0%, #f7f2e9 55%, #f1ebdf 100%) !important;
    border-right: 1px solid rgba(43, 33, 28, .07) !important;
    box-shadow: 18px 0 46px rgba(43, 33, 28, .16) !important;
  }

  .mobile-nav .drilldown,
  .mobile-nav .drilldown-container {
    background: transparent !important;
  }

  .mobile-nav .drilldown-container > ul {
    padding: 18px 0 40px !important;
    margin: 0 !important;
    list-style: none !important;
  }

  .mobile-nav .drilldown-container > ul > li {
    background: transparent !important;
    border: 0 !important;
  }

  /* ---- first level item ---- */
  .mobile-nav .drilldown-container > ul > li > a {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 68px !important;
    padding: 15px 56px 15px 28px !important;
    background-image: none !important;   /* removes submenu-arrow.svg */
    border-bottom: 1px solid rgba(43, 33, 28, .07) !important;
    color: #2b211c !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    letter-spacing: .13em !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    transition:
      color .3s cubic-bezier(.16, 1, .3, 1),
      background-color .3s cubic-bezier(.16, 1, .3, 1),
      padding-left .3s cubic-bezier(.16, 1, .3, 1) !important;
  }

  .mobile-nav .drilldown-container > ul > li:last-child > a {
    border-bottom: 0 !important;
  }

  /* gold hairline that grows in from the left on press */
  .mobile-nav .drilldown-container > ul > li > a::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    width: 3px !important;
    height: 0 !important;
    background: #c9a227 !important;
    transform: translateY(-50%) !important;
    transition: height .34s cubic-bezier(.16, 1, .3, 1) !important;
  }

  .mobile-nav .drilldown-container > ul > li > a:active,
  .mobile-nav .drilldown-container > ul > li > a:focus {
    background-color: rgba(43, 33, 28, .045) !important;
    padding-left: 33px !important;
    color: #1d1612 !important;
  }

  .mobile-nav .drilldown-container > ul > li > a:active::before,
  .mobile-nav .drilldown-container > ul > li > a:focus::before {
    height: 26px !important;
  }

  /* ---- English kicker under each label ----
     Matched on href / data-submenu so the order of the menu can
     change freely. A new menu item simply gets no kicker; add a
     line here when one is added in the admin. ---- */
  .mobile-nav .drilldown-container > ul > li > a::after {
    order: 2 !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    letter-spacing: .26em !important;
    line-height: 1 !important;
    color: #b08d16 !important;
    text-transform: uppercase !important;
  }
  .mobile-nav .drilldown-container > ul > li > a[href*="/about"]::after      { content: "About" !important; }
  .mobile-nav .drilldown-container > ul > li > a[data-submenu="menu7"]::after  { content: "Laser Care" !important; }
  .mobile-nav .drilldown-container > ul > li > a[data-submenu="menu34"]::after { content: "Aesthetic" !important; }
  .mobile-nav .drilldown-container > ul > li > a[href*="lin.ee"]::after      { content: "Contact" !important; }

  /* ---- chevron for items that open a submenu ---- */
  .mobile-nav .drilldown-container > ul > li.has-submenu > a {
    background-image: none !important;
  }
  .mobile-nav li.has-submenu > a > .iy-chev,
  .mobile-nav li.has-submenu > a::marker { display: none !important; }

  .mobile-nav .drilldown-container > ul > li.has-submenu > a {
    background-image:
      linear-gradient(45deg, transparent 47%, rgba(180, 143, 20, .9) 47%, rgba(180, 143, 20, .9) 53%, transparent 53%),
      linear-gradient(-45deg, transparent 47%, rgba(180, 143, 20, .9) 47%, rgba(180, 143, 20, .9) 53%, transparent 53%) !important;
    background-size: 9px 9px, 9px 9px !important;
    background-position: right 28px top calc(50% - 4px), right 28px top calc(50% + 4px) !important;
    background-repeat: no-repeat, no-repeat !important;
  }

  /* ---- last item (LINE) rendered as a CTA pill ----
     Matched on the LINE link. If the contact link is ever changed
     in the admin, update this selector or the item falls back to a
     normal row. ---- */
  .mobile-nav .drilldown-container > ul > li > a[href*="lin.ee"] {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 11px !important;
    margin: 30px 28px 0 !important;
    min-height: 54px !important;
    padding: 0 22px !important;
    border: 1px solid rgba(180, 143, 20, .55) !important;
    border-radius: 999px !important;
    color: #8f7112 !important;
    font-size: 15px !important;
    letter-spacing: .14em !important;
  }
  .mobile-nav .drilldown-container > ul > li > a[href*="lin.ee"]::after {
    order: 2 !important;
    color: rgba(160, 127, 18, .85) !important;
  }
  .mobile-nav .drilldown-container > ul > li > a[href*="lin.ee"]:active,
  .mobile-nav .drilldown-container > ul > li > a[href*="lin.ee"]:focus {
    padding-left: 22px !important;
    background-color: rgba(213, 171, 0, .12) !important;
    border-color: rgba(180, 143, 20, .85) !important;
  }
  .mobile-nav .drilldown-container > ul > li > a[href*="lin.ee"]:active::before,
  .mobile-nav .drilldown-container > ul > li > a[href*="lin.ee"]:focus::before {
    height: 0 !important;
  }

  /* ---- signature at the foot of the first level ---- */
  .mobile-nav .drilldown-container > ul::after {
    content: "IN\00B7N\00B7YOUNG CLINIC \00B7 TAIPEI" !important;
    display: block !important;
    padding: 38px 28px 8px !important;
    color: rgba(43, 33, 28, .30) !important;
    font-size: 9.5px !important;
    letter-spacing: .32em !important;
    line-height: 1.6 !important;
  }

  /* ---- second level panel ----
     z-index: the first level's links carry an entrance
     animation, which gives them a stacking context. Without a
     z-index here the first level paints on top of the open
     second level. ---- */
  .mobile-nav .submenu {
    z-index: 3 !important;
    background:
      radial-gradient(120% 70% at 0% 0%, rgba(213, 171, 0, .10) 0%, rgba(213, 171, 0, 0) 55%),
      linear-gradient(168deg, #fdfbf7 0%, #f7f2e9 55%, #f1ebdf 100%) !important;
  }

  .mobile-nav .submenu .submenu-header {
    padding: 0 !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(43, 33, 28, .10) !important;
  }

  .mobile-nav .submenu .submenu-header a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 58px !important;
    padding: 0 28px !important;
    background: transparent !important;
    color: rgba(43, 33, 28, .55) !important;
    font-size: 12px !important;
    letter-spacing: .18em !important;
    text-decoration: none !important;
  }

  .mobile-nav .submenu .submenu-header a::before {
    content: "" !important;
    width: 18px !important;
    height: 1px !important;
    background: rgba(180, 143, 20, .85) !important;
    background-image: none !important;
    position: relative !important;
    left: 0 !important;      /* the plugin parks its arrow at left:26px */
    top: auto !important;
    transform: none !important;
    flex: 0 0 auto !important;
  }
  .mobile-nav .submenu .submenu-header {
    background-image: none !important;   /* plugin's back-arrow sprite */
  }

  .mobile-nav .submenu > label {
    display: block !important;
    opacity: 1 !important;   /* the plugin dims its label to .5 */
    margin: 0 !important;
    padding: 28px 28px 16px !important;
    color: #2b211c !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    letter-spacing: .14em !important;
  }

  .mobile-nav .submenu > ul {
    padding: 0 0 40px !important;
    margin: 0 !important;
    list-style: none !important;
  }

  .mobile-nav .submenu > ul > li > a {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    min-height: 56px !important;
    padding: 12px 28px 12px 44px !important;
    background: transparent !important;
    background-image: none !important;
    color: rgba(43, 33, 28, .78) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    letter-spacing: .1em !important;
    text-decoration: none !important;
    transition:
      color .3s cubic-bezier(.16, 1, .3, 1),
      padding-left .3s cubic-bezier(.16, 1, .3, 1) !important;
  }

  .mobile-nav .submenu > ul > li > a::before {
    content: "" !important;
    position: absolute !important;
    left: 28px !important;
    top: 50% !important;
    width: 6px !important;
    height: 1px !important;
    background: rgba(180, 143, 20, .5) !important;
    transition: width .3s cubic-bezier(.16, 1, .3, 1) !important;
  }

  .mobile-nav .submenu > ul > li > a:active,
  .mobile-nav .submenu > ul > li > a:focus {
    color: #1d1612 !important;
    padding-left: 54px !important;
  }

  .mobile-nav .submenu > ul > li > a:active::before,
  .mobile-nav .submenu > ul > li > a:focus::before {
    width: 12px !important;
    background: #c9a227 !important;
  }

  /* ---- entrance: items fade up in sequence ----
     The animation MUST sit on the <a>, never on the <li>.
     The second level (.submenu) lives inside the <li> and is
     position: fixed. An animated ancestor becomes the containing
     block for it, so animating the <li> squashes the submenu into
     the row's own box and the second level never appears.
     Measured at 390px: submenu 295x99 at y=184 (broken) vs
     295x777 at y=67 (correct). ---- */
  @media (prefers-reduced-motion: no-preference) {
    .mobile-nav.opened .drilldown-container > ul > li > a {
      animation: iyMobileItemIn .54s cubic-bezier(.16, 1, .3, 1) both !important;
    }
    .mobile-nav.opened .drilldown-container > ul > li:nth-child(1) > a { animation-delay: .10s !important; }
    .mobile-nav.opened .drilldown-container > ul > li:nth-child(2) > a { animation-delay: .17s !important; }
    .mobile-nav.opened .drilldown-container > ul > li:nth-child(3) > a { animation-delay: .24s !important; }
    .mobile-nav.opened .drilldown-container > ul > li:nth-child(4) > a { animation-delay: .31s !important; }
    .mobile-nav.opened .drilldown-container > ul > li:nth-child(5) > a { animation-delay: .38s !important; }
    .mobile-nav.opened .drilldown-container > ul > li:nth-child(6) > a { animation-delay: .45s !important; }
  }

  @keyframes iyMobileItemIn {
    from { opacity: 0; transform: translateX(-14px); }
    to   { opacity: 1; transform: none; }
  }

  /* ---- scrollbar ---- */
  .mobile-nav::-webkit-scrollbar { width: 3px !important; }
  .mobile-nav::-webkit-scrollbar-track { background: transparent !important; }
  .mobile-nav::-webkit-scrollbar-thumb {
    background: rgba(43, 33, 28, .18) !important;
    border-radius: 3px !important;
  }
}


/* ==========================================================
   5. Home shell width guard
   IN-N-YOUNG / HOME SHELL WIDTH GUARD v2.0 / 2026-09-20
   Scope: homepage only, ALL widths.

   v1.0 (2026-09-01) wrapped this in @media (max-width: 767px).
   The overflow it fixes is not mobile-only: the row that holds
   #iy-home carries Bootstrap's -15px side margins while its
   parent has 0 padding, so the page is 15px too wide at every
   width. Measured live 2026-09-20 at 996px and 1590px: 15px of
   horizontal overflow. Media query removed; rules unchanged.
   ========================================================== */

#pjax-container main .index-editor .small.html-info > .row:has(#iy-home) {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#pjax-container main .index-editor .small.html-info > .row:has(#iy-home) > .col-md-12 {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* ==========================================================
   6. Footer policy links
   Added 2026-09-20 (v3.1)

   The footer's contact column carries one <li> holding
   three links plus two "|" separators:
     /privacy  /refund-policy  /anti-fraud
   They are injected by the platform, not by page content, so
   they are hidden here rather than edited away.

   NOTE: hiding is visual only. The three pages still exist and
   are still reachable and crawlable at their URLs. To remove
   them for real, delete the pages in the admin as well.

   To bring one back, delete its line below.
   ========================================================== */

body footer li:has(> a[href="/privacy"]) {
  display: none !important;
}


/* ==========================================================
   7. Footer
   Added 2026-09-21 (v3.7)

   Works on the template's existing footer markup. No DOM
   changes are possible from the admin, so the brand line and
   the English kickers are generated with ::before / ::after.

   All declarations use !important - the admin wraps this file
   in @layer theme-custom (AGENTS.md rule 1.10).
   ========================================================== */

body footer {
  position: relative !important;
  padding: 0 0 26px !important;
  background:
    radial-gradient(90% 120% at 8% 0%, rgba(240, 131, 0, .10) 0%, rgba(240, 131, 0, 0) 55%),
    linear-gradient(176deg, #32271f 0%, #2b211c 45%, #221a15 100%) !important;
}

/* hairline of light across the top edge */
body footer::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg,
    rgba(240, 131, 0, 0) 0%,
    rgba(240, 131, 0, .55) 22%,
    rgba(240, 131, 0, .55) 78%,
    rgba(240, 131, 0, 0) 100%) !important;
}

/* ---- brand line above the columns ----
   The template gives the footer no logo, so one is drawn here.
   Two lines: the wordmark, then the positioning line. ---- */
body footer > .container {
  position: relative !important;
  padding-top: 62px !important;
}

/* wordmark: a block, so its border-bottom draws the divider
   across the whole footer width */
body footer > .container::before {
  content: "IN\00B7N\00B7YOUNG" !important;
  display: block !important;
  padding-bottom: 44px !important;   /* room for the tagline below */
  margin-bottom: 42px !important;
  border-bottom: 1px solid rgba(240, 131, 0, .22) !important;
  color: #f5efe6 !important;
  font-size: 21px !important;
  font-weight: 400 !important;
  letter-spacing: .22em !important;
  line-height: 1 !important;
}

/* tagline: absolutely placed under the wordmark, because a
   ::after would otherwise land after the columns */
body footer > .container::after {
  content: "AESTHETIC CLINIC \00B7 TAIPEI DONGMEN" !important;
  position: absolute !important;
  top: 96px !important;
  left: 15px !important;
  color: rgba(240, 131, 0, .9) !important;
  font-size: 10px !important;
  letter-spacing: .3em !important;
  line-height: 1 !important;
}

/* the brand block has to sit above the columns, so the row
   is pushed below it by the ::after margin above */
body footer > .container > .row {
  justify-content: flex-start !important;
}

/* ---- a column with no items collapses instead of leaving a hole ----
   :empty cannot be used: the template renders <ul> </ul> with a
   whitespace text node inside, which is not :empty. ---- */
body footer .row > div:not(:has(li)) {
  display: none !important;
}

/* ---- column headings ---- */
body footer h4.small-title {
  position: relative !important;
  margin: 0 0 20px !important;
  color: #f5efe6 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: .2em !important;
  line-height: 1.4 !important;
}

body footer h4.small-title::after {
  display: block !important;
  margin-top: 5px !important;
  color: #f08300 !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  letter-spacing: .28em !important;
  text-transform: uppercase !important;
}
body footer .row > div:nth-child(1) h4.small-title::after { content: "Treatments" !important; }
body footer .row > div:nth-child(2) h4.small-title::after { content: "Sitemap" !important; }
body footer .row > div:nth-child(3) h4.small-title::after { content: "Contact" !important; }

/* ---- list items ---- */
body footer li {
  position: relative !important;
  margin-bottom: 11px !important;
  color: rgba(245, 239, 230, .62) !important;
  font-size: 14px !important;
  letter-spacing: .05em !important;
  line-height: 1.85 !important;
}

body footer a {
  position: relative !important;
  color: rgba(245, 239, 230, .76) !important;
  font-size: 14px !important;
  letter-spacing: .05em !important;
  line-height: 1.85 !important;
  text-decoration: none !important;
  transition:
    color .28s cubic-bezier(.16, 1, .3, 1),
    padding-left .28s cubic-bezier(.16, 1, .3, 1) !important;
}

@media (min-width: 993px) {
  body footer .row > div:nth-child(-n+2) li > a::before {
    content: "" !important;
    position: absolute !important;
    left: -14px !important;
    top: 50% !important;
    width: 0 !important;
    height: 1px !important;
    background: #f08300 !important;
    transition: width .28s cubic-bezier(.16, 1, .3, 1) !important;
  }
  body footer .row > div:nth-child(-n+2) li > a:hover {
    color: #f5efe6 !important;
    padding-left: 12px !important;
  }
  body footer .row > div:nth-child(-n+2) li > a:hover::before {
    width: 8px !important;
  }
}

/* ---- social icons as outlined buttons ---- */
body footer li.social-link {
  margin-top: 26px !important;
  display: flex !important;
  gap: 14px !important;
}

/* The template prints Font Awesome brand glyphs, and the three are
   drawn at different weights: facebook-square is a SOLID rounded
   square, instagram is a thin outline, line is a solid drop. Inside
   one ring they read as three unrelated marks, so the glyph is
   hidden and replaced with one matched outline set, painted as a
   mask so it still follows the link's own colour on hover. */
body footer li.social-link a i {
  display: none !important;
}

body footer li.social-link a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(245, 239, 230, .16) !important;
  border-radius: 999px !important;
  color: rgba(245, 239, 230, .7) !important;
  font-size: 0 !important;
  transition:
    border-color .3s cubic-bezier(.16, 1, .3, 1),
    color .3s cubic-bezier(.16, 1, .3, 1) !important;
}

body footer li.social-link a::before {
  content: "" !important;
  display: block !important;
  position: static !important;
  width: 19px !important;
  height: 19px !important;
  background-color: currentColor !important;
  -webkit-mask-repeat: no-repeat !important;
          mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
          mask-position: center !important;
  -webkit-mask-size: contain !important;
          mask-size: contain !important;
}

body footer li.social-link a[href*="facebook"]::before,
body footer li.social-link a:nth-child(1)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h-2.2A3.8 3.8 0 0 0 9 6.8V9.5H6.6v3.2H9V21h3.3v-8.3h2.5l.5-3.2h-3V7.2c0-.8.4-1.2 1.2-1.2H15z'/%3E%3C/svg%3E") !important;
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h-2.2A3.8 3.8 0 0 0 9 6.8V9.5H6.6v3.2H9V21h3.3v-8.3h2.5l.5-3.2h-3V7.2c0-.8.4-1.2 1.2-1.2H15z'/%3E%3C/svg%3E") !important;
}

body footer li.social-link a[href*="instagram"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Ccircle cx='17.3' cy='6.7' r='1' fill='black' stroke='none'/%3E%3C/svg%3E") !important;
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Ccircle cx='17.3' cy='6.7' r='1' fill='black' stroke='none'/%3E%3C/svg%3E") !important;
}

body footer li.social-link a[href*="line."]::before,
body footer li.social-link a[href*="lin.ee"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10.4c0 4.1-4 7.4-9 7.4-.7 0-1.4-.1-2-.2l-4 2.1.8-3.3C4.6 15 3 12.9 3 10.4 3 6.3 7 3 12 3s9 3.3 9 7.4z'/%3E%3C/svg%3E") !important;
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10.4c0 4.1-4 7.4-9 7.4-.7 0-1.4-.1-2-.2l-4 2.1.8-3.3C4.6 15 3 12.9 3 10.4 3 6.3 7 3 12 3s9 3.3 9 7.4z'/%3E%3C/svg%3E") !important;
}

body footer li.social-link a:hover {
  background-color: transparent !important;
  border-color: rgba(240, 131, 0, .7) !important;
  color: #f08300 !important;
  padding-left: 0 !important;
}

/* ---- copyright ---- */
body footer .copyright {
  margin-top: 46px !important;
  padding-top: 24px !important;
  border-top: 1px solid rgba(245, 239, 230, .08) !important;
}

body footer .copyright h5,
body footer .copyright a {
  color: rgba(245, 239, 230, .3) !important;
  font-size: 10.5px !important;
  letter-spacing: .14em !important;
  line-height: 1.8 !important;
}

body footer .copyright a:hover {
  color: rgba(240, 131, 0, .9) !important;
}

/* ---- phone number gets weight: it is the point of the column ---- */
body footer .col-md-5 li:first-child {
  color: #f08300 !important;
  font-size: 17px !important;
  letter-spacing: .08em !important;
}

/* ---- mobile ---- */
/* ---- legacy override ------------------------------------
   Two older copies of a footer stylesheet are still live and
   are NOT in this file:
     (a) Admin > Custom CSS > record "Style B", site-wide, <=767px
     (b) <style id="iy-mobile-polish"> pasted into the HOME PAGE
         content, <=900px
   Both are unlayered !important. This file is wrapped in
   @layer theme-custom, and for IMPORTANT declarations a layer
   beats the unlayered origin, so everything declared here wins
   - but only what is declared here. These four rules cover the
   things the old sheets set that this file otherwise leaves
   alone: the container gutter (they zero it, so the text hits
   the screen edge), the row turned into a 1fr grid with a 30px
   gap, and a 14px margin-right on the social links that added
   to our own gap. Measured at 390px against a local copy of
   both old sheets. Remove this rule once (a) and (b) are gone.
   The range is <=900px, the wider of the two old sheets; above
   it none of their rules apply, so the template layout is left
   exactly as it was.
   ---------------------------------------------------------- */
@media (max-width: 900px) {
  body footer > .container {
    width: auto !important;
    max-width: none !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
  body footer > .container > .row {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
    margin: 0 !important;
  }
  body footer > .container > .row > div {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body footer li.social-link a {
    margin-right: 0 !important;
  }
}

/* The same old Custom CSS record also prints a three line brand
   blurb into the first column, on
   .row > div:first-child ul::before. It duplicates the wordmark
   and the English kicker that this file already draws, and it
   carries its own text-align, so it never follows the rest of
   the column. Switched off here as well, at every width, so
   this file alone is enough to make the footer correct. */
body footer .row > div:first-child ul::before {
  content: none !important;
  display: none !important;
}

@media (max-width: 767px) {
  body footer > .container {
    padding-top: 48px !important;
    text-align: center !important;
  }
  body footer > .container::before {
    padding-bottom: 38px !important;
    margin-bottom: 34px !important;
    font-size: 19px !important;
  }
  body footer > .container::after {
    top: 80px !important;
    left: 0 !important;
    right: 0 !important;
    text-align: center !important;
    font-size: 9px !important;
    letter-spacing: .24em !important;
  }
  body footer li.social-link {
    justify-content: center !important;
  }
  /* the template leaves the two half-width columns left-aligned
     from 576px up; centre them so the whole footer reads as one
     centred block on phones */
  body footer .row > div {
    text-align: center !important;
  }
  body footer .col-md-5 {
    margin-top: 30px !important;
  }
}
}