/*
Theme Name: austin plumbing
Theme URI: https://simplewebflow.com/
Author: SimpleWebflow
Description: Website for austin plumbing. Built by SimpleWebflow. Everything is in the template — activate it and the site is live, no pages or plugins to set up.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: swf-swf-austin-plumbing-11m7jko
*/

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* The page paints its own ground.
   Every token below defined a --bg and a --text and nothing ever applied them to
   the page, so the ground stayed browser-white whatever the palette or the theme
   said — which is why ten palettes and four styles all looked like variations on
   white. */
body { font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.6;
  background: var(--bg); color: var(--text); }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }

/* ── Tokens ── */
:root {
  --p: #1d4ed8;
  --a: #eff6ff;
  --bg:    #ffffff;
  --bg2:   #f8fafc;
  --bg3:   #f1f5f9;
  --text:  #0f172a;
  --text2: #334155;
  --text3: #64748b;
  --line:  #e2e8f0;
  --card:  #ffffff;
  --radius: 14px;
  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06);
  --shadowL: 0 8px 40px rgba(0,0,0,.1), 0 2px 8px rgba(0,0,0,.06);
}

/* ── Dark theme ── */
[data-theme=dark] {
  --bg:    #09090b;
  --bg2:   #18181b;
  --bg3:   #27272a;
  --text:  #fafafa;
  --text2: #d4d4d8;
  --text3: #a1a1aa;
  --line:  #27272a;
  --card:  #18181b;
  --shadow: 0 1px 3px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.3);
  --shadowL: 0 8px 40px rgba(0,0,0,.5);
}

