/* ==========================================================================
   Premium Post Tension — global.css
   Design tokens, reset, base typography, layout primitives, motion.
   This is the single canonical token file for the whole site. The
   approved homepage keeps loading its own tested copy directly; every
   other page loads THIS file so tokens never drift out of sync.
   Values extracted from the approved design. No visual changes intended.

   Breakpoints used project-wide (keep to these three):
     620px   small  — single column
     860px   medium — 2 columns
     1040px  large  — 4/5 columns, full desktop
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------ */
  --color-primary:        #01102D;   /* navy, links + accents on light */
  --color-primary-dark:   #00091A;   /* link hover */
  --color-ink:            #01102D;   /* headings + body text */
  --color-deep:           #000817;   /* dark sections, footer */
  --color-accent:         #C4272C;   /* accent, primary CTA */
  --color-accent-end:     #7A1015;   /* deeper accent, gradient end */
  --gradient-accent:      linear-gradient(155deg, #C4272C 0%, #7A1015 100%);
  --color-crimson:        #780606;   /* glow accent only */

  /* --- Surfaces --------------------------------------------------------- */
  --color-background:     #FAFAFA;
  --color-surface:        #FFFFFF;
  --color-surface-tint:   #F2F6F6;   /* navy tint chips */
  --color-surface-accent:   #FBF3E4;   /* accent tint chips */
  --color-surface-cream:  #FBF7F1;   /* cream sections */
  --color-surface-cream2: #FAF6EF;   /* cream gradient end */

  /* --- Text ------------------------------------------------------------- */
  --color-text:           #01102D;
  --color-text-muted:     #3d5c60;
  --color-text-faint:     #9FB0B2;
  --color-text-invert:    #FFFFFF;
  --color-text-on-dark:   #C5D3D4;
  --color-text-on-dark-2: #BDD0D2;
  --color-text-on-dark-3: #A9BFC1;
  --color-text-on-dark-4: #9FB4B6;
  --color-text-on-dark-5: #E0E9EA;
  --color-text-legal:     #94B3B6;

  /* --- Borders ---------------------------------------------------------- */
  --color-border:         #E9EEEE;
  --color-border-soft:    #ECF0F0;
  --color-border-strong:  #E0E9EA;
  --color-border-cream:   #EDE3D5;
  --color-border-cream-2: #F1E8DA;
  --color-border-rule:    #E4E9E9;   /* FAQ dividers */
  --color-border-hair:    #EFEFEF;   /* trust bar */
  --color-border-accent:    rgba(196,39,44,.32);
  --color-border-accent-lo: rgba(196,39,44,.24);
  --color-border-accent-hi: rgba(196,39,44,.55);

  /* --- Typography ------------------------------------------------------- */
  --font-primary: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Archivo Black', 'Arial Black', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-eyebrow:  .8rem;
  --text-xs:       .72rem;
  --text-sm:       .85rem;
  --text-base:     1rem;
  --text-md:       1.05rem;
  --text-lg:       clamp(1.15rem, 1.1rem + .25vw, 1.32rem);
  --text-xl:       clamp(1.3rem, 1.2rem + .5vw, 1.6rem);
  --text-2xl:      clamp(1.35rem, 1.2rem + .6vw, 1.7rem);
  --text-h3:       1.18rem;
  --text-h2:       clamp(1.95rem, 1.55rem + 1.8vw, 3.15rem);
  --text-h2-sm:    clamp(1.85rem, 1.5rem + 1.6vw, 2.85rem);
  --text-h1:       clamp(2.487rem, 2.221rem + 1.14vw, 3.244rem);
  --text-hero-sub: clamp(1.044rem, 1.015rem + .12vw, 1.125rem);
  --text-display:  clamp(2.8rem, 2.2rem + 2vw, 4rem);

  --leading-tight: 1.05;
  --leading-snug:  1.22;
  --leading-body:  1.6;
  --leading-loose: 1.65;

  --tracking-tight:   -.035em;
  --tracking-tighter: -.045em;
  --tracking-wide:    .12em;
  --tracking-wider:   .16em;

  /* --- Spacing ---------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;

  /* --- Layout ----------------------------------------------------------- */
  --container:        1240px;
  --container-narrow: 62ch;
  --gutter:           24px;

  --section-y:      clamp(56px, 8vw, 96px);
  --section-y-lg:   clamp(64px, 8vw, 112px);
  --section-y-sm:   clamp(48px, 6vw, 80px);
  --section-gap:    clamp(24px, 4vw, 64px);
  --heading-gap:    clamp(36px, 4vw, 56px);
  --content-gap:    clamp(28px, 3vw, 44px);
  --grid-gap:       clamp(18px, 2vw, 28px);
  --card-gap:       clamp(16px, 1.5vw, 22px);

  /* --- Radius ----------------------------------------------------------- */
  --radius-sm:    10px;
  --radius-md:    12px;
  --radius-lg:    18px;
  --radius-xl:    20px;
  --radius-2xl:   26px;
  --radius-3xl:   32px;
  --radius-4xl:   34px;
  --radius-pill:  999px;

  --radius-card:      18px;   /* service + feature cards */
  --radius-card-sm:   24px;   /* application cards, KPI cards */
  --radius-card-md:   28px;   /* engagement + contact cards */
  --radius-panel:     36px;   /* CTA panel */
  --radius-card-lg:   26px;   /* process cards */
  --radius-quote:     30px;   /* review cards */
  --radius-icon:      20px;   /* icon tiles */

  /* --- Shadows ---------------------------------------------------------- */
  --shadow-sm:   0 1px 2px rgba(0,23,26,.04), 0 6px 20px rgba(0,23,26,.05);
  --shadow-card: 0 1px 2px rgba(0,23,26,.04), 0 10px 28px rgba(0,23,26,.06);
  --shadow-md:   0 2px 4px rgba(0,23,26,.03), 0 16px 40px rgba(0,23,26,.06);
  --shadow-lg:   0 24px 56px rgba(0,23,26,.14);
  --shadow-xl:   0 40px 90px rgba(0,23,26,.14);
  --shadow-dark: 0 30px 70px rgba(0,0,0,.45);
  --shadow-accent: 0 10px 30px rgba(196,39,44,.34);
  --shadow-accent-hi: 0 16px 40px rgba(196,39,44,.46);
  --shadow-accent-btn: 0 10px 26px rgba(122,16,21,.4), inset 0 1px 0 rgba(255,255,255,.35);

  /* --- Motion ----------------------------------------------------------- */
  --ease-out:   cubic-bezier(.22,.7,.3,1);
  --dur-fast:   .2s;
  --dur-base:   .28s;
  --dur-slow:   .3s;
}

