/* ==========================================================================
   JAGRITI DHAM — /best-luxury-senior-citizen-home-kolkata/  HEADER
   Loaded LAST, after style2.css and responsive2.css, so it wins the cascade
   on source order alone -- no declaration here is flagged to beat a legacy
   rule. (The eight !important uses below are the visually-hidden utility, the
   resize no-animation escape hatch, the >=992 panel suppression, and the
   reduced-motion and print blocks -- none of them is a specificity fight.)
   Everything is namespaced under .jd-header except the offset rules in
   section 7, which have to reach .banner-main and the in-page anchors.

   WHAT WAS WRONG WITH THE OLD ONE — all four measured on the live page
   before this was written:

     1. NO NAVIGATION ON A PHONE. The link column carried `d-none d-sm-block`
        and there was no toggler anywhere in the markup, so under 576px the
        count of reachable section links was exactly ZERO. Nine sections —
        Services, Pricing, Amenities, Our Community, Gallery, Why Jagriti
        Dham, Blog, Location, Contact — and a phone visitor could reach none
        of them from the header. That is the single biggest thing fixed here.

     2. 17px TAP TARGETS, TOUCHING. Each nav link measured 17px tall against
        the 44px floor, and the minimum gap between neighbouring links was
        0px — they shared edges, so a mis-tap landed on the wrong section.
        The phone link measured 40x16.

     3. THE HOVER STATE DID NOTHING. style2.css:161 says
        `.header_links li a:hover{ color:var(--green) }` and --green is never
        declared anywhere in this project (nor are --black or --gold, both
        also used). An undefined custom property with no fallback makes the
        declaration invalid, so nine links had no hover response at all.

     4. THE BANNER SAT UNDER THE HEADER. style2.css:231 hard-codes
        `.banner-main{margin-top:80px}` while the header measured 94px tall,
        so the top 14px of the slider was permanently behind the bar. That
        number is now derived from the header's own height variables and
        cannot drift again.

   The design language is deliberately the same as the sibling landing page
   /luxurious-senior-living/ — same ribbon, same warm paper bar, same brass
   CTA plate, same tokens. These two pages run in the same campaign; a reader
   who sees both should see one company.
   ========================================================================== */

.jd-header{
  /* --- palette, shared with the sibling page's header.css --- */
  --jd-green:#4f6f52;
  --jd-green-deep:#2b3f2f;
  --jd-green-dark:#22331f;
  --jd-ribbon-bg:#3a5240;
  --jd-gold:#cbb279;
  --jd-gold-lt:#e3cf9c;
  --jd-gold-dp:#7f6630;
  --jd-wa:#0F7A6D;                /* AA-safe WhatsApp green for ink and borders */
  --jd-paper-1:#fdfaf2;
  --jd-paper-2:#f8f3e7;
  --jd-nav-bg:#eae2cc;            /* the nav band. A tint alone cannot separate two
                                     creams - even #e6dcc2 only reaches 1.23:1 against
                                     the bar - so the shelf is drawn by its RULES:
                                     a firm brass hairline on top and the engraved
                                     brass rule along the bottom. The tint just stops
                                     the two surfaces reading as one sheet of paper. */

  /* --- heights. Every offset below is derived from these three, so the
         header can be re-proportioned by editing this block alone. --- */
  --jd-ribbon-h:30px;
  --jd-bar-h:70px;
  --jd-nav-h:46px;

  position:fixed; top:0; left:0; right:0; z-index:9999;
  font-family:Helvetica, Arial, sans-serif;
}
.jd-header *,
.jd-header *::before,
.jd-header *::after{ box-sizing:border-box; }
.jd-header a{ -webkit-tap-highlight-color:transparent; text-decoration:none; }

/* The house visually-hidden idiom, scoped so it cannot restyle anything
   else on the page. */
