/* ============================================================================
   Beast-Mode Builders — site stylesheet
   ----------------------------------------------------------------------------
   Single source of truth for the whole site. All design tokens live in the one
   :root block directly below; nothing else should declare a custom property.

   Structure, in cascade order:
     1.  Tokens (:root)
     2.  Base elements and layout primitives
     3.  Header and navigation
     4.  Buttons, links, section furniture
     5.  Cards, grids and portfolio components
     6.  Before/after comparison sliders
     7.  Forms and the estimate flow
     8.  Homepage hero
     9.  Footer and lightbox
     10. Motion system
     11. Responsive overrides (widest breakpoint first)

   Later rules intentionally override earlier ones in a few places; source order
   is load-bearing, so add new rules at the end of the relevant section rather
   than reordering what is already here.
   ============================================================================ */

:root {
  /* Surfaces */
  --bg: #0a0a0b;
  --bg-soft: #141416;
  --panel: #18191c;

  /* Lines */
  --line: #2b2c31;
  --line-2: #3a3b42;

  /* Text */
  --text: #ffffff;
  --muted: #b7b9c0;

  /* Brand orange */
  --orange: #f26a1b;
  --orange-2: #ff7a22;
  --orange-deep: #d2530c;
  --orange-glow: rgba(242, 106, 27, .35);
  --orange-line: rgba(242, 106, 27, .42);

  /* Type */
  --display-font: "Anton", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --heading-font: "Oswald", "Arial Narrow", sans-serif;
  --body-font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Metrics */
  --radius: 12px;
  --container: 1200px;
  --shadow: 0 12px 34px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: min(var(--container), calc(100% - 2rem)); margin: 0 auto; }
