/* ==========================================================================
   HWS Brand Standards — page-specific stylesheet
   Loaded by /_hold/brand-standards.pcf and its sibling section PCFs
   Per pp.13 of the Brand Standards (color tokens)
   ========================================================================== */
:root {
  /* Purple set (Pantone 2607 C) */
  --hws-purple: #510C76;
  --hws-purple-1: #201345;
  --hws-purple-2: #442666;
  --hws-purple-3: #565C7C;
  --hws-purple-4: #3E3C42;

  /* Green set (Pantone 349 C) */
  --hws-green: #006937;
  --hws-green-1: #0B2F19;
  --hws-green-2: #307347;
  --hws-green-3: #94AB9C;
  --hws-green-4: #454846; /* PDF lists hex #201345 RGB 69/72/70 — RGB resolves to #454846 */

  /* Orange set (Pantone 165 C) */
  --hws-orange: #F26724;
  --hws-orange-1: #B33A1E;
  --hws-orange-2: #F5681B;
  --hws-orange-3: #EA9B2A;
  --hws-orange-4: #38302F;

  /* Page system */
  --ink: #1a1a1a;
  --paper: #ffffff;
  --rule: #e5e5e5;

  /* Type stacks
     Cera Pro / Cera Stencil Pro are commercial faces. Helvetica fallback per p.14.
     CeraPro is loaded site-wide via styles.css. CeraStencilPro is brand-standards-only
     and embedded below. */
  --font-sans: "CeraPro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-stencil: "CeraStencilPro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-wordmark: "Goudy Old Style", "Sorts Mill Goudy", "Hoefler Text", Garamond, "Times New Roman", serif;
}

/* ==========================================================================
   CERA STENCIL PRO — brand-standards-only embed
   File naming matches the existing CeraPro convention in styles.css:
     {font-style}_{font-stretch}_{font-weight}
   ========================================================================== */
@font-face {
  font-family: "CeraStencilPro";
  font-style: normal;
  font-weight: bold;
  font-stretch: normal;
  font-display: swap;
  src: url("/_resources/fonts/CeraStencilPro/normal_normal_bold.woff2") format("woff2"),
       url("/_resources/fonts/CeraStencilPro/normal_normal_bold.woff") format("woff");
}
@font-face {
  font-family: "CeraStencilPro";
  font-style: normal;
  font-weight: 900;
  font-stretch: normal;
  font-display: swap;
  src: url("/_resources/fonts/CeraStencilPro/normal_normal_black.woff2") format("woff2"),
       url("/_resources/fonts/CeraStencilPro/normal_normal_black.woff") format("woff");
}

/* Smooth scroll for in-page anchor links. Applied to html and body since
   some CMS templates scroll the body element rather than html. */
html, body { scroll-behavior: smooth; }

/* ==========================================================================
   PAGE / SECTION SHELL — side-label + content column structure
   ========================================================================== */
.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 5rem 2.5rem 3rem;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 3rem;
  position: relative;
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: 140px;
}
.page__label { position: relative; }
.page__label::before {
  content: "";
  display: block;
  width: 130px;
  height: 1px;
  background: var(--ink);
  margin-bottom: 1rem;
}
.page__label h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--hws-purple);
  margin-bottom: 0.75rem;
  line-height: 1.3;
}
.page__label .label-sub {
  font-size: 0.875rem;
  color: var(--ink);
  line-height: 1.45;
}
.page__body { min-width: 0; }

@media (max-width: 800px) {
  .page { grid-template-columns: 1fr; padding: 3rem 1.5rem; gap: 1.5rem; }
}

/* ==========================================================================
   COVER (landing page only)
   ========================================================================== */