/* ========================================================================== 
   Reset / base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-primary);
  background: var(--color-background);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; }
[hidden] { display: none !important; }

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-end); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

button, input, select, textarea { font-family: inherit; }

address { font-style: normal; }

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.container       { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container-wide  { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow{ max-width: var(--container-narrow); margin: 0 auto; }

.section         { padding: var(--section-y) var(--gutter); }
.section--lg     { padding: var(--section-y-lg) var(--gutter); }
.section--sm     { padding: var(--section-y-sm) var(--gutter); }
.section--flush  { padding-left: 0; padding-right: 0; }

.section--surface { background: var(--color-surface); }
.section--tint    { background: var(--color-background); }
.section--cream   { background: linear-gradient(180deg, var(--color-surface-cream), var(--color-surface-cream2)); }
.section--cream-flat { background: var(--color-surface-cream); }
.section--dark    { background: var(--color-deep); }
.section--relative{ position: relative; overflow: hidden; }

/* Section heading: title on the left, lede on the right */
.section-heading {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--section-gap);
  align-items: end;
  margin-bottom: var(--heading-gap);
}
.section-heading--center {
  display: block;
  text-align: center;
  max-width: var(--container-narrow);
  margin: 0 auto var(--heading-gap);
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-5);
}
.section-eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--color-accent);
  display: block;
}
.section-eyebrow--pill {
  gap: 9px;
  font-size: .78rem;
  letter-spacing: var(--tracking-wide);
  background: var(--color-surface-tint);
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  margin-bottom: 22px;
}
.section-eyebrow--pill::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  animation: pt-blink 2s ease-in-out infinite;
}
.section-eyebrow--on-cream {
  background: var(--color-surface);
  border: 1px solid var(--color-border-cream);
}
.section-eyebrow--on-dark {
  color: var(--color-accent);
  background: rgba(255,255,255,.08);
}

.section-title {
  font-size: var(--text-h2);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}
.section-title em { font-style: normal; color: var(--color-primary); }
.section--dark .section-title,
.section-title--invert { color: var(--color-text-invert); }
.section--dark .section-title em,
.section-title--invert em { color: var(--color-accent); }

.section-lede {
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  color: var(--color-text-muted);
  max-width: 40ch;
  border-left: 2px solid var(--color-accent);
  padding-left: var(--space-5);
}
.section-heading--center .section-title { margin-bottom: var(--space-4); }
.section-heading--center .section-lede {
  border: 0;
  padding: 0;
  max-width: none;
}
.section--dark .section-lede { color: var(--color-text-on-dark-2); }

/* Grids */
.grid-2, .grid-4, .grid-5 { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: minmax(0,1fr); }
.grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-5 { grid-template-columns: minmax(0,1fr); }
.grid-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(28px, 4vw, 56px);
  align-items: stretch;
}

@media (max-width: 620px) {
  .grid-4 { grid-template-columns: minmax(0,1fr); }
}
@media (min-width: 860px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1000px) {
  .grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (min-width: 1040px) {
  .grid-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
}

/* Utilities */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.text-center { text-align: center; }

/* Decorative radial glows used on dark sections */
.glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.glow--crimson { background: radial-gradient(circle, rgba(120,6,6,.55), rgba(120,6,6,0) 68%); filter: blur(50px); }
.glow--navy    { background: radial-gradient(circle, rgba(0,73,82,.75), rgba(0,73,82,0) 70%); filter: blur(56px); }
.glow--accent    { background: radial-gradient(circle, rgba(196,39,44,.22), rgba(196,39,44,0) 70%); filter: blur(40px); }

/* ==========================================================================
   Motion
   ========================================================================== */

@keyframes pt-marquee     { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes pt-marquee-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes pt-float       { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes pt-blink       { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes pt-shine       { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes pt-pulse       { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.5); } }

/* Scroll reveal — JS adds .is-visible; without JS content stays visible */
[data-reveal] {
  will-change: opacity, transform;
  transition: opacity .7s var(--ease-out), transform .85s var(--ease-out);
}
.js [data-reveal]            { opacity: 0; transform: translateY(38px) scale(.982); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.js [data-reveal].is-above   { opacity: 0; transform: translateY(-24px) scale(.99); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}