.jd-header .jd-sr{
  position:absolute !important;
  width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

/* ==========================================================================
   1. THE RIBBON
   ========================================================================== */
.jd-header .jd-ribbon{
  height:var(--jd-ribbon-h);
  overflow:hidden; position:relative;
  /* Flat ground, light from above, a little tooth. A left-to-right vignette
     reads as a decorative shape laid on the page; a band gets its richness
     from tone and grain, and shares its light direction with the bar below. */
  background-color:var(--jd-ribbon-bg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E"),
    linear-gradient(180deg,rgba(255,255,255,.055) 0%,rgba(0,0,0,0) 44%,rgba(0,0,0,.11) 100%);
  transition:height .30s cubic-bezier(.32,.72,0,1), opacity .16s linear;
}
.jd-header .jd-ribbon::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(203,178,121,.45) 25%,rgba(203,178,121,.45) 75%,transparent);
}
.jd-header .jd-ribbon-inner{
  height:100%; display:flex; align-items:center; justify-content:center;
  gap:18px; padding:0 16px;
}
.jd-header .jd-ribbon-text{
  --jd-ls:.155em;
  font-size:12.5px; font-weight:400;
  letter-spacing:var(--jd-ls); text-transform:uppercase;
  color:#f2e8d2;                  /* 8.06:1 on the ribbon ground */
  white-space:nowrap; line-height:1;
  margin-right:calc(var(--jd-ls) * -1);   /* trailing letter-space compensation */
}
.jd-header .jd-rb-sm{ display:none; }

/* the flanking rules reach for the edges and dissolve */
.jd-header .jd-dia{
  position:relative;
  flex:1 1 0; width:auto; height:1px; max-width:150px; min-width:24px;
  background:linear-gradient(90deg,rgba(203,178,121,0),rgba(203,178,121,.55));
}
.jd-header .jd-ribbon-inner > .jd-dia:last-child{
  background:linear-gradient(90deg,rgba(203,178,121,.55),rgba(203,178,121,0));
}
/* a crisp terminal tick so the rule stops rather than merely dying — 1px
   stays sharp at every DPR, unlike a rotated square */
.jd-header .jd-dia::after{
  content:""; position:absolute; right:0; top:-5px;
  width:1px; height:11px; background:rgba(203,178,121,.75);
}
.jd-header .jd-ribbon-inner > .jd-dia:last-child::after{ right:auto; left:0; }

/* ==========================================================================
   2. THE MAIN BAR — brand, phone, CTA, and (under 992) the menu button
   ========================================================================== */
.jd-header .jd-bar{
  position:relative;
  height:var(--jd-bar-h);
  background:linear-gradient(180deg,var(--jd-paper-1) 0%,var(--jd-paper-2) 100%);
  transition:height .34s cubic-bezier(.32,.72,0,1) .05s;
}
.jd-header .jd-bar-inner{
  height:100%; max-width:1560px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:nowrap; gap:16px; padding:0 26px;
}

/* ---------- brand ---------- */
.jd-header .jd-brand{
  display:flex; align-items:center; gap:13px; flex:none; padding:0; margin:0;
  min-height:44px;                 /* the logo is 40-54px tall depending on the
                                      width, but this is a LINK, and a link is a
                                      target: without this the brand measured 40
                                      on a phone, under the floor everything else
                                      in the bar clears */
}
.jd-header .jd-brand img{
  height:54px; width:auto; display:block;
  transform-origin:left center;
  transition:transform .40s cubic-bezier(.32,.72,0,1) .05s;
}
/* The old header set this line at 10px, which is under the 12px floor this
   audience needs and was the smallest type anywhere on the page. */
.jd-header .jd-brand-sub{
  display:none;                    /* switched on at >=1200, see below */
  font-size:11.5px; font-weight:600; line-height:1.25;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--jd-gold-dp);         /* 4.84:1 on the paper bar */
  max-width:130px;
  padding-left:13px;
  border-left:1px solid rgba(79,111,82,.24);
}

/* ---------- the right-hand cluster ---------- */
.jd-header .jd-bar-right{
  display:flex; align-items:center; gap:8px; flex:none;
}

.jd-header .jd-phone{
  display:flex; align-items:center; gap:11px;
  padding:6px 14px; min-height:46px;
}
.jd-header .jd-ic{
  width:38px; height:38px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#f4f7f3,#e9efe8);
  /* solid, not alpha: rgba(79,111,82,.42) resolves to 1.8:1 over the paper
     bar and fails WCAG 1.4.11. #748a77 measures 3.45:1. */
  border:1px solid #748a77;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  color:var(--jd-green); font-size:15px; line-height:1;
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
/* style2.css:208 puts a 40x40 green disc behind EVERY .social-media-top li i.
   These are different furniture; reset the inherited box explicitly. */
.jd-header .jd-ic i{
  background:transparent; width:auto; height:auto; line-height:1;
  color:inherit; font-size:inherit; border-radius:0;
}
.jd-header .jd-ct{ display:flex; flex-direction:column; line-height:1.18; }
.jd-header .jd-ct small{
  font-size:10px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--jd-gold-dp);
}
/* Tabular figures, so the eleven digits a 68-year-old has to read off the
   screen and key into a phone sit on an even rhythm. */
