html{
scroll-behavior:smooth;
scroll-padding-top:104px
}
body{
background:var(--color-paper);
color:var(--color-text);
font:var(--text-base)/1.6 var(--font-sans)
}
a:focus-visible,button:focus-visible{
outline:3px solid var(--color-teal-dark);
outline-offset:4px
}
.skip-link{
position:fixed;
z-index:100;
top:1rem;
left:1rem;
width:1px;
height:1px;
margin:-1px;
overflow:hidden;
clip:rect(0 0 0 0);
clip-path:inset(50%);
white-space:nowrap;
border:0;
background:#fff;
padding:0
}
.skip-link:focus{
width:auto;
height:auto;
margin:0;
overflow:visible;
clip:auto;
clip-path:none;
padding:10px 14px
}
.eyebrow{
margin-bottom:22px;
color:var(--color-eyebrow);
font:500 var(--text-xs)/1.2 var(--font-mono);
letter-spacing:1.25px;
text-transform:uppercase
}
h1,h2,h3{
font-weight:600
}
h1{
font-size:var(--text-display);
line-height:.98;
letter-spacing:-.02em
}
h2{
font-size:var(--text-heading);
line-height:1.05;
letter-spacing:-.012em
}
h3{
font-size:var(--text-lg);
line-height:1.2;
letter-spacing:0
}
em{
font-family:var(--font-display);
font-weight:400;
letter-spacing:-.01em
}
/* Below ~1488px-wide viewports, max() resolves to the original flat
   --page-padding (7vw, or 6vw on the homepage's own <=780px override, see
   pages.css) — unchanged from before. Beyond that, it switches to reserving
   half of whatever space sits outside a 1280px content column, so wide
   desktop screens gain generous, self-centering whitespace instead of
   section content growing without bound. 1280px is a restrained editorial
   content width consistent with the narrower in-page reading caps already
   used sitewide (e.g. .statement's own 1120px, layout.css). This is scoped to
   .section-pad and its horizontal-only companion .section-inner (not the
   shared --page-padding token) because a
   few components — the Hero/category/detail-hero text column and
   .featured-copy in product-pages.css — reuse --page-padding as *inner*
   padding inside their own small max-width box; growing the raw token there
   would shrink those boxes' content area instead of widening it. */
/* The compound product-contact selector preserves this horizontal axis over
   that legacy component's later padding shorthand without using !important. */
.section-pad,.section-inner,.product-contact.section-inner{
padding-left:max(var(--page-padding), calc((100vw - 1280px) / 2));
padding-right:max(var(--page-padding), calc((100vw - 1280px) / 2))
}
.section-pad{
padding-top:var(--space-7);
padding-bottom:var(--space-7)
}

/* Legibility across the public PT/EN typography system.
   The smaller homepage CTA headings must not inherit display-size tracking.
   More specific than the component rules loaded later. */
.homepage-v2 .v2-contact-card h2{
  letter-spacing:0;
  line-height:1.2
}
/* Editorial hero headings can be large without squeezing letter pairs. */
body .page-hero h1,
body .category-hero h1,
body .detail-hero h1{
  letter-spacing:-.015em
}


/* One mobile heading rhythm across public PT/EN pages (including the homepage
   CTA, headings in cards and product pages). Keep desktop sizes and styling.
   !important is intentionally limited to <=600px because later page-level CSS
   still contains legacy negative tracking, including ID-specific hero rules. */
@media(max-width:600px){
  body:not(.admin-body) :is(h1,h2,h3){
    letter-spacing:.02em !important;
    line-height:1.2 !important;
    overflow-wrap:break-word
  }
  body:not(.admin-body) :is(h1,h2,h3) :is(em,.accent-italic){
    letter-spacing:inherit !important
  }
}