/* ================================================================ KINGHOME chrome
   Header (.ghh-*) and footer (.ghf-*) skin for the home-page replica.
   Loads after style.css, so equal-specificity rules here win. The megamenu
   (.nav__panel*) and the mobile drawer (.nav-drawer*) keep their own
   positioning context, selectors and transitions: nothing below restyles
   them, and .ghh-main keeps position:relative so the panel still hangs from
   the row. Square corners, hairlines, one orange accent, no shadows. */

:root{
  --gh-ink:#15171b;
  --gh-ink-2:#1f2227;
  --gh-ink-ink:#f5f5f4;
  --gh-ink-muted:rgba(255,255,255,.66);
  --gh-ink-line:rgba(255,255,255,.16);
  --gh-cream:#f2efe9;
  /* the shared band rhythm: one light band colour, one gutter, one vertical step */
  --gh-light:#faf9f7;                     /* the light band's own colour */
  --gh-pad:28px;                          /* the band gutter */
  --gh-band-y:clamp(72px,9vw,132px);      /* the band rhythm */
  --gh-white:#ffffff;
  --gh-ink-text:#141416;
  --gh-muted:#5b6067;
  --gh-line:rgba(13,13,15,.14);
  --gh-accent:var(--kinghome-red);
  --gh-accent-deep:var(--kinghome-red-hover);
  --gh-wrap:1240px;
  /* One opening stage for every page. The home, about and contact heroes all read
     this single value, so their first screen ends on the same line at every width:
     the front page's calibrated 760px desktop stage, the viewport-following stage
     of the tablet range, and the contact handoff's 620px phone floor. Each page's
     own stylesheet only states where its hero and its inner wrap sit. */
  --gh-hero-h:min(780px,calc(100svh - 76px));
}

/* One orange focus ring for both bands. */
.ghh :focus-visible,
.ghf :focus-visible{outline:2px solid var(--gh-accent);outline-offset:3px;border-radius:0}

/* ================================================================ header */
.ghh{position:sticky;top:0;z-index:60;background:var(--gh-white);border-bottom:1px solid var(--gh-line);backdrop-filter:none}

/* utility strip ---------------------------------------------------- */
.ghh-bar{display:block;background:var(--gh-ink);color:var(--gh-ink-muted)}
.ghh-bar__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:35px;max-width:var(--gh-wrap);margin:0 auto;padding:0 28px;font-size:10px;font-weight:700;letter-spacing:.105em;text-transform:uppercase}
.ghh-bar__list{display:flex;align-items:center;gap:17px;margin:0;padding:0;list-style:none;min-width:0}
.ghh-bar__list--end{justify-content:flex-end}
.ghh-bar__item{display:inline-flex;align-items:center;white-space:nowrap}
.ghh-bar__item--strong{color:var(--gh-ink-ink)}
.ghh-bar__item a{color:var(--gh-ink-muted);text-decoration:none;transition:color .18s}
.ghh-bar__item a:hover,.ghh-bar__item a:focus-visible{color:var(--gh-accent)}
.ghh-bar__item + .ghh-bar__item::before{content:"";width:1px;height:10px;margin-right:17px;background:var(--gh-ink-line)}

/* main row — brand at the left edge, the navigation centred on the row itself
   and a fixed right CTA. The two side columns are equal (1fr/1fr) so the menu
   sits on the row's centre line, not merely in the space the brand and the CTA
   leave behind. */
