/* Jamari Homes site layer: Style A motion + inner pages. Builds on tokens.css */
/* --- mobile navigation --- */
.nav-toggle{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;padding:0}
.nav-toggle span{display:block;height:2px;width:26px;background:var(--jh-ink);margin:0 auto;transition:transform .3s var(--jh-ease),opacity .2s}
body.menu-open{overflow:hidden}
body.menu-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .nav-toggle span:nth-child(2){opacity:0}
body.menu-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* Visibility waits for the slide (0s .4s) so the drawer glides out on close instead of vanishing;
   the open state below flips it back at once. Safe-area padding keeps the controls clear of a
   phone notch (the viewport is viewport-fit=cover), and overscroll-behavior stops the menu's own
   scroll from chaining to the page underneath on iOS. */
.mobile-menu{position:fixed;inset:0;z-index:var(--z-drawer,60);background:var(--jh-black);transform:translateX(100%);transition:transform .4s var(--jh-ease),visibility 0s .4s;display:flex;flex-direction:column;justify-content:flex-start;padding:calc(84px + env(safe-area-inset-top,0px)) 32px calc(40px + env(safe-area-inset-bottom,0px));visibility:hidden;overflow:hidden}
.mobile-menu a{font-size:1.35rem;padding:12px 0}
@media (max-height:720px){.mobile-menu a{font-size:1.2rem;padding:9px 0}}
/* The drawer itself never scrolls. It is a fixed shell, and only the link list inside it
   scrolls, which keeps the brand and the close button out of the scrolling region altogether
   so the way out is always on screen. Pinning them with position:fixed was tried first and is
   not dependable here: the drawer carries a transform, and a transformed ancestor becomes the
   containing block for fixed descendants, so they went on scrolling with the list. Search sits
   under the brand and the two calls to action hold the bottom edge. */
.mm-close{position:absolute;top:calc(22px + env(safe-area-inset-top,0px));right:26px;width:40px;height:40px;background:none;border:0;color:var(--jh-gold-300);font-size:32px;line-height:1;cursor:pointer;z-index:2}
.mm-brand{font-family:var(--jh-font-display);font-size:22px;font-weight:600;letter-spacing:.1em;color:var(--jh-ivory);position:absolute;top:calc(26px + env(safe-area-inset-top,0px));left:32px;z-index:2}
.mm-search{flex:none}
.mobile-menu .mm-list{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.mm-actions{flex:none}
.mm-brand{display:inline-flex;align-items:center;gap:.5em;line-height:1}
.mm-brand .bw-sub{color:var(--jh-gold-300)}
body.menu-open .mobile-menu{transform:none;visibility:visible;transition:transform .4s var(--jh-ease),visibility 0s}
.mobile-menu ul{list-style:none;margin:0 0 32px;padding:0}
.mobile-menu li{border-bottom:1px solid rgba(230,200,105,.16)}
.mobile-menu a{display:block;color:var(--jh-ivory);text-decoration:none;font-family:var(--jh-font-display);font-size:1.5rem;padding:14px 0;letter-spacing:.02em}
.mobile-menu a.active{color:var(--jh-gold-300)}
/* The drawer's link styling above applies to every anchor inside it, which swallowed the
   two primary CTAs and rendered them in the display serif at nearly twice the size of every
   other button on the site. Restore the button component — mobile is the majority channel,
   and these are the two most important calls to action on it. */
.mobile-menu .btn-jh{font:500 14px/1 var(--jh-font-body);letter-spacing:.06em;text-transform:uppercase;
  padding:15px 26px;text-align:center;display:block}
.mobile-menu .btn-jh.primary{background:var(--jh-gold-500);color:var(--jh-black);border-color:var(--jh-gold-500)}
.mobile-menu .btn-jh.ghost{color:var(--jh-ivory);border-color:var(--jh-ivory)}
.mm-actions{display:flex;flex-direction:column;gap:14px}
.mm-actions .btn-jh{text-align:center}
/* (The desktop-to-drawer switch lives in system.css at 1279.98px, where the heights are set too;
   the earlier 1200px copy of the same rules was redundant and has been removed.) */
/* --- sector mega-menu (desktop) --- */
.nav-jh{position:relative}
.has-mega{position:static}
/* Desktop nav fit: tighter gaps, and every label stays on a single line
   (never wrap "Heritage Art" onto two rows); items keep their intrinsic width.
   Child combinator throughout: the mega panel carries a .container of its own and must
   keep its natural layout, not the navigation bar's. */
.nav-jh > .container{gap:20px}
.nav-links{gap:18px;flex-wrap:nowrap}
.nav-links>li{flex:0 0 auto}
.nav-links a{white-space:nowrap}
.mega-btn{display:inline-flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;white-space:nowrap;
  font:500 14px/1 var(--jh-font-body);letter-spacing:.02em;color:var(--jh-ink);padding:6px 0}
.mega-btn .chev{width:10px;height:7px;opacity:.6;transition:transform .3s var(--jh-ease)}
.mega-btn:hover,.mega-btn.active{color:var(--text-accent)}
.mega-btn.active{position:relative}
.mega-btn[aria-expanded="true"] .chev{transform:rotate(180deg);opacity:.9}
.mega{position:absolute;top:100%;left:0;right:0;background:var(--jh-ivory);border-top:1px solid rgba(201,162,39,.45);
  box-shadow:var(--jh-shadow-3);opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-10px);transition:opacity .3s var(--jh-ease),transform .3s var(--jh-ease),visibility .3s;z-index:var(--z-mega,55)}
.mega::before{content:"";position:absolute;top:-1px;left:0;width:132px;height:2px;background:var(--jh-gold-500)}
.has-mega:focus-within .mega,.mega.open{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.nav-jh .mega-inner{display:block;height:auto;min-height:0;padding:46px 0 50px}
.mega-grid{display:grid;grid-template-columns:.92fr 1.5fr 1.08fr;gap:48px;align-items:stretch}
/* identity spine */
.mega-spine{border-right:1px solid var(--jh-hairline);padding-right:44px}
.mega-spine .eyebrow{color:var(--jh-gold-deep)}
.mega-line{font-family:var(--jh-font-display);font-size:1.34rem;line-height:1.38;color:var(--jh-black);margin:15px 0 22px;font-weight:500}
.mega-viewall{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--text-accent);
  font:600 11.5px/1 var(--jh-font-body);letter-spacing:.12em;text-transform:uppercase}
.mega-viewall .mv-arrow{transition:transform .25s var(--jh-ease)}
.mega-viewall:hover{color:var(--jh-gold-deep)}
.mega-viewall:hover .mv-arrow{transform:translateX(6px)}
/* curated nav */
.mega-nav{display:grid;grid-template-columns:1.2fr .8fr;gap:44px}
.mega-h{font:600 11px/1 var(--jh-font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--jh-stone);margin:0 0 18px;position:relative;padding-left:22px}
.mega-h::before{content:"";position:absolute;left:0;top:4px;width:13px;height:1px;background:var(--jh-gold-500)}
.mega-col ul{list-style:none;margin:0;padding:0}
.mega-thumbs li{margin:0 0 5px}
.mega-thumbs a{display:flex;align-items:center;gap:14px;text-decoration:none;padding:7px;margin-left:-7px;border-radius:2px;transition:background .25s var(--jh-ease)}
.mega-thumbs a:hover{background:#fff;box-shadow:var(--jh-shadow-1)}
.mt-img{width:64px;height:50px;flex:none;background-size:cover;background-position:center;border:1px solid var(--jh-hairline)}
.mt-t{font-family:var(--jh-font-display);font-size:1.16rem;color:var(--jh-ink);display:flex;align-items:center;gap:9px;transition:color .2s}
.mt-go{opacity:0;color:var(--jh-gold-500);transform:translateX(-5px);transition:opacity .25s,transform .25s var(--jh-ease)}
.mega-thumbs a:hover .mt-t{color:var(--text-accent)}
.mega-thumbs a:hover .mt-go{opacity:1;transform:none}
.mega-links a{display:block;padding:9px 0;text-decoration:none;color:var(--jh-ink);
  font-family:var(--jh-font-display);font-size:1.16rem;transition:color .2s,padding-left .25s var(--jh-ease)}
.mega-links a:hover{color:var(--jh-gold-deep);padding-left:6px}
/* feature card */
.mega-feature{position:relative;display:block;min-height:288px;overflow:hidden;text-decoration:none;background:var(--jh-charcoal)}
.mf-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.62;transition:transform 1.2s var(--jh-ease)}
.mega-feature:hover .mf-bg{transform:scale(1.06)}
.mega-feature::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,11,11,.92),rgba(11,11,11,.25) 58%,rgba(11,11,11,.05))}
.mf-body{position:absolute;left:0;right:0;bottom:0;padding:28px;z-index:2}
.mf-eyebrow{display:block;font:600 10.5px/1 var(--jh-font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--jh-gold-300)}
.mf-title{display:block;font-family:var(--jh-font-display);font-size:1.7rem;line-height:1.1;color:var(--jh-ivory);margin:10px 0 7px}
.mf-sub{display:block;font-size:13.5px;line-height:1.5;color:var(--text-inverse-muted);max-width:32ch}
.mf-btn{display:inline-flex;align-items:center;gap:9px;margin-top:17px;padding:10px 18px;border:1px solid var(--jh-gold-300);
  color:var(--jh-gold-300);font:600 11px/1 var(--jh-font-body);letter-spacing:.1em;text-transform:uppercase;transition:background .3s,color .3s}
