/* ==========================================================================
   Solmex marketing site: Quiet Waves 2.0
   --------------------------------------------------------------------------
   One typeface (Inter). Numbers are Inter too, with tabular figures, never a
   second monospace face. Large type, generous space, colour only on small
   marks (a status dot, an accent word, the primary button). Photographs and
   one or two small product cards do the showing; nothing decorative.

   Used by the pages generated from tools/site-chrome.cjs (home, industries).
   The older hand-written pages keep features/features.css until they move.
   ========================================================================== */

@font-face{font-family:"Inter Fallback";src:local("Arial");size-adjust:107.4%;ascent-override:90.2%;descent-override:22.48%;line-gap-override:0%}

:root{
  --sans:"Inter","Inter Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ink:#0B1533;          /* body text and headings */
  --ink-2:#475069;        /* secondary text */
  --ink-3:#6B7389;        /* captions, sources */
  --line:#E4E8F0;
  --soft:#F4F6FA;         /* quiet section background */
  --paper:#FFFFFF;
  --navy:#00175E;
  --navy-2:#0A2270;
  --blue:#00248F;
  --teal:#01AA95;
  --teal-ink:#007A6B;     /* teal that passes contrast on white */
  --gold:#FEBE20;
  --gold-2:#F2B000;
  --red:#D20504;
  --amber:#C77C00;
  --radius:20px;
  --shadow:0 1px 2px rgba(11,21,51,.05),0 12px 32px -12px rgba(11,21,51,.16);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--sans);font-size:18px;line-height:1.6;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden;font-feature-settings:"cv11","ss01"}
img,svg{max-width:100%;display:block}
a{color:inherit}
button,input{font:inherit;color:inherit}
.num,.stat b,.est-out b,.card-row .v{font-variant-numeric:tabular-nums}

.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
.wrap-narrow{max-width:860px;margin:0 auto;padding:0 28px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── type ──────────────────────────────────────────────────────────────── */
h1,h2,h3,h4{font-weight:700;letter-spacing:-.025em;line-height:1.08;color:var(--ink)}
h1{font-size:clamp(42px,5.6vw,72px);letter-spacing:-.035em;line-height:1.02}
h2{font-size:clamp(34px,4vw,52px);letter-spacing:-.03em}
h3{font-size:clamp(22px,2.1vw,27px);line-height:1.2;letter-spacing:-.02em}
h4{font-size:19px;letter-spacing:-.01em;line-height:1.3}
.lead{font-size:clamp(19px,1.6vw,22px);line-height:1.55;color:var(--ink-2);max-width:40em}

/* Key points: a short, scannable summary of the page right under the hero,
   same pattern as the resources articles' .r-keys (which AI crawlers and
   skimming readers both use as the page's own abstract). */
.fp-keys{border:1px solid var(--line);border-radius:var(--radius);padding:28px 32px;background:var(--soft);max-width:860px}
.fp-keys-h{font-weight:600;color:var(--ink);margin-bottom:12px}
.fp-keys ul{margin:0;padding-left:22px}
.fp-keys li{margin-bottom:8px;color:var(--ink)}
.fp-keys li:last-child{margin-bottom:0}
@media (max-width:760px){.fp-keys{padding:22px 20px}}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:600;color:var(--teal-ink);margin-bottom:18px;letter-spacing:0}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--teal)}
.acc{color:var(--teal-ink)}
.muted{color:var(--ink-2)}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}

