/* ============================================================
   RX FLOORING · shared stylesheet for service landing pages
   Tokens and components mirror index.html exactly. Kept in one
   external file so the landing pages share a cached stylesheet
   and there is a single place to change the palette.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; overflow-x:hidden; scroll-behavior:smooth;}
body{margin:0; overflow-x:hidden;}
img{max-width:100%; display:block;}
button,input,select,textarea{font:inherit; color:inherit;}

:root{
  /* Light only, by design — same commitment as the home page. */
  color-scheme:light;

  --bg:#FFFFFF;
  --bg-alt:#F5F6F8;
  --panel:#FFFFFF;
  --panel-alt:#EDF0F2;
  --ink:#1D242B;
  --body:#4A535C;
  --muted:#79828B;
  --rule:#E3E6EA;
  --rule-soft:#EDEFF2;
  --accent:#1B4DFF;
  --accent-hover:#0B3AD6;
  --on-accent:#FFFFFF;
  --signal:#00875A;
  --shadow:0 1px 2px rgba(29,36,43,.04),0 8px 28px rgba(29,36,43,.06);

  --sf:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Inter,system-ui,Segoe UI,Roboto,sans-serif;
  --mono:var(--sf);
  --rx:"Iowan Old Style","Hoefler Text",Palatino,"Times New Roman",serif;

  --gut:24px;
  --wide:1080px;
  --narrow:720px;
}
:root[data-theme="dark"],
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#FFFFFF; --bg-alt:#F5F6F8; --panel:#FFFFFF; --panel-alt:#EDF0F2;
  --ink:#1D242B; --body:#4A535C; --muted:#79828B;
  --rule:#E3E6EA; --rule-soft:#EDEFF2;
  --accent:#1B4DFF; --accent-hover:#0B3AD6; --on-accent:#FFFFFF; --signal:#00875A;
}

body{
  background:var(--bg); color:var(--body);
  font-family:var(--sf); font-size:17px; line-height:1.55;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4{color:var(--ink); margin:0; text-wrap:balance; letter-spacing:-.028em; font-weight:600;}
p{margin:0;}
a{color:var(--accent); text-decoration:none;}
a:hover{color:var(--accent-hover);}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;}

.wrap{max-width:var(--wide); margin:0 auto; padding:0 var(--gut);}
.narrow{max-width:var(--narrow); margin:0 auto;}
.center{text-align:center;}

section{padding:118px 0;}
@media(max-width:700px){ section{padding:76px 0;} }
.alt{background:var(--bg-alt);}

.label{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); font-weight:400;
}
.label.accent{color:var(--accent);}
h2.big{font-size:clamp(28px,4.2vw,44px); line-height:1.1; font-weight:600;}
.sec-intro{max-width:60ch; margin:20px auto 0; font-size:19px; color:var(--body);}
.rx{font-family:var(--rx); font-weight:400;}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--rule-soft);
}
.nav-in{
  max-width:var(--wide); margin:0 auto; padding:0 var(--gut);
  height:56px; display:flex; align-items:center; gap:34px;
}
.brand{
  display:flex; align-items:baseline; gap:9px; color:var(--ink); font-weight:600;
  font-size:16px; letter-spacing:-.02em; margin-right:auto;
}
.brand .mark{font-family:var(--rx); font-size:21px; color:var(--accent); line-height:1;}
.nav-links{display:flex; gap:30px;}
.nav-links a{color:var(--body); font-size:13.5px; letter-spacing:-.005em;}
.nav-links a:hover{color:var(--ink);}
@media(max-width:860px){
  .nav{background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none; border-bottom:1px solid var(--rule-soft);}
  .nav-links{display:none;}
}

.pill{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent); color:var(--on-accent);
  border:0; border-radius:980px; padding:8px 17px;
  font-size:13.5px; font-weight:500; letter-spacing:-.005em; cursor:pointer;
  transition:background .2s ease;
}
.pill:hover{background:var(--accent-hover); color:var(--on-accent);}
.pill.lg{padding:14px 30px; font-size:17px;}
.pill.ghost{background:transparent; color:var(--accent); border:1px solid var(--rule);}
.pill.ghost:hover{background:var(--panel-alt); color:var(--accent);}

/* ---------- breadcrumb ---------- */
.crumb{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted);
  display:flex; flex-wrap:wrap; gap:9px; align-items:center;
}
.crumb a{color:var(--muted);}
.crumb a:hover{color:var(--accent);}
.crumb .sep{opacity:.55;}
.crumb [aria-current]{color:var(--ink);}

