/* ============================================================
   RAW STUDIO — SEO / CONTENT COMPONENTS
   Added for the search-optimisation build. Uses the same tokens
   as style.css, so the look is unchanged — these are only the
   new blocks (long-form copy, service cards, FAQ, breadcrumbs).
   ============================================================ */

.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;}

/* ---------- long-form copy ---------- */
.seo-section{padding:96px 0;}
.seo-section + .seo-section{padding-top:0;}
@media (max-width:760px){.seo-section{padding:64px 0;}}

.seo-prose{max-width:74ch;}
.seo-prose p{color:var(--text-dim); font-size:16px; line-height:1.75; margin-bottom:20px;}
.seo-prose p strong{color:var(--text); font-weight:600;}
.seo-prose h2{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.01em;
  font-size:clamp(22px,2.4vw,30px); line-height:1.1; margin:40px 0 16px; color:var(--text);
}
.seo-prose h3{font-family:var(--display); text-transform:uppercase; font-size:19px; margin:30px 0 10px;}
.seo-prose a{color:var(--text); border-bottom:1px solid var(--red); padding-bottom:1px; transition:color .15s ease;}
.seo-prose a:hover{color:var(--red);}
.seo-prose ul{padding-left:20px; margin-bottom:20px;}
.seo-prose li{color:var(--text-dim); font-size:16px; line-height:1.7; margin-bottom:8px;}

/* ---------- landing page hero ---------- */
.lp-hero{padding:160px 0 70px; position:relative;}
@media (max-width:760px){.lp-hero{padding:120px 0 50px;}}
.lp-hero .section-title{font-size:clamp(40px,7.4vw,96px); line-height:.94;}
.lp-hero .hero-sub{margin-top:26px;}

/* ---------- breadcrumbs ---------- */
.breadcrumb{padding-top:112px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint);}
.breadcrumb a{color:var(--text-faint); transition:color .15s ease;}
.breadcrumb a:hover{color:var(--red);}
.breadcrumb .sep{opacity:.45; margin:0 2px;}
.breadcrumb [aria-current]{color:var(--text-dim);}
.breadcrumb + .lp-hero{padding-top:34px;}
@media (max-width:760px){.breadcrumb{padding-top:96px;} .breadcrumb + .lp-hero{padding-top:26px;}}

/* ---------- service / link cards ---------- */
.link-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line); margin-top:52px;
}
.link-card{
  background:var(--bg); padding:34px 28px 30px; display:flex; flex-direction:column; gap:10px;
  transition:background .25s ease, transform .25s ease; position:relative;
}
.link-card:hover{background:var(--bg-card); transform:translateY(-2px);}
.link-card .lc-num{font-family:var(--mono); font-size:11px; color:var(--red); letter-spacing:.12em;}
.link-card h3{font-family:var(--display); text-transform:uppercase; font-size:19px; line-height:1.12; letter-spacing:.01em;}
.link-card p{color:var(--text-dim); font-size:14px; line-height:1.6;}
.link-card .lc-go{margin-top:auto; padding-top:14px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); transition:color .2s ease;}
.link-card:hover .lc-go{color:var(--amber);}

/* ---------- areas served ---------- */
.area-tags{list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin-top:46px; padding:0;}
.area-tags li{
  border:1px solid var(--line); padding:9px 16px; font-family:var(--mono);
  font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim);
  transition:border-color .2s ease, color .2s ease;
}
.area-tags li:hover{border-color:var(--red); color:var(--text);}

/* ---------- FAQ ---------- */
.faq-section{padding:96px 0;}
@media (max-width:760px){.faq-section{padding:64px 0;}}
.faq{border-top:1px solid var(--line); margin-top:46px; max-width:900px;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{
  list-style:none; cursor:pointer; padding:24px 44px 24px 0; position:relative;
  transition:color .2s ease;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary h3{
  display:inline; font-family:var(--body); font-weight:600; font-size:16.5px;
  letter-spacing:0; text-transform:none; line-height:1.5; color:var(--text);
}
.faq-item summary::after{
  content:"+"; position:absolute; right:6px; top:22px; font-family:var(--mono);
  font-size:20px; color:var(--red); transition:transform .25s ease;
}
.faq-item[open] summary::after{content:"\2013";}
.faq-item summary:hover h3{color:var(--red);}
.faq-a{padding:0 44px 26px 0;}
.faq-a p{color:var(--text-dim); font-size:15px; line-height:1.75; max-width:70ch;}

/* ---------- closing CTA band ---------- */
.cta-band{padding:0 0 110px;}
@media (max-width:760px){.cta-band{padding-bottom:76px;}}
.cta-inner{border:1px solid var(--line-strong); padding:70px 40px; text-align:center;}
.cta-inner .section-title{margin:0 auto 18px; max-width:18ch;}
.cta-inner p{color:var(--text-dim); font-size:15.5px; max-width:52ch; margin:0 auto 30px;}
@media (max-width:600px){.cta-inner{padding:48px 22px;}}

/* ---------- footer additions ---------- */
.footer-grid{grid-template-columns:1.5fr 1fr 1.2fr 1fr;}
@media (max-width:1000px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr;}}
.footer-blurb{color:var(--text-dim); font-size:13.5px; line-height:1.65; margin-top:16px; max-width:330px;}
.footer-addr{display:block; color:var(--text-faint); font-size:13px; padding:10px 0 0;}