.sec{padding:112px 0}
.sec-soft{background:var(--soft)}
.sec-head{max-width:820px;margin-bottom:56px}
.sec-head.center{margin-left:auto;margin-right:auto}
.sec-head h2+.lead{margin-top:20px}

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 28px;border-radius:14px;font-size:17px;font-weight:600;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .15s ease;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--gold);color:var(--navy)}
.btn-primary:hover{background:var(--gold-2)}
.btn-line{background:#fff;color:var(--ink);border-color:#CDD3DF}
.btn-line:hover{border-color:var(--ink)}
.btn-white{background:#fff;color:var(--navy)}
.btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn-ghost-light:hover{border-color:#fff}
.btn-sm{height:44px;padding:0 18px;font-size:15px;border-radius:12px}
.btn .arr{transition:transform .15s ease}
.btn:hover .arr{transform:translateX(3px)}
.ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.reassure{margin-top:18px;font-size:15px;color:var(--ink-3)}
.reassure b{color:var(--ink-2);font-weight:600}

/* ── hero ──────────────────────────────────────────────────────────────── */
.hero{padding:72px 0 96px}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:64px;align-items:center}
.hero h1{margin-bottom:26px}
.hero .lead{max-width:34em}
.hero-media{position:relative}
.hero-photo{border-radius:28px;overflow:hidden;aspect-ratio:5/4;background:var(--soft)}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.float-card{position:absolute;left:-36px;bottom:-32px;width:min(330px,78%);background:#fff;border-radius:18px;box-shadow:0 24px 50px -18px rgba(11,21,51,.35);padding:18px 20px;border:1px solid var(--line)}
.float-card .fc-top{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;color:var(--ink-3);margin-bottom:8px}
.float-card b{display:block;font-size:17px;line-height:1.35;font-weight:600}
.float-card .fc-meta{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:14px;color:var(--ink-2)}

/* status mark: a dot plus a word, never colour alone */
.pill{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;padding:4px 11px;border-radius:100px;background:var(--soft);color:var(--ink);white-space:nowrap}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.pill.ok{background:#E6F7F4;color:#006B5E}
.pill.due{background:#FFF4DB;color:#8A5A00}
.pill.down{background:#FDE8E8;color:#B00403}
.pill.info{background:#E8EDFB;color:var(--blue)}

/* ── big numbers ───────────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{padding:48px 36px 44px;border-left:1px solid var(--line)}
.stat:first-child{border-left:0;padding-left:0}
.stat b{display:block;font-size:clamp(44px,4.6vw,66px);font-weight:700;letter-spacing:-.045em;line-height:1;color:var(--navy);margin-bottom:18px}
.stat p{font-size:19px;line-height:1.45;color:var(--ink);font-weight:500;max-width:18em}
.stat .src{display:block;margin-top:14px;font-size:14px;color:var(--ink-3);font-weight:400;line-height:1.4}
.stat .src a{color:var(--ink-3);text-underline-offset:3px}
.stat .src a:hover{color:var(--ink)}
.stats-note{margin-top:18px;font-size:14px;color:var(--ink-3)}

/* ── pain ──────────────────────────────────────────────────────────────── */
.pains{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pain{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px 32px 36px}
.pain .ico{width:48px;height:48px;border-radius:14px;background:#FDECEC;display:flex;align-items:center;justify-content:center;margin-bottom:24px;color:var(--red)}
.pain .ico svg{width:24px;height:24px}
.pain h3{margin-bottom:12px}
.pain p{color:var(--ink-2);font-size:17.5px}

/* ── how we fix it ─────────────────────────────────────────────────────── */
.fixes{display:grid;gap:112px}
.fix{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.fix:nth-child(even) .fix-text{order:2}
.fix-text .step{font-size:16px;font-weight:600;color:var(--teal-ink);margin-bottom:14px;display:block}
.fix-text h3{font-size:clamp(28px,3vw,40px);letter-spacing:-.03em;line-height:1.1;margin-bottom:18px}
.fix-text>p{font-size:19px;color:var(--ink-2);line-height:1.6}
.checks{list-style:none;margin-top:26px;display:grid;gap:14px}
.checks li{display:flex;gap:14px;font-size:17.5px;line-height:1.5}
.checks li::before{content:"";flex:0 0 24px;height:24px;border-radius:50%;background:#E6F7F4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007A6B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat;margin-top:1px}
.fix-link{display:inline-flex;align-items:center;gap:8px;margin-top:28px;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:2px}
.fix-link:hover{border-color:var(--ink)}

/* the one product graphic: a plain card with rows, in the sector's words */
.stage{background:var(--soft);border-radius:28px;padding:48px 44px;display:flex;align-items:center;justify-content:center;min-height:420px}
.stage-vid{padding:0;min-height:0;aspect-ratio:5/4;overflow:hidden}
.stage-vid video{display:block;width:100%;height:100%;object-fit:cover}
.stage-still{padding:0;min-height:0;aspect-ratio:5/4;overflow:hidden;background:#020F3A}
.stage-still img{display:block;width:100%;height:100%;object-fit:cover}
/* A step that shows a real screen: full width, text above, the screen below. */
.fix.fix-wide{grid-template-columns:1fr;gap:36px}
.fix.fix-wide .fix-text{order:0;max-width:780px}
.fix.fix-wide .checks{display:flex;flex-wrap:wrap;gap:10px 28px}
.stage-shot{padding:0;background:none;min-height:0;display:block;border-radius:0}
.part-shot{margin:0}
.part-shot .shot{display:block}
.card{background:#fff;border-radius:18px;box-shadow:var(--shadow);width:100%;max-width:470px;overflow:hidden;border:1px solid var(--line)}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 22px;border-bottom:1px solid var(--line)}
.card-head b{font-size:17px;font-weight:600}
.card-head span{font-size:14px;color:var(--ink-3)}
.card-row{display:flex;align-items:center;gap:14px;padding:17px 22px;border-bottom:1px solid var(--line)}
.card-row:last-child{border-bottom:0}
.card-row .t{flex:1;min-width:0}
.card-row .t b{display:block;font-size:16px;font-weight:600;line-height:1.35}
.card-row .t small{display:block;font-size:14px;color:var(--ink-3);line-height:1.4;margin-top:2px}
.card-foot{padding:14px 22px;background:#FAFBFD;font-size:14px;color:var(--ink-2);display:flex;justify-content:space-between;gap:12px}

/* ── estimator ─────────────────────────────────────────────────────────── */
.est{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:28px;overflow:hidden;border:1px solid var(--line);background:#fff}
.est-in{padding:48px 48px 44px}
.est-in h3{margin-bottom:8px}
.est-in>p{color:var(--ink-2);font-size:17px;margin-bottom:30px}
.field{margin-bottom:26px}
.field label{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:16.5px;font-weight:500;margin-bottom:12px}
.field label output{font-size:20px;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}
.field input[type=range]{width:100%;accent-color:var(--navy);height:28px;cursor:pointer}
.est-out{background:var(--navy);color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:center}
.est-out small{font-size:17px;color:#C9D2F0;display:block}
.est-out b{display:block;font-size:clamp(46px,5.4vw,76px);font-weight:700;letter-spacing:-.045em;line-height:1.02;margin:10px 0 28px;color:#fff}
.est-out .save b{color:var(--gold);font-size:clamp(38px,4.2vw,58px);margin-bottom:0}
.est-out .save{border-top:1px solid rgba(255,255,255,.18);padding-top:26px}
.est-out b .per{font-size:.42em;font-weight:600;letter-spacing:-.01em;color:#C9D2F0;margin-left:.2em}
.est-out .save b .per{color:#F6D98A}
.est-out .fine{margin-top:26px;font-size:14px;color:#AEB9DE;line-height:1.5}

/* ── trust ─────────────────────────────────────────────────────────────── */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.tr{padding:30px 28px;border-radius:var(--radius);background:#fff;border:1px solid var(--line)}
.tr .ico{width:44px;height:44px;border-radius:12px;background:#E8EDFB;color:var(--blue);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.tr .ico svg{width:22px;height:22px}
.tr h4{margin-bottom:8px}
.tr p{font-size:16px;color:var(--ink-2);line-height:1.55}
.tr a{color:var(--ink);text-underline-offset:3px}

/* ── features grid (home) ──────────────────────────────────────────────── */
.mods{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mod{display:block;padding:24px 24px 26px;border:1px solid var(--line);border-radius:18px;text-decoration:none;background:#fff;transition:border-color .15s ease,transform .15s ease}
.mod:hover{border-color:var(--ink);transform:translateY(-2px)}
.mod b{display:block;font-size:18px;font-weight:600;margin-bottom:6px;letter-spacing:-.01em}
.mod span{display:block;font-size:15.5px;color:var(--ink-2);line-height:1.5}

/* ── industries grid ───────────────────────────────────────────────────── */
.inds{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ind{display:flex;flex-direction:column;text-decoration:none;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#fff;transition:transform .15s ease,box-shadow .15s ease}
.ind:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.ind .ph{aspect-ratio:16/10;background:var(--soft);overflow:hidden}
.ind .ph img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.ind:hover .ph img{transform:scale(1.03)}
.ind .tx{padding:22px 24px 26px}
.ind b{display:block;font-size:20px;font-weight:600;letter-spacing:-.015em;margin-bottom:6px}
.ind span{display:block;font-size:16px;color:var(--ink-2);line-height:1.5}
.inds.compact{grid-template-columns:repeat(4,1fr);gap:12px}
.inds.compact .ind{flex-direction:row;align-items:center;border-radius:14px}
.inds.compact .ph{width:76px;flex:0 0 76px;aspect-ratio:1}
.inds.compact .tx{padding:14px 16px}
.inds.compact b{font-size:16.5px;margin:0}

/* ── steps (home: how it works) ────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:s}
.stp{padding:32px 30px;border-radius:var(--radius);background:#fff;border:1px solid var(--line)}
.stp .n{width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;font-size:17px;display:flex;align-items:center;justify-content:center;margin-bottom:22px}
.stp h3{margin-bottom:10px}
.stp p{color:var(--ink-2);font-size:17px}

/* ── wide product shot (home, used once) ───────────────────────────────── */
.shot{border-radius:24px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 70px -30px rgba(11,21,51,.35);background:#fff}
.shot img{width:100%;height:auto}
.shot.film{max-width:1100px;margin:0 auto}
.shot video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#EAF4FF}
.shot-cap{margin-top:16px;font-size:15px;color:var(--ink-3);text-align:center}

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 0;font-size:clamp(19px,1.7vw,22px);font-weight:600;letter-spacing:-.015em;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 22px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1533' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .faq-a{padding:0 48px 28px 0;font-size:18px;color:var(--ink-2);line-height:1.65}
.faq .faq-a a{color:var(--ink);text-underline-offset:3px}

/* ── closing CTA ───────────────────────────────────────────────────────── */
.cta{background:var(--navy);color:#fff;border-radius:32px;padding:88px 64px;text-align:center;position:relative;overflow:hidden}
.cta h2{color:#fff;max-width:16em;margin:0 auto}
.cta .lead{color:#C9D2F0;margin:22px auto 0;max-width:34em}
.cta .ctas{justify-content:center}
.cta .reassure{color:#AEB9DE}
.cta .reassure b{color:#fff}
.cta-sec{padding:0 0 112px}

/* ── footer ────────────────────────────────────────────────────────────── */
.foot{background:#061038;color:#C9D2F0;padding:80px 0 36px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px}
.foot .logo img{height:30px;width:auto;margin-bottom:18px}
.foot p{font-size:16px;line-height:1.6;max-width:22em}
.foot h5{font-size:15px;font-weight:600;color:#fff;margin-bottom:16px}
.foot-grid a{display:block;font-size:15.5px;color:#C9D2F0;text-decoration:none;padding:5px 0}
.foot-grid a:hover{color:#fff}
.foot-social{display:flex;gap:10px;margin-top:18px}.foot-grid .foot-social a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid rgba(255,255,255,.14);border-radius:8px;color:#AEB6D6;text-decoration:none}.foot-grid .foot-social a:hover{color:#fff;border-color:rgba(255,255,255,.4)}.foot-social svg{width:18px;height:18px;fill:currentColor}
.foot-base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:64px;padding-top:28px;border-top:1px solid rgba(255,255,255,.12);font-size:14.5px}
.foot-base .slogan{color:var(--gold);font-weight:600}

/* ── breadcrumb + small links ──────────────────────────────────────────── */
.crumb{font-size:15px;color:var(--ink-3);margin-bottom:22px}
.crumb a{color:var(--ink-3);text-decoration:none}
.crumb a:hover{color:var(--ink)}

/* ── reveal on scroll (content is visible without JS) ──────────────────── */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .mods{grid-template-columns:repeat(2,1fr)}
  .trust{grid-template-columns:repeat(2,1fr)}
  .inds.compact{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  body{font-size:17px}
  .sec{padding:80px 0}
  .cta-sec{padding-bottom:80px}
  .hero{padding:40px 0 72px}
  .hero-grid,.fix,.est{grid-template-columns:1fr;gap:44px}
  .fix:nth-child(even) .fix-text{order:0}
  .fixes{gap:80px}
  .hero-photo{aspect-ratio:4/3}
  .float-card{left:16px;bottom:-24px}
  .stats{grid-template-columns:1fr;border-bottom:0}
  .stat{border-left:0;padding:34px 0;border-bottom:1px solid var(--line)}
  .pains,.steps{grid-template-columns:1fr}
  .inds{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-grid>div:first-child{grid-column:1/-1}
  .stage{padding:28px 18px;min-height:0;border-radius:22px}
  .stage.stage-vid,.stage.stage-still{padding:0}
  .est-in,.est-out{padding:34px 26px}
  .cta{padding:64px 26px;border-radius:24px}
}
@media (max-width:700px){.stage-vid.has-m{aspect-ratio:4/5}}
@media (max-width:600px){
  .wrap,.wrap-narrow{padding:0 20px}
  .ctas .btn{width:100%}
  .inds,.mods,.trust,.inds.compact{grid-template-columns:1fr}
  .faq .faq-a{padding-right:0}
  .card-row{padding:15px 16px;gap:10px}
  .card-head,.card-foot{padding-left:16px;padding-right:16px}
  .pill{font-size:12.5px;padding:3px 9px}
}

/* ── "built for" row under the home hero ───────────────────────────────── */
.for-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:72px;padding-top:32px;border-top:1px solid var(--line)}
.for-row>span{font-size:15px;color:var(--ink-3);margin-right:6px}
.for-row a{font-size:15px;font-weight:500;text-decoration:none;padding:8px 14px;border:1px solid var(--line);border-radius:100px;color:var(--ink)}
.for-row a:hover{border-color:var(--ink)}
.for-row a.more{border:0;color:var(--teal-ink);font-weight:600}
@media (max-width:900px){.for-row{margin-top:56px}}
.hero-grid h1{font-size:clamp(40px,4.7vw,64px)}
.mods.rel{grid-template-columns:repeat(var(--n,3),1fr)}
.card-row .t b,.card-row .t small{overflow-wrap:anywhere}
@media (max-width:900px){.mods.rel{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.mods.rel{grid-template-columns:1fr}}