/* ---------- landing hero ----------
   No video and no ℞ watermark. The glyph is taller than this hero at any
   readable size, so it only ever ended on a hard clipped edge. The mark
   still carries the brand in the nav and the closing CTA. */
.lp-hero{
  position:relative; padding:60px 0 84px; background:var(--bg);
  border-bottom:1px solid var(--rule-soft);
}
@media(max-width:700px){ .lp-hero{padding:36px 0 56px;} }
/* Every hero block shares one centred column so their left edges line up. */
.lp-hero .crumb,
.lp-hero h1,
.lp-hero .lede,
.lp-hero .lp-hero-links,
.lp-hero .lp-facts{
  max-width:var(--narrow); margin-left:auto; margin-right:auto;
}
.lp-hero h1{
  margin-top:20px;
  font-size:clamp(34px,5.6vw,60px); line-height:1.04;
  letter-spacing:-.036em;
}
.lp-hero .lede{
  margin-top:22px;
  font-size:20px; line-height:1.5; color:var(--body);
}
@media(max-width:700px){
  .lp-hero .lede{font-size:18px;}
}
.lp-hero-links{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px;}

/* Quick trust strip under the hero CTAs. */
.lp-facts{
  display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:34px;
  font-size:14.5px; color:var(--muted);
}
.lp-facts span{display:inline-flex; align-items:center; gap:9px;}
.lp-facts span::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--signal); flex:none;
}

/* ---------- prose ---------- */
.prose{max-width:var(--narrow); margin-left:auto; margin-right:auto;}
.prose > * + *{margin-top:20px;}
.prose h2{font-size:clamp(25px,3.2vw,34px); line-height:1.15; margin-top:52px;}
.prose h3{font-size:20px; line-height:1.3; margin-top:38px;}
.prose h2:first-child,.prose h3:first-child{margin-top:0;}
.prose p{font-size:17.5px; line-height:1.62;}
.prose ul{margin:0; padding-left:0; list-style:none;}
.prose ul li{position:relative; padding-left:22px; margin-top:11px; font-size:17px;}
.prose ul li::before{
  content:""; position:absolute; left:2px; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--accent); opacity:.55;
}
.prose strong{color:var(--ink); font-weight:600;}
.prose .note{
  margin-top:28px; padding:20px 22px;
  background:var(--bg-alt); border-left:2px solid var(--accent);
  border-radius:0 10px 10px 0; font-size:16.5px;
}

/* ---------- step / spec grid ----------
   Two columns on the prose measure so the cards line up with the body copy.
   An odd final card spans the row instead of being left stranded. */
.lp-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:20px;
  max-width:var(--narrow); margin:48px auto 0;
}
.lp-grid .lp-card:last-child:nth-child(odd){grid-column:1 / -1;}
@media(max-width:640px){
  .lp-grid{grid-template-columns:1fr;}
  .lp-grid .lp-card:last-child:nth-child(odd){grid-column:auto;}
}
.lp-card{
  background:var(--panel); border:1px solid var(--rule);
  border-radius:16px; padding:26px 24px; box-shadow:var(--shadow);
}
.lp-card .n{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent);
}
.lp-card h3{margin-top:12px; font-size:18.5px; letter-spacing:-.022em;}
.lp-card p{margin-top:9px; font-size:16px; color:var(--body);}

/* ---------- area chips ---------- */
.lp-areas{
  display:flex; flex-wrap:wrap; gap:9px;
  max-width:var(--narrow); margin:34px auto 0; padding:0;
}
.lp-areas li{
  list-style:none; padding:8px 15px;
  border:1px solid var(--rule); border-radius:980px;
  font-size:14.5px; color:var(--ink); background:var(--panel);
}

/* ---------- before / after proof ---------- */
.lp-proof{
  max-width:var(--narrow); margin:48px auto 0;
}
.lp-proof-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
@media(max-width:520px){
  .lp-proof-grid{grid-template-columns:1fr;}
}
.lp-proof-shot{
  position:relative; margin:0; border-radius:14px; overflow:hidden;
  border:1px solid var(--rule); background:var(--panel-alt);
  aspect-ratio:4/3;
}
.lp-proof-shot img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.lp-proof-shot span{
  position:absolute; left:10px; bottom:10px;
  font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  color:#fff; background:rgba(29,36,43,.42); padding:4px 8px; border-radius:980px;
}
.lp-proof-note{
  margin:12px 0 0; font-size:14.5px; color:var(--muted); line-height:1.45;
}