.cover {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(11,47,25,0) 0%, rgba(11,47,25,0.55) 60%, rgba(11,47,25,0.85) 100%),
    url('/offices/communications/brand-standards/hws-brand-standards-cover.jpg') center/cover;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3rem 4rem 4rem;
  color: #fff;
  position: relative;
}
.cover__top {
  font-family: var(--font-stencil);
  font-weight: 700;
  letter-spacing: 0.05em;
  font-size: 2rem;
  text-transform: uppercase;
}
.cover__title { margin-top: auto; text-align: right; }
.cover__title h1 {
  font-family: var(--font-stencil);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  color: #fff;
}
.cover__logo { margin-top: 2rem; display: flex; justify-content: flex-end; }
.cover__logo img { max-width: 360px; }

@media (max-width: 800px) {
  .cover { padding: 2rem 1.5rem 3rem; }
  .cover__top { font-size: 1.25rem; }
  .cover__logo img { max-width: 240px; }
}

/* ==========================================================================
   SECTION NAV — sticky inter-page bar that picks up the section color
   Lives directly above the chapter band, NOT inside it (so position:sticky
   isn't constrained by the chapter section ending).
   ========================================================================== */
.bs-nav {
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--hws-purple);
  border-bottom: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.bs-nav--green { background: var(--hws-green); }
.bs-nav--orange { background: var(--hws-orange); }
.bs-nav--purple-dark { background: var(--hws-purple-1); }

.bs-nav__list {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2.5rem;
  list-style: none;
  gap: 0;
}
.bs-nav__list li { margin: 0; }
.bs-nav__list a {
  display: inline-block;
  padding: 1rem 1.5rem 1rem 0;
  margin-right: 1.5rem;
  text-decoration: none;
  color: rgba(255,255,255,0.65);
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  box-shadow: inset 0 -3px 0 transparent;
  transition: color 0.15s, box-shadow 0.15s;
}
.bs-nav__list li:last-child a { margin-right: 0; padding-right: 0; }
.bs-nav__list a:hover { color: #fff; }
.bs-nav__list a[aria-current="page"] {
  color: #fff;
  box-shadow: inset 0 -3px 0 #fff;
}

@media (max-width: 700px) {
  .bs-nav__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 1.25rem;
    gap: 0;
  }
  .bs-nav__list::-webkit-scrollbar { display: none; }
  .bs-nav__list a {
    flex: 0 0 auto;
    padding: 0.875rem 0;
    margin-right: 1.25rem;
    font-size: 0.75rem;
    white-space: nowrap;
  }
  .bs-nav__list li:last-child a { margin-right: 1.25rem; }
}

/* ==========================================================================
   CHAPTER BAND — editorial section hero (color block w/ title + horizontal nav)
   Magazine-style: centered stencil headline, horizontal anchor nav below
   ========================================================================== */