/* ── Minimal theme ── */
[data-theme=minimal] {
  --p:     #111111;
  --a:     #f5f5f5;
  --bg:    #ffffff;
  --bg2:   #fafafa;
  --bg3:   #f0f0f0;
  --text:  #111111;
  --text2: #444444;
  --text3: #888888;
  --line:  #e0e0e0;
  --card:  #ffffff;
  --radius: 4px;
}
[data-theme=minimal] .nav { border-bottom: 2px solid #111; }
[data-theme=minimal] .hero { background: #fff; }
[data-theme=minimal] .btn-primary { border-radius: 2px; box-shadow: none; }
[data-theme=minimal] .btn-outline { border-radius: 2px; }
[data-theme=minimal] .card { border-radius: 2px; box-shadow: none; border: 1.5px solid #ddd; }
[data-theme=minimal] .step-n { border-radius: 2px; box-shadow: none; }

/* ── Warm theme ── */
[data-theme=warm] {
  --p:     #9a3412;
  --a:     #fef3c7;
  --bg:    #fffbf0;
  --bg2:   #fef3c7;
  --bg3:   #fde68a;
  --text:  #1c1007;
  --text2: #44260e;
  --text3: #7c4d28;
  --line:  #f0d8b0;
  --card:  #fffbf0;
  --radius: 20px;
}
[data-theme=warm] .nav { background: rgba(255,251,240,.95); }
[data-theme=warm] .hero { background: linear-gradient(160deg, #fef3c7 0%, #fffbf0 60%); }

/* ── Photography ── */
.hero-photo { position: relative; isolation: isolate; }
.hero-photo::before {
  content: '';
  position: absolute; inset: 0; z-index: -2;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center;
}
/* Scrim: the copy has to stay legible over an unknown photograph. */
.hero-photo::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  /* Reset explicitly. Any rule that also targets this pseudo-element must not be
     able to turn the scrim back into a shape. */
  width: auto; height: auto; border-radius: 0;
  background: linear-gradient(105deg,
    rgba(255,255,255,.98) 0%,
    rgba(255,255,255,.95) 42%,
    rgba(255,255,255,.82) 70%,
    rgba(255,255,255,.62) 100%);
}
[data-theme=dark] .hero-photo::after {
  background: linear-gradient(105deg,
    rgba(9,9,11,.97) 0%, rgba(9,9,11,.94) 42%,
    rgba(9,9,11,.84) 70%, rgba(9,9,11,.66) 100%);
}
[data-theme=minimal] .hero-photo::after {
  background: linear-gradient(105deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 55%, rgba(255,255,255,.65) 100%);
}
[data-theme=warm] .hero-photo::after {
  background: linear-gradient(105deg, rgba(255,251,240,.97) 0%, rgba(254,243,199,.88) 45%, rgba(254,243,199,.35) 100%);
}
@media (max-width: 820px) {
  /* On a phone the photo sits behind the whole block, so it needs a flat,
     heavier scrim rather than a diagonal one. */
  .hero-photo::after { background: rgba(255,255,255,.90); }
  [data-theme=dark] .hero-photo::after { background: rgba(9,9,11,.90); }
  [data-theme=warm] .hero-photo::after { background: rgba(255,251,240,.92); }
}

.about-img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  max-height: 420px;
  object-fit: cover;
  border-radius: 14px;
  grid-row: span 2;
}
[data-theme=minimal] .about-img { border-radius: 2px; }

.gallery {
  display: grid;
  /* minmax(220px,1fr) collapses to one column below 220px of available width, so
     on a phone three photos stacked full-width and added 900px of scrolling
     before the rest of the page. Two up on a phone, auto-fit above. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
}
@media (min-width: 620px) {
  .gallery { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 32px; }
}
.gfig { position: relative; margin: 0; }
.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
@media (max-width: 619px) {
  /* An odd count leaves a lone half-width photo next to a gap; let it span. */
  .gallery img:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
}
[data-theme=minimal] .gallery img { border-radius: 2px; }
.photo-credit { font-size: .72rem; opacity: .45; margin: 0; }
.photo-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.photo-credit a:hover { opacity: 1; }

/* ── Nav ── */
.nav {
  position: sticky;
  top: 0;
  z-index: 200;
  /* Was a hardcoded translucent white, which on a cream or dark page showed as a
     pale band across the top that belonged to no theme. */
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  padding: 0 32px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
[data-theme=dark] .nav { background: rgba(9,9,11,.92); }
.nav-brand { font-size: 1rem; font-weight: 800; color: var(--text); letter-spacing: -.025em; white-space: nowrap; }
.nav-links { display: flex; gap: 2px; align-items: center; }
.nav-link { font-size: .82rem; font-weight: 500; color: var(--text3); padding: 6px 12px; border-radius: 8px; transition: color .12s, background .12s; white-space: nowrap; }
.nav-link:hover { color: var(--text); background: var(--bg3); }
.nav-cta {
  margin-left: 8px;
  background: var(--p);
  color: #fff !important;
  padding: 9px 18px;
  border-radius: 9px;
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
  transition: opacity .12s, transform .12s;
}
.nav-cta:hover { opacity: .88; transform: translateY(-1px); }

/* ── Hero ── */
.hero {
  background: linear-gradient(150deg, #eff6ff 0%, #fff 50%);
  padding: 88px 24px 72px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
[data-theme=dark] .hero { background: linear-gradient(150deg, #18181b 0%, #09090b 70%); }
/* Decorative glow on plain heroes only. This and the photo scrim were both
   .hero::after, so a photo hero inherited this 700px circle geometry and the
   scrim rendered as a giant disc over the picture rather than covering it. */
.hero:not(.hero-photo)::after {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, #1d4ed8 10%, transparent) 0%, transparent 65%);
  pointer-events: none;
}
.hero-inner { max-width: 760px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: color-mix(in srgb, #1d4ed8 10%, transparent);
  border: 1px solid color-mix(in srgb, #1d4ed8 22%, transparent);
  color: #1d4ed8;
  border-radius: 999px;
  padding: 5px 14px 5px 10px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.hero-tag::before { content: '●'; font-size: .35rem; opacity: .8; }
.hero h1 {
  font-size: clamp(2.8rem, 7vw, 5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--text);
  margin-bottom: 20px;
}
[data-theme=minimal] .hero h1 { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 700; letter-spacing: -.02em; }
[data-theme=warm] .hero h1 { font-family: 'Fraunces', Georgia, serif; font-style: italic; }
.hero-sub { font-size: 1.1rem; color: var(--text2); line-height: 1.75; max-width: 560px; margin: 0 auto 32px; font-weight: 400; }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 48px; }
.btn-primary {
  background: var(--p);
  color: #fff;
  padding: 14px 26px;
  border-radius: var(--radius);
  font-size: .92rem;
  font-weight: 700;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--p) 40%, transparent);
  transition: transform .15s, box-shadow .15s;
  cursor: pointer;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px color-mix(in srgb, var(--p) 50%, transparent); }
.btn-outline {
  background: var(--card);
  color: var(--text);
  padding: 13px 24px;
  border-radius: var(--radius);
  font-size: .92rem;
  font-weight: 600;
  border: 1.5px solid var(--line);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color .15s, color .15s;
  cursor: pointer;
}
.btn-outline:hover { border-color: var(--p); color: var(--p); }

/* Hero stats */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadowL);
  max-width: 640px;
  margin: 0 auto;
}
.hstat { padding: 18px 12px; text-align: center; border-right: 1px solid var(--line); }
.hstat:last-child { border-right: none; }
.hstat-n { font-size: 1.6rem; font-weight: 900; color: var(--p); letter-spacing: -.04em; line-height: 1; display: block; }
.hstat-l { font-size: .68rem; color: var(--text3); font-weight: 500; display: block; margin-top: 4px; }

/* The hero's copy column.
   A real element, not display:contents. As contents, the eyebrow, headline,
   subheading, buttons and stats each became separate items of whatever layout
   the hero used — and a side-by-side hero is a two-column grid, so those five
   pieces got dealt alternately into two columns: the subheading ended up in a
   113px strip one word wide. As a block they travel together and occupy the
   copy column, which is what a two-column hero is for. */
.hero-col { display: block; min-width: 0; }
.hero-frame { display: none; }

/* ── Section layout ── */
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.section { padding: 80px 0; }
.section-tag {
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--p);
  margin-bottom: 10px;
}
.section-h { font-size: clamp(1.75rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -.035em; color: var(--text); line-height: 1.05; margin-bottom: 10px; }
.section-sub { font-size: .97rem; color: var(--text3); line-height: 1.75; max-width: 520px; }
.hd { margin-bottom: 48px; }

/* ── Service cards ── */
#services { background: var(--bg); border-bottom: 1px solid var(--line); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.card:hover { box-shadow: var(--shadowL); transform: translateY(-3px); border-color: color-mix(in srgb, var(--p) 30%, transparent); }
.card-icon {
  width: 46px;
  height: 46px;
  background: color-mix(in srgb, var(--p) 10%, transparent);
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 14px;
}
.card h3 { font-size: .95rem; font-weight: 700; color: var(--text); margin-bottom: 7px; letter-spacing: -.01em; }
.card p { font-size: .84rem; color: var(--text3); line-height: 1.65; }

/* ── Why us ── */
#why { background: var(--bg2); border-bottom: 1px solid var(--line); }
.why-rows { display: flex; flex-direction: column; gap: 1px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--line); }
.why-row {
  display: grid;
  grid-template-columns: 1fr 44px 1fr;
  background: var(--card);
  align-items: center;
  gap: 0;
}
.why-problem, .why-solution { padding: 22px 24px; }
.why-problem { border-right: 1px solid var(--line); }
.why-arrow { text-align: center; font-size: 1.1rem; font-weight: 700; color: var(--p); opacity: .5; }
.tag-bad {
  display: inline-block;
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: #fee2e2;
  color: #991b1b;
  border-radius: 4px;
  padding: 2px 7px;
  margin-bottom: 7px;
}
[data-theme=dark] .tag-bad { background: #450a0a; color: #fca5a5; }
.tag-good {
  display: inline-block;
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--p) 12%, transparent);
  color: var(--p);
  border-radius: 4px;
  padding: 2px 7px;
  margin-bottom: 7px;
}
.why-problem p { font-size: .88rem; color: var(--text3); line-height: 1.6; }
.why-solution p { font-size: .88rem; color: var(--text); line-height: 1.6; font-weight: 500; }

/* ── About ── */
#about { background: var(--bg); border-bottom: 1px solid var(--line); }
.about-grid { display: grid; grid-template-columns: 360px 1fr; gap: 64px; align-items: start; }
.about-sidebar {
  background: color-mix(in srgb, var(--p) 5%, var(--bg2));
  border: 1px solid color-mix(in srgb, var(--p) 15%, transparent);
  border-radius: var(--radius);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: sticky;
  top: 80px;
}
.astat-n { font-size: 2.8rem; font-weight: 900; color: var(--p); letter-spacing: -.05em; line-height: 1; display: block; }
.astat-l { font-size: .78rem; color: var(--text3); font-weight: 500; display: block; margin-top: 3px; }
.astat-divider { height: 1px; background: var(--line); }
.about-text .section-h { font-size: clamp(1.4rem, 3vw, 2rem); }
.about-text p { font-size: .95rem; color: var(--text2); line-height: 1.85; }
.about-text p + p { margin-top: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 13px;
  font-size: .79rem;
  font-weight: 600;
  color: var(--text2);
}

/* ── Process ── */
#process { background: var(--bg2); border-bottom: 1px solid var(--line); }
.steps { display: flex; flex-direction: column; gap: 0; max-width: 660px; margin: 0 auto; position: relative; }
.steps-line {
  position: absolute;
  left: 27px;
  top: 27px;
  bottom: 27px;
  width: 2px;
  background: linear-gradient(to bottom, var(--p), color-mix(in srgb, var(--p) 15%, transparent));
}
.step { display: flex; gap: 22px; align-items: flex-start; padding: 20px 0; position: relative; }
.step-n {
  width: 56px;
  height: 56px;
  min-width: 56px;
  background: var(--p);
  border-radius: 50%;
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--p) 40%, transparent);
  border: 3px solid var(--bg2);
  flex-shrink: 0;
}
.step-content { padding-top: 12px; }
.step-content h3 { font-size: .97rem; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.step-content p { font-size: .87rem; color: var(--text3); line-height: 1.65; }

/* ── CTA band ── */
.cta-band {
  background: var(--p);
  padding: 80px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  top: -150px;
  left: -150px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  pointer-events: none;
}
.cta-band::after {
  content: '';
  position: absolute;
  bottom: -120px;
  right: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  pointer-events: none;
}
.cta-band .section-tag { color: rgba(255,255,255,.55); }
.cta-band h2 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 900; letter-spacing: -.04em; color: #fff; margin-bottom: 14px; line-height: 1.04; position: relative; z-index: 1; }
.cta-band .sub { font-size: 1.05rem; color: rgba(255,255,255,.8); line-height: 1.7; max-width: 500px; margin: 0 auto 36px; position: relative; z-index: 1; }
.cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; }
.btn-white { background: #fff; color: var(--p); padding: 14px 26px; border-radius: var(--radius); font-size: .92rem; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; transition: opacity .12s, transform .12s; cursor: pointer; }
.btn-white:hover { opacity: .93; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: #fff; padding: 13px 24px; border-radius: var(--radius); font-size: .92rem; font-weight: 600; border: 1.5px solid rgba(255,255,255,.35); display: inline-flex; align-items: center; gap: 8px; transition: border-color .15s; cursor: pointer; }
.btn-ghost:hover { border-color: rgba(255,255,255,.8); }

/* ── FAQ ── */
#faq { background: var(--bg); border-bottom: 1px solid var(--line); }
.faq-list { display: flex; flex-direction: column; gap: 8px; max-width: 700px; }
.faq { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .15s; }
.faq[open] { border-color: color-mix(in srgb, var(--p) 30%, transparent); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  transition: background .12s;
}
.faq summary:hover { background: var(--bg2); }
.faq[open] summary { color: var(--p); }
.faq-chevron { font-size: 1.1rem; color: var(--text3); flex-shrink: 0; transition: transform .2s; line-height: 1; }
.faq[open] .faq-chevron { transform: rotate(45deg); color: var(--p); }
.faq-body { padding: 0 20px 18px; }
.faq-body p { font-size: .88rem; color: var(--text3); line-height: 1.75; }

/* ── Contact ── */
#contact { background: var(--bg2); border-bottom: 1px solid var(--line); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.cinfo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.cinfo:last-child { border-bottom: none; }
.cinfo > span { width: 42px; height: 42px; min-width: 42px; border-radius: 10px; background: color-mix(in srgb, var(--p) 10%, transparent); display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.cinfo small { display: block; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text3); margin-bottom: 2px; }
.cinfo strong { font-size: .93rem; color: var(--text); display: block; }
a.cinfo:hover strong { color: var(--p); }
.contact-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.contact-box h3 { font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.contact-box > p { font-size: .87rem; color: var(--text3); line-height: 1.65; margin-bottom: 18px; }
.cta-call { background: var(--p); color: #fff; border-radius: 9px; padding: 13px 18px; font-weight: 700; font-size: .92rem; display: flex; align-items: center; gap: 9px; margin-bottom: 10px; transition: opacity .12s; cursor: pointer; }
.cta-call:hover { opacity: .88; }
.cta-mail { border: 1.5px solid var(--line); border-radius: 9px; padding: 12px 18px; font-weight: 600; font-size: .88rem; color: var(--text); display: flex; align-items: center; gap: 9px; transition: border-color .15s, color .15s; }
.cta-mail:hover { border-color: var(--p); color: var(--p); }
.contact-box .note { font-size: .76rem; color: var(--text3); margin-top: 12px; }

/* The add-a-detail form. Only ever rendered for the owner. */
.cadd { margin-top: 14px; border: 1px dashed var(--line); border-radius: 12px; padding: 14px; background: var(--bg2); }
.cadd-t { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text3); margin-bottom: 9px; }
.cadd-row { display: flex; gap: 8px; flex-wrap: wrap; }
.cadd-row input, .cadd-row select {
  flex: 1 1 140px; min-width: 0; font: inherit; font-size: .9rem; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text);
}
.cadd-row button {
  flex: 0 0 auto; font: inherit; font-size: .9rem; font-weight: 700; padding: 9px 18px;
  border: 0; border-radius: 8px; background: var(--p); color: #fff; cursor: pointer;
}
.cadd-row button[disabled] { opacity: .55; cursor: default; }
.cadd-say { font-size: .8rem; margin-top: 8px; color: var(--text3); }

/* The sections panel. Sits above the edit bar; owner-only. */
.secpanel {
  /* Above the edit bar, not under it. At 430 the bar (500) covered the panel's
     lower rows and swallowed the clicks — the buttons were visible and inert. */
  position: fixed; left: 0; right: 0; bottom: 62px; z-index: 510;
  background: #12161A; color: #F1F5F9; border-top: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 -12px 30px rgba(0,0,0,.28); max-height: 62vh; overflow: auto;
}
.secpanel-in { max-width: 760px; margin: 0 auto; padding: 16px 18px 18px; }
.secpanel-h strong { display: block; font-size: .96rem; }
.secpanel-h span { display: block; font-size: .78rem; color: #9FB0C4; margin: 3px 0 12px; }
.secrow {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; margin-bottom: 7px;
}
.secrow.off { opacity: .62; border-style: dashed; }
.secrow-n { flex: 1 1 auto; font-size: .9rem; font-weight: 600; }
.secrow-t { font-size: .72rem; color: #9FB0C4; }
.secpanel button, .secrow button {
  font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer;
  border-radius: 7px; border: 1px solid rgba(255,255,255,.24);
  background: transparent; color: #F1F5F9; padding: 7px 12px;
}
.secrow button { padding: 5px 10px; }
.secpanel button:hover, .secrow button:hover { border-color: #fff; }
.secpanel button[disabled] { opacity: .4; cursor: default; }
.secpanel-acts { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 12px; }
#secSave { background: #E8613C; border-color: #E8613C; }
.secpanel-say { font-size: .8rem; color: #9FB0C4; }


/* ── Footer ── */
footer { background: #09090b; padding: 52px 24px 28px; border-top: 1px solid rgba(255,255,255,.08); }
.foot-wrap { max-width: 1080px; margin: 0 auto; }
.foot-top { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; padding-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,.1); }
.foot-brand { font-size: 1rem; font-weight: 800; color: #f4f4f5; margin-bottom: 8px; }
.foot-desc { font-size: .82rem; color: #a1a1aa; line-height: 1.6; }
.foot-heading { font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #71717a; margin-bottom: 14px; }
.foot-links { display: flex; flex-direction: column; gap: 10px; }
.foot-links a { font-size: .82rem; color: #a1a1aa; transition: color .12s; }
.foot-links a:hover { color: #e4e4e7; }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; flex-wrap: wrap; gap: 10px; }
.foot-bottom p { font-size: .77rem; color: #71717a; }
.foot-bottom a { color: #71717a; transition: color .12s; }
.foot-bottom a:hover { color: #a1a1aa; }
.foot-bottom strong { color: #a1a1aa; }

/* ── Responsive ── */
@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-sidebar { position: static; flex-direction: row; flex-wrap: wrap; gap: 20px 36px; }
  .astat-divider { display: none; }
  .foot-top { grid-template-columns: 1fr 1fr; }
}
/* The nav links go before the layout breaks, not after.
   They were only dropped below 680px, so a tablet at 768 still rendered all six
   and the row came to about 900px — twenty pixels of sideways scroll on every
   site, at the one width nobody tests. Measured: brand and button alone need
   roughly 330px, the links about 570, so they cannot share a row under ~950. */
@media (max-width: 980px) {
  .nav-links .nav-link { display: none; }
}
@media (max-width: 680px) {
  .nav { padding: 0 16px; }
  /* The brand and the button together were wider than a phone, so the page
     scrolled sideways by a few pixels — enough to feel broken and not enough to
     see why. Both are allowed to give now. */
  .nav { gap: 10px; }
  .nav-brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-links { flex: 0 0 auto; }
  .nav-cta { padding: 9px 14px; font-size: .82rem; white-space: nowrap; }
  .hero { padding: 60px 18px 56px; }
  .hero-stats { grid-template-columns: repeat(2,1fr); }
  .hstat:nth-child(2) { border-right: none; }
  .hstat:nth-child(3) { border-top: 1px solid var(--line); }
  .why-row { grid-template-columns: 1fr; }
  .why-arrow { display: none; }
  .why-problem { border-right: none; border-bottom: 1px solid var(--line); }
  .contact-grid { grid-template-columns: 1fr; }
  .foot-top { grid-template-columns: 1fr; }
}

/* ── Generated design ─────────────────────────────────────────────────────
   Emitted last so it overrides the base layout, while the theme blocks above
   keep control of ink and paper — which is what lets a visitor switch theme
   without losing this site's own type, shapes and layout. */
/* Generated design: grotesque type, trust palette, split hero,
   list services, sharp shapes, grain accent. Seed 3666911483. */
:root{
  --d-display:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --d-body:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --d-display-weight:800;
  --d-tracking:-.035em;
  --d-case:none;
  --d-r:2px;
  --d-r-sm:0px;
  --d-pill:3px;
  --d-primary:#1D4ED8;
  --d-accent:#3B82F6;
  --d-soft:#E8EFFB;
}

/* The page's own colour, at last.
   Every palette carried an ink and a paper and neither was ever used: only the
   accents were wired up, so all ten palettes rendered on the same white page and
   the variety was mostly invisible. Scoped to the default style rather than
   :root, because Dark, Minimal and Warm are deliberate choices a visitor makes
   and must still win — this sets what they are choosing away from. */
[data-theme=light]{
  --bg:#F7F9FC;
  --bg2:#f0f4fc;
  --bg3:#E8EFFB;
  --text:#0E1726;
  --text2:#4f5662;
  --text3:#838891;
  --line:#cdd0d5;
  --card:#fbfcfe;
  /* The brand colours too. These are set from the brief further up, which is how
     a forest-and-cream page ended up with an emerald button and emerald numerals
     sitting on it — the palette dressed the page and the buttons kept a colour
     chosen somewhere else entirely. */
  --p:#1D4ED8;
  --a:#3B82F6;
}
body{font-family:var(--d-body)}
h1,h2,h3,.nav-brand{font-family:var(--d-display);letter-spacing:var(--d-tracking)}
h1,h2{font-weight:var(--d-display-weight)}
h1{text-transform:var(--d-case)}
.card,.why-row,.step,.faq,.cinfo,.nav-cta,.btn,button,input,textarea{border-radius:var(--d-r)}
.hero-tag,.tag-bad,.tag-good,.chip{border-radius:var(--d-pill)}
.card-icon{border-radius:var(--d-r-sm)}

/* Hero: split */


@media(min-width:900px){.hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;text-align:left}}

/* Services: list */
.cards{display:flex;flex-direction:column;gap:0}
/* Explicit placement. A card holds three children — icon, title, description —
   and a bare two-column grid put the icon in column one, the title in column two,
   then wrapped the description onto the next row under the icon. The title ended
   up floated far right with its text orphaned below. */
.card{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;
  column-gap:18px;row-gap:4px;align-items:start;
  border-radius:0;border:0;border-top:1px solid var(--line,rgba(0,0,0,.12));
  padding:22px 4px;background:transparent}
.card .card-icon{grid-column:1;grid-row:1 / span 2}
.card h3{grid-column:2;grid-row:1;text-align:left}
.card p{grid-column:2;grid-row:2;text-align:left}
.card:last-child{border-bottom:1px solid var(--line,rgba(0,0,0,.12))}

/* Accent: grain */
/* ::before, not ::after. The photo scrim lives on .hero-photo::after and
     this stylesheet is emitted last, so using ::after here silently deleted the
     scrim and left the copy sitting on bare photograph. */
.hero{position:relative}
.hero:not(.hero-photo)::before{content:'';position:absolute;inset:0;pointer-events:none;
  opacity:.05;z-index:0;
  background-image:radial-gradient(currentColor 1px,transparent 1px);background-size:5px 5px}
.hero-inner{position:relative;z-index:1}