/* ------------------------------------------------------------------
   Northern Labels — holding page
   Design reference: Northern Labels_v1 (Adobe XD), 1920 × 2910
   ------------------------------------------------------------------ */

:root{
  /* palette (from XD spec) */
  --off-white:   #F3F3F4;
  --white:       #FFFFFF;
  --near-white:  #FDFAFA;
  --red:         #E21109;
  --red-dark:    #D30C15;
  --ink:         #2D2D2E;
  --black:       #070606;
  --grey:        #676565;

  /* horizontal page gutter — 93px at the 1920 design width */
  --pad: clamp(20px, 4.84vw, 93px);
  --maxw: 1734px;

  /* type scale, fluid against the 1920 design width */
  --fs-display: clamp(40px, 5.21vw, 100px);
  --fs-h2:      clamp(28px, 2.50vw, 48px);
  --fs-lead:    clamp(19px, 1.56vw, 30px);
  --fs-eyebrow: clamp(17px, 1.56vw, 30px);
  --fs-card:    clamp(19px, 1.56vw, 30px);
  --fs-phone:   clamp(17px, 1.30vw, 25px);
  --fs-contact: clamp(15px, 0.89vw, 17px);
  --fs-body:    clamp(15px, 0.83vw, 16px);
  --fs-micro:   clamp(12px, 0.73vw, 14px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--off-white);
  color:var(--ink);
  font-family:"proxima-nova","Proxima Nova",
              -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-weight:400;
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}
@media (min-width:1921px){ .wrap{padding-inline:0} }

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------------------------------------------------------------- header */
.site-header{
  position:relative;
  background:var(--off-white);
  min-height:clamp(84px,12.5vw,240px);
  display:flex;
  align-items:center;
}
.site-header .wrap{display:flex;align-items:center}
.logo img{
  width:clamp(150px,13.95vw,268px);
  height:auto;
  aspect-ratio:1072/274;
}
.phone-tab{
  position:absolute;
  top:0;
  right:0;
  width:clamp(150px,14.8vw,284px);
  min-height:clamp(56px,8.75vw,168px);
  background:var(--red);
  color:var(--near-white);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:var(--fs-phone);
  font-weight:700;
  letter-spacing:.01em;
  padding:10px 12px;
  transition:background-color .25s ease;
}
.phone-tab:hover,.phone-tab:focus-visible{background:var(--red-dark)}

/* ------------------------------------------------------------------ hero */
.hero{
  position:relative;
  min-height:clamp(430px,43.5vw,835px);
  background:#141618;
  display:flex;
  overflow:hidden;
  isolation:isolate;
}
.hero__media{
  position:absolute;
  inset:0;
  z-index:-2;
}
.hero__media video,
.hero__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(.55) contrast(1.02);
}
.hero__scrim{
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg, rgba(7,6,6,.60) 0%, rgba(7,6,6,.34) 32%, rgba(7,6,6,.62) 100%),
    linear-gradient(90deg, rgba(7,6,6,.55) 0%, rgba(7,6,6,.18) 55%, rgba(7,6,6,.35) 100%);
}

/* compass watermark (recreated from the brand mark) */
.hero__compass{
  position:absolute;
  z-index:-1;
  right:calc(var(--pad) - 0.5vw);
  top:43.7%;
  transform:translateY(-50%);
  width:clamp(170px,21.5vw,412px);
  height:auto;
  pointer-events:none;
}

.hero .wrap{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding-block:clamp(34px,6.25vw,120px) clamp(90px,12vw,230px);
  width:100%;
}
.hero__eyebrow{
  margin:0;
  color:var(--near-white);
  font-size:var(--fs-eyebrow);
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.hero__title{
  margin:clamp(40px,4vw,80px) 0 0;
  color:var(--near-white);
  font-size:var(--fs-display);
  font-weight:700;
  line-height:1.0;
  letter-spacing:-.005em;
  text-transform:uppercase;
  text-wrap:balance;
}
.hero__title .accent{color:var(--red)}

/* ----------------------------------------------------------- categories */
.categories{
  background:var(--off-white);
  padding-bottom:clamp(48px,5.9vw,113px);
}
.categories .wrap{
  /* pull the cards up so they straddle the hero edge, as per the design */
  margin-top:clamp(-145px,-7.55vw,-70px);
}
.cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.56vw,30px);
  list-style:none;
  margin:0;
  padding:0;
}
.card{
  position:relative;
  display:block;
  aspect-ratio:411/382;
  border-radius:8px;
  overflow:hidden;
  background:var(--black);
  isolation:isolate;
}
.card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.78) saturate(.9);
  transition:transform .55s cubic-bezier(.2,.7,.3,1), filter .35s ease;
}
.card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,
    rgba(7,6,6,.10) 0%,
    rgba(7,6,6,.15) 45%,
    rgba(7,6,6,.82) 82%,
    rgba(7,6,6,.94) 100%);
}
.card__label{
  position:absolute;
  left:clamp(8px,0.63vw,12px);
  right:clamp(8px,0.63vw,12px);
  bottom:clamp(14px,1.7vw,33px);
  z-index:1;
  display:flex;
  align-items:center;
  gap:clamp(9px,1.2vw,23px);
  color:var(--off-white);
  font-size:var(--fs-card);
  font-weight:600;
  line-height:1.1;
}
.card__label .pennant{
  flex:0 0 auto;
  width:clamp(24px,2.34vw,45px);
  height:auto;
}
.card:hover img,
.card:focus-visible img{transform:scale(1.045);filter:brightness(.9) saturate(1)}
.card:focus-visible{outline:3px solid var(--red);outline-offset:3px}