.chapter {
  background: var(--hws-purple);
  color: #fff;
  padding: 4rem 2.5rem 4.5rem;
  position: relative;
  scroll-margin-top: 140px;
  /* break out of constrained parent so the band spans the full viewport
     and its inner content centers on the viewport, not on the parent */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.chapter--green { background: var(--hws-green); }
.chapter--orange { background: var(--hws-orange); }
.chapter--purple-dark { background: var(--hws-purple-1); }

.chapter__inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.chapter h2 {
  font-family: var(--font-stencil);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(4rem, 10vw, 8rem);
  line-height: 0.9;
  letter-spacing: 0.02em;
  margin: 0 0 2.5rem;
}

/* Horizontal magazine-style intra-page nav inside the chapter band */
.section-toc {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 1rem 2.5rem;
  list-style: none;
  padding: 2.25rem 0 0;
  margin: 0 auto;
  max-width: 1000px;
  border-top: 1px solid rgba(255,255,255,0.3);
}
.section-toc li { margin: 0; }
.section-toc a {
  text-decoration: none;
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.03em;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid rgba(255,255,255,0);
  transition: border-color 0.2s;
}
.section-toc a:hover { border-bottom-color: #fff; }

@media (max-width: 800px) {
  .chapter { padding: 3rem 1.25rem 3.5rem; }
  .chapter h2 {
    font-size: clamp(2.5rem, 13vw, 5rem);
    line-height: 0.95;
    margin-bottom: 1.75rem;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .section-toc { gap: 0.875rem 1.75rem; padding-top: 1.75rem; }
  .section-toc a { font-size: 0.875rem; }
}

/* ==========================================================================
   TYPOGRAPHY UTILITIES
   ========================================================================== */
.headline {
  font-family: var(--font-stencil);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 3rem;
  line-height: 1;
  letter-spacing: 0.01em;
}
.subhead-upper {
  font-family: var(--font-sans);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 1.125rem;
  line-height: 1.25;
  letter-spacing: 0.02em;
}
.subhead-stencil {
  font-family: var(--font-stencil);
  font-weight: 900;
  font-size: 1.125rem;
  line-height: 1;
}
.subline {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.45;
}
.head-mini {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 0.75rem;
  line-height: 1.25;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--hws-orange);
}
.body-text { font-size: 0.95rem; line-height: 1.55; }
.body-text p + p { margin-top: 1em; }
.body-text strong { font-weight: 700; color: var(--hws-purple); }

.list-bullets { margin-top: 1rem; padding-left: 1.25rem; }
.list-bullets li {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.55;
}

/* ==========================================================================
   POSITIONING POINTS — bullet treatment with bold highlights
   ========================================================================== */
.points { list-style: none; padding: 0; }
.points li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
  font-size: 1.0625rem;
  line-height: 1.5;
}
.points li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--hws-purple);
  font-size: 1.25rem;
  line-height: 1.2;
}
.points strong { font-weight: 800; color: var(--hws-purple); }

.big-statement { font-size: 1.25rem; line-height: 1.5; max-width: 720px; }
.big-statement strong { font-weight: 800; color: var(--hws-purple); }

/* ==========================================================================
   COLOR PALETTE GRID
   ========================================================================== */
.palette { display: grid; gap: 3rem; margin-top: 1rem; }
.palette-row {
  display: grid;
  grid-template-columns: 220px 200px 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}
.palette-shield {
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.palette-shield svg { width: 100%; height: 100%; }
.palette-meta { font-size: 0.875rem; line-height: 1.55; }
.palette-meta strong {
  font-weight: 700;
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}
.palette-swatches { display: grid; gap: 0.5rem; }
.palette-swatch {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 0.75rem;
  align-items: center;
  font-size: 0.75rem;
  line-height: 1.3;
}
.palette-swatch .chip {
  width: 32px;
  height: 24px;
  border: 1px solid rgba(0,0,0,0.05);
}
.palette-col-header {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--hws-green);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1rem;
}

@media (max-width: 900px) {
  .palette-row { grid-template-columns: 1fr; }
  .palette-shield { width: 140px; height: 154px; margin-bottom: 1rem; }
}

/* ==========================================================================
   TYPOGRAPHY SHOWCASE
   ========================================================================== */
.type-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--rule);
}
.type-grid:last-child { border-bottom: none; }
.type-grid h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 0.875rem;
  color: var(--hws-green);
  margin-bottom: 0.5rem;
}
.type-grid p.spec {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink);
}
.type-grid p.note {
  font-size: 0.8125rem;
  font-style: italic;
  color: #555;
  margin-top: 0.25rem;
}
.cera-sample {
  font-family: var(--font-sans);
  margin-bottom: 0.5rem;
  font-size: 1.125rem;
}
.cera-stencil-sample {
  font-family: var(--font-stencil);
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}

.headline-display {
  font-family: var(--font-stencil);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--hws-green);
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1;
}
.subhead-display-upper {
  font-family: var(--font-sans);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--hws-green);
  font-size: 1.25rem;
  line-height: 1.25;
}
.subhead-display-stencil {
  font-family: var(--font-stencil);
  font-weight: 900;
  color: var(--hws-green);
  font-size: 1.25rem;
  line-height: 1;
}

/* ==========================================================================
   STENCIL DISPLAY BLOCK
   ========================================================================== */
