@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@800&display=swap');
/* DINOGOODS header + hero + typography normalization — v4 */

/* Header remains visually identical before/after scrolling. */
.site-header{
  position:sticky!important;
  top:0!important;
  z-index:180!important;
  height:82px!important;
  background:#f7f6f0!important;
  background-color:#f7f6f0!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  border-bottom:1px solid rgba(3,50,32,.14)!important;
  box-shadow:none!important;
}
.header-inner{
  height:82px!important;
  background:#f7f6f0!important;
}
.site-header .brand,.site-header .brand img{
  background:transparent!important;
  mix-blend-mode:normal!important;
}
.mobile-menu,.mobile-menu-head{background:#f7f6f0!important}
.mobile-menu-head .brand,.mobile-menu-head .brand img{background:transparent!important;mix-blend-mode:normal!important}

/* Homepage banner: force the photography to fill the full hero on every browser. */
.hero{
  position:relative!important;
  height:calc(100svh - 82px)!important;
  min-height:650px!important;
  max-height:880px!important;
  overflow:hidden!important;
  background:#173c29!important;
}
.hero>img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  z-index:0!important;
}
.hero>.shade{z-index:1!important}
.hero-content{
  z-index:2!important;
  box-sizing:border-box!important;
  width:100%!important;
  padding-left:var(--pad)!important;
  padding-right:var(--pad)!important;
}

/* Connecting Goodness: smaller, heavier, right-aligned and contained in both margins. */
.hero h1{
  box-sizing:border-box!important;
  width:min(760px,100%)!important;
  max-width:100%!important;
  margin-top:clamp(54px,7vh,92px)!important;
  margin-left:auto!important;
  margin-right:0!important;
  padding:0!important;
  text-align:right!important;
  font-size:clamp(42px,5.4vw,92px)!important;
  font-weight:800!important;
  line-height:.95!important;
  letter-spacing:-.048em!important;
  color:#fff!important;
  overflow:visible!important;
  -webkit-text-stroke:.12px currentColor;
}
.hero h1 span{
  display:block!important;
  margin:0!important;
  padding:0!important;
  text-align:right!important;
}

/* One shared editorial heading system across inner pages and homepage content. */
.page-hero h1,
.product-hero h1,
.article-head h1,
.section-head h2,
.two-col h2,
.origin h2,
.feature h2,
.cta-photo h2,
.detail-section h2,
.process-grid h2,
.contact-intro h2,
.form-layout>div>h2,
.article-layout h2,
.section>h2{
  font-size:clamp(28px,2.8vw,38px)!important;
  font-weight:700!important;
  line-height:1.10!important;
  letter-spacing:-.035em!important;
  margin-top:9px!important;
  margin-bottom:13px!important;
  max-width:760px!important;
}
.page-hero,.product-hero,.article-head{min-height:0!important}
.page-hero{padding-top:clamp(48px,5vw,72px)!important;padding-bottom:clamp(48px,5vw,72px)!important}
.product-hero{padding-top:clamp(46px,5vw,72px)!important;padding-bottom:clamp(46px,5vw,72px)!important}
.article-head{padding-top:clamp(40px,4.8vw,66px)!important;padding-bottom:26px!important}
.section-head{margin-bottom:24px!important;gap:clamp(20px,3vw,44px)!important}
.section-head>p,.two-col p,.origin p,.feature p,.detail-section p{line-height:1.5!important}
.two-col{gap:clamp(28px,4vw,64px)!important;margin-top:16px!important}
.section{padding-top:clamp(48px,5.4vw,82px)!important;padding-bottom:clamp(48px,5.4vw,82px)!important}

/* Footer wordmark has stronger visual weight without changing its aligned grid. */
.footer-wordmark,.footer-wordmark span{
  font-family:Manrope,Arial,sans-serif!important;
  font-weight:800!important;
  -webkit-text-stroke:.65px currentColor!important;
  text-rendering:geometricPrecision!important;
}
.footer-bottom-tagline{font-weight:800!important;max-width:100%!important;overflow-wrap:anywhere}

@media(max-width:899px){
  .site-header{height:var(--header-mobile)!important;background:#f7f6f0!important}
  .header-inner{height:var(--header-mobile)!important;background:#f7f6f0!important}
  .hero{
    height:calc(100svh - var(--header-mobile))!important;
    min-height:640px!important;
    max-height:820px!important;
  }
  .hero>img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center center!important}
  .hero-content{padding-left:22px!important;padding-right:22px!important}
  .hero h1{
    width:100%!important;
    max-width:calc(100vw - 44px)!important;
    margin-top:34px!important;
    margin-left:auto!important;
    margin-right:0!important;
    text-align:right!important;
    font-size:clamp(34px,9.8vw,40px)!important;
    font-weight:800!important;
    line-height:.98!important;
    letter-spacing:-.04em!important;
  }
  .hero h1 span{text-align:right!important}
  .page-hero h1,
  .product-hero h1,
  .article-head h1,
  .section-head h2,
  .two-col h2,
  .origin h2,
  .feature h2,
  .cta-photo h2,
  .detail-section h2,
  .process-grid h2,
  .contact-intro h2,
  .form-layout>div>h2,
  .article-layout h2,
  .section>h2{
    font-size:clamp(24px,7vw,30px)!important;
    font-weight:700!important;
    line-height:1.10!important;
    letter-spacing:-.03em!important;
    margin-top:7px!important;
    margin-bottom:10px!important;
    max-width:100%!important;
  }
  .page-hero{padding:40px 22px!important}
  .page-hero.split{padding:0!important}
  .page-hero.split>div{padding:40px 22px!important}
  .product-hero{padding:40px 22px!important;gap:22px!important}
  .article-head{padding:34px 22px 22px!important}
  .section-head{margin-bottom:18px!important;gap:14px!important}
  .section-head>p,.two-col p,.origin p,.feature p,.detail-section p{font-size:15px!important;line-height:1.48!important}
  .two-col{gap:20px!important;margin-top:12px!important}
  .section{padding-top:42px!important;padding-bottom:42px!important}
  .footer-wordmark,.footer-wordmark span{font-weight:800!important;-webkit-text-stroke:.52px currentColor!important}
}

@media(max-width:520px){
  .hero-content{padding-left:20px!important;padding-right:20px!important}
  .hero h1{max-width:calc(100vw - 40px)!important;font-size:clamp(33px,9.6vw,38px)!important}
}