.jd-header .jd-ct b{
  font-size:17px; font-weight:600; letter-spacing:.01em;
  color:var(--jd-green-deep);
  font-variant-numeric:tabular-nums;
}

/* ---------- the brass CTA ----------
   The old header had no call to action at all: the ENQUIRE NOW button was
   commented out in the markup (index.php:180-184), leaving a lead-generation
   page whose header asked for nothing. */
.jd-header .jd-cta{
  --jd-cta-ls:.12em;
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 24px; border:0; border-radius:0; min-height:46px;
  font-size:14px; font-weight:700;
  letter-spacing:var(--jd-cta-ls); text-transform:uppercase; white-space:nowrap;
  color:#1d2c20;                   /* 6.24:1 at the plate's darkest stop */
  background:linear-gradient(180deg,
    #eaddb2 0%, #d9c390 34%, #c9ad72 52%, #d2b87f 66%, #b99a56 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 0 0 1px rgba(127,102,48,.30),
    inset 0 -1px 0 rgba(127,102,48,.42),
    0 1px 2px rgba(43,63,47,.12),
    0 8px 20px -12px rgba(43,63,47,.50);
  transition:transform .3s ease, box-shadow .3s ease, filter .3s ease;
}
.jd-header .jd-cta::after{
  content:""; position:absolute; top:0; left:-120%; width:55%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-22deg); transition:left .65s ease;
}
.jd-header .jd-cta-sm{ display:none; }

.jd-header .jd-cta i{
  font-size:12px; color:inherit; background:transparent;
  width:auto; height:auto; line-height:1;
  margin-left:calc(var(--jd-cta-ls) * -1);
  transition:transform .3s ease;
}
/* The sheen is the most crafted thing in the bar and touch users never
   hover — play it once, shortly after paint, then never again. */
@keyframes jd-sheen{ 0%{ left:-120%; } 100%{ left:135%; } }
@media (hover:none){
  .jd-header .jd-cta::after{ animation:jd-sheen 1.05s cubic-bezier(.32,.72,0,1) 1.2s 1 both; }
}

