/* ============================================================
   webarch technologies — shared styles
   Ivory · Deep Navy · Antique Gold  |  bold & premium
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Libre+Franklin:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
  /* Palette */
  --ink:        #16223C;   /* deep navy */
  --ink-soft:   #28365a;
  --ivory:      #F4F0E5;   /* warm paper */
  --ivory-2:    #EDE7D6;   /* deeper paper for cards */
  --paper-line: #d9d2bf;
  --gold:       #B08D3A;   /* antique gold */
  --gold-soft:  #C9A85A;
  --cream-text: #EFE9DA;
  --muted:      #5d6577;

  /* Type */
  --display: 'Montserrat', system-ui, sans-serif;
  --body:    'Libre Franklin', system-ui, sans-serif;

  /* Rhythm */
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --r: 4px;
  --nav-h: 76px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  font-size: 17px;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

html { overflow-x: clip; }

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 9vw, 130px); }
.section--navy { background: var(--ink); color: var(--cream-text); }
.section--paper2 { background: var(--ivory-2); }

/* ---------- Type ---------- */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; line-height: 1.04; letter-spacing: -0.01em; margin: 0; }
.eyebrow {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
}
.eyebrow::before { content:""; width: 38px; height: 2px; background: linear-gradient(90deg, var(--gold), var(--gold-soft)); }
.section--navy .eyebrow { color: var(--gold-soft); }