.stencil-block {
  font-family: var(--font-stencil);
  font-weight: 700;
  font-size: clamp(4rem, 12vw, 8rem);
  line-height: 0.78;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--hws-green);
}

/* ==========================================================================
   QUOTE BOX
   ========================================================================== */
.quote-box {
  background: var(--hws-green);
  color: #fff;
  padding: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.875rem;
  line-height: 1.3;
  letter-spacing: 0.01em;
  max-width: 380px;
}
.quote-box .source {
  display: block;
  font-weight: 700;
  font-size: 0.6875rem;
  text-transform: none;
  margin-top: 1rem;
  opacity: 0.95;
}
.quote-box--white {
  background: transparent;
  color: var(--ink);
  outline: none;
  border-top: 6px solid var(--hws-green);
  padding-top: 0.75rem;
  padding-left: 0;
  padding-right: 0;
  outline-offset: 0;
}

/* ==========================================================================
   FACTOID
   ========================================================================== */
.factoid { display: inline-block; text-align: center; margin-right: 3rem; }
.factoid .num {
  font-family: var(--font-stencil);
  font-weight: 700;
  font-size: 5rem;
  line-height: 1;
  color: var(--hws-orange);
}
.factoid .num sup { font-size: 2.5rem; vertical-align: top; line-height: 1; }
.factoid .label-top {
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}
.factoid .label-bottom {
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.5rem;
  max-width: 12em;
}
.factoid .info {
  font-size: 0.75rem;
  font-style: italic;
  margin-top: 0.5rem;
  font-weight: 300;
}

/* ==========================================================================
   SHIELD PATTERN GRID
   ========================================================================== */