.skip-link { position: absolute; left: -999px; top: 10px; background: var(--orange); color: #111; padding: .75rem 1rem; border-radius: 999px; z-index: 9999; }
.skip-link:focus { left: 10px; }
.footer-socials a:hover { color: var(--orange); }
.site-header { position: sticky; top: 0; z-index: 30; backdrop-filter: blur(14px); background: rgba(10,10,12,.88); border-bottom: 1px solid rgba(255,255,255,.06); }
.nav-wrap { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding: .85rem 0; }
.brand img { width: 180px; height: auto; }
.site-nav { display:flex; align-items:center; gap:1.25rem; }
.site-nav ul { list-style:none; display:flex; gap:1.1rem; padding:0; margin:0; align-items:center; }
.site-nav a { color: var(--muted); font-weight:600; display:inline-flex; align-items:center; min-height:44px; }
.site-nav a:hover, .site-nav a.active { color: #fff; }
.nav-cta { margin-left:.5rem; }
.nav-toggle { display:none; background:none; border:1px solid var(--line); border-radius:14px; padding:.7rem; cursor:pointer; }
.nav-toggle span { display:block; width:22px; height:2px; background:#fff; margin:4px 0; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.95rem 1.3rem; font-weight:700; border-radius: 999px; border:1px solid transparent; transition:.2s ease; cursor:pointer; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: linear-gradient(180deg, var(--orange-2), var(--orange)); color:#111; box-shadow: 0 10px 24px rgba(255,122,0,.25); }
.btn-secondary { background: rgba(255,255,255,.02); color:#fff; border-color: var(--line); }
.text-link { color: var(--orange-2); font-weight: 700; }
.eyebrow { text-transform: uppercase; letter-spacing: .16em; color: var(--orange-2); font-size: .78rem; font-weight: 800; margin-bottom: .8rem; }
h1,h2,h3 { line-height:1.15; margin:0 0 1rem; }
h1 { font-size: clamp(2.5rem, 5vw, 5rem); max-width: 12ch; }
h2 { font-size: clamp(1.8rem, 3vw, 3rem); }
h3 { font-size: 1.18rem; }
p { color: var(--muted); margin-top:0; }
.hero-copy { max-width: 40rem; font-size: 1.08rem; }
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; margin: 2rem 0 2.25rem; }
.section { padding: 5rem 0; }
.section-dark { background: #111114; position:relative; }
.section-heading { display:flex; gap:1rem; justify-content:space-between; align-items:end; margin-bottom: 2rem; }
.split-grid { display:grid; grid-template-columns: 1.1fr .9fr; gap:2rem; align-items:start; }
.info-cards { display:grid; gap:1rem; }
.info-card, .service-card, .feed-card, .review-card, .article-card, .form-shell { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); }
.service-grid, .project-grid, .ba-grid, .review-grid, .article-grid { display:grid; gap:1.25rem; }
.service-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.service-card { min-height: 210px; }
.service-num { font-size: .85rem; color: var(--orange-2); font-weight: 800; letter-spacing: .16em; }
.feed-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:1rem; }
.feed-card .tag, .article-card .tag { display:inline-block; background: rgba(255,122,0,.12); color:var(--orange-2); border:1px solid rgba(255,122,0,.25); padding:.25rem .6rem; border-radius:999px; font-size:.8rem; font-weight:700; margin-bottom:.8rem; }
.feed-card a, .article-card a { color:#fff; font-weight:700; }
.project-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
.project-grid-full { grid-template-columns: repeat(3, minmax(0,1fr)); }
.project-card, .ba-card { background: #131316; border:1px solid var(--line); border-radius: 20px; overflow:hidden; }
.project-card img { aspect-ratio: 4/3; object-fit: cover; width:100%; }
.project-copy { padding: 1rem; }
.section-before-after { background: linear-gradient(180deg, #0e0e11, #17171a); }
.ba-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.ba-card h3 { padding: .4rem 1rem 1rem; }
.testimonials-wrap { display:grid; gap:1rem; }
.filter-bar button { background: rgba(255,255,255,.04); color:#fff; border:1px solid var(--line); border-radius:999px; padding: .7rem 1rem; cursor:pointer; font-weight:700; }
.filter-bar button:hover, .filter-bar button.active { background: rgba(255,122,0,.14); border-color: rgba(255,122,0,.35); color:#fff; }
.cta-panel { padding: 0 0 5rem; }
.cta-panel-inner { background: linear-gradient(135deg, rgba(255,122,0,.22), rgba(255,255,255,.03)); border:1px solid rgba(255,122,0,.25); border-radius: 28px; padding: 2rem; display:flex; align-items:center; justify-content:space-between; gap:2rem; box-shadow: var(--shadow); }
.cta-actions { display:flex; gap:1rem; flex-wrap:wrap; }
.site-footer { position:relative; padding-top: 4rem; background: #09090a; overflow:hidden; }
.texture-layer { position:absolute; inset:0; background: url('../images/texture-bg.webp') center/cover no-repeat; opacity: .12; pointer-events:none; }
.footer-grid { position:relative; display:grid; grid-template-columns: 1.3fr .8fr .9fr .9fr; gap:2rem; }
.site-footer h3 { margin-bottom:.8rem; }
.site-footer ul { list-style:none; padding:0; margin:0; display:grid; gap:.45rem; }
.footer-socials { display:flex; gap:1rem; flex-wrap:wrap; }
.footer-bottom { position:relative; display:flex; justify-content:space-between; gap:1rem; padding: 1.4rem 0 2rem; border-top:1px solid rgba(255,255,255,.08); margin-top:2rem; }
.page-hero { padding: 6rem 0 4rem; position:relative; overflow:hidden; }
.texture-bg::before { content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.78), rgba(0,0,0,.58)), url('../images/texture-bg.webp') center/cover no-repeat; z-index:0; }
.page-hero .container { position:relative; z-index:1; }
.page-hero h1 { max-width: 14ch; }
.service-detail-grid { display:grid; gap:2rem; }
.service-detail { display:grid; grid-template-columns: .95fr 1.05fr; gap:1.5rem; align-items:center; }
.service-detail.reverse { grid-template-columns: 1.05fr .95fr; }
.service-detail.reverse img { order:2; }
.service-detail img { border-radius: 22px; border:1px solid var(--line); }
.service-detail-media { box-shadow: var(--shadow); }
.service-detail ul, .prose ul { color: var(--muted); padding-left: 1.2rem; }
.process-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:1rem; }
.process-grid article { background: rgba(255,255,255,.04); border:1px solid var(--line); padding:1.25rem; border-radius:20px; }
.process-grid span { color: var(--orange-2); font-weight:800; letter-spacing:.18em; }
.filter-bar { display:flex; gap:.75rem; flex-wrap:wrap; margin-bottom: 1.5rem; }
.filter-grid > [data-category].hidden { display:none; }
.review-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.review-card .stars { color: var(--orange-2); letter-spacing:.15em; margin-bottom:.75rem; }
.article-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.prose { max-width: 900px; }
.contact-grid { display:grid; grid-template-columns: .9fr 1.1fr; gap:2rem; align-items:start; }
.contact-list { list-style:none; padding:0; margin:1rem 0 1.5rem; display:grid; gap:.65rem; }
.contact-form { display:grid; gap:1rem; }
.form-row { display:grid; gap:.45rem; }
.form-two { grid-template-columns: repeat(2, minmax(0,1fr)); gap:1rem; }
label { font-weight: 700; color:#fff; }
input, select, textarea { width:100%; padding: .9rem 1rem; border-radius: 14px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.25); color:#fff; font: inherit; }
input::placeholder, textarea::placeholder { color:#a7a7ad; }
input:focus, select:focus, textarea:focus { outline:2px solid rgba(255,122,0,.45); border-color: rgba(255,122,0,.45); }
.hp { position:absolute !important; left:-9999px !important; }
.social-pills { display:flex; gap:.75rem; flex-wrap:wrap; }
.social-pills a { background: rgba(255,255,255,.04); border:1px solid var(--line); padding:.6rem .9rem; border-radius:999px; }
@media (max-width: 1100px) {
  .project-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .project-grid-full, .review-grid, .article-grid, .service-grid, .feed-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer-grid, .split-grid, .contact-grid, .service-detail, .service-detail.reverse, .process-grid { grid-template-columns: 1fr 1fr; }
  .service-detail.reverse img { order:0; }
}
@media (max-width: 860px) {
    .nav-toggle { display:block; }
  .site-nav { position: absolute; left: 1rem; right: 1rem; top: calc(100% + .75rem); display:none; flex-direction:column; align-items:stretch; background: #121216; border:1px solid var(--line); border-radius: 20px; padding: 1rem; }
  .site-nav.open { display:flex; }
  .site-nav ul { flex-direction:column; align-items:stretch; }
  .nav-cta { margin-left:0; text-align:center; }
      .service-grid,
.project-grid,
.project-grid-full,
.review-grid,
.article-grid,
.feed-grid,
.ba-grid,
.split-grid,
.footer-grid,
.contact-grid,
.service-detail,
.service-detail.reverse,
.process-grid,
.form-two { grid-template-columns: 1fr; }
  .section-heading, .cta-panel-inner, .footer-bottom { flex-direction:column; align-items:flex-start; }
  h1 { max-width: 9.5ch; }
}
@media (max-width: 560px) {
  .container { width: min(var(--container), calc(100% - 1rem)); }
  .brand img { width: 150px; }
    .section { padding: 4rem 0; }
  .page-hero { padding: 4.5rem 0 3rem; }
}

/* v1.1 fixes and component upgrades */
.brand { flex: 0 0 auto; display:flex; align-items:center; }
.brand img { width: 184px; height: auto; object-fit: contain; }
.site-footer img { height:auto; object-fit:contain; }

.service-detail-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: #0f0f11;
}
.service-detail-media img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  border: 0;
  border-radius: 0;
}
.service-detail.reverse .service-detail-media { order: 2; }

.ba-interactive { overflow: hidden; }
.ba-compare {
  --position: 50%;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #0b0b0c;
  isolation: isolate;
}
.ba-compare > img,
.ba-before-layer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}
.ba-after { z-index: 1; }
.ba-before-layer {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--position);
  overflow: hidden;
  z-index: 2;
  border-right: 2px solid rgba(255,255,255,.92);
}
.ba-before-layer img {
  width: 100%;
  max-width: none;
  min-width: 100%;
  object-position: left center;
}
.ba-divider {
  position: absolute;
  left: var(--position);
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--orange);
  color: #111;
  border: 3px solid #fff;
  box-shadow: 0 8px 30px rgba(0,0,0,.45);
  font-weight: 900;
}
.ba-range {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  margin: 0;
}
.ba-badge {
  position: absolute;
  z-index: 4;
  top: 14px;
  padding: .45rem .7rem;
  border-radius: 999px;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 800;
  background: rgba(8,8,9,.74);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
}
.ba-badge-before { left: 14px; }
.ba-badge-after { right: 14px; }
.ba-card-copy { padding: 1rem 1rem 1.1rem; }
.ba-card-copy h3 { padding: 0; margin-bottom: .35rem; }
.ba-card-copy p { margin: 0; font-size: .92rem; }

.form-status {
  margin-bottom: 1rem;
  padding: 1rem 1.1rem;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: #fff;
}
.form-status.success { background: rgba(57,181,74,.14); border-color: rgba(57,181,74,.35); color:#dcffe1; }
.form-status.error { background: rgba(255,122,0,.14); border-color: rgba(255,122,0,.35); color:#ffe2c7; }
.form-status.preview { background: rgba(90,140,255,.12); border-color: rgba(90,140,255,.3); color:#e1e9ff; }
.form-fallback { margin: .2rem 0 0; font-size:.9rem; }
.form-fallback a { color: var(--orange-2); font-weight:700; }

@media (max-width: 1100px) {
  .service-detail.reverse .service-detail-media { order: 0; }
}
@media (max-width: 860px) {
      .brand img { width: 160px; }
}
@media (max-width: 560px) {
  .brand img { width: 142px; }
  .ba-divider { width:38px; height:38px; }
}

/* Before/after clipping correction: keep both images at identical full size. */
.ba-before-layer {
  inset: 0;
  width: 100%;
  clip-path: inset(0 calc(100% - var(--position)) 0 0);
  border-right: 0;
}
.ba-before-layer img {
  width: 100%;
  min-width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.ba-divider::before {
  content: '';
  position: absolute;
  top: -999px;
  bottom: -999px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(255,255,255,.92);
  z-index: -1;
}

/* v1.2 typography + stronger branding */
body { font-family: var(--body-font); }
h1,
h2,
h3,
.btn,
.site-nav a,
.eyebrow,
.service-num,
.filter-bar button { font-family: var(--display-font); letter-spacing: .03em; }
.site-nav a { text-transform: uppercase; font-size: 1.15rem; letter-spacing: .05em; }
h1, h2 { text-transform: uppercase; }
h1 { text-shadow: 0 4px 24px rgba(0,0,0,.28); }
.section-heading h2::after, .page-hero h1::after, .cta-panel-inner h2::after, .estimate-head h2::after { content: ""; display: block; width: 72px; height: 4px; margin-top: .55rem; border-radius: 999px; background: linear-gradient(90deg, var(--orange), transparent); }
.btn { text-transform: uppercase; letter-spacing: .06em; font-size: 1.12rem; padding: 1rem 1.45rem; min-height: 54px; }
.btn-primary { position: relative; }
.btn-primary::after { content: "→"; font-size: 1em; line-height: 1; }
.btn-primary:hover { box-shadow: 0 14px 34px rgba(255,122,0,.33); }
.nav-cta { white-space: nowrap; }
.cta-panel-inner,
.form-shell,
.service-card,
.project-card,
.ba-card,
.info-card,
.article-card,
.feed-card,
.review-card { backdrop-filter: blur(4px); }
.project-card:hover, .service-card:hover, .feed-card:hover, .article-card:hover, .ba-card:hover { transform: translateY(-4px); transition: transform .2s ease, box-shadow .2s ease; box-shadow: 0 22px 44px rgba(0,0,0,.28); }
.service-detail h2, .review-card h2, .article-card h2, .cta-panel-inner h2, .estimate-head h2 { letter-spacing: .04em; }
.estimate-head { margin-bottom: 1rem; padding-bottom: .85rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.estimate-shell { position: relative; }
#estimate-form { scroll-margin-top: 120px; }
.ba-card-copy p { color: #cccdd2; }
.ba-card-copy::before { content: "Drag to compare"; display:inline-block; margin-bottom: .45rem; font-family: var(--display-font); text-transform: uppercase; letter-spacing: .08em; font-size: .95rem; color: var(--orange-2); }
.mobile-estimate-bar { display:none; }
@media (max-width: 860px) {
  body { padding-bottom: 78px; }
  .mobile-estimate-bar { display:flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: .65rem .8rem calc(.65rem + env(safe-area-inset-bottom)); background: rgba(8,8,10,.94); border-top: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(14px); }
  .mobile-estimate-bar .btn { width: 100%; }
}

/* =====================================================================
   v1.5 — Best-of-Fable visual integration
   Keeps the current site structure while adopting the stronger V3
   charcoal/orange palette, construction background, typography, trust
   bar, CTA treatment, and rugged contractor detailing.
   ===================================================================== */

body {
  color: var(--muted);
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 18% 12%, rgba(242,106,27,.05), transparent 40%),
    radial-gradient(circle at 85% 0%, rgba(242,106,27,.04), transparent 35%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.012) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, var(--bg), var(--bg-soft) 60%, var(--bg));
  background-attachment: fixed;
}

h1 { font-family: var(--display-font); font-weight: 400; letter-spacing: .01em; line-height: .94; }
h2,
h3,
.btn,
.site-nav a,
.eyebrow,
.service-num,
.filter-bar button,
.trust-item strong {
  font-family: var(--heading-font);
}
h2, h3 { letter-spacing: .035em; }
.eyebrow { color: var(--orange); letter-spacing: .18em; font-size: .78rem; }
.eyebrow::before { content: "▸ "; color: var(--orange); }
p { color: var(--muted); }

.site-header {
  background: rgba(10,10,11,.88);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
}
.site-nav a { color: var(--muted); font-size: .95rem; letter-spacing: .055em; position: relative; }
.site-nav a:hover, .site-nav a.active { color: #fff; }
.site-nav a.active::after {
  content: "";
  position: absolute;
  height: 2px;
  left: 8px;
  right: 8px;
  bottom: 3px;
  background: var(--orange);
  border-radius: 2px;
}
.nav-toggle { border-color: var(--line-2); border-radius: 6px; }

.btn {
  border-radius: 6px;
  font-weight: 600;
  font-size: .98rem;
  min-height: 50px;
  padding: .9rem 1.35rem;
}
.btn-primary {
  background: linear-gradient(135deg, var(--orange-2), var(--orange-deep));
  color: #fff;
  box-shadow: 0 8px 22px rgba(242,106,27,.28);
}
.btn-primary:hover { color:#fff; box-shadow: 0 12px 28px rgba(242,106,27,.42); transform: translateY(-2px); }
.btn-secondary {
  background: rgba(255,255,255,.03);
  border-color: var(--line-2);
  border-width: 2px;
}
.btn-secondary:hover { border-color: var(--orange); transform: translateY(-2px); }
.text-link { color: var(--orange); }

/* Homepage hybrid hero: Fable construction background + existing renovation visual */
.hero-copy { color:#d7d8dd; max-width: 54ch; font-size:1.05rem; }

/* Fable trust bar */
.trust-bar { background: var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.trust-grid { display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:18px; padding-top:20px; padding-bottom:20px; }
.trust-item { display:flex; gap:12px; align-items:flex-start; }
.trust-icon { color:var(--orange); font-size:1.15rem; font-weight:900; line-height:1.2; flex:0 0 auto; }
.trust-item strong { display:block; color:#fff; text-transform:uppercase; letter-spacing:.035em; font-size:.93rem; line-height:1.15; }
.trust-item small { display:block; color:var(--muted); font-size:.78rem; margin-top:.25rem; line-height:1.35; }

.section { position:relative; }
.section-dark, .section-before-after {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.012) 0 2px, transparent 2px 7px),
    #1c1d20;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section-heading h2::after, .page-hero h1::after, .cta-panel-inner h2::after, .estimate-head h2::after {
  background: var(--orange);
  width: 44px;
  height: 3px;
  border-radius:0;
}

.info-card, .service-card, .feed-card, .review-card, .article-card, .form-shell, .project-card, .ba-card {
  border-radius: 12px;
  border-color: var(--line);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.01) 0 2px, transparent 2px 8px),
    var(--panel);
}
.service-card:hover, .feed-card:hover, .article-card:hover, .project-card:hover, .ba-card:hover { border-color: var(--orange); }
.service-num {
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:10px;
  border:1px solid var(--line-2);
  background:rgba(242,106,27,.06);
  color:var(--orange);
  margin-bottom:14px;
  font-size:1rem;
}
.project-card img { transition: transform .22s ease; }
.project-card:hover img { transform: scale(1.025); }
.project-card { cursor: zoom-in; }

/* Page hero uses the supplied V3 construction/blueprint background */
.page-hero.texture-bg::before {
  background:
    linear-gradient(90deg, rgba(10,10,11,.96) 0%, rgba(10,10,11,.76) 55%, rgba(10,10,11,.48) 100%),
    url('../images/construction-bg.webp') center/cover no-repeat;
}
.page-hero { border-bottom:1px solid var(--line); }
.page-hero h1 { font-size: clamp(3rem,6vw,5.4rem); max-width: 12ch; }

/* Process work borrowed from the strongest original-site UX */
.estimate-process { background: var(--bg); }
.process-grid-home article {
  border-radius: 10px;
  background: var(--panel);
  transition: transform .2s ease, border-color .2s ease;
}
.process-grid-home article:hover { transform: translateY(-3px); border-color:var(--orange); }
.process-grid-home span { display:grid; place-items:center; width:44px; height:44px; border-radius:10px; background:rgba(242,106,27,.08); border:1px solid var(--line-2); margin-bottom:14px; color:var(--orange); font-family:var(--display-font); font-size:1.15rem; }
.lead-copy { max-width: 62ch; }

/* Quote-ready services block */
.quote-ready-grid { display:grid; grid-template-columns: 1fr .9fr; gap:clamp(24px,4vw,54px); align-items:center; }
.quote-ready-card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:1.4rem; box-shadow:var(--shadow); }
.quote-ready-card ul { list-style:none; padding:0; margin:0 0 1.2rem; display:grid; gap:.65rem; }
.quote-ready-card li { position:relative; padding-left:1.6rem; color:var(--muted); }
.quote-ready-card li::before { content:"✓"; position:absolute; left:0; color:var(--orange); font-weight:900; }

/* Contact next-step strip */
.contact-next { margin-top:0; }

/* CTA strip from V3, adapted to existing markup */
.cta-panel {
  padding:0;
  background:
    linear-gradient(120deg, rgba(242,106,27,.16), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.015) 0 2px, transparent 2px 8px),
    #1c1d20;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative;
  overflow:hidden;
}
.cta-panel::after { content:""; position:absolute; right:-6%; top:-40%; width:46%; height:180%; background:radial-gradient(closest-side,var(--orange-glow),transparent 70%); transform:rotate(-14deg); pointer-events:none; }
.cta-panel-inner { background:none; border:0; border-radius:0; box-shadow:none; padding:clamp(40px,6vw,68px) 0; position:relative; z-index:2; }
.cta-panel-inner h2 { font-family:var(--display-font); font-weight:400; line-height:.96; }

/* Footer treatment from V3 */
.site-footer {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.01) 0 2px, transparent 2px 8px),
    var(--bg);
  border-top:1px solid var(--line);
}
.site-footer h3 { position:relative; padding-bottom:.7rem; font-family:var(--heading-font); text-transform:uppercase; letter-spacing:.08em; }
.site-footer h3::after { content:""; position:absolute; left:0; bottom:0; width:28px; height:2px; background:var(--orange); }
.site-footer a { color:var(--muted); }
.site-footer a:hover { color:var(--orange); }
.footer-bottom { border-top-color:var(--line); }

/* Before/after stronger original-site handle styling */
.ba-card { border-color:var(--line); }
.ba-divider { background:var(--orange); border-color:#fff; box-shadow:0 8px 24px rgba(242,106,27,.32); }
.ba-divider::before { background:var(--orange); width:3px; }
.ba-badge { font-family:var(--heading-font); border-color:var(--line-2); }
.ba-badge-after { color:var(--orange-2); border-color:var(--orange); }
.filter-bar button.active { background:linear-gradient(135deg,var(--orange-2),var(--orange-deep)); border-color:transparent; box-shadow:0 7px 18px rgba(242,106,27,.22); }

/* Dynamic project lightbox inspired by Fable V3 */
.site-lightbox { position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; padding:22px; background:rgba(0,0,0,.84); }
.site-lightbox.open { display:flex; }
.site-lightbox-panel { width:min(980px,100%); background:var(--panel); border:1px solid var(--line-2); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); }
.site-lightbox-panel img { width:100%; max-height:72vh; object-fit:contain; background:#080809; }
.site-lightbox-body { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; padding:18px 20px; }
.site-lightbox-body h2 { margin:0 0 .35rem; font-size:1.3rem; }
.site-lightbox-close { flex:0 0 auto; width:44px; height:44px; border:1px solid var(--line-2); background:var(--bg-soft); color:#fff; border-radius:6px; font-size:1.6rem; cursor:pointer; }

@media (max-width: 980px) {
        .trust-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .quote-ready-grid { grid-template-columns:1fr; }
}
@media (max-width: 860px) {
  .site-nav a.active::after { display:none; }
}
@media (max-width: 620px) {
        .trust-grid { grid-template-columns:1fr; }
  }

/* v1.5 gallery and social refinements from V3 */
.project-grid-full .project-card:first-child { grid-column: span 2; }
.project-grid-full .project-card:first-child img { aspect-ratio: 16 / 9; }
.project-grid-full .project-card:nth-child(5) { grid-column: span 2; }
.project-grid-full .project-card:nth-child(5) img { aspect-ratio: 16 / 9; }
.social-pills a, .footer-socials a {
  transition: all .16s ease;
}
.social-pills a { border-color: var(--line-2); color:#fff; }
.social-pills a:hover { border-color:var(--orange); background:rgba(242,106,27,.10); transform:translateY(-2px); }
input, select, textarea { background: var(--bg-soft); border-color: var(--line-2); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(242,106,27,.18); }
@media (max-width: 860px) {
  .project-grid-full .project-card:first-child,
  .project-grid-full .project-card:nth-child(5) { grid-column: auto; }
  .project-grid-full .project-card:first-child img,
  .project-grid-full .project-card:nth-child(5) img { aspect-ratio: 4 / 3; }
}

.updates-feature {
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(22px,4vw,46px);
  align-items:center;
  margin-bottom: clamp(30px,5vw,54px);
  padding: 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel);
}
.updates-feature img { width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:8px; }
.updates-feature > div { padding: .8rem 1rem .8rem .2rem; }
@media(max-width:860px) { .updates-feature {grid-template-columns:1fr}.updates-feature > div {padding:.6rem .4rem .4rem;} }

/* v1.5 keep the long desktop navigation from crowding the estimate CTA */
@media (max-width: 1120px) {
    .nav-toggle { display:block; }
  .site-nav {
    position:absolute;
    left:1rem;
    right:1rem;
    top:calc(100% + .75rem);
    display:none;
    flex-direction:column;
    align-items:stretch;
    background:#141416;
    border:1px solid var(--line-2);
    border-bottom:2px solid var(--orange);
    border-radius:10px;
    padding:1rem;
    box-shadow:var(--shadow);
  }
  .site-nav.open { display:flex; }
  .site-nav ul { flex-direction:column; align-items:stretch; gap:0; }
  .site-nav a { width:100%; padding:.8rem .4rem; border-bottom:1px solid var(--line); }
  .site-nav a.active::after { display:none; }
  .nav-cta { margin-left:0; margin-top:.6rem; text-align:center; justify-content:center; }
}
@media (max-width: 700px) {
  body { background-attachment: scroll; }
}

/* v1.6 balance pass: cleaner header, white titles, tighter type scale */
body { color: var(--muted); }
h1, h2, h3, h4, h5, h6 { color: var(--text); }

/* Cleaner header after removing the thin marketing topbar */
.site-header { min-height: 0; }
.nav-wrap { padding: .62rem 0; min-height: 82px; }
.brand img { width: 166px; }
.site-nav { gap: 1rem; }
.site-nav ul { gap: .84rem; }
.site-nav a { font-size: .88rem; letter-spacing: .05em; }
.nav-cta { margin-left: .25rem; padding: .78rem 1.05rem; min-height: 44px; font-size: .86rem; }

/* More controlled hierarchy. Anton remains a brand accent, not a wall of type. */
h1 { font-size: clamp(2.7rem, 5vw, 4.85rem); line-height: .98; }
h2 { font-size: clamp(1.7rem, 2.35vw, 2.45rem); line-height: 1.05; }
h3 { font-size: clamp(1.08rem, 1.35vw, 1.28rem); line-height: 1.18; }
.eyebrow { font-size: .72rem; }

.hero-copy { color: #d4d5da; font-size: 1rem; line-height: 1.68; max-width: 58ch; }
.hero-actions { margin: 1.65rem 0 1.75rem; }

/* Page heroes: long titles should breathe instead of dominating the page. */
.page-hero { padding: clamp(46px,5vw,68px) 0 clamp(36px,4vw,54px); }
.page-hero h1 { font-size: clamp(2.55rem, 4.8vw, 4.35rem); max-width: 17ch; line-height: .99; }
.page-hero p:not(.eyebrow) { max-width: 62ch; font-size: .98rem; }
.page-services .page-hero h1,
.page-projects .page-hero h1,
.page-before-after .page-hero h1,
.page-about .page-hero h1 { max-width: 18ch; }

/* General spacing: slightly tighter and more consistent. */
.section { padding: clamp(52px,5.4vw,72px) 0; }
.section-heading { margin-bottom: 1.6rem; gap: 1.5rem; }
.section-heading > div { max-width: 760px; }
.section-heading p:last-child { margin-bottom: 0; }
.split-grid { grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,52px); }
.info-cards { gap: .8rem; }
.info-card, .service-card, .feed-card, .review-card, .article-card, .form-shell { padding: 1.2rem; }
.service-card { min-height: 0; }
.service-grid { gap: 1rem; }
.feed-grid { gap: 1rem; }
.project-grid { gap: 1rem; }
.ba-grid { gap: 1rem; }

/* Trust strip should support the hero, not compete with it. */
.trust-grid { gap: 12px; padding-top: 16px; padding-bottom: 16px; }
.trust-item { gap: 10px; }
.trust-item strong { font-size: .86rem; }
.trust-item small { font-size: .75rem; }

/* Home page cards and process balance. */
.page-home .quick-intro h2 { max-width: 18ch; }
.page-home .process-grid-home article { min-height: 0; }
.page-home .project-grid .project-copy { min-height: 124px; }

/* Services: keep image/text rhythm balanced and avoid oversized media blocks. */
.service-detail-grid { max-width: 1110px; margin: 0 auto; gap: 0; }
.service-detail { grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: clamp(28px,4vw,54px); padding: 2rem 0; border-bottom: 1px solid var(--line); }
.service-detail:first-child { padding-top: 0; }
.service-detail:last-child { border-bottom: 0; padding-bottom: 0; }
.service-detail.reverse { grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); }
.service-detail-media { max-height: 430px; }
.service-detail h2 { margin-bottom: .7rem; }
.service-detail p { max-width: 58ch; }
.service-detail ul { margin-bottom: 0; }
.quote-ready-grid { max-width: 1080px; margin: 0 auto; }
.quote-ready-card { padding: 1.25rem; }

/* Project page composition. */
.page-projects .filter-bar { margin-bottom: 1.25rem; }
.page-projects .project-grid-full { gap: 1rem; }
.page-projects .project-copy { min-height: 118px; }

/* Before/after: make the comparison the focal point. */
.page-before-after .ba-grid { max-width: 1120px; margin: 0 auto; }
.ba-card-copy { padding: .9rem 1rem 1rem; }
.ba-card-copy h3 { margin-bottom: .25rem; }
.ba-card-copy p { font-size: .88rem; }

/* Reviews and updates: constrain text blocks for better reading width. */
.page-reviews .split-grid,
.page-updates .updates-feature,
.page-contact .contact-grid,
.page-privacy .prose { max-width: 1080px; margin-left: auto; margin-right: auto; }
.page-updates .article-grid { gap: 1rem; }
.updates-feature { padding: 12px; }
.updates-feature > div { padding: .65rem .85rem .65rem .1rem; }

/* Contact form balance and clearer visual priority. */
.contact-grid { grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); gap: clamp(30px,4.5vw,58px); }
.estimate-head h2 { margin-bottom: .45rem; }
.form-shell { padding: 1.35rem; }
input, select, textarea { padding: .82rem .9rem; border-radius: 7px; }
label { font-size: .92rem; }
.form-fallback { font-size: .82rem; }

/* CTA/footer sizing. */
.cta-panel-inner { padding: clamp(34px,4.4vw,54px) 0; }
.cta-panel-inner > div:first-child { max-width: 700px; }
.cta-panel-inner h2 { font-size: clamp(1.95rem,3.5vw,3.2rem); }
.footer-grid { gap: 1.65rem; }
.site-footer { padding-top: 3.4rem; }
.site-footer p, .site-footer li, .site-footer a { font-size: .92rem; }
.footer-bottom { padding: 1.15rem 0 1.55rem; }

@media (max-width: 1120px) {
  .nav-wrap { min-height: 76px; }
  .brand img { width: 156px; }
  .nav-cta { font-size: .92rem; }
}

@media (max-width: 980px) {
        .service-detail, .service-detail.reverse { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .nav-wrap { min-height: 70px; padding: .5rem 0; }
  .brand img { width: 148px; }
  .site-nav a { font-size: 1rem; }
  .section-heading { align-items: flex-start; }
  .service-detail, .service-detail.reverse { grid-template-columns: 1fr; gap: 1.2rem; padding: 1.55rem 0; }
  .service-detail.reverse .service-detail-media { order: 0; }
  .service-detail-media { max-height: none; }
  .contact-grid { grid-template-columns: 1fr; }
  .page-hero h1 { max-width: 16ch; }
}

@media (max-width: 620px) {
  h1 { font-size: clamp(2.35rem,13vw,3.45rem); }
  h2 { font-size: clamp(1.55rem,8vw,2.05rem); }
  h3 { font-size: 1.08rem; }
        .hero-copy { font-size: .95rem; }
  .page-hero { padding: 40px 0 32px; }
  .page-hero h1 { font-size: clamp(2.35rem,12vw,3.45rem); max-width: 14ch; }
  .section { padding: 44px 0; }
  .btn { min-height: 48px; padding: .78rem 1.05rem; font-size: .92rem; }
  .trust-grid { gap: 10px; }
  .trust-item { padding: .15rem 0; }
  .project-copy, .page-home .project-grid .project-copy, .page-projects .project-copy { min-height: 0; }
  .form-shell { padding: 1rem; }
  .cta-panel-inner h2 { font-size: clamp(1.85rem,10vw,2.6rem); }
}

/* v1.6.1 visual refinement after full-page render review */
h1, h2 { text-transform: none; }
.site-nav li > a { white-space: nowrap; }
.site-nav ul { gap: .72rem; }
.site-nav a { font-size: .84rem; }
.nav-cta { font-size: .82rem; min-height: 42px; padding: .7rem .95rem; }

/* Keep Anton as the homepage brand punch; use Oswald for longer page titles. */
.page-hero h1 {
  font-family: var(--heading-font);
  font-weight: 600;
  letter-spacing: -.012em;
  font-size: clamp(2.15rem, 3.65vw, 3.45rem);
  line-height: 1.08;
  max-width: 25ch;
  text-transform: none;
}
.page-about .page-hero h1,
.page-services .page-hero h1,
.page-projects .page-hero h1,
.page-before-after .page-hero h1 { max-width: 27ch; }

h2 { font-weight: 600; font-size: clamp(1.6rem, 2.05vw, 2.2rem); line-height: 1.12; }
h3 { font-weight: 600; }
.page-home .quick-intro h2 { max-width: 25ch; }
.cta-panel-inner h2 { font-size: clamp(1.85rem, 2.8vw, 2.75rem); }

@media (max-width: 1120px) {
  .site-nav a { font-size: 1rem; white-space: normal; }
  .nav-cta { font-size: .95rem; }
}
@media (max-width: 620px) {
    .page-hero h1 { font-size: clamp(2rem, 10vw, 2.9rem); max-width: 18ch; }
  h2 { font-size: clamp(1.45rem, 7vw, 1.95rem); }
}
.site-footer .footer-grid > div:first-child > img { width: 160px; height: auto; }

/* v1.7 final title-scale pass: all-caps brand hierarchy with tighter balance */
h1, h2 {
  text-transform: uppercase;
  text-wrap: balance;
}

/* Winner from three tested scales: medium homepage punch + compact internal titles. */
.page-hero h1 {
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: clamp(1.95rem, 3vw, 2.9rem);
  line-height: 1.06;
  letter-spacing: .016em;
  max-width: 28ch;
  text-transform: uppercase;
}
.page-about .page-hero h1,
.page-services .page-hero h1,
.page-projects .page-hero h1,
.page-before-after .page-hero h1 {
  max-width: 28ch;
}
h2 {
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: clamp(1.48rem, 1.82vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: .025em;
  text-transform: uppercase;
}
.page-home .quick-intro h2 { max-width: 30ch; }
.cta-panel-inner h2 {
  font-family: var(--display-font);
  font-size: clamp(1.7rem, 2.4vw, 2.4rem);
  line-height: .98;
  letter-spacing: .018em;
  text-transform: uppercase;
}

@media (max-width: 620px) {
    .page-hero h1 {
    font-size: clamp(1.85rem, 8vw, 2.4rem);
    max-width: 21ch;
  }
  h2 {
    font-size: clamp(1.35rem, 5.8vw, 1.7rem);
  }
  .cta-panel-inner h2 {
    font-size: clamp(1.65rem, 8vw, 2.2rem);
  }
}

/* v1.8 angular geometry, service iconography, photo consistency, subtle motion, review layouts */

/* Angular Beast-Mode geometry inspired by the logo without turning the UI into a theme park. */
.section-heading > div,
.page-hero .container,
.cta-panel-inner > div:first-child {
  position: relative;
}
.section-heading > div::before,
.page-hero .container::before,
.cta-panel-inner > div:first-child::before {
  content: "";
  display: block;
  width: 58px;
  height: 7px;
  margin-bottom: .78rem;
  background: linear-gradient(90deg, var(--orange), var(--orange-2));
  clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
  box-shadow: 0 0 18px rgba(242,106,27,.16);
}
.page-hero .container::before { margin-bottom: 1rem; }
.section-heading .eyebrow + h2 { margin-top: -.2rem; }

.service-card,
.project-card,
.review-card,
.info-card,
.feed-card,
.article-card,
.quote-ready-card,
.form-shell,
.process-grid article {
  position: relative;
  border-radius: 8px;
}
.service-card::after,
.project-card::after,
.review-card::after,
.info-card::after,
.feed-card::after,
.article-card::after,
.quote-ready-card::after,
.form-shell::after,
.process-grid article::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 28px;
  height: 28px;
  pointer-events: none;
  background: linear-gradient(135deg, transparent 48%, var(--orange) 49% 55%, rgba(242,106,27,.11) 56%);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  opacity: .78;
}

/* Subtle diagonal rails between larger dark sections. */
.section-dark,
.section-before-after,
.quote-ready-section,
.estimate-process {
  overflow: hidden;
}
.section-dark::before,
.section-before-after::before,
.quote-ready-section::before,
.estimate-process::before {
  content: "";
  position: absolute;
  left: -2%;
  top: 0;
  width: 104%;
  height: 1px;
  background: linear-gradient(90deg, transparent 2%, var(--orange-line) 24%, rgba(255,255,255,.12) 58%, transparent 96%);
  transform: skewX(-26deg);
  transform-origin: left center;
  pointer-events: none;
}

/* Custom service icon system. */
.service-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  margin-bottom: .78rem;
  background: linear-gradient(145deg, rgba(242,106,27,.16), rgba(242,106,27,.035));
  border: 1px solid rgba(242,106,27,.36);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.service-icon svg { width: 29px; height: 29px; }
.service-icon svg path,
.service-icon svg rect,
.service-icon svg line,
.service-icon svg polyline {
  stroke: var(--orange-2);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.service-card .service-num {
  position: absolute;
  right: 18px;
  bottom: 12px;
  color: rgba(255,255,255,.16);
  font-size: 2.15rem;
  line-height: 1;
  letter-spacing: .04em;
}
.service-card { padding-bottom: 2.7rem; }
.service-detail > div:not(.service-detail-media) > .service-icon {
  width: 52px;
  height: 52px;
  float: left;
  margin: 0 14px 8px 0;
}
.service-detail > div:not(.service-detail-media) > .service-icon + h2 { padding-top: 7px; }
.service-detail > div:not(.service-detail-media)::after { content:""; display:block; clear:both; }

/* Photography consistency across portfolio and service views. */
.project-card img, .service-detail-media img, .updates-feature img {
  filter: contrast(1.035) saturate(.94);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .35s ease;
}
.project-card { overflow: hidden; }
.project-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 46%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8,8,10,.16), transparent 70%);
}
.project-card:hover img, .service-detail:hover .service-detail-media img, .updates-feature:hover img {
  transform: scale(1.025);
  filter: contrast(1.045) saturate(.98) brightness(1.025);
}
.project-card img,
.service-detail-media img { object-position: center; }

/* Review layout preview. */
.review-grid-showcase {
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1rem;
}
.review-card {
  display: flex;
  flex-direction: column;
  min-height: 310px;
  padding: 1.35rem;
  background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
}
.review-card.review-featured {
  border-color: rgba(242,106,27,.42);
  background: linear-gradient(145deg, rgba(242,106,27,.11), rgba(255,255,255,.035) 42%, rgba(255,255,255,.02));
}
.review-card.review-wide { grid-column: span 2; min-height: 0; }
.review-card-top { display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap; margin-bottom:.85rem; }
.review-job,
.review-source {
  display:inline-flex;
  align-items:center;
  min-height: 28px;
  padding: .35rem .58rem;
  font-size: .72rem;
  line-height: 1;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-family: var(--heading-font);
}
.review-job { background: var(--orange); color:#101011; font-weight:700; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); }
.review-source { color:var(--muted); border:1px solid var(--line-2); }
.review-card .stars { margin: 0 0 .95rem; color:var(--orange-2); font-size:1rem; letter-spacing:.13em; }
.review-card blockquote { margin:0 0 1.2rem; color:#f2f2f4; font-size:1.02rem; line-height:1.72; font-style:normal; }
.review-person { margin-top:auto; padding-top:1rem; border-top:1px solid var(--line); display:grid; gap:.15rem; }
.review-person strong { color:#fff; font-family:var(--heading-font); text-transform:uppercase; letter-spacing:.04em; }
.review-person span { color:var(--muted); font-size:.82rem; }

/* Motion system: JS only enables it when motion is allowed. */
.motion-enabled .motion-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--motion-delay, 0ms);
}
.motion-enabled .motion-reveal.motion-visible { opacity:1; transform:translateY(0); }
.motion-enabled .section-heading > div::before,
.motion-enabled .page-hero .container::before,
.motion-enabled .cta-panel-inner > div:first-child::before {
  transform-origin:left center;
  animation: angleLineIn .7s ease both;
}
@keyframes angleLineIn {
  from { opacity:0; transform:scaleX(.25); }
  to { opacity:1; transform:scaleX(1); }
}
.text-link { position:relative; }
.text-link::after { content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px; background:var(--orange); transform:scaleX(.22); transform-origin:left; transition:transform .22s ease; }
.text-link:hover::after { transform:scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation:none !important; transition-duration:.01ms !important; }
  .motion-enabled .motion-reveal { opacity:1; transform:none; }
}

@media (max-width: 860px) {
  .review-grid-showcase { grid-template-columns:1fr; }
  .review-card.review-wide { grid-column:auto; }
  .service-card .service-num { font-size:1.75rem; }
}

@media (max-width: 620px) {
  .service-icon { width:42px; height:42px; }
  .service-icon svg { width:26px; height:26px; }
  .review-card { min-height:0; padding:1.1rem; }
  .review-card blockquote { font-size:.96rem; }
}

/* v1.8 positioning correction for diagonal section rails */
.section-dark,
.section-before-after,
.quote-ready-section,
.estimate-process { position: relative; }
.service-icon { color: var(--orange-2); }

/* v1.9 lead form, trust signals, and performance-focused layout refinements */
.trust-bar-proof .trust-icon {
  min-width: 46px;
  height: 46px;
  padding: 0 .55rem;
  border: 1px solid rgba(242,106,27,.42);
  background: rgba(242,106,27,.08);
  color: var(--orange-2);
  font-family: var(--display-font);
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(10% 0,100% 0,100% 78%,88% 100%,0 100%,0 18%);
}
.trust-bar-proof .trust-item strong { color:#fff; }
.trust-bar-proof .trust-item small { max-width: 28ch; }

.trust-proof-section {
  padding-top: 3.75rem;
  padding-bottom: 3.75rem;
  background:
    linear-gradient(180deg, rgba(242,106,27,.035), transparent 46%),
    #0e0e10;
  border-top: 1px solid rgba(242,106,27,.13);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.compact-heading { margin-bottom: 1.35rem; }
.trust-proof-grid {
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.025);
  overflow:hidden;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.trust-proof-grid article { padding:1.35rem 1.4rem; min-height:145px; }
.trust-proof-grid article + article { border-left:1px solid rgba(255,255,255,.09); }
.trust-proof-grid strong {
  display:block;
  margin-bottom:.45rem;
  font-family:var(--display-font);
  text-transform:uppercase;
  font-size:1.25rem;
  letter-spacing:.045em;
  color:#fff;
}
.trust-proof-grid strong::before { content:"// "; color:var(--orange); }
.trust-proof-grid p { margin:0; }

.contact-trust-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:.65rem;
  margin-top:1rem;
}
.contact-trust-grid > div {
  display:grid;
  grid-template-columns: 118px 1fr;
  gap:.75rem;
  align-items:start;
  padding:.8rem .9rem;
  border-left:3px solid var(--orange);
  background:rgba(255,255,255,.035);
}
.contact-trust-grid strong {
  font-family:var(--display-font);
  text-transform:uppercase;
  color:#fff;
  letter-spacing:.045em;
}
.contact-trust-grid span { color:var(--muted); font-size:.9rem; }

.estimate-shell { padding:1.4rem; }
.estimate-head p:last-child { max-width:58ch; }
.contact-form { gap:1.05rem; }
.form-section-label {
  display:flex;
  gap:.75rem;
  align-items:center;
  margin-top:.45rem;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.08);
}
.form-section-label:first-of-type { margin-top:0; }
.form-section-label span {
  display:grid;
  place-items:center;
  width:34px;
  height:30px;
  background:var(--orange);
  color:#111;
  font-family:var(--display-font);
  font-weight:700;
  clip-path:polygon(0 0,100% 0,100% 72%,78% 100%,0 100%);
}
.form-section-label strong {
  font-family:var(--display-font);
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:1.12rem;
  color:#fff;
}
.choice-fieldset {
  min-width:0;
  margin:0;
  padding:0;
  border:0;
}
.choice-fieldset legend {
  margin-bottom:.45rem;
  padding:0;
  font-weight:700;
  color:#fff;
}
.field-help { color:var(--muted); font-weight:500; font-size:.78rem; margin-left:.25rem; }
.choice-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.55rem;
}
.choice-row { display:flex; flex-wrap:wrap; gap:.55rem; }
.choice-grid label,
.choice-row label,
.privacy-check {
  display:flex;
  align-items:flex-start;
  gap:.55rem;
  cursor:pointer;
}
.choice-grid label,
.choice-row label {
  padding:.72rem .75rem;
  border:1px solid rgba(255,255,255,.11);
  background:rgba(0,0,0,.2);
  color:#e8e8ea;
  border-radius:4px;
  font-size:.9rem;
}
.choice-row.compact label { flex:1 1 auto; min-width:78px; }
.choice-grid input,
.choice-row input,
.privacy-check input {
  width:auto;
  margin:.12rem 0 0;
  accent-color:var(--orange);
  flex:0 0 auto;
}
.choice-grid label:has(input:checked),
.choice-row label:has(input:checked) {
  border-color:rgba(242,106,27,.7);
  background:rgba(242,106,27,.10);
  color:#fff;
}
.file-upload-row input[type="file"] {
  padding:.75rem;
  border-style:dashed;
  background:rgba(255,255,255,.025);
}
.file-upload-row input[type="file"]::file-selector-button {
  margin-right:.85rem;
  padding:.62rem .85rem;
  border:0;
  background:var(--orange);
  color:#111;
  font-family:var(--display-font);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  cursor:pointer;
}
.file-upload-row small { color:var(--muted); }
.file-list {
  list-style:none;
  padding:0;
  margin:.15rem 0 0;
  display:grid;
  gap:.35rem;
}
.file-list li {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.45rem .6rem;
  background:rgba(255,255,255,.035);
  border-left:2px solid rgba(242,106,27,.65);
  font-size:.84rem;
  color:#ddd;
}
.file-list li span:last-child { color:var(--muted); white-space:nowrap; }
.privacy-check {
  padding:.85rem .95rem;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.025);
  font-size:.86rem;
  color:var(--muted);
}
.privacy-check a { color:var(--orange-2); font-weight:700; }
.btn-estimate { width:100%; }

@media (max-width: 1100px) {
  .choice-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .trust-proof-grid { grid-template-columns:1fr; }
  .trust-proof-grid article + article { border-left:0; border-top:1px solid rgba(255,255,255,.09); }
}
@media (max-width: 860px) {
  .trust-proof-section { padding-top:3rem; padding-bottom:3rem; }
  .contact-trust-grid > div { grid-template-columns:105px 1fr; }
  .estimate-shell { padding:1.05rem; }
}
@media (max-width: 560px) {
  .choice-grid { grid-template-columns:1fr 1fr; }
  .choice-row.compact { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .choice-row.compact label { min-width:0; padding:.65rem .55rem; }
  .contact-trust-grid > div { grid-template-columns:1fr; gap:.1rem; }
  .trust-proof-grid article { min-height:0; padding:1.1rem; }
}

/* v1.9 mobile background payload reduction */
@media (max-width: 860px) {
    .texture-bg::before {
    background:
      linear-gradient(180deg, rgba(10,10,11,.86), rgba(10,10,11,.7)),
      url('../images/construction-bg-mobile.webp') center/cover no-repeat;
  }
}
@media (max-width: 860px) {
  .texture-layer { background-image: url('../images/texture-bg-mobile.webp'); }
}

/* v1.10 estimate image optimization feedback */
.file-processing {
  min-height: 1.2em;
  color: #d8d8dc !important;
}
.file-list li.file-optimized {
  border-left-color: var(--orange);
  background: rgba(242,106,27,.07);
}
.file-list li.file-optimized span:last-child {
  color: #ffd1b3;
  font-weight: 700;
}
.contact-form.files-processing .btn-estimate,
.contact-form.files-processing input[type="file"] {
  opacity: .66;
  cursor: wait;
}
.btn-estimate:disabled {
  opacity: .62;
  cursor: wait;
  transform: none;
}

.file-noscript { display:block; color:#ffd1b3; font-size:.82rem; }

/* v1.11 homepage rebuild: full-width bright renovation hero */
.home-hero-wide {
  position: relative;
  min-height: clamp(620px, 72vw, 790px);
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(242,106,27,.28);
  background: #111;
}
.home-hero-photo,
.home-hero-photo picture,
.home-hero-photo img,
.home-hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.home-hero-photo img {
  object-fit: cover;
  object-position: center 50%;
}
.home-hero-shade {
  z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(7,7,8,.94) 0%,
      rgba(7,7,8,.86) 22%,
      rgba(7,7,8,.64) 39%,
      rgba(7,7,8,.25) 58%,
      rgba(7,7,8,.05) 76%),
    linear-gradient(180deg, rgba(0,0,0,.16) 0%, transparent 40%, rgba(0,0,0,.12) 100%);
  pointer-events: none;
}
.home-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(76px, 7vw, 108px) 0 clamp(72px, 6vw, 96px);
}
.home-hero-copy {
  width: min(650px, 52vw);
}
.home-hero-wide .eyebrow {
  color: #ff8a39;
  margin-bottom: .9rem;
}
.home-hero-wide h1 {
  max-width: 14.6ch;
  margin: 0 0 .5rem;
  color: #fff;
  font-family: var(--display-font);
  font-size: clamp(3.25rem, 5.5vw, 5.35rem);
  line-height: .96;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow: 0 3px 22px rgba(0,0,0,.38);
}
.home-hero-wide h1 span {
  display: block;
  color: var(--orange);
}
.home-hero-lead {
  max-width: 34ch;
  margin: .95rem 0 .45rem;
  color: #fff;
  font-family: var(--heading-font);
  font-size: clamp(1.18rem, 1.75vw, 1.52rem);
  line-height: 1.3;
  font-weight: 600;
}
.home-hero-wide .hero-copy {
  max-width: 54ch;
  margin-bottom: 0;
  color: #e5e5e8;
  font-size: 1rem;
  line-height: 1.65;
}
.home-hero-wide .hero-actions {
  margin: 1.55rem 0 1.7rem;
}
.home-hero-secondary {
  background: rgba(8,8,9,.68);
  border-color: rgba(255,255,255,.5);
  backdrop-filter: blur(6px);
}
.page-home .trust-bar-proof {
  position: relative;
  z-index: 3;
  background: linear-gradient(180deg, #151518, #101012);
  border-top: 0;
}
@media (max-width: 1050px) {
  .home-hero-wide { min-height: 680px; }
  .home-hero-copy { width: min(660px, 66vw); }
  .home-hero-shade {
    background: linear-gradient(90deg, rgba(7,7,8,.94) 0%, rgba(7,7,8,.84) 28%, rgba(7,7,8,.55) 50%, rgba(7,7,8,.12) 76%);
  }
}
@media (max-width: 860px) {
  .home-hero-wide {
    min-height: 680px;
    align-items: flex-end;
  }
  .home-hero-photo img { object-position: 59% 50%; }
  .home-hero-shade {
    background:
      linear-gradient(180deg, rgba(7,7,8,.08) 0%, rgba(7,7,8,.20) 31%, rgba(7,7,8,.82) 61%, rgba(7,7,8,.97) 100%),
      linear-gradient(90deg, rgba(7,7,8,.52) 0%, rgba(7,7,8,.05) 84%);
  }
  .home-hero-inner { padding: 190px 0 42px; }
  .home-hero-copy { width: min(100%, 650px); }
  .home-hero-wide h1 { max-width: 11ch; font-size: clamp(3rem, 12.2vw, 4.3rem); }
  .home-hero-wide .hero-copy { max-width: 48ch; }
  }
@media (max-width: 560px) {
  .home-hero-wide { min-height: 690px; }
  .home-hero-photo img { object-position: 62% 50%; }
  .home-hero-inner { padding: 190px 0 30px; }
  .home-hero-wide h1 { font-size: clamp(2.8rem, 14.3vw, 3.75rem); max-width: 10.5ch; }
  .home-hero-lead { font-size: 1.05rem; max-width: 29ch; }
  .home-hero-wide .hero-copy { font-size: .92rem; line-height: 1.56; }
  .home-hero-wide .hero-actions { display: grid; grid-template-columns: 1fr; gap: .7rem; }
  .home-hero-wide .hero-actions .btn { width: 100%; }
      }

/* v1.12 layout balance + full-site visual QA refinements */
body {
  overflow-x: clip;
}

/* Compact the persistent header so the work gets more of the screen. */
.site-header {
  background: rgba(10,10,11,.96);
  border-bottom-color: rgba(255,255,255,.08);
}
.nav-wrap {
  min-height: 94px;
  padding: .55rem 0;
}
.brand img {
  width: 158px;
  max-height: 82px;
  object-fit: contain;
}
.site-nav {
  gap: .95rem;
}
.site-nav ul {
  gap: .9rem;
}
.site-nav a {
  font-size: .96rem;
}
.site-header .nav-cta {
  min-height: 48px;
  padding: .76rem 1.05rem;
  font-size: .98rem;
}

/* Homepage hero: keep the selected image large, but frame it slightly so it no longer feels over-wide. */
.page-home .home-hero-wide {
  width: min(1540px, calc(100% - 28px));
  min-height: 700px;
  margin: 16px auto 0;
  border: 1px solid rgba(255,255,255,.08);
  border-bottom-color: rgba(242,106,27,.42);
  border-radius: 10px;
  box-shadow: 0 22px 54px rgba(0,0,0,.30);
}
.page-home .home-hero-photo,
.page-home .home-hero-photo picture,
.page-home .home-hero-photo img,
.page-home .home-hero-shade {
  border-radius: inherit;
}
.page-home .home-hero-photo img {
  object-position: 55% 52%;
}
.page-home .home-hero-shade {
  background:
    linear-gradient(90deg,
      rgba(7,7,8,.92) 0%,
      rgba(7,7,8,.84) 19%,
      rgba(7,7,8,.66) 35%,
      rgba(7,7,8,.30) 51%,
      rgba(7,7,8,.08) 70%,
      rgba(7,7,8,.02) 100%),
    linear-gradient(180deg, rgba(0,0,0,.10) 0%, transparent 42%, rgba(0,0,0,.10) 100%);
}
.page-home .home-hero-inner {
  width: min(var(--container), calc(100% - 3rem));
  margin-inline: auto;
  padding: 78px 0 72px;
}
.page-home .home-hero-copy {
  width: min(600px, 49vw);
}
.page-home .home-hero-wide h1 {
  max-width: 14.6ch;
  font-size: clamp(3.05rem, 4.65vw, 4.65rem);
  line-height: .97;
}
.page-home .home-hero-lead {
  max-width: 35ch;
  font-size: clamp(1.08rem, 1.45vw, 1.32rem);
}
.page-home .home-hero-wide .hero-copy {
  max-width: 52ch;
  font-size: .97rem;
  line-height: 1.58;
}
.page-home .home-hero-wide .hero-actions {
  margin: 1.45rem 0 0;
}

/* Slightly tighter section rhythm across the site. */
.section {
  padding-top: clamp(3.8rem, 5vw, 4.7rem);
  padding-bottom: clamp(3.8rem, 5vw, 4.7rem);
}
.section-heading {
  margin-bottom: 1.65rem;
}
.section-heading > div > p:last-child,
.page-hero p:not(.eyebrow) {
  max-width: 64ch;
}
.info-card,
.service-card,
.feed-card,
.review-card,
.article-card,
.form-shell {
  border-color: rgba(255,255,255,.10);
}

/* Service and project imagery should read as one portfolio rather than unrelated crops. */
.service-detail-media,
.project-card,
.ba-card {
  background: #111214;
}
.service-detail-media img,
.project-card img {
  object-position: center center;
}
.service-detail {
  gap: clamp(1.55rem, 3vw, 2.5rem);
}
.service-detail > div:last-child {
  max-width: 58ch;
}
.project-grid-full {
  gap: 1.35rem;
}
.project-card .project-copy {
  min-height: 132px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Review cards line up cleanly even when quotes have different lengths. */
.review-grid-showcase {
  align-items: stretch;
}
.review-grid-showcase .review-card {
  display: flex;
  flex-direction: column;
}
.review-grid-showcase .review-person {
  margin-top: auto;
}

/* Contact form and supporting copy balance better on wider screens. */
.page-contact .contact-grid {
  grid-template-columns: minmax(280px,.78fr) minmax(0,1.22fr);
  gap: clamp(2rem, 4vw, 3rem);
}
.page-contact .form-shell {
  max-width: 780px;
  width: 100%;
  justify-self: end;
}

/* Keep sparse utility pages intentional rather than oversized. */
.page-privacy .prose {
  max-width: 780px;
}
.page-404 .page-hero .container {
  max-width: 900px;
}

/* Footer is visually quieter so it does not compete with calls-to-action. */
.site-footer {
  padding-top: 3.4rem;
}
.site-footer .footer-grid > div:first-child img {
  width: 158px;
  height: auto;
}

@media (max-width: 1180px) {
  .site-nav ul { gap: .72rem; }
  .site-nav { gap: .72rem; }
  .site-nav a { font-size: .9rem; }
  .site-header .nav-cta { padding-inline: .88rem; }
  .page-home .home-hero-wide {
    width: calc(100% - 22px);
    min-height: 680px;
  }
  .page-home .home-hero-copy {
    width: min(610px, 56vw);
  }
}

@media (max-width: 980px) {
  .brand img { width: 148px; }
  .page-home .home-hero-wide {
    width: calc(100% - 18px);
    min-height: 680px;
    margin-top: 10px;
  }
  .page-home .home-hero-inner {
    width: min(var(--container), calc(100% - 2rem));
  }
  .page-home .home-hero-copy {
    width: min(620px, 69vw);
  }
  .page-home .home-hero-wide h1 {
    font-size: clamp(2.9rem, 6.8vw, 4.15rem);
  }
}

@media (max-width: 860px) {
  .nav-wrap { min-height: 82px; }
  .brand img { width: 138px; max-height: 72px; }
  .page-home .home-hero-wide {
    width: calc(100% - 12px);
    min-height: 720px;
    border-radius: 8px;
    align-items: flex-end;
  }
  .page-home .home-hero-photo img {
    object-position: 60% 50%;
  }
  .page-home .home-hero-shade {
    background:
      linear-gradient(180deg, rgba(7,7,8,.04) 0%, rgba(7,7,8,.14) 28%, rgba(7,7,8,.72) 57%, rgba(7,7,8,.97) 100%),
      linear-gradient(90deg, rgba(7,7,8,.36) 0%, rgba(7,7,8,.02) 80%);
  }
  .page-home .home-hero-inner {
    width: calc(100% - 2rem);
    padding: 230px 0 38px;
  }
  .page-home .home-hero-copy {
    width: 100%;
    max-width: 650px;
  }
  .page-home .home-hero-wide h1 {
    font-size: clamp(2.75rem, 11.4vw, 4rem);
    max-width: 14.8ch;
  }
  .page-contact .contact-grid {
    grid-template-columns: 1fr;
  }
  .page-contact .form-shell {
    max-width: none;
    justify-self: stretch;
  }
}

@media (max-width: 560px) {
  .page-home .home-hero-wide {
    width: calc(100% - 8px);
    min-height: 700px;
    margin-top: 4px;
  }
  .page-home .home-hero-photo img {
    object-position: 62% 49%;
  }
  .page-home .home-hero-inner {
    width: calc(100% - 1.25rem);
    padding: 215px 0 30px;
  }
  .page-home .home-hero-wide h1 {
    font-size: clamp(2.45rem, 12.5vw, 3.4rem);
    max-width: 14.7ch;
  }
  .page-home .home-hero-lead {
    font-size: 1rem;
  }
  .page-home .home-hero-wide .hero-copy {
    font-size: .9rem;
  }
  .page-home .home-hero-wide .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: .65rem;
  }
  .page-home .home-hero-wide .hero-actions .btn {
    width: 100%;
  }
  .section {
    padding-top: 3.3rem;
    padding-bottom: 3.3rem;
  }
  .project-card .project-copy {
    min-height: 0;
  }
}

/* ============================================================================
   Keyboard focus
   Form fields carry their own focus ring further up. Everything else that can
   receive focus needs a visible indicator too, so this covers links, buttons
   and anything given an explicit tabindex.
   ============================================================================ */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--orange-2);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Pointer users keep the plain look; only keyboard focus draws the ring. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

/* The skip link must sit above the sticky header once focused. */
.skip-link:focus {
  z-index: 9999;
}

/* ============================================================================
   Project zoom trigger
   site.js wraps each project photo in a real button so the image keeps its alt
   description and the control keeps a button role. The button must be
   completely invisible in layout terms: the card's own image rules still apply
   because they target `.project-card img` as a descendant.
   ============================================================================ */
.project-zoom {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: zoom-in;
  min-height: 0;
}

/* The card clips its corners, so an outset ring would be cut off. */
.project-zoom:focus-visible {
  outline: 3px solid var(--orange-2);
  outline-offset: -3px;
}

/* ============================================================================
   Touch targets
   On a phone these three are real controls but only render 24–26px tall, which
   is an awkward tap. Grow them to 44px on touch-sized screens only, so the
   desktop layout is untouched.
   ============================================================================ */
@media (max-width: 860px) {
  .footer-socials a,
  .social-pills a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* .text-link carries an animated underline pinned 3px below its box, so the
     padding added here has to be given back to the underline's offset or it
     detaches from the text. */
  .text-link {
    display: inline-block;
    padding-top: 9px;
    padding-bottom: 9px;
  }

  .text-link::after {
    bottom: 6px;
  }
}

/* Screen-reader-only helper for live status messages. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}