.mega-feature:hover .mf-btn{background:var(--jh-gold-300);color:var(--jh-black)}
/* staggered reveal of the three zones (open state only, so it closes cleanly) */
.mega .m-anim{opacity:0;transform:translateY(13px);transition:opacity .42s var(--jh-ease),transform .42s var(--jh-ease)}
.has-mega:focus-within .mega .m-anim,.mega.open .m-anim{opacity:1;transform:none}
.mega.open .mega-spine,.has-mega:focus-within .mega-spine{transition-delay:.05s}
.mega.open .mega-nav,.has-mega:focus-within .mega-nav{transition-delay:.12s}
.mega.open .mega-feature,.has-mega:focus-within .mega-feature{transition-delay:.18s}
@media (prefers-reduced-motion:reduce){.mega .m-anim{transition:none;opacity:1;transform:none}}
/* mobile sector accordion */
.mm-sector{border-bottom:1px solid rgba(230,200,105,.16)}
.mm-acc{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;background:none;border:0;cursor:pointer;
  color:var(--jh-ivory);font-family:var(--jh-font-display);font-size:1.5rem;padding:14px 0;letter-spacing:.02em;text-align:left}
.mm-acc .chev{width:13px;height:8px;color:var(--jh-gold-300);flex:none;transition:transform .3s var(--jh-ease)}
.mm-acc[aria-expanded="true"] .chev{transform:rotate(180deg)}
.mm-panel{padding:2px 0 14px 14px;display:flex;flex-direction:column;gap:1px;border-left:1px solid rgba(230,200,105,.2);margin:0 0 8px 4px}
.mm-panel a{color:var(--text-inverse-muted);font-size:1.02rem;padding:9px 0;text-decoration:none;font-family:var(--jh-font-body)}
.mm-panel a:hover{color:var(--jh-gold-300)}
.mm-panel .mm-all{color:var(--jh-gold-300);font-weight:600}
@media (max-height:720px){.mm-acc{font-size:1.2rem;padding:9px 0}}
/* topbar language + currency switchers */
.topbar .util{display:flex;align-items:center}
.prefs{display:flex;align-items:center;gap:2px;margin-right:22px}
.pref{position:relative}
.pref-btn{display:inline-flex;align-items:center;gap:5px;background:none;border:0;cursor:pointer;
  color:var(--jh-gold-300);font:600 12.5px/1 var(--jh-font-body);letter-spacing:.06em;padding:5px 7px;margin:0}
.pref-btn .chev{width:8px;height:6px;opacity:.75;transition:transform .25s var(--jh-ease)}
.pref-btn:hover{color:var(--jh-ivory)}
.pref-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.pref-menu{position:absolute;top:calc(100% + 9px);right:0;min-width:160px;background:var(--jh-ivory);
  border:1px solid var(--jh-hairline);box-shadow:var(--jh-shadow-2);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s var(--jh-ease),transform .22s var(--jh-ease),visibility .22s;z-index:var(--z-popover,70)}
.pref.open .pref-menu{opacity:1;visibility:visible;transform:none}
.pref-menu a{display:flex;justify-content:space-between;gap:16px;margin:0;padding:8px 12px;text-decoration:none;
  color:var(--jh-ink);font:500 13px/1.2 var(--jh-font-body);letter-spacing:.02em;border-radius:2px;transition:background .2s,color .2s}
.pref-menu a:hover{background:#fff;color:var(--text-accent)}
.pref-menu a.on{color:var(--jh-gold-deep);font-weight:600}
.pref-menu .pc-sym{color:var(--jh-stone)}
.pref-note{display:block;font:400 10.5px/1.45 var(--jh-font-body);color:var(--jh-stone);padding:8px 12px 3px;border-top:1px solid var(--jh-hairline);margin-top:6px}
/* testimonials */
.quotes-head{text-align:center;margin:72px 0 34px}
.quotes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:28px}
.quote-card{position:relative;margin:0;background:#fff;border:1px solid var(--jh-hairline);border-top:2px solid var(--jh-gold-500);
  padding:32px 34px 30px;display:flex;flex-direction:column;box-shadow:0 20px 44px -30px rgba(0,0,0,.32)}
.qc-mark{font-family:var(--jh-font-display);font-size:3.4rem;line-height:.4;color:var(--jh-gold-300);height:28px}
.quote-card blockquote{margin:0 0 24px;font-family:var(--jh-font-display);font-style:italic;font-size:1.2rem;line-height:1.5;color:var(--jh-ink);flex:1}
.quote-card figcaption{display:flex;flex-direction:column;gap:3px;border-top:1px solid var(--jh-hairline);padding-top:16px}
.qc-name{font:600 12px/1.3 var(--jh-font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--text-accent)}
.qc-sector{font-size:13.5px;color:var(--jh-stone)}
/* eyebrow gold dash reads gold-300 on dark surfaces */
.on-dark .eyebrow::before,.page-hero .eyebrow::before{background:var(--jh-gold-300)}
/* --- hero: prevent headline/plate collision on desktop --- */
@media (min-width:901px){
  .hero .measure{max-width:600px}
  .hero-plate{right:5%;width:min(28vw,360px)}
}
.hero-media{background-position:center 32% !important}
/* svh: the small viewport unit keeps the hero steady while a phone browser's toolbar collapses. */
@media (max-width:768px){.hero{min-height:74vh;min-height:74svh}}
/* --- heritage art cards use landscape ratio so framed pieces show fully --- */
.art-grid .card-jh .media{aspect-ratio:4/3}
.art-grid .card-jh .media img{object-position:center}

/* reveals only hide when JS is present, so no-JS users still see everything */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity var(--jh-reveal) var(--jh-ease),transform var(--jh-reveal) var(--jh-ease)}
.reveal.is-inview{opacity:1;transform:none}
.world-media .ph,.card-jh .media .ph{transform:scale(1.06);transition:transform 1.4s var(--jh-ease)}
.is-inview .world-media .ph,.card-jh.is-inview .media .ph{transform:scale(1)}
.world:hover .world-media .ph{transform:scale(1.03)!important}
.card-jh:hover .media .ph{transform:scale(1.04)!important}
.hero-media{animation:kenburns 22s var(--jh-ease) infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero-media{animation:none}
  .world-media .ph,.card-jh .media .ph{transform:none;transition:none}
  html{scroll-behavior:auto}
}
/* inner page hero */
.page-hero{background:var(--jh-black);padding:88px 0 72px;position:relative;overflow:hidden}
.page-hero.with-img{min-height:46vh;min-height:46svh;display:flex;align-items:flex-end}
.page-hero .bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.28}
.page-hero .container{position:relative;z-index:2}
.page-hero h1{color:var(--jh-ivory);font-size:clamp(2.5rem,4.4vw,3.7rem);font-weight:600}
.page-hero .eyebrow{color:var(--jh-gold-300)}
.page-hero p.lead{color:var(--text-inverse-muted);max-width:60ch}
/* .page-hero already restates h1, .eyebrow and .lead for its dark ground, but not
   the ghost button, whose light-background ink #1F2421 landed at 1.32:1 on the
   dark ground in hospitality.php. tokens.css does this for .on-dark; .page-hero is the
   same kind of dark region and needs the same treatment. */