.ghh-main{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;justify-content:space-between;gap:14px;min-height:84px;max-width:var(--gh-wrap);margin:0 auto;padding:0}
.ghh-brand{align-self:center;display:inline-flex;align-items:center;gap:11px;flex:0 1 auto;min-width:0;padding:8px 0;text-decoration:none;color:var(--gh-ink-text)}
.ghh-brand__mono{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:42px;height:42px;border:2px solid currentColor;font-size:13px;font-weight:800;letter-spacing:.02em;line-height:1}
.ghh-brand__mono::after{content:"";position:absolute;right:-5px;bottom:-5px;width:10px;height:10px;background:var(--gh-accent)}
.ghh-brand__text{display:grid;gap:4px;min-width:0}
.ghh-brand .brand__mark{font-size:.94rem;font-weight:800;letter-spacing:.065em;text-transform:uppercase;color:var(--gh-ink-text);transition:color .18s;line-height:1}
.ghh-brand .brand__sub{white-space:nowrap;font-size:.57rem;font-weight:700;letter-spacing:.145em;text-transform:uppercase;color:var(--gh-muted);line-height:1}
.ghh-brand:hover .brand__mark,.ghh-brand:focus-visible .brand__mark{color:var(--gh-accent)}
.ghh-nav{display:flex;flex:1 0 auto;align-items:center;justify-content:center;min-width:0}
.ghh-nav .nav{gap:22px}
.ghh-nav .nav__link{font-size:14px;font-weight:700;padding:7px 0;letter-spacing:.01em}
.ghh-nav .nav-drawer{flex:0 0 auto}
.ghh-nav .nav-burger{min-height:44px}
.ghh-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;align-self:stretch;flex:0 0 217px;padding:0;background:var(--gh-accent);color:var(--gh-white);border:0;border-radius:0;font-size:12px;font-weight:700;letter-spacing:.075em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background .18s}
.ghh-cta:hover,.ghh-cta:focus-visible{background:var(--gh-accent-deep);color:var(--gh-white)}
.ghh-cta__arrow{font-size:1.1em;line-height:1;transition:transform .18s}
.ghh-cta:hover .ghh-cta__arrow{transform:translateX(4px)}
@media(min-width:1100px){
  .ghh-main{display:grid;grid-template-columns:1fr auto 1fr;gap:28px}
  .ghh-brand{justify-self:start}
  .ghh-nav{justify-self:center}
  .ghh-cta{justify-self:end;width:217px}
}
@media(min-width:1100px) and (max-width:1319px){
  .ghh-main{padding-left:20px}
  .ghh-nav .nav{gap:16px}
  .ghh-nav .nav__link{font-size:13px}
  .ghh-brand .brand__sub{font-size:.52rem}
}
/* below 1100px the drawer takes over and the utility strip would crowd it */
@media(max-width:1099px){
  .ghh-bar{display:none}
  .ghh-main{min-height:64px;padding-left:20px;gap:12px}
  .ghh-cta{flex-basis:auto;padding:0 22px;min-height:64px;font-size:12px}
}
/* narrow phones: brand + drawer on the first line, the CTA as a full-width bar */
@media(max-width:599px){
  .ghh-main{padding:0}
  .ghh-brand{padding:10px 0 10px 20px}
  .ghh-brand .brand__sub{display:none}
  .ghh-nav{padding-right:20px}
  .ghh-cta{flex:1 0 100%;min-height:50px;padding:0 18px;font-size:12px}
}

/* a list panel that carries two titled groups (OEM & ODM / Quality): the second
   title is given room so the two sets of links read as separate groups */
.ghh .nav__panel-inner > .nav__panel-title + .nav__panel-list + .nav__panel-title{margin-top:16px}

/* ================================================================ footer
   Dark ink band, square corners, hairline rules. On this band the muted tone
   is the on-ink one, so --gh-muted is re-declared here for the whole footer. */
.ghf{--gh-muted:var(--gh-ink-muted);padding:0;background:var(--gh-ink);color:var(--gh-ink-ink);font-size:.95rem}

/* the two blocks are inset to --gh-wrap with the hairlines left full-bleed */
.ghf__top{padding:clamp(56px,7vw,88px) max(28px,calc((100% - var(--gh-wrap)) / 2)) 48px}

.ghf__brand{display:flex;align-items:center;gap:16px;padding-bottom:34px;border-bottom:1px solid var(--gh-ink-line)}
/* the drawn monogram: a bordered square, "KH", and an orange corner block */
.ghf__mono{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border:2px solid var(--gh-ink-ink);color:var(--gh-ink-ink);font-size:1.02rem;font-weight:800;letter-spacing:.03em;line-height:1}
.ghf__mono::after{content:"";position:absolute;right:-5px;bottom:-5px;width:11px;height:11px;background:var(--gh-accent)}
.ghf__brandtext{display:grid;gap:4px;min-width:0}
.ghf__name{display:block;font-size:1.12rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.ghf__sub{display:block;font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gh-muted);line-height:1}

