/* ═══════════════════════════════════════════════════════════════════════════
   StoneBridge Roofs — PAGE COMPONENTS
   Extends tokens.css. All business-specific visual components.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── HERO (HOMEPAGE) ────────────────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  background: var(--navy-1);
  position: relative;
  display: grid;
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
}
.hero__bg img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.28) saturate(0.6);
}
/* Diagonal mask — architectural cut */
.hero__bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    115deg,
    rgba(6,14,26,0.97) 0%,
    rgba(11,24,41,0.94) 45%,
    rgba(11,24,41,0.60) 70%,
    transparent 100%
  );
}
/* Blueprint grid on hero */
.hero__grid {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}
/* Copper diagonal accent line */
.hero__accent-line {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, transparent 0%, var(--copper-4) 30%, var(--copper-5) 70%, transparent 100%);
  z-index: 2;
}
.hero__content {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--s12) var(--gutter) var(--s10);
  padding-top: 140px;
  max-width: 860px;
}
.hero__eyebrow {
  display: flex; align-items: center; gap: var(--s3);
  margin-bottom: var(--s6);
}
.hero__eyebrow-rule { width: 40px; height: 1px; background: var(--copper-4); }
.hero__eyebrow-text {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--copper-5);
}
.hero__headline {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8.5vw, 9.5rem);
  font-weight: var(--w-black);
  line-height: 0.92;
  letter-spacing: var(--ls-tighter);
  color: var(--paper-1);
  margin-bottom: var(--s6);
}
.hero__headline em {
  font-style: italic;
  color: var(--copper-6);
}

/* Normal, single-line hero headline variant */
.hero__headline--normal {
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  font-weight: var(--w-bold);
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: normal;
  margin-bottom: var(--s4);
}
.hero__sub {
  font-size: var(--t-lg);
  color: var(--navy-8);
  line-height: var(--lh-relaxed);
  max-width: 480px;
  margin-bottom: var(--s8);
}
.hero__ctas { display: flex; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s10); }
/* Trust bar */
.hero__trust {
  display: flex; align-items: center; gap: var(--s6);
  padding-top: var(--s6);
  border-top: 1px solid rgba(255,255,255,0.08);
  flex-wrap: wrap;
}
.hero__trust-item { display: flex; flex-direction: column; gap: 2px; }
.hero__trust-item strong {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: var(--w-bold);
  color: var(--copper-6);
  line-height: 1;
  font-style: italic;
}
.hero__trust-item span {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--navy-7);
}
.hero__trust-divider { width: 1px; height: 36px; background: rgba(255,255,255,0.12); }
/* Scroll indicator */
.hero__scroll {
  position: absolute; bottom: var(--s6); right: var(--gutter);
  z-index: 3;
  display: flex; align-items: center; gap: var(--s2);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--navy-7);
  writing-mode: vertical-rl;
  animation: scrollBob 2.5s ease-in-out infinite;
}
@keyframes scrollBob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}

/* ── INNER HERO (subpages) ───────────────────────────────────────────────── */
.inner-hero {
  background: var(--navy-2);
  padding-top: 112px;
  padding-bottom: var(--s9);
  position: relative;
  overflow: hidden;
}
.inner-hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 60px 60px;
}
.inner-hero::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--navy-4), var(--copper-4) 40%, var(--copper-5) 60%, var(--navy-4));
}
.inner-hero .container { position: relative; z-index: 1; }
.inner-hero__breadcrumb {
  display: flex; align-items: center; gap: var(--s2);
  margin-bottom: var(--s5);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--navy-7);
}
.inner-hero__breadcrumb a { color: var(--copper-5); text-decoration: none; transition: color var(--dur-base); }
.inner-hero__breadcrumb a:hover { color: var(--copper-6); }
.inner-hero__breadcrumb-sep { color: var(--navy-6); }

