:root {
  --local-ink: #143b37;
  --local-deep: #123c38;
  --local-mint: #bddbd2;
  --local-cream: #f7f7f1;
  --local-soft: #edf5f2;
  --local-line: rgba(19, 59, 55, .15);
}

.local-page {
  overflow-x: clip;
  overflow-y: auto;
  min-height: 100vh;
  color: var(--local-ink);
  background: var(--local-cream);
}

.plain-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 25px clamp(22px, 5vw, 76px);
  color: var(--local-ink);
  background: var(--local-cream);
}

.plain-header .brand { font-size: clamp(18px, 1.7vw, 23px); }

.plain-header__back {
  position: relative;
  font-size: 14px;
  font-weight: 620;
}

.plain-header__back::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -5px;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
}

.plain-header__back:hover::after,
.plain-header__back:focus-visible::after { transform: scaleX(1); transform-origin: left; }

.local-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(230px, .8fr);
  gap: clamp(40px, 9vw, 150px);
  align-items: end;
  min-height: min(72vh, 780px);
  padding: clamp(80px, 11vw, 165px) clamp(24px, 8vw, 118px) clamp(72px, 8vw, 115px);
  overflow: hidden;
  color: white;
  background: linear-gradient(128deg, #0d302e 0%, #174d46 52%, #84aa9f 125%);
}

.local-hero::before {
  content: "";
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(circle at 70% 40%, rgba(232, 250, 244, .26), transparent 25%),
    repeating-linear-gradient(112deg, transparent 0 54px, rgba(224, 247, 239, .06) 55px 56px);
  pointer-events: none;
}

.local-hero__copy,
.hero-marker { position: relative; z-index: 1; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
  color: rgba(240, 255, 250, .72);
  font-size: 13px;
}

.crumbs a { text-decoration: underline; text-underline-offset: 3px; }

.local-kicker {
  margin: 0 0 19px;
  color: #c9e9de;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.local-hero h1,
.local-section h2,
.local-page-footer h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.055em;
}

.local-hero h1 {
  max-width: 830px;
  font-size: clamp(52px, 6.6vw, 102px);
  line-height: .89;
}

.local-hero__lede {
  max-width: 680px;
  margin: 30px 0 0;
  color: rgba(246, 255, 252, .79);
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.65;
}

.hero-marker {
  min-height: 300px;
  border: 1px solid rgba(232, 255, 247, .22);
  border-radius: 22px;
  background: rgba(220, 246, 237, .07);
  box-shadow: inset 0 0 0 1px rgba(233, 254, 247, .04);
}

.hero-marker::before,
.hero-marker::after,
.hero-marker span { content: ""; position: absolute; display: block; }

.marker--web::before {
  inset: 14% 12%;
  border: 1px solid rgba(238, 255, 248, .68);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(224, 250, 241, .14), transparent);
}

.marker--web::after {
  width: 42%;
  height: 8px;
  top: 31%;
  left: 24%;
  border-radius: 99px;
  background: #d9f1e8;
  box-shadow: 0 32px 0 rgba(218, 244, 234, .52), 0 64px 0 rgba(218, 244, 234, .28);
}

.marker--seo::before {
  inset: 17%;
  border: 1px dashed rgba(237, 255, 249, .52);
  border-radius: 50%;
}

.marker--seo::after {
  width: 42%;
  aspect-ratio: 1;
  top: 29%;
  left: 29%;
  border: 2px solid #d9f3e9;
  border-radius: 50% 50% 50% 8%;
  transform: rotate(-45deg);
}

.marker--seo span {
  width: 21px;
  height: 21px;
  top: 42%;
  left: 43%;
  border-radius: 50%;
  background: #d9f3e9;
}

.marker--gbp::before {
  inset: 16% 13%;
  border: 1px solid rgba(238, 255, 248, .55);
  clip-path: polygon(1% 24%, 15% 29%, 23% 20%, 37% 24%, 48% 18%, 62% 23%, 75% 20%, 91% 31%, 97% 46%, 89% 55%, 94% 66%, 82% 74%, 72% 68%, 63% 82%, 51% 78%, 43% 89%, 37% 74%, 25% 71%, 16% 78%, 7% 62%, 2% 50%);
  background: radial-gradient(circle, rgba(221, 248, 239, .62) 0 1px, transparent 1.5px) 0 0 / 12px 12px;
}

.marker--gbp::after {
  width: 30%;
  aspect-ratio: .74;
  top: 32%;
  left: 36%;
  border-radius: 52% 48% 50% 50%;
  background: #d9f3e9;
  clip-path: polygon(50% 0, 87% 14%, 100% 49%, 50% 100%, 0 49%, 13% 14%);
}

.marker--gbp span {
  width: 16px;
  height: 16px;
  top: 43%;
  left: calc(51% - 8px);
  border-radius: 50%;
  background: #286158;
}