/* ---------- related services ---------- */
.lp-related{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:18px; margin-top:44px;
}
.lp-related a{
  display:block; padding:24px;
  background:var(--panel); border:1px solid var(--rule); border-radius:16px;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.lp-related a:hover{
  border-color:color-mix(in srgb, var(--accent) 40%, var(--rule));
  transform:translateY(-2px); box-shadow:var(--shadow);
}
.lp-related h3{font-size:18px; letter-spacing:-.022em;}
.lp-related p{margin-top:8px; font-size:15.5px; color:var(--body);}
.lp-related .go{
  display:inline-block; margin-top:14px;
  font-size:14px; font-weight:500; color:var(--accent);
}

/* ---------- FAQ ---------- */
.faq-list{max-width:var(--narrow); margin:44px auto 0; text-align:left;}
.faq-item{border-top:1px solid var(--rule);}
.faq-item:last-child{border-bottom:1px solid var(--rule);}
.faq-item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:flex-start; gap:16px;
  padding:22px 2px; color:var(--ink);
  font-size:19px; font-weight:600; letter-spacing:-.017em; line-height:1.35;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:""; flex:none; margin-left:auto; margin-top:7px;
  width:11px; height:11px;
  border-right:1.6px solid var(--muted); border-bottom:1.6px solid var(--muted);
  transform:rotate(45deg); transition:transform .28s cubic-bezier(.2,.7,.2,1);
}
.faq-item[open] summary::after{transform:rotate(-135deg);}
.faq-item summary:hover{color:var(--accent);}
.faq-item summary:hover::after{border-color:var(--accent);}
.faq-a{padding:0 44px 24px 2px; color:var(--body); font-size:17px;}
.faq-a p + p{margin-top:12px;}
@media(max-width:700px){
  .faq-item summary{font-size:17.5px; padding:19px 2px;}
  .faq-a{padding-right:34px; font-size:16.5px;}
}

/* ---------- final CTA (mirrors index.html) ---------- */
.cta-final{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--bg); text-align:center;
}
.cta-final::before{
  content:"℞"; position:absolute; z-index:0; pointer-events:none;
  font-family:var(--rx); font-weight:400; line-height:1;
  font-size:min(70vw,660px); color:rgba(29,36,43,.035);
  top:52%; left:50%; transform:translate(-50%,-46%);
}
.cta-final .wrap{position:relative; z-index:1;}
.cta-final-brand{
  display:block; margin-bottom:22px;
  color:var(--ink); font-weight:600;
  font-size:clamp(40px,7vw,68px); letter-spacing:-.035em; line-height:1;
}
.cta-final h2{
  font-size:clamp(22px,3.2vw,32px); font-weight:500;
  letter-spacing:-.02em; line-height:1.25;
}
.cta-final .sec-intro{margin-top:16px;}
.cta-final-links{
  display:flex; flex-wrap:nowrap; gap:12px; justify-content:center;
  width:100%; max-width:440px; margin:36px auto 0;
}
.cta-final-links .pill,
.cta-final-links .pill.ghost{
  flex:1 1 0; min-width:0; font-weight:600;
  background:rgba(255,255,255,.06); color:var(--ink);
  border:1px solid rgba(29,36,43,.22);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
}
.cta-final-links .pill:hover,
.cta-final-links .pill.ghost:hover{
  background:rgba(29,36,43,.06); color:var(--ink);
  border-color:rgba(29,36,43,.4);
}
@media(max-width:520px){
  .cta-final-links{flex-direction:column; align-items:stretch; max-width:300px;}
}

/* ---------- footer ---------- */
footer{padding:64px 0 56px; border-top:1px solid var(--rule); font-size:14.5px; color:var(--muted);}
.foot-grid{
  display:grid; grid-template-columns:1.4fr repeat(3, 1fr);
  gap:40px 32px; align-items:start;
}
@media(max-width:820px){ .foot-grid{grid-template-columns:1fr 1fr; gap:36px 28px;} }
@media(max-width:520px){ .foot-grid{grid-template-columns:1fr; gap:32px;} }
.foot-brand .brand{margin:0 0 12px; display:inline-flex;}
.foot-brand p{max-width:42ch; line-height:1.6;}
.foot-col .k{
  display:block; font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-bottom:12px;
}
.foot-col .v{color:var(--ink); line-height:1.55; letter-spacing:-.01em;}
.foot-col .v a{color:var(--ink);}
.foot-col .v a:hover{color:var(--accent);}
.foot-col .v + .v{margin-top:8px;}
.foot-bottom{
  margin-top:48px; padding-top:22px; border-top:1px solid var(--rule-soft);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11px; letter-spacing:.05em; line-height:1.7;
}