/* ── FEATURE STRIP ───────────────────────────────────────────────────────── */
.feature-strip {
  background: var(--navy-2);
  border-top: 1px solid rgba(255,255,255,0.07);
}
.feature-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.fs-item {
  padding: var(--s6) var(--s6);
  border-right: 1px solid rgba(255,255,255,0.07);
  display: flex; flex-direction: column; gap: var(--s3);
  transition: background var(--dur-base);
}
.fs-item:last-child { border-right: none; }
.fs-item:hover { background: rgba(255,255,255,0.03); }
.fs-icon { font-size: 1.5rem; }
.fs-title {
  font-weight: var(--w-semibold);
  color: var(--paper-1);
  font-size: var(--t-md);
}
.fs-desc { font-size: var(--t-xs); color: var(--navy-7); line-height: var(--lh-body); }

.home .section.bg-paper .display-md {
  color: #fff !important;
}
.home .section.bg-paper .btn--outline {
  color: #000 !important;
  border-color: #000 !important;
}
.home .section.bg-paper .btn--outline:hover {
  background: #000 !important;
  color: var(--paper-1) !important;
}

/* ── SERVICE CARD ────────────────────────────────────────────────────────── */
.svc-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  padding: var(--s7);
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  transition: border-color var(--dur-slow), transform var(--dur-slow) var(--ease-smooth), box-shadow var(--dur-slow);
}
.svc-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--navy-4), var(--copper-4));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}
.svc-card:hover { border-color: var(--border-copper); transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.svc-card:hover::before { transform: scaleX(1); }
.svc-card__num {
  font-family: var(--font-mono);
  font-size: var(--t-2xs); letter-spacing: var(--ls-widest); text-transform: uppercase;
  color: var(--text-muted); margin-bottom: var(--s4);
}
.svc-card__icon { font-size: 2.2rem; margin-bottom: var(--s5); display: block; transition: transform var(--dur-slow) var(--ease-spring); }
.svc-card:hover .svc-card__icon { transform: scale(1.1) rotate(-5deg); }
.svc-card__title {
  font-family: var(--font-display);
  font-size: var(--t-2xl); font-weight: var(--w-semibold);
  color: var(--text-primary); margin-bottom: var(--s3); line-height: var(--lh-snug);
}
.svc-card__desc { font-size: var(--t-sm); color: var(--text-secondary); line-height: var(--lh-relaxed); flex: 1; }
.svc-card__link {
  display: inline-flex; align-items: center; gap: var(--s2);
  margin-top: var(--s6);
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--navy-4); text-decoration: none;
  transition: gap var(--dur-slow) var(--ease-spring), color var(--dur-base);
}
.svc-card__link:hover { gap: var(--s4); color: var(--brand); }


/* ── PORTFOLIO GRID ──────────────────────────────────────────────────────── */
.port-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s3);
}
.pg { position: relative; overflow: hidden; border-radius: var(--r-sm); cursor: pointer; }
.pg img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.75) brightness(0.88);
  transition: transform var(--dur-xslow) var(--ease-smooth), filter var(--dur-slow);
}
.pg:hover img { transform: scale(1.08); filter: saturate(1) brightness(0.82); }
.pg--w8  { grid-column: span 8; aspect-ratio: 16/10; }
.pg--w4  { grid-column: span 4; aspect-ratio: 4/5; }
.pg--w4h { grid-column: span 4; aspect-ratio: 1; }
.pg--w6  { grid-column: span 6; aspect-ratio: 3/2; }
.pg--w4s { grid-column: span 4; aspect-ratio: 3/2; }
.pg__caption {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(6,14,26,0.92) 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--s5);
  opacity: 0;
  transition: opacity var(--dur-slow);
}
.pg:hover .pg__caption { opacity: 1; }
.pg__cap-title {
  font-family: var(--font-display);
  font-size: var(--t-xl); font-weight: var(--w-semibold);
  color: var(--paper-1); margin-bottom: 3px; line-height: var(--lh-snug);
}
.pg__cap-label {
  font-family: var(--font-mono); font-size: var(--t-2xs);
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--copper-6);
}