.display { font-size: clamp(38px, 6.4vw, 84px); font-weight: 900; letter-spacing: -0.025em; }
.h2 { font-size: clamp(30px, 4.2vw, 52px); }
.lede { font-size: clamp(18px, 2vw, 21px); color: var(--muted); max-width: 56ch; }
.section--navy .lede { color: #c3c9d6; }

.gold-text { color: var(--gold); }

/* ---------- Hero sections ---------- */
.hero.section {
  min-height: calc(100svh - var(--nav-h));
  min-height: calc(100dvh - var(--nav-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(28px, 4vw, 52px);
}
.page-hero.section,
.contact.section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(56px, 8vw, 100px);
}
.contact.section {
  min-height: calc(100svh - var(--nav-h));
  min-height: calc(100dvh - var(--nav-h));
}
.hero > .wrap,
.page-hero > .wrap,
.contact > .wrap { width: 100%; }
.page-hero .lede { margin-top: 24px; }
.hero__cta { display: flex; gap: 14px; margin-top: 38px; flex-wrap: wrap; }

.page-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.page-jump a {
  font-family: var(--display); font-weight: 600; font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  color: var(--ink); padding: 10px 16px; border: 1.5px solid var(--paper-line);
  border-radius: var(--r); transition: border-color .2s, color .2s, background .2s;
}
.page-jump a:hover { border-color: var(--gold); color: var(--gold); background: rgba(176,141,58,.06); }

/* ---------- Buttons ---------- */
.btn {
  --c: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: var(--r);
  text-decoration: none;
  border: 1.5px solid var(--c);
  background: var(--c);
  color: var(--ivory);
  cursor: pointer;
  transition: transform .18s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(22,34,60,.18); }
.btn--gold { --c: var(--gold); background: var(--gold); border-color: var(--gold); color: #1c1606; }
.btn--gold:hover { box-shadow: 0 10px 24px rgba(176,141,58,.32); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--ivory); }
.section--navy .btn--ghost { color: var(--cream-text); border-color: rgba(239,233,218,.5); }
.section--navy .btn--ghost:hover { background: var(--cream-text); color: var(--ink); }
.btn .arr { transition: transform .2s ease; }
.btn:hover .arr { transform: translateX(4px); }

/* ---------- Header / Nav ---------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--paper-line);
}
.site-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(244,240,229,.86);
  backdrop-filter: blur(10px);
  pointer-events: none;

}
.site-head .wrap { position: relative; z-index: 1; }
.nav {
  display: flex; align-items: center; gap: clamp(12px, 2vw, 28px);
  height: 76px; min-height: 76px;
}
.logo { flex-shrink: 0; }
.nav__links {
  display: flex; align-items: center; justify-content: center; flex: 1;
  gap: clamp(10px, 1.6vw, 26px); list-style: none; margin: 0; padding: 0;
  min-width: 0;
}
.nav__links a {
  font-family: var(--display); font-weight: 600; font-size: 12.5px;
  letter-spacing: 0.03em; text-decoration: none; color: var(--ink);
  text-transform: uppercase; padding: 6px 0; position: relative;
  white-space: nowrap;
}
.nav__links a::after {
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background: var(--gold);
  transition: width .25s ease;
}
.nav__links a:hover::after, .nav__links a.is-active::after { width: 100%; }
.nav__links a.is-active { color: var(--gold); }
.nav__cta { flex-shrink: 0; padding: 12px 18px !important; font-size: 12px !important; letter-spacing: 0.04em !important; white-space: nowrap; }
.nav__burger { flex-shrink: 0; display:none; background:none; border:0; cursor:pointer; padding:8px; }
.nav__burger span { display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; transition:transform .25s ease, opacity .25s ease; }
.nav__burger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav__burger.open span:nth-child(2) { opacity:0; }
.nav__burger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ---------- Logo ---------- */
.logo { display:flex; align-items:center; gap:13px; text-decoration:none; color:var(--ink); }
.logo__name { display:inline-flex; align-items:center; line-height:1; font-family:var(--display); font-size:22px; letter-spacing:-0.03em; }
.logo__name b { font-weight:900; font-size:inherit; letter-spacing:-0.025em; display:inline; }
.logo__pipe {
  display:inline-block; width:2.5px; height:1.05em;
  background:var(--gold); opacity:0.55;
  margin-inline:0.07em; flex-shrink:0;
}
.logo__thin { font-weight:400; font-size:inherit; display:inline; opacity:.7; letter-spacing:-0.02em; margin-left:0; }
.site-foot .logo { color:var(--cream-text); }
.site-foot .logo__pipe { background:var(--gold-soft); opacity:0.65; }

/* ---------- Icon tiles ---------- */
.icon { width: 46px; height: 46px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Services strip (home) ---------- */
.svc-strip { display:grid; grid-template-columns: repeat(5, 1fr); }
.svc-strip__item {
  text-align:center; padding: 14px clamp(10px,2vw,26px);
  border-left: 1px solid var(--paper-line);
  display:flex; flex-direction:column; align-items:center; gap:18px;
}
.svc-strip__item:first-child { border-left: 0; }
.svc-strip__item .icon { color: var(--ink); }
.svc-strip__item h4 { font-size:14px; letter-spacing:.05em; text-transform:uppercase; }
.svc-strip__item p { margin:0; font-size:14.5px; color:var(--muted); line-height:1.5; }

/* ---------- Card grid ---------- */
.grid { display:grid; gap: clamp(18px, 2.4vw, 28px); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.card {
  background: var(--ivory);
  border: 1px solid var(--paper-line);
  border-radius: var(--r);
  padding: clamp(26px, 3vw, 38px);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.section--paper2 .card { background:#fff; }
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(22,34,60,.10); border-color: var(--gold); }
.card .icon { color: var(--gold); margin-bottom: 22px; }
.card h3 { font-size: 21px; margin-bottom: 12px; }
.section--navy .card h3 { color: var(--ink); }
.card p { margin: 0; color: var(--muted); font-size: 15.5px; }
.card__num { font-family:var(--display); font-weight:800; font-size:13px; color:var(--gold); letter-spacing:.2em; }

/* ---------- Misc ---------- */
.rule-gold { width:64px; height:3px; background:linear-gradient(90deg,var(--gold),var(--gold-soft)); border:0; margin:0 0 28px; }
.center { text-align:center; }
.center .eyebrow, .center .rule-gold { margin-left:auto; margin-right:auto; }
.center .lede { margin-inline:auto; }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--ivory-2);
  padding-block: clamp(100px, 12vw, 160px);
  border-top: 1px solid var(--paper-line);
  border-bottom: 1px solid var(--paper-line);
}

/* ---------- Footer ---------- */
.site-foot { background: var(--ink); color: var(--cream-text); padding-block: 70px 34px; }
.foot-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.site-foot h5 { font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-soft); margin:0 0 18px; }
.site-foot ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.site-foot a { color:#c3c9d6; text-decoration:none; font-size:15px; transition:color .2s; }
.site-foot a:hover { color:var(--gold-soft); }
.site-foot p { color:#aeb6c6; font-size:15px; margin:14px 0 0; max-width:34ch; }
.foot-bottom { border-top:1px solid rgba(239,233,218,.14); margin-top:54px; padding-top:24px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:#8e97a9; }
.foot-bottom .gold-text{ color:var(--gold-soft); }

/* ---------- FAQ accordion ---------- */
.faq {
  max-width: 820px; margin-inline: auto;
  display: flex; flex-direction: column; gap: clamp(14px, 2vw, 18px);
}
.faq__item {
  background: var(--ivory);
  border: 1px solid var(--paper-line);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease, transform .2s ease;
}
.section--paper2 .faq__item { background: #fff; }
.section--navy .faq__item {
  background: var(--ivory);
  border-color: rgba(239,233,218,.22);
}
.faq__item:hover { border-color: var(--gold-soft); }
.faq__item[open] {
  border-color: var(--gold);
  box-shadow: 0 14px 36px rgba(22,34,60,.10);
}
.faq__item summary {
  font-family: var(--display); font-weight: 700; font-size: clamp(16px, 1.8vw, 17px);
  padding: clamp(20px, 2.5vw, 26px) clamp(22px, 3vw, 32px);
  padding-right: clamp(48px, 5vw, 56px);
  cursor: pointer; list-style: none;
  position: relative; line-height: 1.35; color: var(--ink);
}
.faq__item[open] summary { border-bottom: 1px solid var(--paper-line); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; position: absolute; right: clamp(20px, 3vw, 28px); top: 50%;
  transform: translateY(-50%);
  font-family: var(--display); font-weight: 400; font-size: 22px; color: var(--gold);
  line-height: 1; transition: transform .2s ease, color .2s ease;
}
.faq__item[open] summary::after { content: "−"; color: var(--gold-soft); }
.faq__item summary:hover { color: var(--gold); }
.faq__item p {
  margin: 0; padding: clamp(16px, 2vw, 22px) clamp(22px, 3vw, 32px);
  color: var(--muted); font-size: 15.5px; line-height: 1.65;
}
.faq-section { padding-top: clamp(32px, 4vw, 56px); }

/* ---------- Shared page layouts ---------- */
.split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); align-items:end; }
.split--coverage { align-items:start; gap:clamp(32px,5vw,72px); }

.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,40px); }
.stat { border-top:3px solid var(--gold); padding-top:22px; }
.stat b { display:block; font-family:var(--display); font-weight:900; font-size:clamp(28px,3.5vw,42px); letter-spacing:-.02em; line-height:1; }
.stat span { display:block; color:var(--muted); margin-top:12px; font-size:15px; max-width:24ch; }
.section--navy .stat span { color:#c3c9d6; }

.step { padding:6px 0; }
.step h3 { font-size:clamp(20px,2.5vw,23px); margin:12px 0 10px; }
.step p { color:var(--muted); margin:0; }

.value h3 { font-size:clamp(20px,2.5vw,24px); margin:14px 0 10px; }
.value p { color:#c3c9d6; margin:0; font-size:15.5px; }

.industry-tabs { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.itab {
  font-family:var(--display); font-weight:700; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; padding:9px 20px; border-radius:3px;
  border:1.5px solid var(--paper-line); background:transparent; color:var(--muted);
  cursor:pointer; transition:all .2s ease;
}
.itab:hover { border-color:var(--gold); color:var(--gold); }
.itab.is-active { background:var(--ink); border-color:var(--ink); color:var(--cream-text); }

/* ---------- Reveal on scroll (progressive enhancement) ---------- */
/* Hidden state ONLY applies when JS is active (html.js) AND motion is allowed.
   Without JS, or with reduced-motion, content is fully visible by default. */
.js .reveal { opacity:0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity:1 !important; transform:none !important; transition:none !important; }
  .nav__links { transition:none !important; }
}

/* ============================================================
   Responsive — tablet (≤980px) · mobile (≤720px)
   ============================================================ */
@media (max-width: 980px) {
  .grid--3 { grid-template-columns: repeat(2,1fr); }
  .svc-strip { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .svc-strip__item { border-left:0; border-top:1px solid var(--paper-line); padding-top:26px; }
  .svc-strip__item:nth-child(-n+2){ border-top:0; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap:34px; }
  .split, .split--coverage { grid-template-columns:1fr; gap:18px; }
  .stats { grid-template-columns:repeat(2,1fr); row-gap:34px; }
}
@media (max-width: 1040px) {
  html.nav-open {
    overflow: hidden;
    overscroll-behavior: none;
  }
  html.nav-open body {
    overflow: hidden;
    overscroll-behavior: none;
  }
  html.nav-open .site-head {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
  }
  .nav__links {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    z-index: 199;
    background: var(--ivory);
    flex-direction: column;
    gap: 0;
    flex: none;
    justify-content: flex-start;
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
    border-bottom: 1px solid var(--paper-line);
    padding: 8px 0;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .3s ease, opacity .25s ease, visibility .3s;
  }
  .nav__links.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .nav__links li { width:100%; text-align:center; }
  .nav__links a { display:block; padding:16px; font-size: 14px; white-space: normal; }
  .nav__cta { display:none; }
  .nav__burger { display:block; margin-left:auto; }
  .page-hero.section,
  .contact.section {
    min-height:auto;
    justify-content:flex-start;
    padding-block:clamp(44px, 7vw, 72px);
  }
}
@media (max-width: 720px) {
  body { font-size:16px; }
  .display { font-size:clamp(32px,9vw,48px); }
  .h2 { font-size:clamp(26px,7vw,36px); }
  .hero.section,
  .page-hero.section,
  .contact.section {
    min-height:auto;
    padding-block:clamp(48px,12vw,80px);
  }
  .hero__cta { margin-top:28px; }
  .hero__cta .btn { flex:1 1 auto; justify-content:center; min-width:min(100%,220px); }
  .page-jump { gap:8px; margin-top:24px; }
  .page-jump a { flex:1 1 calc(50% - 4px); text-align:center; min-width:min(100%,148px); }
  .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .svc-strip { grid-template-columns:1fr; }
  .svc-strip__item { border-top:1px solid var(--paper-line); padding-top:26px; }
  .svc-strip__item:first-child { border-top:0; }
  .stats { grid-template-columns:1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-bottom { flex-direction:column; align-items:flex-start; gap:10px; }
  .logo__name { font-size:19px; }
  .nav { gap:12px; }
  .section { padding-block:clamp(52px,10vw,88px); }
  .cta-band { padding-block:clamp(72px,14vw,120px); }
  .itab { font-size:10px; padding:8px 14px; letter-spacing:.08em; }
  .card { padding:clamp(22px,5vw,30px); }
}
@media (max-width: 480px) {
  :root { --gutter: clamp(16px, 4vw, 24px); }
  .page-jump a { flex:1 1 100%; }
  .eyebrow { font-size:12px; letter-spacing:.24em; gap:10px; }
  .eyebrow::before { width:28px; }
  .btn { padding:14px 22px; font-size:13px; width:100%; justify-content:center; }
  .hero__cta .btn { width:100%; }
}