.intro{
  margin:clamp(44px,6.7vw,128px) 0 0;
  max-width:34em;
  color:var(--ink);
  font-size:var(--fs-lead);
  font-weight:400;
  line-height:1.35;
}

/* ------------------------------------------------------------------- cta */
.cta{
  background:var(--red);
  color:var(--white);
  padding-block:clamp(56px,10.9vw,209px) clamp(56px,10.7vw,205px);
}
.cta .wrap{
  display:grid;
  grid-template-columns:clamp(120px,10.25vw,197px) minmax(0,1fr);
  align-items:start;
}
.cta__kicker{
  margin:0;
  padding-top:.55em;
  font-size:var(--fs-micro);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--off-white);
}
.cta__title{
  margin:0;
  font-size:var(--fs-h2);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.005em;
  text-transform:uppercase;
  color:var(--white);
}
.cta__body{
  margin:clamp(20px,2.3vw,44px) 0 0;
  max-width:clamp(320px,43vw,825px);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.45;
  color:var(--white);
}
.cta__link{
  display:inline-flex;
  align-items:center;
  gap:.9em;
  margin-top:clamp(24px,2.7vw,52px);
  font-size:var(--fs-body);
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--white);
}
.cta__link .plus{
  position:relative;
  width:1.05em;
  height:1.05em;
  flex:0 0 auto;
}
.cta__link .plus::before,
.cta__link .plus::after{
  content:"";
  position:absolute;
  background:currentColor;
  transition:transform .3s ease;
}
.cta__link .plus::before{left:0;right:0;top:50%;height:2px;transform:translateY(-50%)}
.cta__link .plus::after{top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%)}
.cta__link:hover .plus::after,
.cta__link:focus-visible .plus::after{transform:translateX(-50%) rotate(90deg)}
.cta__link:hover span:last-child,
.cta__link:focus-visible span:last-child{text-decoration:underline;text-underline-offset:.3em}

/* ---------------------------------------------------------------- footer */
.site-footer{
  background:var(--black);
  color:var(--white);
  padding-block:clamp(56px,7.8vw,150px) clamp(40px,5.5vw,106px);
}
.footer__logo img{
  width:clamp(150px,13.2vw,254px);
  height:auto;
}
.footer__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(40px,4vw,60px);
  align-items:end;
  margin-top:clamp(38px,3.75vw,72px);
}
.contact{
  font-size:var(--fs-contact);
  font-weight:600;
  line-height:1;
}
.contact__head{
  display:flex;
  align-items:center;
  gap:clamp(16px,2.3vw,44px);
  color:var(--red);
}
.contact__head .pennant{
  flex:0 0 auto;
  width:clamp(28px,2.34vw,45px);
  height:auto;
}
.contact__list{
  list-style:none;
  margin:clamp(16px,1.5vw,29px) 0 0;
  padding:0 0 0 clamp(44px,5.6vw,63px);
  display:grid;
  gap:clamp(12px,1.2vw,20px);
  color:var(--white);
}
.contact__list a:hover,
.contact__list a:focus-visible{color:var(--red)}

.strapline{
  margin:0;
  text-align:right;
  padding-right:clamp(0px,7.9%,137px);
  font-size:var(--fs-display);
  font-weight:700;
  line-height:1.0;
  letter-spacing:-.005em;
  text-transform:uppercase;
  color:var(--grey);
}
.strapline .accent{color:var(--red)}

.legal{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:clamp(20px,2.9vw,56px);
  margin-top:clamp(28px,2.2vw,42px);
  font-size:var(--fs-body);
  color:var(--white);
}
.legal a:hover,.legal a:focus-visible{text-decoration:underline;text-underline-offset:.25em}

/* ------------------------------------------------------------ responsive */
@media (max-width:1024px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .categories .wrap{margin-top:clamp(-145px,-7.55vw,-70px)}
  .footer__grid{grid-template-columns:1fr;align-items:start}
  .strapline{text-align:left;padding-right:0}
}
@media (max-width:760px){
  .cta .wrap{grid-template-columns:1fr;gap:18px}
  .cta__kicker{padding-top:0}
  .hero__compass{opacity:.55;right:calc(var(--pad) * -0.4)}
  .site-header{min-height:96px}
  .phone-tab{position:static;width:auto;min-height:0;margin-left:auto;padding:12px 18px;border-radius:2px}
  .site-header .wrap{justify-content:space-between;gap:16px}
}
@media (max-width:520px){
  .cards{grid-template-columns:1fr;gap:14px}
  .card{aspect-ratio:16/10}
  .categories .wrap{margin-top:-48px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.site-footer :focus-visible,.cta :focus-visible{outline-color:var(--white)}