/* ── PROCESS STEPS ───────────────────────────────────────────────────────── */
.proc-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--s5);
  padding: var(--s6) 0;
  border-bottom: 1px solid var(--border-light);
  transition: background var(--dur-base);
}
.proc-item:first-child { padding-top: 0; }
.proc-item:last-child  { border-bottom: none; }
.proc-num {
  font-family: var(--font-display);
  font-size: var(--t-3xl); font-weight: var(--w-black);
  font-style: italic;
  color: var(--paper-3);
  line-height: 1;
  transition: color var(--dur-slow);
}
.proc-item:hover .proc-num { color: var(--copper-7); }
.proc-title {
  font-family: var(--font-display);
  font-size: var(--t-2xl); font-weight: var(--w-semibold);
  color: var(--text-primary); margin-bottom: var(--s2); line-height: var(--lh-snug);
}
.proc-desc { font-size: var(--t-sm); color: var(--text-secondary); line-height: var(--lh-relaxed); }

/* ── CHECKLIST ───────────────────────────────────────────────────────────── */
.ck-list { display: flex; flex-direction: column; }
.ck-item {
  display: flex; gap: var(--s4);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--border-light);
}
.ck-item:first-child { padding-top: 0; }
.ck-item:last-child  { border-bottom: none; }
.ck-check {
  width: 22px; height: 22px;
  background: var(--navy-2);
  border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 2px;
  font-size: 0.6rem; color: var(--copper-6);
  transition: background var(--dur-base), transform var(--dur-base) var(--ease-spring);
}
.ck-item:hover .ck-check { background: var(--copper-4); color: var(--navy-1); transform: scale(1.1); }
.ck-title { font-weight: var(--w-semibold); font-size: var(--t-md); color: var(--text-primary); margin-bottom: 3px; }
.ck-desc  { font-size: var(--t-sm); color: var(--text-secondary); line-height: var(--lh-body); }

/* ── TESTIMONIAL CARD ────────────────────────────────────────────────────── */
.testi-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  padding: var(--s7);
  position: relative;
  transition: border-color var(--dur-slow), box-shadow var(--dur-slow), transform var(--dur-slow) var(--ease-smooth);
}
.testi-card:hover { border-color: var(--border-copper); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.testi-card::before {
  content: '"';
  position: absolute; top: var(--s4); right: var(--s6);
  font-family: var(--font-display);
  font-size: 5rem; font-weight: var(--w-black);
  color: var(--paper-3); line-height: 1;
  font-style: italic;
}
.testi-stars { display: flex; gap: 3px; margin-bottom: var(--s4); }
.testi-stars span { font-size: 0.85rem; color: var(--copper-4); }
.testi-text {
  font-size: var(--t-md);
  font-style: italic;
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--s5);
}
.testi-by   { font-weight: var(--w-semibold); color: var(--text-primary); font-size: var(--t-sm); }
.testi-loc  {
  font-family: var(--font-mono); font-size: var(--t-2xs);
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--text-muted); margin-top: 3px;
}

/* ── BLOG CARD ───────────────────────────────────────────────────────────── */
.blog-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  overflow: hidden;
  display: block; text-decoration: none; color: inherit;
  transition: border-color var(--dur-slow), transform var(--dur-slow) var(--ease-smooth), box-shadow var(--dur-slow);
}
.blog-card:hover { border-color: var(--border-copper); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.blog-card__img { aspect-ratio: 16/10; overflow: hidden; }
.blog-card__img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.8);
  transition: transform var(--dur-xslow) var(--ease-smooth), filter var(--dur-slow);
}
.blog-card:hover .blog-card__img img { transform: scale(1.06); filter: saturate(1); }
.blog-card__body { padding: var(--s6); }
.blog-cat {
  font-family: var(--font-mono); font-size: var(--t-2xs);
  letter-spacing: var(--ls-widest); text-transform: uppercase;
  color: var(--copper-4); display: block; margin-bottom: var(--s2);
}
.blog-title {
  font-family: var(--font-display);
  font-size: var(--t-xl); font-weight: var(--w-semibold);
  color: var(--text-primary); line-height: var(--lh-heading);
  margin-bottom: var(--s3);
}
.blog-excerpt { font-size: var(--t-sm); color: var(--text-secondary); line-height: var(--lh-body); }
.blog-meta {
  font-family: var(--font-mono); font-size: var(--t-2xs);
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--text-muted); margin-top: var(--s5);
  display: flex; align-items: center; gap: var(--s2);
}
.blog-meta::before { content: '—'; color: var(--copper-4); }