.marker--reviews::before {
  inset: 18% 13%;
  border: 1px solid rgba(238, 255, 248, .56);
  border-radius: 20px 20px 20px 4px;
}

.marker--reviews::after {
  width: 50%;
  height: 18%;
  top: 37%;
  left: 25%;
  background: #d9f3e9;
  clip-path: polygon(50% 0, 61% 34%, 98% 38%, 69% 61%, 78% 100%, 50% 77%, 22% 100%, 31% 61%, 2% 38%, 39% 34%);
}

.marker--reviews span {
  width: 34%;
  height: 4px;
  top: 66%;
  left: 33%;
  border-radius: 20px;
  background: rgba(220, 245, 237, .52);
}

.local-shell {
  width: min(100% - 48px, 1240px);
  margin: 0 auto;
}

.local-section { padding: clamp(76px, 10vw, 140px) 0; }
.local-section--white { background: white; }
.local-section--soft { background: var(--local-soft); }
.local-section--ink { color: white; background: var(--local-deep); }

.local-section h2 {
  max-width: 780px;
  font-size: clamp(43px, 5.2vw, 77px);
  line-height: .92;
}

.local-section__intro {
  max-width: 740px;
  margin: 23px 0 0;
  color: #4a6963;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.7;
}

.local-section--ink .local-section__intro { color: rgba(237, 255, 248, .76); }

.citation-summary {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(30px, 7vw, 100px);
  align-items: start;
}

.citation-summary__label {
  margin: 8px 0 0;
  color: #5c827b;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.citation-summary__answer {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(31px, 3.5vw, 52px);
  line-height: 1.04;
  letter-spacing: -.045em;
}

.local-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(60px, 8vw, 110px);
  border-top: 1px solid var(--local-line);
  border-bottom: 1px solid var(--local-line);
}

.local-facts div { min-height: 176px; padding: 27px 28px 28px 0; border-right: 1px solid var(--local-line); }
.local-facts div + div { padding-left: 28px; }
.local-facts div:last-child { border-right: 0; }
.local-facts dt { color: #5a7d76; font-size: 13px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.local-facts dd { margin: 28px 0 0; font-family: var(--serif); font-size: clamp(26px, 2.8vw, 41px); line-height: .96; letter-spacing: -.045em; }

.local-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: clamp(46px, 6vw, 82px);
}

.local-card {
  min-height: 255px;
  padding: 27px;
  border: 1px solid var(--local-line);
  border-radius: 14px;
  background: white;
}

.local-card__number { color: #6d968c; font-size: 13px; font-weight: 750; letter-spacing: .1em; }
.local-card h3 { margin: 53px 0 15px; font-family: var(--serif); font-size: clamp(27px, 2.4vw, 37px); font-weight: 400; line-height: .96; letter-spacing: -.045em; }
.local-card p { margin: 0; color: #58756f; font-size: 16px; line-height: 1.65; }

.local-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 8vw, 128px);
  align-items: start;
}

.local-split__large {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(33px, 3.8vw, 58px);
  line-height: 1.02;
  letter-spacing: -.05em;
}

