/* Shared Sunon by SPICA palette and image corner system. */
:root {
  --spica-accent: #a5360a;
  --spica-accent-hover: #842d0b;
  --spica-ink: #171a18;
  --spica-paper: #fff;
  --spica-ground: #f3f4f2;
  --spica-muted: #555b57;
  --spica-border: #dedfdb;
  --spica-card-radius: 28px;
  --spica-image-radius: 28px;

  --primary: var(--spica-accent);
  --primary-hover: var(--spica-accent-hover);
  --dark: var(--spica-ink);
  --light-gray: var(--spica-ground);
  --gray-text: var(--spica-muted);
  --border-color: var(--spica-border);
  --brand-paper: var(--spica-ground);
  --brand-ink: var(--spica-ink);
  --brand-soft: #e8e9e6;
  --brand-accent: var(--spica-accent);
}

body {
  color: var(--spica-ink);
  background: var(--spica-paper);
  font-family: Outfit, Arial, sans-serif;
}

/* One typographic and image rhythm across the current page families. */
:is(.home-editorial,.company-editorial,.brand-home,.brand-landing,.products-page,.category-page,.solution-page,.showroom-page,.contact-page){font-family:Outfit,Arial,sans-serif;color:var(--spica-ink)}
:is(.home-editorial,.company-editorial,.brand-home,.brand-landing,.products-page,.category-page,.solution-page,.showroom-page,.contact-page) :is(h1,h2,h3){font-family:Outfit,Arial,sans-serif;text-wrap:balance}
:is(.home-editorial,.company-editorial,.brand-home,.brand-landing,.products-page,.category-page,.solution-page,.showroom-page,.contact-page) :is(p,figcaption){text-wrap:pretty}
:is(.home-editorial,.company-editorial,.brand-home,.brand-landing,.products-page,.category-page,.solution-page,.showroom-page,.contact-page) img{max-width:100%}
.company-editorial .about-showroom img{display:block;width:100%;height:auto!important;aspect-ratio:1.35;object-fit:cover}
.category-page .category-item-image img,.products-page .products-collection-image img,.products-page .products-seating-image img{display:block;width:100%;height:100%;object-position:center;}
.category-page .category-item-offset{margin-top:0}
.category-page .category-item-grid{align-items:stretch;gap:clamp(34px,4vw,62px) clamp(20px,3vw,44px)}
.category-page .category-item-image{aspect-ratio:1.32;background:#eef0ed}
.category-page.is-chair .category-item-image{aspect-ratio:1.18;background:#eef0ed}
.category-page.is-chair .category-item-image img[src*="sunon-chair-"]{object-fit:contain;padding:6%;background:#eef0ed}
.category-page .category-item-copy{padding-top:18px}
.category-page .category-item-copy h3{font-size:clamp(22px,2.1vw,29px)}
.products-page .products-collection-image,.products-page .products-seating-image{background:#eef0ed}
.showroom-page{--showroom-ink:var(--spica-ink);--showroom-muted:var(--spica-muted);--showroom-ground:var(--spica-ground);--showroom-accent:var(--spica-accent)}
:is(.home-editorial,.company-editorial,.brand-home,.brand-landing,.products-page,.category-page,.solution-page,.showroom-page,.contact-page) :is(a,button):active{transform:scale(.98)}
@media(prefers-reduced-motion:reduce){.category-motion .category-reveal,.products-motion .products-reveal{opacity:1!important;transform:none!important}}

:is(.home-editorial, .company-editorial) {
  --home-accent: var(--spica-accent);
  --home-ground: var(--spica-ground);
  --home-ink: var(--spica-ink);
  --home-muted: var(--spica-muted);
  --editorial-ink: var(--spica-ink);
  --editorial-paper: var(--spica-paper);
  --editorial-ground: var(--spica-ground);
  --editorial-muted: var(--spica-muted);
  --editorial-accent: var(--spica-accent);
}

:is(.brand-home, .brand-landing) {
  --brand-paper: var(--spica-ground);
  --brand-ink: var(--spica-ink);
  --brand-soft: #e8e9e6;
  --brand-accent: var(--spica-accent);
}

.products-page {
  --products-ink: var(--spica-ink);
  --products-paper: var(--spica-paper);
  --products-ground: var(--spica-ground);
  --products-accent: var(--spica-accent);
}

.category-page {
  --category-ink: var(--spica-ink);
  --category-paper: var(--spica-paper);
  --category-wash: var(--spica-ground);
  --category-orange: var(--spica-accent);
}

.home-editorial :is(.home-video-hero, .home-hero-media) {
  background-color: var(--spica-ink);
}

.home-editorial .home-hero-media::after {
  background: linear-gradient(90deg, rgba(15,17,16,.73), rgba(15,17,16,.22) 75%),
    linear-gradient(0deg, rgba(15,17,16,.72), rgba(15,17,16,.03) 72%);
}

.brand-landing #collections,
.brand-landing[data-solution="education"] #collections,
.brand-landing[data-solution="office-furniture"] #collections,
.spica-journey,
.experience-wrap {
  background: var(--spica-ground) !important;
}

.brand-landing #collections .brand-collection,
.brand-landing[data-solution="education"] #collections .brand-collection {
  border-color: var(--spica-border) !important;
}

:is(.home-editorial, .company-editorial, .brand-home, .brand-landing, .products-page, .category-page, .solution-page) :is(
  .editorial-kicker,
  .about-sector > span,
  .about-sector b,
  .journal-card-meta > span,
  .journal-related-card > p,
  .project-category-pill,
  .project-location i,
  .brand-text-link,
  .category-eyebrow,
  .category-all span,
  .category-tabs a[aria-current="page"]::after,
  .solution-card > span
) {
  color: var(--spica-accent) !important;
}

.spica-journey {
  color: var(--spica-ink) !important;
}

.spica-journey :is(.spica-journey-kicker, .spica-journey-range, .spica-journey-entry time, .spica-journey-entry:last-child h3) {
  color: var(--spica-accent) !important;
}

.spica-journey-entry > div::before {
  background: var(--spica-accent) !important;
}

.spica-journey-entry > div {
  border-color: var(--spica-border) !important;
}

.spica-journey-entry:last-child > div {
  border-image: linear-gradient(var(--spica-accent), transparent) 1;
}

.experience-kicker,
.experience-story-number strong,
.experience-editorial a:focus-visible {
  color: var(--spica-accent);
}

:is(.home-editorial, .company-editorial, .brand-home, .brand-landing, .products-page, .category-page, .solution-page) :focus-visible {
  outline-color: var(--spica-accent) !important;
}

.home-editorial :is(.home-sector, .home-collection, .home-story-image),
.company-editorial :is(.editorial-hero, .about-sector img, .about-showroom img, .simple-slider__slider, .journal-card-image, .journal-related-card img, .journal-article-image),
.products-page :is(.products-hero, .products-collection-image, .products-seating-image, .products-space img),
.category-page :is(.products-hero, .category-hero-visual, .category-card-image, .category-product-image),
.brand-home :is(.brand-home-hero, .brand-home-solutions img, .brand-showroom img),
.brand-landing :is(.brand-sector-hero, .brand-home-solutions img, .brand-collection img, .brand-gallery img, .healthcare-fold-view img),
.solution-page :is(.solution-hero img, .solution-card img, .solution-gallery img),
.showroom-card__img-container {
  overflow: hidden;
  border-radius: var(--spica-card-radius) !important;
}

.home-editorial .home-video-hero,
.company-editorial .editorial-hero,
.products-page .products-hero,
.category-page .products-hero,
.brand-landing .brand-sector-hero,
.brand-home .brand-home-hero,
.people-hero {
  overflow: hidden;
  border-radius: var(--spica-card-radius) !important;
}

:is(.home-editorial, .company-editorial, .brand-home, .brand-landing, .products-page, .category-page, .solution-page) :is(
  .home-sector img,
  .home-collection img,
  .home-story-image img,
  .about-sector img,
  .about-showroom img,
  .simple-slider__slider,
  .journal-card-image img,
  .journal-related-card img,
  .journal-article-image,
  .products-collection-image img,
  .products-seating-image img,
  .products-space img,
  .category-hero-visual img,
  .category-card-image img,
  .category-product-image img,
  .brand-home-solutions img,
  .brand-showroom img,
  .brand-collection img,
  .brand-gallery img,
  .healthcare-fold-view img,
  .solution-hero img,
  .solution-card img,
  .solution-gallery img,
  .showroom-card__img
) {
  border-radius: var(--spica-image-radius) !important;
}

@media (max-width: 740px) {
  :root {
    --spica-card-radius: 22px;
    --spica-image-radius: 22px;
  }
}

/* Match hero heading scale across the site, including the healthcare headline. */
.home-editorial .home-hero h1,
.company-editorial .editorial-hero h1,
.products-page .products-hero h1,
.category-page .category-hero.products-hero h1,
.brand-landing .brand-sector-copy h1,
.showroom-page .showroom-hero h1,
.contact-page .contact-hero h1 {
  font-family: Outfit, Arial, sans-serif !important;
  font-size: clamp(48px, 5.4vw, 82px) !important;
  font-weight: 650 !important;
  line-height: 1.03 !important;
  letter-spacing: -.052em !important;
  max-width: 16ch;
}

@media (max-width: 740px) {
  .home-editorial .home-hero h1,
  .company-editorial .editorial-hero h1,
  .products-page .products-hero h1,
  .category-page .category-hero.products-hero h1,
  .brand-landing .brand-sector-copy h1,
  .showroom-page .showroom-hero h1,
  .contact-page .contact-hero h1 {
    font-size: clamp(40px, 10vw, 58px) !important;
    line-height: 1.06 !important;
    max-width: 13ch;
  }
}

/* Keep contact details and navigation links visually consistent site-wide. */
body a,
body a:hover,
body a:focus-visible {
  text-decoration: none !important;
}
.showroom-page .showroom-visit-details address,
.contact-page .contact-details address {
  font-family: Outfit, Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400;
  line-height: 1.75;
}
.showroom-page .showroom-contact-links strong,
.showroom-page .showroom-tour-links a {
  font-family: Outfit, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
}

/* Legacy theme draws an underline as an ::after element on hovered links. */
body a:not([class])::after,
body .link::after,
.showroom-page :is(.showroom-tour-links a,.showroom-text-link,.showroom-outreach a)::after,
.contact-page :is(.contact-heading a,.contact-details a)::after {
  content: none !important;
  display: none !important;
}

/* White hero pills and corner dots match the supplied button reference. */
.home-editorial .home-hero-actions > :is(.home-primary-action,.home-secondary-action) {
  color: var(--spica-ink) !important;
  background: #fff !important;
}
.home-editorial .home-hero-actions > :is(.home-primary-action,.home-secondary-action)::after {
  top: -15px !important;
  right: -15px !important;
  width: 18px !important;
  height: 18px !important;
  background: #fff !important;
  box-shadow: 0 0 0 2px rgba(20,24,21,.12) !important;
}
.home-editorial .home-hero-actions > :is(.home-primary-action,.home-secondary-action):is(:hover,:focus-visible) {
  color: var(--spica-ink) !important;
  background: #f1f2ef !important;
}
.home-editorial .home-hero-actions > :is(.home-primary-action,.home-secondary-action):is(:hover,:focus-visible)::after {
  background: #f1f2ef !important;
}

/* Give the video hero a touch more presence than the other page titles. */
.home-editorial .home-video-hero h1 {
  font-size: clamp(51px, 5.8vw, 88px) !important;
}
@media (max-width: 740px) {
  .home-editorial .home-video-hero h1 {
    font-size: clamp(45px, 7.5vw, 58px) !important;
  }
}