/* Blog featured row */
.blog-feat {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border-light);
  border-radius: var(--r-md); overflow: hidden;
  text-decoration: none; color: inherit; margin-bottom: var(--s6);
  transition: border-color var(--dur-slow), transform var(--dur-slow) var(--ease-smooth), box-shadow var(--dur-slow);
}
.blog-feat:hover { border-color: var(--border-copper); transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.blog-feat__img { overflow: hidden; }
.blog-feat__img img {
  width: 100%; height: 100%; object-fit: cover; filter: saturate(0.8);
  transition: transform var(--dur-xslow) var(--ease-smooth), filter var(--dur-slow);
}
.blog-feat:hover .blog-feat__img img { transform: scale(1.05); filter: saturate(1); }
.blog-feat__body {
  background: var(--bg-surface); padding: var(--s8);
  display: flex; flex-direction: column; justify-content: center;
}

/* ── CONTACT INFO BLOCK ──────────────────────────────────────────────────── */
.ci {
  display: flex; gap: var(--s4);
  padding: var(--s5) 0;
  border-bottom: 1px solid var(--border-light);
}
.ci:first-child { padding-top: 0; }
.ci:last-child  { border-bottom: none; }
.ci__icon {
  width: 44px; height: 44px;
  background: var(--bg-tinted);
  border: 1px solid var(--border-medium);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
  transition: background var(--dur-base), transform var(--dur-base) var(--ease-spring);
}
.ci:hover .ci__icon { background: var(--navy-2); transform: scale(1.06); }
.ci__lbl {
  font-family: var(--font-mono); font-size: var(--t-2xs);
  letter-spacing: var(--ls-widest); text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 3px;
}
.ci__val { font-weight: var(--w-semibold); font-size: var(--t-sm); color: var(--text-primary); }
.ci__val a { color: inherit; }
.ci__val a:hover { color: var(--copper-4); }
.ci__sub { font-size: var(--t-xs); color: var(--text-muted); margin-top: 2px; }

/* ── CTA BOX ─────────────────────────────────────────────────────────────── */
.cta-box {
  background: var(--navy-2);
  border-radius: var(--r-md);
  padding: var(--s10) var(--s10);
  position: relative; overflow: hidden;
}
.cta-box::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 48px 48px;
}
.cta-box::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--navy-5), var(--copper-4) 50%, var(--navy-5));
}

/* ── MAP PLACEHOLDER ─────────────────────────────────────────────────────── */
.map-box {
  background: var(--bg-tinted);
  border: 1px solid var(--border-medium);
  border-radius: var(--r-md);
  aspect-ratio: 4/3;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.map-box::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--border-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-light) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ── AREA CHIPS ──────────────────────────────────────────────────────────── */
.area-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.area-chip {
  padding: 4px 14px;
  background: var(--bg-tinted);
  border: 1px solid var(--border-medium);
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: var(--t-2xs); letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--text-secondary);
  transition: all var(--dur-base);
}
.area-chip::before { content: '◈ '; color: var(--copper-4); }
.area-chip:hover { background: var(--navy-2); color: var(--paper-2); border-color: var(--navy-4); }

/* ── LEGAL TEXT ──────────────────────────────────────────────────────────── */
.legal-intro {
  font-family: var(--font-mono); font-size: var(--t-sm);
  color: var(--text-muted); margin-bottom: var(--s8);
  padding-bottom: var(--s7); border-bottom: 1px solid var(--border-light);
}
.legal h2 {
  font-family: var(--font-display);
  font-size: var(--t-2xl); font-weight: var(--w-semibold);
  color: var(--navy-2); margin-top: var(--s9); margin-bottom: var(--s4);
  padding-bottom: var(--s3); border-bottom: 1px solid var(--border-light);
}
.legal h2:first-child { margin-top: 0; }
.legal p { font-size: var(--t-md); color: var(--text-secondary); line-height: var(--lh-relaxed); margin-bottom: var(--s4); }
.legal ul { margin: var(--s4) 0 var(--s4) var(--s6); }
.legal li { font-size: var(--t-md); color: var(--text-secondary); line-height: var(--lh-body); list-style: disc; margin-bottom: var(--s2); }
.legal a { color: var(--copper-4); }
.legal strong { color: var(--text-primary); }