.local-copy p,
.local-copy li { color: #4e6c66; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.75; }
.local-copy p { margin: 0; }
.local-copy p + p { margin-top: 21px; }
.local-copy ul { margin: 27px 0 0; padding-left: 20px; }
.local-copy li + li { margin-top: 9px; }

.query-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(225, 249, 240, .2); }
.query-list li { display: grid; grid-template-columns: 50px 1fr; gap: 18px; padding: 22px 0; border-bottom: 1px solid rgba(225, 249, 240, .2); color: rgba(242, 255, 249, .85); font-size: 17px; line-height: 1.5; }
.query-list strong { color: #bfe4d8; font-family: var(--serif); font-size: 29px; font-weight: 400; }

.local-faq { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(36px, 8vw, 120px); }
.local-faq__intro { max-width: 410px; }
.local-faq details { border-top: 1px solid var(--local-line); }
.local-faq details:last-child { border-bottom: 1px solid var(--local-line); }
.local-faq summary { display: flex; justify-content: space-between; gap: 25px; padding: 23px 0; cursor: pointer; list-style: none; font-family: var(--serif); font-size: clamp(23px, 2.1vw, 32px); line-height: 1.05; letter-spacing: -.035em; }
.local-faq summary::-webkit-details-marker { display: none; }
.local-faq summary::after { content: "+"; color: #6e968d; font-family: var(--sans); font-size: 24px; font-weight: 300; }
.local-faq details[open] summary::after { content: "−"; }
.local-faq p { max-width: 690px; margin: 0 0 25px; color: #52716a; font-size: 17px; line-height: 1.7; }

.page-contact { padding: clamp(74px, 9vw, 125px) 0; color: white; background: linear-gradient(120deg, #103a36, #316a61 64%, #8ab6a9); }
.page-contact__layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(42px, 8vw, 130px); align-items: start; }
.page-contact h2 { margin: 0; font-family: var(--serif); font-size: clamp(48px, 5.5vw, 82px); font-weight: 400; line-height: .9; letter-spacing: -.055em; }
.page-contact__copy { margin: 28px 0 0; color: rgba(243, 255, 250, .77); font-size: 18px; line-height: 1.7; }
.page-contact .contact-form { max-width: none; }

.local-page-footer { padding: 55px 0 60px; background: #f7faf8; }
.local-page-footer__grid { display: grid; grid-template-columns: .85fr 1.35fr; gap: clamp(38px, 8vw, 130px); }
.local-page-footer .brand { color: var(--local-ink); }
.local-page-footer p { max-width: 360px; margin: 19px 0 0; color: #5d7873; font-size: 16px; line-height: 1.6; }
.local-link-columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; }
.local-link-columns h2 { margin: 0 0 18px; font-family: var(--sans); font-size: 13px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.local-link-columns a { display: block; width: fit-content; margin: 0 0 12px; color: #456962; font-size: 15px; line-height: 1.4; text-decoration: underline; text-decoration-color: rgba(69, 105, 98, .3); text-underline-offset: 4px; }
.local-link-columns a:hover,.local-link-columns a:focus-visible { color: #143b37; text-decoration-color: currentColor; }

.page--lubbock-web .local-hero { background: linear-gradient(128deg, #0e302e, #1d5c53 57%, #9fc5ba); }
.page--tampa-web .local-hero { grid-template-columns: 1fr; min-height: 660px; text-align: center; background: linear-gradient(143deg, #174943, #416f64 54%, #b4d3ca); }
.page--tampa-web .local-hero__copy { max-width: 960px; margin: 0 auto; }
.page--tampa-web .local-hero__lede { margin-right: auto; margin-left: auto; }
.page--tampa-web .hero-marker { width: min(620px, 80%); min-height: 135px; margin: 20px auto 0; }
.page--tampa-web .marker--web::before { inset: 18% 9%; }
.page--tampa-web .marker--web::after { top: 35%; }
.page--lubbock-seo .local-hero { background: linear-gradient(130deg, #123c38, #3c7167 60%, #b0d0c7); }
.page--tampa-seo .local-hero { background: linear-gradient(130deg, #153c42, #346d70 58%, #9bc2bc); }
.page--lubbock-gbp .local-hero { color: var(--local-ink); background: linear-gradient(128deg, #ebf4f0, #d5e9e1 60%, #9ac6b8); }
.page--lubbock-gbp .crumbs,.page--lubbock-gbp .local-hero__lede { color: rgba(20,59,55,.7); }
.page--lubbock-gbp .local-kicker { color: #3d756b; }
.page--lubbock-gbp .hero-marker { border-color: rgba(20,59,55,.2); background: rgba(255,255,255,.28); }
.page--lubbock-gbp .marker--gbp::before { border-color: rgba(20,59,55,.45); }
.page--tampa-gbp .local-hero { background: linear-gradient(129deg, #0f3838, #235955 57%, #8bb7aa); }
.page--lubbock-reviews .local-hero { background: linear-gradient(135deg, #173d3b, #255f56 53%, #a1c6b9); }
.page--tampa-reviews .local-hero { background: linear-gradient(135deg, #1c4a48, #4a8176 55%, #c0d9d2); }

@media (max-width: 860px) {
  .local-hero,
  .citation-summary,
  .local-split,
  .local-faq,
  .page-contact__layout,
  .local-page-footer__grid { grid-template-columns: 1fr; }
  .local-hero { min-height: 0; }
  .hero-marker { min-height: 220px; max-width: 520px; width: 100%; }
  .local-facts,
  .local-grid { grid-template-columns: 1fr; }
  .local-facts div,.local-facts div + div { min-height: 0; padding: 22px 0; border-right: 0; border-bottom: 1px solid var(--local-line); }
  .local-facts div:last-child { border-bottom: 0; }
  .local-faq__intro { max-width: none; }
}

@media (max-width: 560px) {
  .plain-header { padding: 20px; }
  .plain-header .brand span:last-child { display: none; }
  .local-shell { width: min(100% - 36px, 1240px); }
  .local-hero { padding: 70px 18px 62px; }
  .local-hero h1 { font-size: clamp(47px, 13vw, 65px); }
  .local-hero__lede { font-size: 17px; }
  .local-section__intro,.local-copy p,.local-copy li { font-size: 16px; }
  .local-link-columns { grid-template-columns: 1fr; }
  .hero-marker { min-height: 185px; }
}