.shield-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}
.shield-block {
  aspect-ratio: 1.4 / 1;
  position: relative;
  background-color: #f5f5f5;       /* placeholder until image is set */
  background-position: center;

  background-repeat: no-repeat;
}
.shield-block .label {
  position: absolute;
  bottom: -1.5rem;
  left: 0;
  font-size: 0.6875rem;
  color: #555;
  white-space: nowrap;
}
@media (max-width: 700px) { .shield-grid { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   HEADLINE THEORY MOCK
   ========================================================================== */
.hl-mock {
  background: linear-gradient(135deg, #4a6b3a 0%, #5d7c4d 40%, #2a4a3a 100%);
  height: 480px;
  position: relative;
  overflow: hidden;
}
.hl-mock .box-transparent,
.hl-mock .box-solid {
  position: absolute;
  font-family: var(--font-sans);
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
  font-size: 1.0625rem;
  line-height: 1.15;
  padding: 1rem 1.25rem;
  border: 2px solid #fff;
  letter-spacing: 0.01em;
}
.hl-mock .box-transparent {
  top: 40px;
  left: 40px;
  background: rgba(48, 115, 71, 0.7);
  width: 240px;
}
.hl-mock .box-solid {
  bottom: 40px;
  right: 40px;
  background: var(--hws-green-3);
  color: #fff;
  width: 280px;
}
.hl-mock .connector { position: absolute; background: #fff; }
.hl-mock .connector.h { height: 2px; top: 110px; left: 280px; width: 200px; }
.hl-mock .connector.v { width: 2px; top: 110px; left: 478px; height: 280px; }

/* ==========================================================================
   LOGO SHOWCASE
   ========================================================================== */
.logo-block {
  background: #fff;
  padding: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1rem 0;
}
.logo-block img { max-width: 600px; }
.logo-block--small img { max-width: 360px; }
.logo-block--reverse { background: var(--hws-purple-4); }
.logo-block--green { background: var(--hws-green-1); }

.logo-asset-note {
  background: #fffaeb;
  border-left: 3px solid var(--hws-orange);
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  color: #6a4a00;
  margin: 1rem 0;
  font-style: italic;
}

/* ==========================================================================
   STATIONERY MOCKS
   ========================================================================== */
.stationery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 1rem;
}
.stat-card {
  border: 1px solid var(--rule);
  padding: 1.5rem;
  font-size: 0.75rem;
  background: #fff;
  position: relative;
}
.stat-card .stat-logo {
  background: var(--hws-purple);
  display: inline-block;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
}
.stat-card .stat-logo img { max-width: 180px; }
.stat-card.full { grid-column: 1 / -1; min-height: 400px; }
.stat-card.envelope { aspect-ratio: 9.5 / 4.125; }
.stat-card.business { aspect-ratio: 3.5 / 2; padding: 1rem; }
.stat-card .business-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  align-items: end;
  height: 100%;
}
.stat-card .business-name {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--hws-purple);
  text-align: right;
}
.stat-card .business-meta { font-size: 0.625rem; line-height: 1.5; }
.stat-card .business-meta-right { text-align: right; font-size: 0.625rem; line-height: 1.5; }

@media (max-width: 700px) { .stationery { grid-template-columns: 1fr; } }

/* ==========================================================================
   FORMATS GALLERY
   ========================================================================== */
.format-mock {
  background: #f5f5f5;
  border: 1px solid var(--rule);
  padding: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  font-size: 0.875rem;
  color: #888;
  text-align: center;
}

/* ==========================================================================
   PHONE EMAIL MOCKS
   ========================================================================== */
.phones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}
.phone {
  background: #1a1a1a;
  border-radius: 32px;
  padding: 1rem 0.5rem;
  aspect-ratio: 9/19;
  position: relative;
  overflow: hidden;
}
.phone .screen {
  background: #fff;
  border-radius: 24px;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.phone .screen-header {
  background: var(--hws-orange);
  padding: 1rem 0.75rem 0.5rem;
  text-align: center;
}
.phone .screen-header img { display: inline-block; max-width: 50px; margin: 0 auto; }
.phone .screen-nav {
  font-size: 0.55rem;
  color: #fff;
  letter-spacing: 0.1em;
  text-align: center;
  padding: 0.25rem;
}
.phone .screen-hero {
  height: 130px;
  background: linear-gradient(135deg, var(--hws-orange) 0%, var(--hws-orange-1) 100%);
  position: relative;
}
.phone .screen-hero h3 {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-family: var(--font-sans);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: #fff;
  text-align: right;
  line-height: 1.1;
}
.phone .screen-body {
  padding: 0.75rem;
  font-size: 0.5rem;
  line-height: 1.4;
  color: var(--hws-purple);
}
.phone--purple .screen-header { background: var(--hws-purple); }
.phone--purple .screen-hero { background: linear-gradient(135deg, var(--hws-purple) 0%, var(--hws-purple-1) 100%); }
.phone--green .screen-header { background: var(--hws-green); }
.phone--green .screen-hero { background: linear-gradient(180deg, #5a7a8a 0%, #2a4a5a 100%); }

@media (max-width: 700px) { .phones { grid-template-columns: 1fr; } }

/* ==========================================================================
   HORIZONTAL COLOR STRIP DECORATION
   ========================================================================== */
.color-strip { display: flex; height: 24px; margin: 2rem 0; }
.color-strip > * { flex: 1; }
.color-strip--green {
  background: linear-gradient(to right,
    var(--hws-green-3) 0%, var(--hws-green-3) 60%,
    var(--hws-green-2) 60%, var(--hws-green-2) 80%,
    var(--hws-green-1) 80%, var(--hws-green-1) 100%);
}
.color-strip--orange {
  background: linear-gradient(to right,
    var(--hws-orange-3) 0%, var(--hws-orange-3) 60%,
    var(--hws-orange) 60%, var(--hws-orange) 80%,
    var(--hws-orange-1) 80%, var(--hws-orange-1) 100%);
}

/* ==========================================================================
   CMS TEMPLATE OVERRIDES
   ========================================================================== */
.page-header { display: none; }
section { margin-bottom: 0; }