.ghf__cols{display:grid;grid-template-columns:1fr;margin-top:clamp(26px,3.2vw,40px)}
.ghf__col{padding:0 0 6px}
.ghf__title{margin:0 0 14px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gh-ink-ink)}
.ghf__list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.ghf__list a{display:flex;align-items:center;min-height:44px;color:var(--gh-muted);text-decoration:none;font-size:.94rem;line-height:1.35;transition:color .18s}
.ghf__list a:hover,.ghf__list a:focus-visible{color:var(--gh-accent)}

/* three link columns from 900px, stacked below */
@media(min-width:900px){
  .ghf__cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px}
}

/* stacked groups: the brand rule above is the only line, so space them instead */
@media(max-width:899px){
  .ghf__col+.ghf__col{margin-top:30px}
}

/* bottom bar: legal line left, the square "back to top" button right */
.ghf__legal{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 28px;padding:18px max(28px,calc((100% - var(--gh-wrap)) / 2)) 22px;border-top:1px solid var(--gh-ink-line);font-size:.85rem;color:var(--gh-muted)}
.ghf__copy{min-width:0}
.ghf__links{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 10px;min-width:0}
.ghf__sep{color:var(--gh-ink-muted);opacity:.55}
.ghf__legal .ghf__links a{color:var(--gh-muted);text-decoration:none;transition:color .18s}
.ghf__legal .ghf__links a:hover,.ghf__legal .ghf__links a:focus-visible{color:var(--gh-accent);text-decoration:underline;text-underline-offset:3px}
a.ghf__totop{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin-left:auto;width:44px;height:44px;border:1px solid var(--gh-ink-line);color:var(--gh-ink-ink);text-decoration:none;font-size:1rem;line-height:1;transition:background .18s,border-color .18s,color .18s}
a.ghf__totop:hover,a.ghf__totop:focus-visible{background:var(--gh-accent);border-color:var(--gh-accent);color:var(--gh-white)}

@media(max-width:759px){
  .ghf__top{padding-left:20px;padding-right:20px}
  /* room for the floating WhatsApp button that sits over the band */
  .ghf__legal{padding-left:20px;padding-right:20px;padding-bottom:104px}
}

@media(prefers-reduced-motion:reduce){
  .ghh-bar__item a,.ghh-cta,.ghh-cta__arrow,.ghf__list a,.ghf__legal .ghf__links a,a.ghf__totop{transition:none}
}

/* The two steps of the shared opening stage (--gh-hero-h, above). They sit here
   rather than in one of the three page stylesheets so that no page owns the value
   the other two read: the desktop stage is the home reference's own 760px, and
   below 760 the phone floor is the contact handoff's 620px, both capped by the
   viewport so a short window never gets a hero taller than itself. */
@media(min-width:1100px){
  :root{--gh-hero-h:760px}
}
@media(max-width:759px){
  :root{--gh-hero-h:min(620px,calc(100svh - 76px))}
}

/* ================================================================ brand mark
   Header and footer carry the client's own trademark file, printed from the
   media library by gh_brand_logo(): the red icon and the KINGHOME wordmark
   exactly as the brand guide supplies them, never re-typed in a web font. The
   box fixes the size and object-fit keeps the file's own proportions, so the
   mark is never stretched, cropped or recoloured; the footer's wordmark is
   black, so there it sits on the white panel the guide asks for. */
.ghh-brand .kinghome-logo-full{display:block;width:130px;height:74px;object-fit:contain;object-position:left center}
.footer-logo-panel{display:flex;align-items:center;justify-content:center;width:146px;height:83px;padding:5px;background:#fff}
.footer-logo-full{display:block;width:100%;height:100%;object-fit:contain}
@media(max-width:580px){
  .ghh-brand .kinghome-logo-full{width:112px;height:64px}
}