.page-hero .btn-jh.ghost{color:var(--jh-ivory);border-color:var(--jh-ivory)}
.page-hero .btn-jh.ghost:hover{background:rgba(250,247,240,.10)}
.crumbs{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-inverse-quiet);margin-top:14px}
.crumbs a{color:var(--jh-gold-300);text-decoration:none}
/* product grid + cards */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
@media (max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid-4{grid-template-columns:1fr}}
.badge-jh{display:inline-block;font:600 10.5px/1 var(--jh-font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--text-accent);border:1px solid var(--jh-hairline);padding:5px 9px;border-radius:2px;background:#fff}
.filter-chips{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 40px}
.filter-chips a{font:500 12.5px/1 var(--jh-font-body);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--jh-ink);border:1px solid var(--jh-hairline);padding:10px 16px;border-radius:2px;background:#fff;transition:all .3s var(--jh-ease)}
.filter-chips a:hover{border-color:var(--jh-gold-500)}
.filter-chips a.on{background:var(--jh-black);color:var(--jh-ivory);border-color:var(--jh-black)}
/* product detail */
.pd{display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:start}
/* The rail carries the product's h1 and is first in the DOM so it is the first heading a
   screen reader meets (A11Y-003); CSS puts it back on the right visually. */
.pd > .pd-rail{order:2}
.pd > .pd-main{order:1}
@media (max-width:900px){.pd > .pd-rail,.pd > .pd-main{order:0}}
@media (max-width:900px){.pd{grid-template-columns:1fr}}
.pd-media{position:relative;overflow:hidden;background:#fff}
.pd-media img{width:100%;display:block}
.pd-media::after{content:"";position:absolute;inset:14px;border:1px solid rgba(201,162,39,.35);pointer-events:none}
.pd-rail{position:sticky;top:96px;background:#fff;border:1px solid var(--jh-hairline);padding:34px}
.meta-list{list-style:none;margin:22px 0;padding:0;border-top:1px solid var(--jh-hairline)}
.meta-list li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--jh-hairline);font-size:14.5px}
.meta-list li span:first-child{color:var(--jh-stone);letter-spacing:.04em;text-transform:uppercase;font-size:11.5px;font-weight:600;padding-top:2px}
.feat-list{list-style:none;margin:16px 0 0;padding:0}
.feat-list li{padding:7px 0 7px 20px;position:relative;font-size:14.5px;color:var(--jh-ink)}
.feat-list li::before{content:"";position:absolute;left:0;top:14px;width:10px;height:1px;background:var(--jh-gold-500)}
/* forms */
.form-jh{max-width:640px}
.form-jh label{display:block;font:600 12.5px/1 var(--jh-font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--jh-charcoal-700);margin:22px 0 8px}
.form-jh input,.form-jh select,.form-jh textarea{width:100%;height:48px;border:1px solid var(--jh-hairline);background:#fff;padding:0 14px;font:400 15px/1.4 var(--jh-font-body);color:var(--jh-ink);border-radius:2px}
.form-jh textarea{height:140px;padding:12px 14px;resize:vertical}
.form-jh input:focus,.form-jh select:focus,.form-jh textarea:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--focus)}
.notice{border:1px solid var(--jh-gold-500);background:#FBF6E7;color:var(--jh-ink);padding:16px 20px;margin:24px 0;font-size:15px}
/* impact metric stats */
.impact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin:8px 0}
@media (max-width:820px){.impact-grid{grid-template-columns:repeat(2,1fr)}}
.impact-stat{text-align:center;padding:30px 16px;border:1px solid rgba(230,200,105,.22)}
.impact-stat .num{font-family:var(--jh-font-display);font-size:2.7rem;font-weight:600;color:var(--jh-gold-300);line-height:1}
.impact-stat .lbl{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-inverse-quiet);margin-top:12px}
/* heritage dark cards */
.dark .card-jh h3, .dark .card-jh .cap{color:var(--jh-ivory)}
.dark .card-jh .cap{color:var(--text-inverse-quiet)}
.dark .card-jh .price{color:var(--jh-gold-300)}
.sold-flag{position:absolute;top:22px;left:22px;z-index:2;background:var(--jh-black);color:var(--jh-gold-300);font:600 11px/1 var(--jh-font-body);letter-spacing:.14em;text-transform:uppercase;padding:8px 12px}
/* --- heritage art gallery (grouped by collection) --- */
.collection-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:34px;flex-wrap:wrap}
.collection-head h2{margin:8px 0 0}
.ch-blurb{max-width:48ch;color:var(--jh-stone);font-size:15px;line-height:1.62;margin:0}
.art-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:38px 30px}
.art-piece{margin:0}
.ap-media{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--jh-hairline);background:#fff}
.ap-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--jh-ease)}
.art-piece:hover .ap-media img{transform:scale(1.03)}
.art-piece figcaption{padding:15px 2px 0}
.ap-code{font:600 10.5px/1 var(--jh-font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--jh-gold-deep);margin:0 0 6px}
.art-piece h3{font-size:1.4rem;margin:0 0 4px}
.ap-meta{font-size:13px;color:var(--jh-stone);margin:0}
.ap-foot{display:flex;justify-content:space-between;align-items:baseline;margin-top:13px;border-top:1px solid var(--jh-hairline);padding-top:12px}
.ap-price{font-family:var(--jh-font-display);font-size:1.18rem;color:var(--text-accent)}
.make-steps{list-style:none;margin:22px 0 0;padding:0}
.make-steps li{display:flex;gap:16px;align-items:baseline;padding:11px 0;border-bottom:1px solid rgba(230,200,105,.16);color:var(--text-inverse-muted);font-size:15px}
.make-steps li span{font-family:var(--jh-font-display);font-size:1.15rem;color:var(--jh-gold-300);min-width:30px}
/* journal list */
.post-body{max-width:70ch;font-size:17px}
.post-body p{margin-bottom:16px}
/* --- image protection + zoom lightbox --- */
.protected{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}
.has-zoom{position:relative}
.jh-zoom{position:absolute;top:12px;right:12px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:rgba(11,11,11,.6);border:0;border-radius:50%;cursor:pointer;opacity:0;transform:translateY(-4px);
  transition:opacity .25s var(--jh-ease),transform .25s var(--jh-ease),background .25s;z-index:3;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.jh-zoom svg{width:20px;height:20px;fill:none;stroke:var(--jh-gold-300);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.has-zoom:hover .jh-zoom,.jh-zoom:focus-visible{opacity:1;transform:none}
.jh-zoom:hover{background:var(--jh-black)}
.jh-zoom:focus-visible{outline:2px solid var(--jh-gold-300);outline-offset:2px}
@media (hover:none){.jh-zoom{opacity:1;transform:none;background:rgba(11,11,11,.5)}}
body.jh-lb-open{overflow:hidden}
.jh-lightbox{position:fixed;inset:0;z-index:var(--z-lightbox,200);background:rgba(11,11,11,.94);display:none;align-items:center;justify-content:center}
.jh-lightbox[aria-hidden="false"]{display:flex}
.jh-lb-stage{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none}
.jh-lightbox img{max-width:92vw;max-height:88vh;display:block;transform-origin:center center;will-change:transform;
  -webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.jh-lb-close{position:absolute;top:16px;right:20px;width:48px;height:48px;background:none;border:0;color:var(--jh-gold-300);font-size:34px;line-height:1;cursor:pointer;z-index:2}
.jh-lb-close:focus-visible{outline:2px solid var(--jh-gold-300);outline-offset:3px;border-radius:4px}
.jh-lb-hint{position:absolute;bottom:24px;left:0;right:0;text-align:center;color:var(--text-inverse-muted);font:500 12px/1 var(--jh-font-body);letter-spacing:.08em;text-transform:uppercase;transition:opacity .6s var(--jh-ease);pointer-events:none}
/* magnifier loupe (desktop / fine pointer) */
.jh-loupe{position:fixed;width:240px;height:240px;border-radius:50%;border:2px solid var(--jh-gold-300);
  background-color:#0B0B0B;background-repeat:no-repeat;pointer-events:none;display:none;z-index:calc(var(--z-lightbox,200) + 1);overflow:hidden;
  box-shadow:0 16px 42px rgba(0,0,0,.6),inset 0 0 28px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.14)}
.jh-loupe::after{content:"";position:absolute;top:50%;left:50%;width:16px;height:16px;transform:translate(-50%,-50%);
  border:1px solid rgba(230,200,105,.5);border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
@media (prefers-reduced-motion:reduce){.jh-zoom{transition:none}}
/* gallery */
.masonry{columns:3 320px;column-gap:28px}
.masonry figure{break-inside:avoid;margin:0 0 28px;position:relative}
.masonry img{width:100%;display:block}
.masonry figcaption{font-size:13px;color:var(--jh-stone);padding:10px 2px 0}
.masonry figure::after{content:"";position:absolute;inset:12px;border:1px solid rgba(201,162,39,.3);pointer-events:none;bottom:44px}
/* Product detail gallery strip (product.php). */
.pd-gallery{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
.pd-gallery img{width:98px;height:74px;object-fit:cover;border:1px solid var(--jh-hairline);cursor:zoom-in;transition:border-color .2s}
.pd-gallery img:hover{border-color:var(--jh-gold-500)}

/* ============================================================= */
/* Commerce: cart, checkout, order (E-commerce Phase 2)          */
/* ============================================================= */
/* topbar layout: even spacing for prefs, utility links and the consultation CTA */
.topbar .util{gap:22px}
/* Book a Consultation: a compact gold button, up in the utility bar */
.tb-cta{display:inline-flex;align-items:center;background:var(--jh-gold-500);color:var(--jh-black)!important;
  font:600 10.5px/1 var(--jh-font-body);letter-spacing:.12em;text-transform:uppercase;padding:8px 15px;border-radius:3px;
  text-decoration:none;white-space:nowrap;transition:background .25s var(--jh-ease)}
.tb-cta:hover{background:var(--jh-gold-300)}

/* main-nav utility actions: account + cart, at the far right of the menu bar */
.nav-actions{display:flex;align-items:center;gap:22px;margin-left:8px;padding-left:24px;border-left:1px solid var(--jh-hairline)}
.nav-account,.nav-cart{display:inline-flex;align-items:center;gap:8px;color:var(--text);text-decoration:none;
  font:500 12px/1 var(--jh-font-body);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;transition:color .2s var(--jh-ease);position:relative}
.nav-account:hover,.nav-cart:hover{color:var(--jh-gold-deep)}
.nav-account svg,.nav-cart svg{display:block}
.nav-cart-n{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;
  background:var(--jh-gold-500);color:var(--jh-black);border-radius:9px;font:600 10px/1 var(--jh-font-body);letter-spacing:0}
/* Below the desktop nav, drop the divider (this rule sits AFTER the base one so
   it actually wins over source order). */
@media (max-width:1200px){.nav-actions{border-left:0;padding-left:0;margin-left:0}}
/* On phones, shrink the brand and tighten padding so the brand, account, cart
   and the menu button all fit, and show the actions as icons only. */
@media (max-width:600px){
  .nav-jh .brand{font-size:20px}
  .nav-jh > .container{padding:0 18px;gap:14px}
  .nav-actions{gap:16px}
  .nav-account span,.nav-cart-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}
.shop-note{margin:16px 0;padding:12px 16px;background:var(--jh-cream);border-left:4px solid var(--jh-gold-500);
  color:var(--jh-ink);font-size:14px;border-radius:2px}
.shop-note.is-error{border-left-color:#b3261e;background:#fbeceb}

/* cart page */
.cart-grid{display:grid;grid-template-columns:1fr 320px;gap:34px;margin-top:26px;align-items:start}
.cart-line{display:grid;grid-template-columns:120px 1fr auto auto 30px;gap:16px;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--jh-hairline)}
.cart-line.unavailable{opacity:.6}
.cart-thumb img{width:120px;height:96px;object-fit:cover;border-radius:2px;display:block}
.cart-name{font-family:var(--jh-font-display);font-size:1.15rem;color:var(--text);text-decoration:none}
.cart-code{color:var(--jh-stone);font-size:12px;margin:3px 0}
.cart-unit{color:var(--jh-stone);font-size:12.5px}
.cart-warn{color:#b3261e;font-size:12.5px;margin:3px 0}
.cart-qform{display:flex;align-items:center;gap:8px}
.cart-qform input,.co-delivery input,.co-field input,.checkout-summary input,.track-form input,.co-field select{
  border:1px solid var(--jh-hairline);border-radius:2px;padding:8px 10px;font:inherit;color:var(--jh-ink);background:#fff;width:70px}
.cart-qty-fixed{color:var(--jh-stone);font-size:13px}
.cart-linetotal{font-weight:600;color:var(--text);white-space:nowrap}
.cart-remove button{background:none;border:none;font-size:20px;color:var(--jh-stone);cursor:pointer;line-height:1}
.cart-remove button:hover{color:#b3261e}
.cart-summary{background:var(--jh-cream);padding:24px;border-top:3px solid var(--jh-gold-500);border-radius:2px}
.cart-summary h2{font-family:var(--jh-font-display);font-size:1.3rem;margin-bottom:14px}
.cart-summary dl div,.co-totals div{display:flex;justify-content:space-between;padding:7px 0;font-size:14px;color:var(--jh-ink)}
.cart-summary dl div.muted dd{color:var(--jh-stone)}
.cart-summary dt,.co-totals dt{color:var(--jh-stone)}
.cart-total,.co-grand{border-top:1px solid var(--jh-hairline);margin-top:6px;padding-top:12px !important;font-weight:600;font-size:16px !important}
.cart-checkout{display:block;text-align:center;margin-top:16px}
.cart-checkout.is-disabled{pointer-events:none;opacity:.5}
.cart-fine{color:var(--jh-stone);font-size:12px;margin-top:14px;line-height:1.5}

/* checkout */
.checkout-grid{display:grid;grid-template-columns:1fr 340px;gap:34px;margin-top:8px;align-items:start}
.co-field{border:1px solid var(--jh-hairline);border-radius:3px;padding:20px;margin-bottom:18px}
.co-field legend{font-family:var(--jh-font-display);font-size:1.15rem;padding:0 8px;color:var(--text)}
.co-field label{display:block;margin-bottom:12px;font-size:12.5px;color:var(--jh-stone);letter-spacing:.03em}
.co-field input,.co-field select{width:100%;margin-top:5px;color:var(--jh-ink)}
.co-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.co-method{display:flex;gap:20px;margin-bottom:14px;flex-wrap:wrap}
.co-radio{display:flex !important;align-items:center;gap:8px;color:var(--jh-ink) !important;font-size:14px !important}
.co-radio input{width:auto !important;margin:0 !important}
.checkout-summary{background:var(--jh-cream);padding:24px;border-top:3px solid var(--jh-gold-500);border-radius:2px}
.checkout-summary h2{font-family:var(--jh-font-display);font-size:1.25rem;margin-bottom:12px}
.co-items{list-style:none;padding:0;margin:0 0 12px;border-bottom:1px solid var(--jh-hairline)}
.co-items li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:13px;color:var(--jh-ink)}
.co-place{width:100%;margin-top:14px;text-align:center}

/* add-to-cart on product page */
.add-cart-row{display:flex;gap:10px;align-items:stretch}
.add-cart-row input{width:66px;border:1px solid var(--jh-hairline);border-radius:2px;padding:0 10px;font:inherit;text-align:center}
.add-cart-stock{color:#8a6d1a;font-size:12.5px;margin-bottom:8px}

/* order confirmation / tracking */
.order-card{max-width:680px;margin-top:26px;border:1px solid var(--jh-hairline);border-radius:3px;overflow:hidden}
.order-head{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;background:var(--jh-cream);border-bottom:1px solid var(--jh-hairline)}
.order-ref-label{display:block;font-size:11px;color:var(--jh-stone);letter-spacing:.1em;text-transform:uppercase}
.order-head b{font-size:18px;color:var(--text)}
.order-status{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:20px;background:var(--jh-champagne);color:var(--jh-charcoal-700)}
.order-status.s-paid,.order-status.s-delivered{background:var(--ok-bg);color:var(--ok)}
.order-status.s-cancelled,.order-status.s-payment_failed{background:#fbeceb;color:#b3261e}
.order-items{width:100%;border-collapse:collapse;margin:0}
.order-items td{padding:12px 22px;border-bottom:1px solid var(--jh-hairline);font-size:14px}
.oi-code{display:block;color:var(--jh-stone);font-size:11.5px;margin-top:2px}
.oi-q{color:var(--jh-stone);text-align:center}.oi-t{text-align:right;font-weight:600;white-space:nowrap}
.order-totals{padding:16px 22px}
.order-totals div{display:flex;justify-content:space-between;padding:6px 0;font-size:14px}
.order-totals dt{color:var(--jh-stone)}
.order-grand{border-top:1px solid var(--jh-hairline);margin-top:6px;padding-top:12px !important;font-weight:600;font-size:16px}
.order-next{margin:0 22px 18px;padding:14px 16px;background:var(--jh-cream);border-radius:2px;font-size:13.5px;line-height:1.55}
.order-meta{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 22px 22px}
.order-meta span{font-size:11px;color:var(--jh-stone);text-transform:uppercase;letter-spacing:.08em}
.order-meta p{margin-top:4px;font-size:13.5px;color:var(--jh-ink)}
.track-form{max-width:440px;margin-top:22px;display:flex;flex-direction:column;gap:14px}
.track-form label{font-size:12.5px;color:var(--jh-stone)}
.track-form input{width:100%;margin-top:5px;border:1px solid var(--jh-hairline);border-radius:2px;padding:10px 12px;font:inherit}

@media (max-width:820px){
  .cart-grid,.checkout-grid{grid-template-columns:1fr}
  .cart-line{grid-template-columns:80px 1fr auto;grid-row-gap:6px}
  .cart-thumb img{width:80px;height:64px}
  .cart-qty,.cart-remove{grid-column:2}
  .co-row,.order-meta{grid-template-columns:1fr}
}

/* Payment step (E-commerce Phase 3) */
.pay-methods{display:flex;flex-direction:column;gap:18px;margin-top:8px}
.pay-panel{border:1px solid var(--jh-hairline);border-radius:3px;padding:22px 24px}
.pay-panel h2{font-family:var(--jh-font-display);font-size:1.35rem;color:var(--text);margin-bottom:8px}
.pay-panel p{color:var(--jh-ink);font-size:14px;line-height:1.6}
.pay-phone{display:block;margin:14px 0;font-size:12.5px;color:var(--jh-stone)}
.pay-phone input{display:block;width:100%;max-width:320px;margin-top:6px;border:1px solid var(--jh-hairline);border-radius:2px;padding:11px 13px;font:inherit}
.pay-panel .btn-jh{margin-top:6px}
.pay-paybill{list-style:none;padding:0;margin:14px 0}
.pay-paybill li{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--jh-hairline);font-size:14px}
.pay-paybill span{color:var(--jh-stone)}
.pay-paybill b{color:var(--text);font-size:16px;letter-spacing:.03em}
.pay-spin{width:38px;height:38px;margin:16px 0;border:3px solid var(--jh-hairline);border-top-color:var(--jh-gold-500);border-radius:50%;animation:pay-spin 0.9s linear infinite}
@keyframes pay-spin{to{transform:rotate(360deg)}}

/* Account + auth (E-commerce Phase 4) */
.auth-card{display:flex;flex-direction:column;gap:14px;border:1px solid var(--jh-hairline);border-radius:3px;padding:24px}
.auth-card label{display:block;font-size:12.5px;color:var(--jh-stone)}
.auth-card input,.auth-card select{display:block;width:100%;margin-top:5px;border:1px solid var(--jh-hairline);border-radius:2px;padding:11px 13px;font:inherit;color:var(--jh-ink);background:#fff}
.auth-card .btn-jh{margin-top:4px}
.auth-links{font-size:13px;color:var(--jh-stone);margin-top:4px}
.acct-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--jh-hairline);margin-bottom:4px}
.acct-tabs a{padding:10px 16px;text-decoration:none;color:var(--jh-stone);font-size:13.5px;border-bottom:2px solid transparent;margin-bottom:-1px}
.acct-tabs a.on{color:var(--text);border-bottom-color:var(--jh-gold-500);font-weight:600}
.acct-orders{width:100%;border-collapse:collapse;margin-top:8px}
.acct-orders th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--jh-stone);padding:8px 10px;border-bottom:1px solid var(--jh-hairline)}
.acct-orders td{padding:12px 10px;border-bottom:1px solid var(--jh-hairline);font-size:14px}
.addr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:18px}
.addr-card{border:1px solid var(--jh-hairline);border-radius:3px;padding:16px}
.addr-card b{color:var(--text)}
.addr-card p{font-size:13px;color:var(--jh-ink);margin:8px 0;line-height:1.6}
.order-claim{margin:18px 22px 22px;padding:16px 18px;background:var(--jh-cream);border-radius:2px}
.order-claim p{font-size:13.5px;line-height:1.55;margin-bottom:12px}

/* Order progress timeline (E-commerce Phase 5) */
.order-track{list-style:none;display:flex;padding:20px 22px;margin:0;border-bottom:1px solid var(--jh-hairline);gap:0}
.order-track li{flex:1;position:relative;text-align:center;font-size:11.5px;color:var(--jh-stone)}
.order-track li::before{content:"";position:absolute;top:9px;left:-50%;width:100%;height:2px;background:var(--jh-hairline);z-index:0}
.order-track li:first-child::before{display:none}
.order-track .ot-dot{position:relative;z-index:1;display:block;width:20px;height:20px;margin:0 auto 8px;border-radius:50%;background:#fff;border:2px solid var(--jh-hairline)}
.order-track li.done .ot-dot,.order-track li.current .ot-dot{border-color:var(--jh-gold-500);background:var(--jh-gold-500)}
.order-track li.done::before,.order-track li.current::before{background:var(--jh-gold-500)}
.order-track li.current .ot-label,.order-track li.done .ot-label{color:var(--text);font-weight:600}
.order-track li.current .ot-dot{box-shadow:0 0 0 4px rgba(201,162,39,.18)}

/* Email verification banner + account sign-out (hardening) */
.verify-banner{margin:14px 0 4px;padding:14px 18px;background:var(--jh-cream);border-left:4px solid var(--jh-gold-500);border-radius:2px}
.verify-banner p{font-size:13.5px;color:var(--jh-ink);line-height:1.55;margin:0}
.verify-banner form{display:inline;margin-top:6px}
.acct-signout{margin:0 0 0 auto}
.acct-signout button{background:none;border:none;padding:10px 16px;font:inherit;font-size:13.5px;color:var(--jh-stone);cursor:pointer;border-bottom:2px solid transparent}
.acct-signout button:hover{color:var(--text)}

/* Checkout: signed-in prefill, per-item notes, save-address (info capture) */
.co-signed{font-size:13px;color:var(--jh-stone);margin-bottom:14px;background:var(--jh-cream);padding:9px 13px;border-radius:2px;line-height:1.5}
.co-signed b{color:var(--text)}
.co-linenote{display:block;margin-bottom:12px}
.co-linenote>span{display:block;font-size:12px;color:var(--text);font-weight:600;letter-spacing:.02em;margin-bottom:4px;text-transform:none}
.co-field textarea{width:100%;margin-top:5px;border:1px solid var(--jh-hairline);border-radius:2px;padding:10px 12px;font:inherit;color:var(--jh-ink);background:#fff;resize:vertical}
.co-field textarea:focus{outline:2px solid var(--focus);outline-offset:1px}
.co-save{margin-top:12px}
.order-note-back{margin:0 22px 18px;padding:12px 16px;background:var(--jh-cream);border-radius:2px;font-size:13px;color:var(--jh-ink);line-height:1.55}
.order-note-back span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--jh-stone);margin-bottom:4px}

/* Checkout reassurance block (audit finding UX-004). Quiet by design — it should read as
   confidence, not as a sales pitch, at the moment a client commits. */
.co-assure{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--jh-hairline)}
.co-assure li{position:relative;padding-left:20px;margin-bottom:9px;font-size:13px;line-height:1.55;color:var(--jh-stone)}
.co-assure li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border:1px solid var(--jh-gold-500);border-radius:50%}
.co-assure a{color:var(--text);text-decoration:underline;text-underline-offset:2px}

/* ---------------------------------------------------------------------------
   Legal documents (LEGAL-001). Long-form reading, not marketing: a narrower
   measure than the rest of the site, generous leading, and headings that step
   down clearly so a client can find the clause they came for.
   --------------------------------------------------------------------------- */
.legal-page .container { max-width: 760px; }
.legal-page h1 { margin: 8px 0 6px; }
.legal-date { color: var(--jh-stone-500, #6B7370); font-size: .9rem; margin: 0 0 22px; }

.legal-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 34px;
  border-bottom: 1px solid var(--jh-line, #e3e6e4); padding-bottom: 14px; }
.legal-nav a { padding: 7px 14px; border-radius: 999px; text-decoration: none;
  color: var(--jh-stone-500, #6B7370); font-size: .9rem; border: 1px solid transparent; }
.legal-nav a:hover { color: var(--jh-black, #0B0B0B); border-color: var(--jh-line, #E3DACB); }
.legal-nav a.on { background: var(--jh-black, #0B0B0B); color: var(--jh-ivory, #FAF7F0); }

.legal-body { line-height: 1.8; }
.legal-body h2 { font-family: var(--jh-font-display, Georgia, serif); font-size: 1.45rem;
  margin: 38px 0 12px; }
.legal-body h3 { font-size: 1.02rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--jh-stone-500, #6B7370); margin: 26px 0 8px; }
.legal-body p, .legal-body li { max-width: 68ch; }
.legal-body ul { margin: 0 0 18px; padding-left: 20px; }
.legal-body li { margin-bottom: 9px; }
.legal-body p { margin: 0 0 16px; }
.legal-body .lead { font-size: 1.12rem; margin-bottom: 26px; }

.legal-table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; }
.legal-table th, .legal-table td { text-align: left; padding: 11px 12px;
  border-bottom: 1px solid var(--jh-line, #e3e6e4); }
.legal-table th { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--jh-stone-500, #6B7370); font-weight: 500; }
.legal-note { font-size: .92rem; color: var(--jh-stone-500, #6B7370); }
.legal-contact { margin-top: 40px; padding-top: 20px;
  border-top: 1px solid var(--jh-line, #e3e6e4); }

/* Footer legal row: sits above the copyright line, quieter than the sitemap columns. */
.foot-legal { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 26px 0 0;
  padding-top: 20px; border-top: 1px solid rgba(255,255,255,.13); }
.foot-legal a { font-size: .86rem; opacity: .72; text-decoration: none; }
.foot-legal a:hover, .foot-legal a:focus-visible { opacity: 1; text-decoration: underline; }

/* The two homepage motion effects (no 3D). Hero bg oversized only while the JS layer runs,
   so the parallax drift never exposes an edge; no-JS keeps inset:0 and the kenburns loop.
   Gold rules draw on reveal via the .is-inview class the site's IO already assigns. */
body.plx-on .hero-media { top: -14%; bottom: -14%; will-change: transform; }
body.plx-on .hero .measure { will-change: transform, opacity; }
[data-plx] { will-change: transform; }
.js hr.gold-rule.reveal { width: 0; transition: width 1.1s var(--jh-ease) .25s, opacity .6s var(--jh-ease), transform .6s var(--jh-ease); }
.js hr.gold-rule.reveal.is-inview { width: 56px; }
@media (prefers-reduced-motion: reduce) {
  .js hr.gold-rule.reveal { width: 56px; transition: none; }
}

/* ---------------------------------------------------------------------------
   Catalogue layout (redesign §9): desktop sidebar + JS-free mobile drawer.
   The <details> element is the drawer; on wide screens CSS pins it open and
   hides the summary control entirely.
   --------------------------------------------------------------------------- */
.cat-layout { display: grid; grid-template-columns: 230px 1fr; gap: 40px; align-items: start; }
.cat-filters summary { display: none; }
.cat-filters-in { position: sticky; top: 90px; }
.pfg { margin-bottom: 26px; }
.pfg h3 { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--jh-stone, #6B7370); margin: 0 0 10px; font-weight: 500; }
.pfg ul { list-style: none; margin: 0; padding: 0; }
.pfg li { margin-bottom: 7px; }
.pfg a { text-decoration: none; color: var(--jh-ink, #1F2421); font-size: .93rem; padding: 2px 0; }
.pfg a:hover { color: var(--text-accent, #8A6314); }
.pfg a.on { color: var(--jh-black, #0B0B0B); font-weight: 600; border-bottom: 2px solid var(--jh-gold-500, #C9A227); }

.cat-bar { display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; margin-bottom: 26px; }
.cat-count { margin: 0; color: var(--jh-stone, #6B7370); font-size: .92rem; }
.cat-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.cat-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px;
  border: 1px solid var(--jh-hairline, #E0DAD0); border-radius: 999px; text-decoration: none;
  color: var(--jh-ink, #1F2421); font-size: .85rem; background: var(--jh-porcelain, #FCFBF7); }
.cat-chip:hover { border-color: var(--jh-gold-500, #C9A227); }
.cat-clear { font-size: .85rem; align-self: center; }
.cat-sort { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.cat-sort label { font-size: .8rem; letter-spacing: .07em; text-transform: uppercase; color: var(--jh-stone, #6B7370); }
.cat-sort select { padding: 10px 12px; min-height: 44px; border: 1px solid var(--jh-hairline, #E0DAD0);
  background: var(--jh-porcelain, #FCFBF7); font: inherit; color: inherit; border-radius: var(--jh-radius, 2px); }
.cat-empty { grid-column: 1 / -1; padding: 44px 0; }

@media (max-width: 900px) {
  .cat-layout { display: block; }
  .cat-filters { margin-bottom: 20px; border: 1px solid var(--jh-hairline, #E0DAD0);
    border-radius: var(--jh-radius, 2px); background: var(--jh-porcelain, #FCFBF7); }
  .cat-filters summary { display: flex; align-items: center; gap: 10px; padding: 13px 16px;
    cursor: pointer; font-weight: 600; list-style: none; min-height: 44px; }
  .cat-filters summary::-webkit-details-marker { display: none; }
  .cat-filters summary::before { content: "⚲"; transform: rotate(-45deg); font-size: 1.05em; color: var(--jh-black, #0B0B0B); }
  .cat-fcount:not(:empty) { background: var(--jh-black, #0B0B0B); color: var(--jh-ivory, #FAF7F0); border-radius: 999px;
    font-size: .74rem; padding: 2px 9px; }
  .cat-filters-in { position: static; padding: 4px 16px 14px; display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 4px 22px; }
  .cat-sort { margin-left: 0; width: 100%; }
}

/* Product page redesign (§10): spec accordions, wishlist control, sticky mobile action. */
.pd-specs details { border-top: 1px solid var(--jh-hairline, #E0DAD0); }
.pd-specs details:last-of-type { border-bottom: 1px solid var(--jh-hairline, #E0DAD0); }
.pd-specs summary { cursor: pointer; padding: 15px 2px; font-family: var(--jh-font-display, Georgia, serif);
  font-size: 1.12rem; list-style: none; display: flex; align-items: center; min-height: 44px; }
.pd-specs summary::-webkit-details-marker { display: none; }
.pd-specs summary::after { content: "+"; margin-left: auto; color: var(--jh-gold-deep, #8A6314); font-size: 1.15em; }
.pd-specs details[open] summary::after { content: "\2212"; }
.pd-specs details > div { padding: 2px 2px 18px; }
.wl-btn { text-align: center; background: none; border: 0; cursor: pointer; font: inherit; padding: 6px 0; }
.wl-btn[aria-pressed="true"] { color: var(--jh-gold-deep, #8A6314); }

@media (max-width: 768px) {
  /* The buying decision travels with the visitor: the rail's action stack sticks to the
     bottom of the viewport while the details scroll. */
  .pd-rail > div:last-of-type { position: sticky; bottom: 0; background: var(--jh-ivory, #FAF7F0);
    padding: 12px 0 14px; box-shadow: 0 -14px 22px -18px rgba(0,0,0,.3); z-index: 5; }
}

/* Homepage redesign (§8): occasion tiles, process steps, signature cards, hero feature. */
.hero-feature { background-size: cover; background-position: center;
  /* The old decorative ::after sheen sat OVER the product photo, washing it out; and an
     unscoped display:block here was overriding the <=900px display:none from tokens.css,
     so the circle overlapped the headline on phones (bug-hunt S1/S2). */
  box-shadow: 0 0 0 1px var(--jh-gold-500, #C9A227), 0 0 0 14px rgba(201,162,39,.12),
              var(--jh-shadow-2, 0 22px 44px -18px rgba(0,0,0,.38)); }
.hero-feature:hover { box-shadow: 0 0 0 2px var(--jh-gold-300, #E6C869), 0 0 0 14px rgba(201,162,39,.2),
              var(--jh-shadow-2, 0 22px 44px -18px rgba(0,0,0,.38)); }
.hero-feature::after { content: none; }
@media (min-width: 901px) { .hero-feature { display: block; } }

.occ-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.occ { display: block; text-decoration: none; color: inherit; }
.occ-img { display: block; aspect-ratio: 4 / 3; background-size: cover; background-position: center;
  border-radius: var(--jh-radius, 2px); transition: filter .5s var(--jh-ease); filter: saturate(.92); }
.occ:hover .occ-img { filter: saturate(1); }
.occ-t { display: block; margin-top: 14px; font-family: var(--jh-font-display, Georgia, serif);
  font-size: 1.18rem; }
.occ-s { display: block; margin-top: 3px; color: var(--jh-stone, #6B7370); font-size: .88rem; }
.occ:hover .occ-t { color: var(--text-accent, #8A6314); }

.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.step-n { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center;
  border: 1px solid var(--jh-gold-500, #C9A227); border-radius: 50%; color: var(--jh-gold-deep, #8A6314);
  font-family: var(--jh-font-display, Georgia, serif); font-size: 1.15rem; margin-bottom: 14px; }
.step h3 { font-size: 1.2rem; margin: 0 0 8px; }
.step p { color: var(--jh-stone, #6B7370); font-size: .93rem; line-height: 1.65; margin: 0; }

.sig-card { background: rgba(250,247,240,.04); padding: 14px; border: 1px solid rgba(250,247,240,.12); }
.sig-card:hover { border-color: var(--jh-gold-500, #C9A227); }
.sig-card .price { color: var(--jh-gold-300, #E6C869); }

@media (max-width: 900px) {
  .occ-grid, .steps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .occ-grid, .steps-grid { grid-template-columns: 1fr; }
}

/* The Jamari Edit (footer newsletter, §8O). */
.foot-edit { display: flex; align-items: center; gap: 22px 40px; flex-wrap: wrap;
  margin: 30px 0 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.13); }
.fe-line { margin: 6px 0 0; opacity: .75; font-size: .9rem; max-width: 40ch; }
.fe-form { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; position: relative; }
.fe-form input[type=email] { min-width: 250px; padding: 11px 14px; border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.06); color: inherit; font: inherit; border-radius: var(--jh-radius, 2px); }
.fe-form input[type=email]::placeholder { color: rgba(250,247,240,.55); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 700px) { .fe-form { margin-left: 0; width: 100%; } .fe-form input[type=email] { flex: 1; min-width: 0; } }

/* Bug-fix pass: badges + footer confirmation. */
.badge-new { background: var(--jh-black, #0B0B0B); color: var(--jh-ivory, #FAF7F0); }
.badge-sale { background: var(--jh-gold-deep, #8A6314); color: var(--jh-ivory, #FAF7F0); }
.fe-ok { width: 100%; margin: 0 0 4px; color: var(--jh-gold-300, #E6C869); font-size: .92rem; }

/* ===========================================================================
 * HOMEPAGE HERO — client design revision, Sep 2026
 *
 * The previous treatment tinted the WHOLE photograph at 92% opacity, so the
 * picture read as a colour wash and the headline sat at low contrast on top of
 * it. The approved design keeps the photograph's own colour on the right and
 * puts a real scrim only under the text column on the left, which is what makes
 * the headline crisp rather than washed. Since October 2026 the scrim is a soft
 * black to charcoal gradient (owner brief, 28 Sep 2026, item 1): no green.
 *
 * Loaded after tokens.css, so these win without !important.
 * ======================================================================== */

/* Owner direction 23 Sep 2026: the photograph side carries no overlay at all; only the text
   side is darkened, exactly as before. The scrim is measured from the text column's real
   right edge (left padding + measure width) instead of a fixed percentage, so it holds under
   the headline at every desktop width and is fully clear within 16vw of it. */
.hero { --hero-text-edge: calc(clamp(24px, 6vw, 104px) + 34rem) }
@media (min-width: 1440px) { .hero { --hero-text-edge: calc(clamp(24px, 6vw, 104px) + 38rem) } }

.hero-media {
  background:
    linear-gradient(90deg,
      rgba(11,11,11,.90) 0,
      rgba(11,11,11,.84) calc(var(--hero-text-edge) * .7),
      rgba(20,20,20,.70) var(--hero-text-edge),
      rgba(28,28,28,0)  calc(var(--hero-text-edge) + 16vw)),
    url('img/hero.jpg') center/cover no-repeat #0B0B0B;
  background:
    linear-gradient(90deg,
      rgba(11,11,11,.90) 0,
      rgba(11,11,11,.84) calc(var(--hero-text-edge) * .7),
      rgba(20,20,20,.70) var(--hero-text-edge),
      rgba(28,28,28,0)  calc(var(--hero-text-edge) + 16vw)),
    image-set(url('img/hero.webp') type('image/webp'), url('img/hero.jpg') type('image/jpeg')) center/cover no-repeat #0B0B0B;
}
/* The top and bottom lift under the text (the buttons sit low), faded out with the scrim so
   it never reaches the photograph. It used to span the full width and dim the picture. */
.hero-media::after {
  background: linear-gradient(180deg, rgba(11,11,11,.30) 0%, rgba(11,11,11,0) 34%, rgba(11,11,11,.34) 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 var(--hero-text-edge), transparent calc(var(--hero-text-edge) + 16vw));
          mask-image: linear-gradient(90deg, #000 0, #000 var(--hero-text-edge), transparent calc(var(--hero-text-edge) + 16vw));
}

/* Crop. The approved design frames the porcelain larger than a plain centre crop
   does: the tea service sits low and right in the source, so the focal point is
   pulled that way and the frame scaled slightly past cover. An earlier rule
   pinned this to "center 32%" with !important for the previous photograph. */
.hero-media {
  background-position: 62% 66% !important;
  background-size: auto, 112% auto !important;
}
/* 112% of the width only fills the frame on wide screens: the photograph is 16:9 and the layer
   is 28% taller than the hero while the parallax runs. On anything squarer (a 1024 tablet, a
   1440x900 laptop) it left a flat dark band above the picture, so there it covers instead. */
@media (min-width: 901px) and (max-aspect-ratio: 18/10) {
  .hero-media { background-size: auto, cover !important }
}
@media (max-width: 900px) {
  /* Portrait: keep the porcelain in frame rather than the empty left wall. */
  .hero-media { background-position: 66% 72% !important; background-size: auto, cover !important }
  /* Phones darken the whole frame themselves (below); no second lift on top of it. */
  .hero-media::after { background: none }
}

/* A single left column, as in the approved design. */
/* The shared .container is centred with a max-width, which pushed the "left" column
   a third of the way across and straight into the bright part of the photograph. In
   the approved design the text hugs the left edge. */
.hero .container {
  display: flex;
  /* .container is centred (margin:0 auto) with a max-width, which put the "left"
     column a third of the way across and straight into the bright part of the
     photograph. All three have to be overridden, not just max-width. */
  max-width: none; width: 100%;
  margin-left: 0; margin-right: auto;
  padding-left: clamp(24px, 6vw, 104px); padding-right: 24px;
}
/* Narrow, as in the approved design: the headline wraps to four short lines and
   stays inside the scrim instead of running out onto the photograph. */
.hero .measure { max-width: 34rem; text-align: left; margin: 0 }
.hero .measure .lead { max-width: 40ch }

/* The gold ring and its porcelain plate are replaced by the photograph itself,
   which carries the product in the approved design. */
.hero-plate { display: none }

@media (min-width: 1440px) {
  .hero .measure { max-width: 38rem }
}
@media (max-width: 900px) {
  /* No room for a side-by-side split: darken the whole frame so the text holds. */
  .hero-media {
    background:
      linear-gradient(180deg, rgba(11,11,11,.80) 0%, rgba(20,20,20,.64) 55%, rgba(11,11,11,.84) 100%),
      url('img/hero.jpg') center/cover no-repeat #0B0B0B;
  background:
      linear-gradient(180deg, rgba(11,11,11,.80) 0%, rgba(20,20,20,.64) 55%, rgba(11,11,11,.84) 100%),
      image-set(url('img/hero.webp') type('image/webp'), url('img/hero.jpg') type('image/jpeg')) center/cover no-repeat #0B0B0B;
  }
  .hero .measure { max-width: none }
}

/* The approved eyebrow is much longer than the one it replaces, so it wraps on a
   phone. .eyebrow is an inline-flex with a rule drawn by ::before, and centred
   alignment left that rule floating against a three-line block. Pin it to the
   first line instead. */
.hero .eyebrow { align-items: flex-start }
.hero .eyebrow::before { margin-top: .5em; flex: none }
/* One line above 900px. The measure is capped at 34rem for the headline, and the
   eyebrow needs about 514px once the rule, the gap, the uppercasing and the .22em
   tracking are counted, which is 30px more than the cap leaves it. Letting just
   this line size to its content puts it back on one row; at 1280 it reaches 40%
   of the viewport, still well inside the dark end of the hero scrim. */
@media (min-width: 901px) {
  .hero .measure > .eyebrow { width: max-content; max-width: 46rem }
}
@media (max-width: 520px) {
  /* Below this the rule costs more width than it earns. */
  .hero .eyebrow::before { display: none }
  .hero .eyebrow { letter-spacing: .14em }
}

/* ===========================================================================
 * FOOTER (owner's design, 23 September 2026; black and gold since October 2026)
 *
 * Black ground, the gold mark, ivory text and gold accents. Four full-width bands divided by gold hairlines: brand beside Private Curation; the Jamari
 * Edit beside Explore and Company; address, email and social links; copyright and the two legal
 * links. Every rule is #footer-scoped so it outranks the base footer rules in tokens.css.
 * ======================================================================== */
#footer { padding: 0; background: var(--jh-black); color: var(--jh-ivory); font-size: 15px; }
#footer .ft-row + .ft-row { border-top: 1px solid rgba(230,200,105,.34); }
#footer .ft-eyebrow { margin: 0 0 14px; font: 600 12.5px/1.2 var(--jh-font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--jh-gold-300); }
#footer svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--jh-gold-300); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#footer a { margin: 0; }
#footer a:focus-visible, #footer button:focus-visible, #footer input:focus-visible { outline: 2px solid var(--jh-gold-300); outline-offset: 3px; }

/* Band 1: brand | Private Curation */
#footer .ft-top { padding: 46px 0 40px; }
#footer .ft-top-in { display: grid; grid-template-columns: minmax(0, 34fr) minmax(0, 66fr); align-items: center; }
#footer .ft-brand { padding-right: 48px; }
#footer .ft-logo { display: inline-block; font: 500 clamp(2rem, 1.5rem + 1.4vw, 2.85rem)/1 var(--jh-font-display); letter-spacing: .12em; color: var(--jh-ivory); text-decoration: none; white-space: nowrap; }
#footer .ft-logo { display: inline-flex; align-items: center; gap: .45em; font-weight: 600; letter-spacing: 0; }
#footer .ft-logo .brand-crest { height: 1.9em; }
#footer .ft-logo .bw-sub { color: var(--jh-gold-300); }
#footer .ft-rule { display: block; width: 40px; height: 1px; margin: 20px 0 18px; background: var(--jh-gold-300); }
#footer .ft-tag { margin: 0; font: italic 500 clamp(1.25rem, 1.1rem + .45vw, 1.55rem)/1.4 var(--jh-font-display); color: var(--jh-ivory); }
#footer .ft-cur { padding-left: 48px; border-left: 1px solid rgba(230,200,105,.34); }
#footer .ft-head { margin: 0 0 24px; font: 500 clamp(1.5rem, 1.3rem + .6vw, 1.95rem)/1.2 var(--jh-font-display); color: var(--jh-ivory); }
#footer .ft-cta { display: flex; flex-wrap: wrap; gap: 10px; }
#footer .ft-btn { display: inline-flex; align-items: center; gap: 12px; padding: 13px 18px; border: 1px solid rgba(230,200,105,.78); border-radius: 2px;
  font: 600 12px/1.2 var(--jh-font-body); letter-spacing: .11em; text-transform: uppercase; color: var(--jh-ivory); text-decoration: none; white-space: nowrap; transition: background-color .25s var(--jh-ease); }
#footer .ft-btn:hover { background: rgba(230,200,105,.1); color: var(--jh-ivory); }
/* Where the three fit on one line, they share it, so the last button ends on the container's
   right edge like the photograph, the email and the legal links below. */
@media (min-width: 1280px) { #footer .ft-btn { flex: 1 1 auto; justify-content: center; } }
/* Below 1180 the brand column narrows; the logo steps down so it never meets the divider. */
@media (max-width: 1180px) and (min-width: 901px) { #footer .ft-logo { font-size: 2.15rem; } }

/* Band 2: the Jamari Edit | Explore | Company */
#footer .ft-mid { padding: 30px 0 28px; }
/* Company carries two long links since October 2026 (company profile, gifting catalogue), so it takes the
   widest column and the photograph beside it shows only where the band is wide enough to hold both. */
#footer .ft-mid-in { display: grid; grid-template-columns: minmax(0, 36fr) minmax(0, 20fr) minmax(0, 44fr); }
#footer .ft-edit { padding-right: 56px; }
#footer .ft-line { margin: 0 0 18px; max-width: 34ch; font: 400 1.12rem/1.5 var(--jh-font-display); color: var(--jh-ivory); }
#footer .ft-ok { margin: 0 0 10px; color: var(--jh-gold-300); font-size: .92rem; }
#footer .ft-form { display: flex; max-width: 460px; position: relative; }
#footer .ft-trap { position: absolute; left: -9999px; width: 1px; height: 1px; }
#footer .ft-form input[type=email] { flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 16px; border: 1px solid rgba(230,200,105,.62); border-right: 0; border-radius: 2px 0 0 2px;
  background: transparent; color: var(--jh-ivory); font: 400 1.08rem var(--jh-font-display); }
#footer .ft-form input[type=email]::placeholder { color: rgba(250,247,240,.7); }
#footer .ft-form button { flex: none; height: 48px; padding: 0 34px; border: 0; border-radius: 0 2px 2px 0; background: var(--jh-gold-500); color: var(--jh-black);
  font: 600 12px/1 var(--jh-font-body); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background-color .25s var(--jh-ease); }
#footer .ft-form button:hover { background: var(--jh-gold-300); }
#footer .ft-col { padding-left: 44px; border-left: 1px solid rgba(230,200,105,.34); min-width: 0; }
#footer .ft-col a { display: block; width: fit-content; max-width: 100%; font: 400 1.12rem/1.72 var(--jh-font-display); color: var(--jh-ivory); text-decoration: none; }
#footer .ft-col a:hover { color: var(--jh-gold-300); }
/* Company: the list, then the photograph filling the rest of the band up to the container's
   right edge (the edge the buttons above and the legal links below end on). It fades into the
   black towards the list and takes the band's height without ever adding to it. */
#footer .ft-col-company { display: flex; gap: 36px; }
#footer .ft-col-company nav { flex: none; min-width: 0; }
@media (max-width: 1279px) { #footer .ft-photo { display: none; } #footer .ft-col-company nav { flex: 1 1 auto; } }
#footer .ft-photo { display: block; position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; border-radius: 2px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 28%, #000 62%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 28%, #000 62%); }
#footer .ft-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 58%; }

/* Band 3: address | email ... social */
#footer .ft-contact { padding: 14px 0; }
#footer .ft-contact-in { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
#footer .ft-reach { display: inline-flex; align-items: center; gap: 14px; min-height: 32px; font: 400 1.02rem var(--jh-font-display); color: var(--jh-ivory); text-decoration: none; }
#footer .ft-reach:hover { color: var(--jh-gold-300); }
#footer .ft-reach-end { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 0; }
#footer .ft-social { display: flex; align-items: center; gap: 22px; margin: 0 0 0 36px; padding: 0 0 0 36px; list-style: none; border-left: 1px solid rgba(230,200,105,.34); }
#footer .ft-social a { display: grid; place-items: center; width: 32px; height: 32px; }
#footer .ft-social svg { width: 22px; height: 22px; }
#footer .ft-s-facebook svg, #footer .ft-s-linkedin svg { fill: var(--jh-gold-300); stroke: none; }

/* Band 4: copyright ... legal */
#footer .ft-base { padding: 20px 0 26px; }
#footer .ft-base-in { display: flex; align-items: center; justify-content: space-between; gap: 10px 32px; flex-wrap: wrap; }
#footer .ft-base p { margin: 0; font: 400 .98rem var(--jh-font-display); color: var(--text-inverse-muted); }
#footer .ft-legal { display: flex; align-items: center; }
#footer .ft-legal a { display: inline-flex; align-items: center; min-height: 32px; font: 400 .98rem var(--jh-font-display); color: var(--text-inverse-muted); text-decoration: none; }
#footer .ft-legal a + a { margin-left: 18px; padding-left: 18px; border-left: 1px solid rgba(230,200,105,.34); line-height: 1; min-height: 16px; }
#footer .ft-legal a:hover { color: var(--jh-ivory); }

/* Tablet: the curation buttons wrap; below 900 the bands stack. */
@media (max-width: 900px) {
  #footer .ft-top-in { grid-template-columns: 1fr; }
  #footer .ft-brand { padding-right: 0; }
  #footer .ft-cur { margin-top: 28px; padding: 28px 0 0; border-left: 0; border-top: 1px solid rgba(230,200,105,.34); }
  #footer .ft-mid-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 30px; }
  #footer .ft-edit { grid-column: 1 / -1; padding-right: 0; }
  #footer .ft-mid-in > nav.ft-col { padding-left: 0; border-left: 0; }
  #footer .ft-col { padding-left: 28px; }
  #footer .ft-photo { display: none; }
  #footer .ft-contact-in { flex-direction: column; align-items: flex-start; }
  #footer .ft-social { margin-left: 0; padding-left: 0; border-left: 0; }
}
@media (max-width: 560px) {
  #footer .ft-top { padding: 38px 0 32px; }
  /* One column: the long Company links wrap cleanly instead of running out of the band. */
  #footer .ft-mid-in { grid-template-columns: minmax(0, 1fr); }
  #footer .ft-mid-in > .ft-col { padding-left: 0; border-left: 0; }
  #footer .ft-cta { flex-direction: column; }
  #footer .ft-btn { justify-content: center; min-height: 48px; }
  #footer .ft-reach-end { flex-direction: column; align-items: flex-start; gap: 12px; }
  #footer .ft-form button { padding: 0 20px; }
  #footer .ft-base-in { flex-direction: column; align-items: flex-start; }
}

/* Official logo (25 Sep 2026): the gold gradient monogram itself, with the stacked wordmark in gold. */
.nav-jh .brand .brand-crest{display:block;height:46px;width:auto}
.mm-brand .brand-crest{display:block;height:42px;width:auto}
#footer .ft-logo .brand-crest{height:2.2em;width:auto}
.nav-jh .brand .bw-main,.mm-brand .bw-main,#footer .ft-logo .bw-main{color:#c9962c;text-shadow:0 1px 0 rgba(255,235,170,.35)}
.nav-jh .brand .brand-words,.mm-brand .brand-words,#footer .ft-logo .brand-words{overflow:visible;padding-bottom:.08em}
.nav-jh .brand .bw-sub,.mm-brand .bw-sub,#footer .ft-logo .bw-sub{color:#d9a83c}
.nav-jh .brand .bw-sub i,.mm-brand .bw-sub i,#footer .ft-logo .bw-sub i{background:#d9a83c}
@media (max-width:600px){.nav-jh .brand .brand-crest{height:40px}}