/* ---------- the menu button (under 992 only) ---------- */
.jd-header .jd-burger{
  display:none;                    /* switched on under 992, see below */
  align-items:center; justify-content:center;
  width:46px; height:46px; flex:none;
  padding:0; border:1px solid #748a77; border-radius:0;
  background:linear-gradient(180deg,#f4f7f3,#e9efe8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  cursor:pointer;
  transition:background .25s ease, border-color .25s ease;
}
.jd-header .jd-burger-box{
  display:block; position:relative; width:22px; height:16px;
}
.jd-header .jd-burger-box span{
  position:absolute; left:0; width:100%; height:2px; border-radius:1px;
  background:var(--jd-green-deep);
  transition:transform .28s cubic-bezier(.32,.72,0,1), opacity .18s linear, top .28s cubic-bezier(.32,.72,0,1);
}
.jd-header .jd-burger-box span:nth-child(1){ top:0; }
.jd-header .jd-burger-box span:nth-child(2){ top:7px; }
.jd-header .jd-burger-box span:nth-child(3){ top:14px; }
.jd-header .jd-burger[aria-expanded="true"]{ background:var(--jd-green); border-color:var(--jd-green); }
.jd-header .jd-burger[aria-expanded="true"] .jd-burger-box span{ background:#fff; }
.jd-header .jd-burger[aria-expanded="true"] .jd-burger-box span:nth-child(1){ top:7px; transform:rotate(45deg); }
.jd-header .jd-burger[aria-expanded="true"] .jd-burger-box span:nth-child(2){ opacity:0; }
.jd-header .jd-burger[aria-expanded="true"] .jd-burger-box span:nth-child(3){ top:7px; transform:rotate(-45deg); }

/* ==========================================================================
   3. THE NAVIGATION ROW  (>=992px)
   ==========================================================================
   Its own full-width band rather than a slot inside the bar. Nine links need
   about 790px at a legible size; sharing the bar with the brand, the phone
   block and the CTA leaves roughly 740px at 1280 and the row would have had
   to shrink to fit — which is how the old 15px/0-padding cramming happened.
   On its own row every link gets a 44px-tall target with real space around
   it at every width down to 992. */
.jd-header .jd-nav{
  height:var(--jd-nav-h);
  background:var(--jd-nav-bg);
  border-top:1px solid rgba(127,102,48,.55);
  box-shadow:0 1px 0 rgba(43,63,47,.05), 0 12px 26px -20px rgba(43,63,47,.6);
  transition:height .34s cubic-bezier(.32,.72,0,1) .05s;
}
/* the engraved brass rule, drawn INSIDE the box so --jd-nav-h stays the true
   height and every offset below stays exact */
.jd-header .jd-nav{ position:relative; }
.jd-header .jd-nav::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px; pointer-events:none;
  background-image:linear-gradient(180deg,
    rgba(203,178,121,.85) 0 1px,
    rgba(0,0,0,0) 1px 2px,
    rgba(203,178,121,.40) 2px 3px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}
.jd-header .jd-nav ul{
  height:100%; max-width:1560px; margin:0 auto; padding:0 20px;
  list-style:none;
  display:flex; align-items:stretch; justify-content:center; gap:2px;
}
.jd-header .jd-nav li{ display:flex; float:none; }
.jd-header .jd-nav a{
  position:relative;
  display:flex; align-items:center;
  padding:0 15px;
  min-height:44px;                /* measured 43 at a 44px row: the 1px top border
                                     and the 3px engraved rule live inside the box */
  font-size:15px; font-weight:500; line-height:1.1;
  white-space:nowrap;
  color:#33492f;                  /* 8.16:1 on the nav band */
  transition:color .22s ease, background-color .22s ease;
}
/* the brass underline: a real element rather than a border, so it can grow
   from the centre without shifting the label */
.jd-header .jd-nav a::after{
  content:""; position:absolute; left:50%; right:50%; bottom:7px; height:2px;
  background:var(--jd-gold-dp);
  transition:left .26s cubic-bezier(.32,.72,0,1), right .26s cubic-bezier(.32,.72,0,1);
}
.jd-header .jd-nav a[aria-current="true"]{ color:var(--jd-green-dark); font-weight:700; }
.jd-header .jd-nav a[aria-current="true"]::after{ left:15px; right:15px; }

/* ==========================================================================
   4. THE MOBILE PANEL  (under 992px)
   ==========================================================================
   This is the piece the page did not have. Nine sections were unreachable
   from a phone; they are all here, each on a 52px row. */
.jd-header .jd-panel{
  position:absolute; left:0; right:0; top:100%;
  max-height:calc(100vh - var(--jd-ribbon-h) - var(--jd-bar-h));
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:linear-gradient(180deg,var(--jd-paper-1) 0%,var(--jd-paper-2) 140px);
  border-top:1px solid rgba(127,102,48,.35);
  box-shadow:0 22px 40px -18px rgba(29,44,32,.55);
  transform-origin:top center;
}
.jd-header .jd-panel[hidden]{ display:none; }
.jd-header .jd-panel ul{ list-style:none; margin:0; padding:6px 0 0; }
.jd-header .jd-panel li{ float:none; }
.jd-header .jd-panel li + li a{ border-top:1px solid rgba(79,111,82,.13); }
.jd-header .jd-panel a.jd-p-link{
  display:flex; align-items:center; justify-content:space-between;
  min-height:52px; padding:0 22px;
  font-size:16.5px; font-weight:500;
  color:#33492f;
}
.jd-header .jd-panel a.jd-p-link::after{
  content:""; width:7px; height:7px; flex:none;
  border-right:2px solid var(--jd-gold-dp); border-bottom:2px solid var(--jd-gold-dp);
  transform:rotate(-45deg); opacity:.75;
}
.jd-header .jd-panel a.jd-p-link[aria-current="true"]{
  color:var(--jd-green-dark); font-weight:700;
  background:rgba(203,178,121,.20);
  box-shadow:inset 3px 0 0 var(--jd-gold-dp);
}
/* the contact block that closes the panel */
.jd-header .jd-p-foot{
  margin-top:8px; padding:16px 22px 22px;
  border-top:1px solid rgba(127,102,48,.35);
  background:rgba(203,178,121,.13);
  display:flex; flex-direction:column; gap:11px;
}
.jd-header .jd-p-foot .jd-p-contact{
  display:flex; align-items:center; gap:13px; min-height:52px;
  font-size:17px; font-weight:600; color:var(--jd-green-deep);
  font-variant-numeric:tabular-nums;
}
.jd-header .jd-p-foot .jd-p-contact .jd-ic{ width:42px; height:42px; font-size:16px; }
.jd-header .jd-p-foot .jd-p-wa .jd-ic{
  color:var(--jd-wa); border-color:#4f8f84;
  background:linear-gradient(180deg,#f2faf8,#e6f2ef);
}
.jd-header .jd-p-foot .jd-cta{ width:100%; min-height:54px; font-size:15px; }

/* the scrim behind the open panel — a tap anywhere on the page closes it,
   which is what everyone tries first */
.jd-header .jd-scrim{
  position:fixed; inset:0;
  background:rgba(29,44,32,.45);
  /* inset:0 rather than top:calc(ribbon + bar). That calc is the header's
     RESTING height, so with the header condensed the scrim started 34px too
     low and left a live, clickable strip of page showing between the bar and
     the dimming. z-index:-1 inside the header's own stacking context puts it
     behind the ribbon, the bar and the panel but in front of the page, so
     covering the full viewport costs nothing. */
  z-index:-1;
}
.jd-header .jd-scrim[hidden]{ display:none; }

/* ==========================================================================
   5. POINTER, PRESS AND FOCUS STATES
   ========================================================================== */
@media (hover:hover){
  .jd-header .jd-nav a:hover{ color:var(--jd-green-dark); background:rgba(203,178,121,.16); }
  .jd-header .jd-nav a:hover::after{ left:15px; right:15px; }
  .jd-header .jd-phone:hover .jd-ic{ background:var(--jd-green); border-color:var(--jd-green); color:#fff; transform:translateY(-1px); }
  .jd-header .jd-phone:hover .jd-ct b{ color:var(--jd-green); }
  .jd-header .jd-cta:hover{
    transform:translateY(-2px); filter:brightness(1.04);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.68),
      inset 0 0 0 1px rgba(127,102,48,.34),
      inset 0 -1px 0 rgba(127,102,48,.42),
      0 2px 4px rgba(43,63,47,.14),
      0 14px 26px -14px rgba(43,63,47,.55);
  }
  .jd-header .jd-cta:hover::after{ left:135%; }
  .jd-header .jd-cta:hover i{ transform:translateX(3px); }
  .jd-header .jd-burger:hover{ background:var(--jd-green); border-color:var(--jd-green); }
  .jd-header .jd-burger:hover .jd-burger-box span{ background:#fff; }
  .jd-header .jd-panel a.jd-p-link:hover{ background:rgba(203,178,121,.16); color:var(--jd-green-dark); }
}
/* press feedback that works on every input type, hover or not */
.jd-header .jd-phone:active .jd-ic{
  background:var(--jd-green); border-color:var(--jd-green); color:#fff;
  transform:scale(.93); transition-duration:.06s;
}
.jd-header .jd-cta:active{ transform:translateY(1px); transition-duration:.06s; }
.jd-header .jd-nav a:active{ background:rgba(203,178,121,.28); }
.jd-header .jd-panel a.jd-p-link:active{ background:rgba(203,178,121,.28); }

/* Focus. The house idiom is three separate rules — a bare :focus ring first
   for engines with no :focus-visible, then the reset, then the modern rule —
   because ONE unknown pseudo-class invalidates an entire selector list and
   the two-rule form silently leaves older browsers with no ring at all.
   Deep green, not gold: gold on this near-white bar measured 1.86:1. */
.jd-header a:focus,
.jd-header button:focus{ outline:2px solid var(--jd-green-deep); outline-offset:3px; border-radius:2px; }
.jd-header a:focus:not(:focus-visible),
.jd-header button:focus:not(:focus-visible){ outline:0; }
.jd-header a:focus-visible,
.jd-header button:focus-visible{ outline:2px solid var(--jd-green-deep); outline-offset:3px; border-radius:2px; }
/* inside the deep-green ribbon the same ring would vanish, so invert it */
.jd-header .jd-ribbon a:focus-visible{ outline-color:var(--jd-gold-lt); }
.jd-header .jd-cta:focus-visible{ outline-offset:2px; }

/* ==========================================================================
   6. THE CONDENSED STATE
   ========================================================================== */
.jd-header.jd-scrolled .jd-ribbon{ height:0; opacity:0; }
.jd-header.jd-scrolled .jd-bar{ height:56px; }
/* the nav row keeps its height when the header condenses. Shrinking it to 40
   put every link back under the 44px floor, and collapsing the ribbon plus
   trimming the bar already returns 44px - enough. */
.jd-header.jd-scrolled .jd-nav{ box-shadow:0 1px 0 rgba(43,63,47,.06), 0 16px 32px -22px rgba(43,63,47,.65); }
/* scale rather than height, so the mark stays crisp mid-transition and the
   browser composites it on the GPU instead of relaying out the bar */
.jd-header.jd-scrolled .jd-brand img{ transform:scale(.815); }   /* 44px of 54 */
/* Height animates only for the scroll-condense, never while the viewport is
   being resized — otherwise crossing a breakpoint animates, and can stick. */
.jd-header.jd-noanim,
.jd-header.jd-noanim *{ transition:none !important; }

/* ==========================================================================
   7. OFFSETS THAT DEPEND ON THE HEADER'S HEIGHT
   ==========================================================================
   style2.css:231 hard-codes .banner-main{margin-top:80px} against a header
   that measured 94px, so 14px of the slider was hidden behind the bar. These
   are derived from the same variables the header is built from, so they
   cannot drift out of step again. --jd-h-total is declared on :root as well
   as .jd-header because .banner-main is not a descendant of the header. */
:root{
  --jd-h-ribbon:30px;
  --jd-h-bar:70px;
  --jd-h-nav:46px;
  --jd-h-total:calc(var(--jd-h-ribbon) + var(--jd-h-bar) + var(--jd-h-nav));
}
.banner-main{ margin-top:var(--jd-h-total); }
html{ scroll-padding-top:calc(var(--jd-h-total) + 14px); }

/* ==========================================================================
   8. RESPONSIVE
   ========================================================================== */

/* the brand's descriptor only has room once the bar is wide enough that the
   nine-link row below it is not the constraint */
@media (min-width:1200px){
  .jd-header .jd-brand-sub{ display:block; }
}

@media (max-width:1199px){
  .jd-header .jd-bar-inner{ padding:0 18px; }
  .jd-header .jd-nav a{ padding:0 11px; font-size:14.5px; }
  .jd-header .jd-cta{ --jd-cta-ls:.09em; padding:12px 19px; font-size:13.5px; }
  .jd-header .jd-ribbon-text{ --jd-ls:.14em; font-size:12px; }
}

/* ---- the hand-off: nav row out, menu button in ---- */
@media (min-width:992px){
  .jd-header .jd-panel,
  .jd-header .jd-scrim{ display:none !important; }
}
@media (max-width:991px){
  .jd-header{ --jd-bar-h:64px; --jd-nav-h:0px; }
  :root{ --jd-h-bar:64px; --jd-h-nav:0px; }
  .jd-header .jd-nav{ display:none; }
  .jd-header .jd-burger{ display:flex; }
  .jd-header .jd-brand img{ height:48px; }
  .jd-header.jd-scrolled .jd-brand img{ transform:scale(.917); }   /* 44px of 48 */
  .jd-header.jd-scrolled .jd-bar{ height:54px; }
  /* the bar carries the whole header's shadow once the nav row is gone */
  .jd-header .jd-bar{ box-shadow:0 1px 0 rgba(43,63,47,.05), 0 12px 26px -20px rgba(43,63,47,.6); }
  .jd-header .jd-bar::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:3px; pointer-events:none;
    background-image:linear-gradient(180deg,
      rgba(203,178,121,.85) 0 1px,
      rgba(0,0,0,0) 1px 2px,
      rgba(203,178,121,.40) 2px 3px);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  }
  .jd-header .jd-ct{ display:none; }
  .jd-header .jd-phone{ padding:6px 6px; }
  /* Once the label drops away the circle IS the whole message, so fill it
     solid — it reads unmistakably as a button. White on the green measures
     5.63:1. */
  .jd-header .jd-ic{
    background:var(--jd-green); border-color:var(--jd-green); color:#fff;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
    width:40px; height:40px;
  }
  .jd-header .jd-ribbon-text{ --jd-ls:.13em; font-size:11.5px; }
  .jd-header .jd-dia{ max-width:90px; }
}

@media (max-width:767px){
  .jd-header{ --jd-bar-h:60px; }
  :root{ --jd-h-ribbon:30px; --jd-h-bar:60px; }
  .jd-header .jd-bar-inner{ padding:0 12px; gap:8px; }
  .jd-header .jd-brand img{ height:44px; }
  .jd-header.jd-scrolled .jd-brand img{ transform:none; }
  .jd-header.jd-scrolled .jd-bar{ height:56px; }
  .jd-header .jd-rb-lg{ display:none; }
  .jd-header .jd-rb-sm{ display:inline; }
  .jd-header .jd-ribbon-inner{ gap:12px; padding:0 10px; }
  .jd-header .jd-ribbon-text{ --jd-ls:.10em; font-size:11px; }
  .jd-header .jd-dia{ max-width:40px; min-width:16px; }
  /* THE CTA STAYS IN THE BAR ON PHONES. Four objects — brand, phone, this
     and the menu button — on a 375px line, and every one of them still has
     to clear 44px. That only works if each gives up something: the logo
     drops to 42, the phone circle to 44, the gaps to 6 and the bar padding
     to 10, and the label shortens to one word. Measured at 320 the four
     occupy 274px of 320, and at 375 they occupy 274 of 375. */
  .jd-header .jd-bar-inner{ gap:6px; padding:0 10px; }
  .jd-header .jd-brand img{ height:42px; }
  .jd-header .jd-ic{ width:44px; height:44px; font-size:15px; }
  .jd-header .jd-phone{ padding:0; }
  .jd-header .jd-cta-lg{ display:none; }
  .jd-header .jd-cta-sm{ display:inline; }
  .jd-header .jd-cta{
    --jd-cta-ls:.06em;
    padding:10px 12px; font-size:12px; gap:6px; min-height:44px;
  }
  .jd-header .jd-cta i{ font-size:11px; }
  .jd-header .jd-burger{ width:44px; height:44px; }
}

@media (max-width:400px){
  /* 44 is the floor and it does not move; what moves is the type and the
     air around it. The circle stays 44 rather than dropping to 38 — it is
     the one control on this bar a reader is most likely to be reaching for
     in a hurry. */
  .jd-header .jd-brand img{ height:40px; }
  .jd-header .jd-cta{ padding:10px 10px; font-size:11.5px; gap:5px; }
  .jd-header .jd-ribbon-text{ --jd-ls:.07em; font-size:10.5px; }
  .jd-header .jd-panel a.jd-p-link{ padding:0 16px; font-size:16px; }
  .jd-header .jd-p-foot{ padding:14px 16px 18px; }
}

@media (max-width:340px){
  /* Below 340 the four no longer fit at 44px each, and shaving the targets
     to make them fit would be the wrong trade. The phone is the one that
     leaves — it is the first row of the menu sheet and the whole of the
     page's own fixed bottom bar, so it is never more than one tap away. */
  .jd-header .jd-phone{ display:none; }
  .jd-header .jd-brand img{ height:38px; }
}

/* ==========================================================================
   9. ENVIRONMENT
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .jd-header .jd-ribbon,
  .jd-header .jd-bar,
  .jd-header .jd-nav,
  .jd-header .jd-brand img,
  .jd-header .jd-nav a::after,
  .jd-header .jd-burger-box span{ transition-duration:.01ms !important; }
  .jd-header .jd-cta::after{ display:none !important; }
  .jd-header .jd-cta:hover,
  .jd-header .jd-cta:active,
  .jd-header .jd-phone:hover .jd-ic,
  .jd-header .jd-phone:active .jd-ic{ transform:none !important; }
}

@media (forced-colors:active){
  .jd-header .jd-bar,
  .jd-header .jd-nav,
  .jd-header .jd-panel{ background:Canvas; border-bottom:1px solid CanvasText; }
  .jd-header .jd-nav a,
  .jd-header .jd-panel a.jd-p-link{ color:LinkText; }
  .jd-header .jd-nav a[aria-current="true"],
  .jd-header .jd-panel a.jd-p-link[aria-current="true"]{ color:Highlight; }
  .jd-header .jd-cta,
  .jd-header .jd-burger{ background:ButtonFace; color:ButtonText; border:1px solid ButtonText; box-shadow:none; forced-color-adjust:none; }
  .jd-header .jd-ic{ background:ButtonFace; color:ButtonText; border:1px solid ButtonText; }
}

@media print{
  .jd-header{ position:static; }
  .jd-header .jd-nav,
  .jd-header .jd-panel,
  .jd-header .jd-scrim,
  .jd-header .jd-burger,
  .jd-header .jd-cta{ display:none !important; }
  .banner-main{ margin-top:0 !important; }
}