/* Andres Cruz Drywall & Painting Co. — design system
   Plan (seed 7912): Satoshi · Editorial Split · motion 4 · density 5
   Palette from his badge: warm paper, deep navy ink, light blue accent. */

@font-face { font-family:'Satoshi'; src:url('/assets/font/satoshi-400.woff2?v=1') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('/assets/font/satoshi-500.woff2?v=1') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('/assets/font/satoshi-700.woff2?v=1') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

:root{
  --paper:#FAF7F1;
  --paper-2:#F2EDE3;
  --ink:#182A46;          /* navy ring of the badge */
  --ink-2:#3D4E6B;
  --ink-3:#6B7A93;
  --accent:#8FC1E3;       /* light blue center of the badge */
  --accent-deep:#2E5F86;  /* AA links on paper */
  --line:rgba(24,42,70,.14);
  --shadow:0 18px 44px -18px rgba(24,42,70,.28);
  --shadow-sm:0 8px 22px -12px rgba(24,42,70,.24);
  --r-lg:22px; --r-md:14px; --r-sm:9px;
  --pad-section:clamp(4.5rem,9vw,8.5rem);
  --maxw:1180px;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0; overflow-x:hidden;
  font-family:'Satoshi',system-ui,sans-serif;
  font-size:18px; line-height:1.55;
  color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body::before{ /* grain + ambient wash, never flat */
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:var(--grain); opacity:.035; mix-blend-mode:multiply;
}
main,header,footer{ position:relative; z-index:1; }

h1,h2,h3{ font-weight:700; letter-spacing:-.015em; line-height:1.08; margin:0 0 .5em; text-wrap:balance; }
h1{ font-size:clamp(2.5rem,6vw,4.3rem); max-width:12ch; }
h2{ font-size:clamp(1.9rem,4vw,2.9rem); }
h3{ font-size:1.22rem; }
p{ margin:0 0 1em; max-width:66ch; }
a{ color:var(--accent-deep); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
img{ max-width:100%; display:block; }
::selection{ background:var(--accent); color:var(--ink); }

.skip{ position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:.7rem 1.2rem; z-index:99; border-radius:0 0 var(--r-sm) 0; }
.skip:focus{ left:0; }

.eyebrow{
  font-size:.82rem; font-weight:500; letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent-deep); margin:0 0 1rem;
}
.eyebrow-light{ color:var(--accent); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-height:52px; padding:.9rem 1.7rem; border-radius:999px;
  font-weight:700; font-size:1.02rem; letter-spacing:.01em;
  border:2px solid transparent; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:active{ transform:scale(.985); }
.btn-primary{ background:var(--ink); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:#0F1D33; text-decoration:none; transform:translateY(-1px); }
.btn-accent{ background:var(--accent); color:var(--ink); box-shadow:var(--shadow-sm); }
.btn-accent:hover{ background:#A5D0EC; text-decoration:none; transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.btn-ghost:hover{ border-color:#fff; text-decoration:none; transform:translateY(-1px); }
.btn-sm{ min-height:44px; padding:.55rem 1.2rem; font-size:.95rem; }

/* ---------- nav ---------- */
.nav{ position:sticky; top:0; z-index:40; background:rgba(250,247,241,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.nav-inner{ max-width:var(--maxw); margin:0 auto; padding:.65rem 1.4rem; display:flex; align-items:center; gap:1.6rem; }
.brand{ display:flex; align-items:center; gap:.7rem; color:var(--ink); }
.brand:hover{ text-decoration:none; }
.brand-mark{ border-radius:50%; flex:0 0 auto; }
.brand-name{ display:flex; flex-direction:column; line-height:1.12; font-weight:700; font-size:1.02rem; letter-spacing:-.01em; }
.brand-name em{ font-style:normal; font-weight:500; font-size:.76rem; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); }
.nav-links{ display:flex; gap:1.5rem; margin-left:auto; font-weight:500; font-size:.97rem; }
.nav-links a{ color:var(--ink-2); padding:.4rem 0; }
.nav-actions{ display:flex; align-items:center; gap:1.1rem; }
.nav-phone{ font-weight:700; white-space:nowrap; color:var(--ink); font-variant-numeric:tabular-nums; }
@media (max-width:1020px){ .nav-links{ display:none; } }
@media (max-width:640px){ .nav-phone{ display:none; } .brand-name em{ display:none; } }

/* ---------- hero (Editorial Split) ---------- */
.hero{ padding:clamp(3rem,6vw,5.5rem) 0 0; background:
  radial-gradient(1100px 560px at 88% -8%, rgba(143,193,227,.28), transparent 62%),
  radial-gradient(760px 420px at -12% 30%, rgba(24,42,70,.07), transparent 60%);
}
.hero-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 1.4rem clamp(3.5rem,7vw,6rem);
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr); gap:clamp(2rem,4.5vw,4.5rem); align-items:center;
}
.hero-sub{ font-size:1.12rem; color:var(--ink-2); max-width:52ch; }
.hero-badge{
  display:inline-flex; align-items:center; gap:.55rem; margin:0 0 1.6rem;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:.42rem 1rem; font-size:.95rem; color:var(--ink-2); box-shadow:var(--shadow-sm);
}
.hero-badge strong{ color:var(--ink); font-size:1.05rem; }
.stars{ color:#C99A2E; letter-spacing:.08em; font-size:.9rem; }
.hero-ctas{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; margin-bottom:.9rem; }
.hero-phone{ font-weight:700; font-size:1.06rem; color:var(--ink); font-variant-numeric:tabular-nums; }
.hero-offers{ font-size:.95rem; color:var(--ink-3); margin:0; }

.hero-media{ margin:0; }
.video-frame{
  position:relative; width:min(100%,400px); margin:0 auto; aspect-ratio:3/4;
  border-radius:30px; overflow:hidden; background:var(--ink);
  box-shadow:var(--shadow); border:1px solid rgba(24,42,70,.18);
}
.hero-video{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-media figcaption{ text-align:center; font-size:.9rem; color:var(--ink-3); margin-top:.8rem; }
@media (max-width:880px){
  .hero-inner{ grid-template-columns:1fr; }
  .video-frame{ width:min(78vw,340px); }
  h1{ max-width:14ch; }
}

/* ---------- trust strip ---------- */
.strip{ background:var(--ink); color:#fff; }
.strip-inner{
  max-width:var(--maxw); margin:0 auto; padding:1.5rem 1.4rem;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; list-style:none;
}
.strip-inner li{ display:flex; flex-direction:column; gap:.15rem; border-left:2px solid rgba(143,193,227,.5); padding-left:1rem; }
.strip-inner strong{ font-size:1.03rem; }
.strip-inner span{ color:#B9C6DA; font-size:.9rem; }
@media (max-width:880px){ .strip-inner{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .strip-inner{ grid-template-columns:1fr; gap:1rem; } }

/* ---------- sections ---------- */
.section{ padding:var(--pad-section) 0; }
.section-tint{ background:var(--paper-2); }
.section-head{ max-width:var(--maxw); margin:0 auto 3rem; padding:0 1.4rem; }
.section-sub{ font-size:1.1rem; color:var(--ink-2); max-width:58ch; }

/* ---------- services ---------- */
.services-grid{
  max-width:var(--maxw); margin:0 auto; padding:0 1.4rem;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem;
}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.9rem 1.7rem 1.6rem; box-shadow:var(--shadow-sm);
  transition:transform .22s ease, box-shadow .22s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.card-icon{ width:46px; height:46px; color:var(--accent-deep); margin-bottom:1.1rem; }
.card p{ color:var(--ink-2); font-size:.99rem; margin:0; }
@media (max-width:940px){ .services-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .services-grid{ grid-template-columns:1fr; } }

/* ---------- before/after ---------- */
.ba-wrap{ max-width:var(--maxw); margin:0 auto; padding:0 1.4rem; }
.ba-slider{
  position:relative; width:min(100%,430px); margin:0 auto;
  aspect-ratio:3/4; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow); border:1px solid var(--line); touch-action:pan-y;
  user-select:none; -webkit-user-select:none;
}
.ba-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.ba-after-wrap{ position:absolute; inset:0; clip-path:inset(0 0 0 50%); }
.ba-handle{
  position:absolute; top:0; bottom:0; left:50%; width:3px; margin-left:-1.5px;
  background:#fff; box-shadow:0 0 0 1px rgba(24,42,70,.25); pointer-events:none;
}
.ba-handle span{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm);
  display:flex; align-items:center; justify-content:center;
}
.ba-handle span::before,.ba-handle span::after{
  content:""; border:2px solid var(--ink); width:7px; height:7px; margin:0 3px;
  border-top:none; border-bottom:none; border-radius:2px;
}
.ba-handle span::before{ border-left-width:2.5px; transform:translateX(-1px); }
.ba-handle span::after{ border-right-width:2.5px; transform:translateX(1px); }
.ba-range{
  position:absolute; inset:0; width:100%; height:100%; margin:0;
  opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none; background:transparent;
}
.ba-range:focus-visible{ outline:3px solid var(--accent); outline-offset:-3px; opacity:1; }
.ba-label{
  position:absolute; top:14px; font-size:.78rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  background:rgba(24,42,70,.72); color:#fff; padding:.3rem .7rem; border-radius:999px; pointer-events:none;
}
.ba-label-before{ left:14px; }
.ba-label-after{ right:14px; }
.ba-note{ text-align:center; margin-top:1.6rem; color:var(--ink-2); font-size:.98rem; }

/* ---------- gallery ---------- */
.gallery{
  max-width:var(--maxw); margin:0 auto; padding:0 1.4rem;
  display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem;
}
.g-item{
  border:none; padding:0; margin:0; background:var(--paper-2); border-radius:var(--r-md);
  overflow:hidden; cursor:zoom-in; position:relative; aspect-ratio:4/3; display:block; width:100%;
  transition:transform .2s ease, box-shadow .2s ease;
}
.g-item img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.g-item:hover{ box-shadow:var(--shadow-sm); }
.g-item:hover img{ transform:scale(1.035); }
.g-wide{ grid-column:span 2; grid-row:span 2; aspect-ratio:auto; }
@media (max-width:940px){ .gallery{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px){ .gallery{ grid-template-columns:repeat(2,1fr); } .g-wide{ grid-column:span 2; grid-row:span 1; aspect-ratio:4/3; } }

/* ---------- reviews ---------- */
.reviews{
  max-width:var(--maxw); margin:0 auto; padding:0 1.4rem;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem;
}
.review{
  margin:0; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.7rem 1.6rem 1.4rem; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; gap:1rem;
}
.review blockquote{
  margin:0; font-size:1.02rem; line-height:1.58; color:var(--ink-2);
  quotes:"“" "”";
}
.review blockquote::before{ content:open-quote; color:var(--accent-deep); font-weight:700; }
.review figcaption{ margin-top:auto; display:flex; flex-direction:column; gap:.1rem; }
.review figcaption{ font-weight:700; }
.review figcaption span{ font-weight:400; color:var(--ink-3); font-size:.88rem; }
@media (max-width:940px){ .reviews{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .reviews{ grid-template-columns:1fr; } }

/* ---------- about ---------- */
.about-grid{
  max-width:var(--maxw); margin:0 auto; padding:0 1.4rem;
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,4vw,4rem); align-items:start;
}
.about-copy p{ color:var(--ink-2); }
.about-quote{
  margin:1.4rem 0; padding:1.3rem 1.5rem; border-left:3px solid var(--accent);
  background:var(--paper-2); border-radius:0 var(--r-md) var(--r-md) 0;
  font-size:1.05rem; color:var(--ink);
}
.about-quote cite{ display:block; margin-top:.7rem; font-style:normal; font-size:.9rem; color:var(--ink-3); }
.about-side{ display:flex; flex-direction:column; gap:1.3rem; }
.about-photo{ border-radius:var(--r-lg); box-shadow:var(--shadow-sm); aspect-ratio:4/5; object-fit:cover; width:100%; }
.about-facts{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.9rem; }
.about-facts li{ display:flex; flex-direction:column; border-left:2px solid var(--accent); padding-left:1rem; }
.about-facts strong{ font-size:.98rem; }
.about-facts span{ color:var(--ink-3); font-size:.92rem; }
@media (max-width:880px){ .about-grid{ grid-template-columns:1fr; } .about-photo{ max-height:420px; } }

/* ---------- estimate ---------- */
.section-dark{
  background:
    radial-gradient(900px 480px at 108% 0%, rgba(143,193,227,.16), transparent 60%),
    var(--ink);
  color:#fff;
}
.section-dark h2{ color:#fff; }
.estimate-grid{
  max-width:var(--maxw); margin:0 auto; padding:0 1.4rem;
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,4vw,4.5rem);
}
.estimate-sub{ color:#C6D2E4; }
.estimate-form{ display:flex; flex-direction:column; gap:1.1rem; margin-top:1.8rem; }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field label{ font-weight:700; font-size:.93rem; letter-spacing:.02em; }
.field input,.field textarea{
  font-family:inherit; font-size:1rem; color:#fff; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.28); border-radius:var(--r-sm);
  padding:.85rem 1rem; min-height:48px; resize:vertical;
}
.field input::placeholder,.field textarea::placeholder{ color:#8DA0BC; }
.field input:focus,.field textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.form-hint{ font-size:.92rem; color:#B9C6DA; margin:0; }
.send-row{ display:flex; gap:.9rem; flex-wrap:wrap; margin-top:.3rem; }
.estimate-side h3{ font-size:.9rem; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); margin:2rem 0 .8rem; }
.estimate-side h3:first-child{ margin-top:0; }
.hours{ border-collapse:collapse; width:100%; font-variant-numeric:tabular-nums; }
.hours td{ padding:.5rem 0; border-bottom:1px solid rgba(255,255,255,.14); font-size:.98rem; color:#DDE6F2; }
.hours td:last-child{ text-align:right; font-weight:500; color:#fff; }
.direct-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.direct-list a{ color:#fff; font-weight:700; font-size:1.05rem; }
.direct-list span{ color:#8DA0BC; font-size:.85rem; margin-left:.6rem; font-weight:400; }
.direct-list li{ display:flex; align-items:baseline; flex-wrap:wrap; }
.areas{ color:#DDE6F2; font-size:.98rem; }
@media (max-width:880px){ .estimate-grid{ grid-template-columns:1fr; } }

/* ---------- footer ---------- */
.footer{ background:#0F1D33; color:#C6D2E4; padding:3rem 0 5.5rem; }
.footer-inner{ max-width:var(--maxw); margin:0 auto; padding:0 1.4rem; display:flex; flex-wrap:wrap; gap:1.6rem 3rem; align-items:center; }
.footer-brand{ display:flex; align-items:center; gap:.8rem; color:#fff; }
.footer-brand strong{ display:flex; flex-direction:column; font-size:.98rem; }
.footer-brand span{ color:#8DA0BC; font-size:.85rem; font-weight:400; }
.footer-links{ display:flex; gap:1.5rem; flex-wrap:wrap; margin-left:auto; font-weight:500; }
.footer-links a{ color:#DDE6F2; }
.footer-note{ width:100%; margin:1.2rem 0 0; font-size:.85rem; color:#68809F; border-top:1px solid rgba(255,255,255,.1); padding-top:1.1rem; }

/* ---------- mobile bar ---------- */
.mob-bar{
  position:fixed; bottom:0; left:0; right:0; z-index:50; display:none;
  background:var(--ink); box-shadow:0 -10px 30px rgba(15,29,51,.35);
  padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
  gap:.55rem;
}
.mob-bar a{
  flex:1; text-align:center; padding:.8rem .4rem; border-radius:999px;
  font-weight:700; font-size:.97rem; min-height:48px; display:flex; align-items:center; justify-content:center;
}
.mob-call,.mob-wa{ background:rgba(255,255,255,.12); color:#fff; }
.mob-cta{ background:var(--accent); color:var(--ink); }
@media (max-width:640px){
  .mob-bar.show{ display:flex; }
  .footer{ padding-bottom:7rem; }
  .hero-phone,.ba-note a,.direct-list a,.footer-links a{ display:inline-block; padding:.7rem .15rem; }
  .footer-links{ gap:.1rem 1.2rem; }
}

/* ---------- lightbox ---------- */
.lightbox{ border:none; border-radius:var(--r-lg); padding:0; background:transparent; max-width:min(92vw,900px); }
.lightbox::backdrop{ background:rgba(15,29,51,.82); backdrop-filter:blur(3px); }
.lightbox img{ border-radius:var(--r-md); max-height:82vh; width:auto; max-width:100%; margin:0 auto; }
.lightbox-close{
  position:absolute; top:-3.2rem; right:0; background:#fff; color:var(--ink); border:none;
  border-radius:999px; padding:.55rem 1.3rem; font-weight:700; font-family:inherit; font-size:.95rem; cursor:pointer;
}

/* ---------- motion (level 4: staggered fade-ups, fire once) ---------- */
.reveal{ opacity:0; transform:translateY(10px); transition:opacity .55s ease, transform .55s ease; }
.reveal.in{ opacity:1; transform:none; }
.reveal-d1{ transition-delay:.07s; } .reveal-d2{ transition-delay:.14s; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .g-item:hover img{ transform:none; }
  .video-frame video{ display:none; }
  .video-frame{ background:#22385C url('/assets/img/hero-poster.jpg?v=1') center/cover; }
}

/* ---------- focus ---------- */
a:focus-visible,button:focus-visible{ outline:3px solid var(--accent-deep); outline-offset:2px; border-radius:6px; }