/* ── ARTICLE CONTENT ─────────────────────────────────────────────────────── */
.art h2 {
  font-family: var(--font-display);
  font-size: var(--t-3xl); font-weight: var(--w-bold);
  color: var(--navy-2); margin-top: var(--s10); margin-bottom: var(--s5);
  line-height: var(--lh-snug);
}
.art h2:first-child { margin-top: 0; }
.art p  { font-size: var(--t-lg); color: var(--text-secondary); line-height: var(--lh-relaxed); margin-bottom: var(--s6); }
.art ul { margin: var(--s4) 0 var(--s6) var(--s6); }
.art li { font-size: var(--t-lg); color: var(--text-secondary); line-height: var(--lh-body); list-style: disc; margin-bottom: var(--s3); }
.art blockquote {
  border-left: 3px solid var(--copper-4);
  padding: var(--s5) var(--s7);
  margin: var(--s8) 0;
  background: var(--copper-9);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.art blockquote p { font-style: italic; font-size: var(--t-xl); color: var(--navy-3); margin-bottom: 0; }

/* ── STAT ZONE ───────────────────────────────────────────────────────────── */
.stat-zone { display: contents; }
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: var(--w-black); font-style: italic;
  color: var(--copper-4); line-height: 1;
}
.stat-lbl {
  font-family: var(--font-mono);
  font-size: var(--t-2xs); letter-spacing: var(--ls-widest); text-transform: uppercase;
  color: var(--navy-7); margin-top: var(--s2);
}

/* ── CREDENTIALS / BADGES ROW ────────────────────────────────────────────── */
.cred-row {
  display: flex; flex-wrap: wrap; gap: var(--s4);
  align-items: center;
}
.cred-item {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s5);
  background: var(--bg-tinted);
  border: 1px solid var(--border-medium);
  border-radius: var(--r-full);
  font-size: var(--t-xs); font-weight: var(--w-medium);
  color: var(--text-secondary);
}
.cred-item span:first-child { font-size: 1rem; }

/* ── NEWSLETTER STRIP ────────────────────────────────────────────────────── */
.nl-strip {
  background: var(--bg-tinted);
  border: 1px solid var(--border-medium);
  border-radius: var(--r-md);
  padding: var(--s8) var(--s9);
  display: grid; grid-template-columns: 1fr auto;
  gap: var(--s8); align-items: center;
}
.nl-form { display: flex; gap: var(--s3); }
.nl-input {
  flex: 1;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-medium);
  border-radius: var(--r-sm);
  padding: 12px 18px;
  font-family: var(--font-body);
  font-size: var(--t-md); color: var(--text-primary);
  outline: none;
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.nl-input::placeholder { color: var(--paper-5); }
.nl-input:focus { border-color: var(--navy-4); box-shadow: 0 0 0 3px rgba(30,58,95,0.10); }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .feature-strip__grid { grid-template-columns: repeat(2, 1fr); }
  .fs-item:nth-child(2) { border-right: none; }
  .nl-strip { grid-template-columns: 1fr; }
  .port-grid { grid-template-columns: repeat(6, 1fr); }
  .pg--w8  { grid-column: span 6; aspect-ratio: 16/9; }
  .pg--w4  { grid-column: span 6; aspect-ratio: 16/9; }
  .pg--w4h { grid-column: span 3; }
  .pg--w6  { grid-column: span 6; }
  .pg--w4s { grid-column: span 3; }
}
@media (max-width: 900px) {
  .blog-feat { grid-template-columns: 1fr; }
  .blog-feat__img { min-height: 260px; }
  .proc-item { grid-template-columns: 1fr; }
  .cta-box { padding: var(--s8) var(--s6); }
}
@media (max-width: 768px) {
  .hero__headline { font-size: clamp(3rem, 12vw, 5.5rem); }
  .hero__sub { display: none; }
  .hero__trust { gap: var(--s4); }
  .port-grid { grid-template-columns: 1fr; }
  .pg--w8,.pg--w4,.pg--w4h,.pg--w6,.pg--w4s { grid-column: span 1; aspect-ratio: 4/3; }
  .nl-form { flex-direction: column; }
  .feature-strip__grid { grid-template-columns: 1fr; }
  .fs-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); }
}