/* ============================================================================
   Sunshade Roofing — tileroofrepairtucson.com
   Palette sampled directly from the Sunshade logo:
     #1F4F6A sky (top) · #296A8B sky (horizon) · #FF9753 "SUNSHADE" orange
     #708C69 "ROOFING" sage · #435459 cactus · #FFE6BE sand · #2F7598 tagline teal
     #DAD27B sun rays
   Fonts self-hosted. NO Google Fonts on any DFD site.
   Ragat (Greer's pick for H1) is patched for em-dash / en-dash / middot.

   CTA BREAKPOINT RULE — READ BEFORE EDITING
   .header-cta appears at >=900px. .mobile-bar disappears at >=900px.
   These two numbers must always MATCH. The previous build used 1000px on the
   header and 900px on the mobile bar, which left 900–999px with no Call button
   and no Text button visible anywhere. One constant, both rules.
   ========================================================================== */

@font-face{
  font-family:"Ragat";
  src:url("/fonts/ragat.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"InterVar";
  src:url("/fonts/inter-var.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}

:root{
  --sky-deep:#1F4F6A; --sky:#296A8B; --sky-2:#16405A; --sky-3:#123449;
  --line:#2C5B75;
  --sun:#FF9753; --sun-deep:#E07A3C; --sun-text:#B5502A; --sun-glow:#FFB27A;
  --sage:#708C69; --sage-deep:#566E52; --cactus:#435459;
  --sand:#FFE6BE; --sand-light:#FFF4E1; --paper:#FFFDF8;
  --rays:#DAD27B; --tag:#2F7598;
  --ink:#1B3A4C; --muted:#5B6F7C; --muted-light:#A9C2D2;
  --wrap:1180px; --r:14px;
  --shadow:0 10px 30px rgba(20,50,70,.16);
  --display:"Ragat","Arial Black",Impact,system-ui,sans-serif;
  --body:"InterVar",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:100px}
body{
  margin:0;font-family:var(--body);font-size:17px;line-height:1.65;
  color:var(--ink);background:var(--paper);
  padding-bottom:64px; /* room for the mobile CTA bar */
  -webkit-font-smoothing:antialiased;
}
@media(min-width:900px){body{padding-bottom:0}}
img{max-width:100%;height:auto;display:block}
a{color:var(--tag)}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.14;letter-spacing:.01em;margin:0 0 .5em}
h1{font-size:clamp(2rem,5.2vw,3.35rem)}
h2{font-size:clamp(1.55rem,3.4vw,2.3rem)}
h3{font-size:clamp(1.15rem,2vw,1.4rem)}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.25em}
li{margin:.35em 0}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--sun);color:var(--sky-3);padding:.7em 1.2em;z-index:200}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--sun);outline-offset:2px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45em;
  font-family:var(--display);font-size:1.02rem;letter-spacing:.03em;
  padding:.85em 1.5em;border-radius:var(--r);text-decoration:none;
  border:2px solid transparent;white-space:nowrap;transition:transform .12s,filter .12s;
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn:active{transform:translateY(0)}
.btn-sun{background:linear-gradient(135deg,var(--sun),var(--sun-deep));color:var(--sky-3)}
.btn-sand{background:var(--sand);color:var(--sky-3)}
.btn-ghost{background:transparent;color:var(--sand);border-color:var(--sand)}
.btn-lg{font-size:1.14rem;padding:1em 1.8em}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin:1.4em 0 .8em}
.cta-row .btn{flex:1 1 auto;min-width:0}
@media(min-width:620px){.cta-row .btn{flex:0 0 auto}}

/* ---------- header ----------
   LOGO SCALING: the logo is large at rest and shrinks smoothly once the page
   scrolls past 40px (main.js toggles .is-scrolled). Everything keys off the
   --logo-w custom property so ONE number drives the logo size, the header
   height, and the anchor point of the tiled background scene. The scene tiles
   are pinned to the logo's right edge (--logo-x = side padding + logo width),
   so the seam holds at every size and through the transition. Change --logo-w
   and the rest follows; never hard-code a pixel anchor here again. */
.site-header{
  position:sticky;top:0;z-index:90;background:var(--sky-deep);overflow:hidden;
  --logo-w:124px;              /* rest, small screens */
  --pad:20px;
  --logo-x:calc(var(--pad) + var(--logo-w));
}
.site-header.is-scrolled{--logo-w:88px}
.header-in{
  position:relative;display:flex;align-items:center;gap:14px;padding:0 var(--pad);
  min-height:calc(var(--logo-w) + 16px);
  transition:min-height .22s ease;
}
.header-in::before,.header-in::after{
  content:"";position:absolute;top:0;bottom:0;width:50vw;
  background:url("/images/header-scene.webp") repeat-x center/auto 100%;
  pointer-events:none;z-index:0;
  transition:right .22s ease,left .22s ease;
}
.header-in::before{right:calc(100% - var(--logo-x));transform:scaleX(-1)}
.header-in::after{left:var(--logo-x)}
.brand,.nav-toggle,.main-nav,.header-cta{position:relative;z-index:1}
.brand{display:block;flex:none}
.ss-lockup{width:var(--logo-w);height:auto;transition:width .22s ease}
@media(min-width:700px){.site-header{--logo-w:152px}.site-header.is-scrolled{--logo-w:100px}}
@media(min-width:1180px){.site-header{--logo-w:172px}.site-header.is-scrolled{--logo-w:104px}}
@media(prefers-reduced-motion:reduce){
  .ss-lockup,.header-in,.header-in::before,.header-in::after{transition:none}
}
.nav-toggle{
  margin-left:auto;display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:42px;background:rgba(255,255,255,.1);border:1px solid var(--line);
  border-radius:10px;cursor:pointer;padding:0 10px;
}
.nav-toggle span{display:block;height:2px;background:var(--sand);border-radius:2px}
.main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--sky-2);border-top:1px solid var(--line)}
.main-nav.is-open{display:block}
.main-nav ul{list-style:none;margin:0;padding:8px 20px 16px}
.main-nav a{display:block;padding:.7em 0;color:var(--sand);text-decoration:none;font-family:var(--display);letter-spacing:.02em;border-bottom:1px solid rgba(255,230,190,.12)}
.header-cta{display:none;margin-left:auto;gap:6px}
/* CTA STACK: Call spans the full width on top and is the largest target;
   Text and Email sit side by side beneath it at matching, smaller size. */
.header-call{grid-column:1 / -1}

/* --- 900px: the ONE breakpoint. Header CTAs on, mobile bar off. --- */
@media(min-width:900px){
  .nav-toggle{display:none}
  .main-nav{display:block;position:static;background:none;border:0;margin-left:auto}
  .main-nav ul{display:flex;gap:16px;padding:0}
  .main-nav a{padding:.4em 0;border:0;font-size:.95rem}
  .main-nav a:hover{color:var(--sun)}
  .header-cta{display:grid;grid-template-columns:1fr 1fr;margin-left:12px;min-width:230px}
  .header-cta .header-call{padding:.6em 1em;font-size:1rem}
  .header-cta .header-text,.header-cta .header-email{padding:.42em .6em;font-size:.8rem}
  .site-header.is-scrolled .header-cta .header-call{padding:.46em .9em;font-size:.92rem}
  .site-header.is-scrolled .header-cta .header-text,
  .site-header.is-scrolled .header-cta .header-email{padding:.34em .55em;font-size:.75rem}
}
@media(min-width:1180px){
  .main-nav ul{gap:22px}
  .header-cta{min-width:250px}
  .header-cta .header-call{padding:.68em 1.15em;font-size:1.06rem}
  .header-cta .header-text,.header-cta .header-email{padding:.46em .7em;font-size:.84rem}
}
/* Very narrow: keep all three header CTAs reachable by letting them wrap. */
@media(min-width:900px) and (max-width:1060px){
  .main-nav a{font-size:.88rem}
  .header-cta{min-width:200px}
  .header-cta .header-call{padding:.52em .8em;font-size:.92rem}
  .header-cta .header-text,.header-cta .header-email{padding:.36em .5em;font-size:.74rem}
}

/* ---------- strips ---------- */
.license-bar{background:var(--sage-deep);color:var(--sand-light);font-size:.86rem;padding:.55em 0;text-align:center}
.license-bar a{color:var(--sand);text-decoration:underline}
.license-bar strong{color:#fff;font-weight:600}
.info-strip{background:var(--sand);color:var(--cactus);font-size:.83rem;padding:.5em 0}
.info-strip .wrap{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;text-align:center}
.strip-live{display:inline-flex;align-items:center;gap:.5em;font-weight:600;color:var(--sun-text)}
.strip-sep{color:var(--muted-light)}
.pulse{width:9px;height:9px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 0 rgba(255,151,83,.7);animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(255,151,83,0)}100%{box-shadow:0 0 0 0 rgba(255,151,83,0)}}
@media(prefers-reduced-motion:reduce){.pulse{animation:none}html{scroll-behavior:auto}}

/* ---------- hero ---------- */
.hero{background:linear-gradient(160deg,var(--sky-deep),var(--sky-2) 60%,var(--sky-3));color:var(--sand-light);padding:clamp(34px,6vw,64px) 0}
.hero h1{color:#fff}
.hero-in{display:grid;gap:28px}
@media(min-width:960px){.hero-in{grid-template-columns:1.1fr .9fr;align-items:center;gap:40px}}
.hero-sub{font-size:1.1rem;color:var(--sand);margin-bottom:1.1em}
.trust-list{list-style:none;padding:0;margin:0 0 1em;display:grid;gap:.5em}
.trust-list li{position:relative;padding-left:1.7em;font-size:.98rem}
.trust-list li::before{content:"\2713";position:absolute;left:0;color:var(--sun);font-weight:700}
.proof-line{font-size:.92rem;color:var(--muted-light);margin:0}
.hero-media img{border-radius:var(--r);box-shadow:var(--shadow)}

/* ---------- sections ---------- */
.section{padding:clamp(38px,6vw,68px) 0}
.section-alt{background:var(--sand-light)}
.section-dark{background:var(--sky-deep);color:var(--sand-light)}
.section-dark h2{color:#fff}
.lede{font-size:1.06rem;max-width:62ch}

/* citable answer block — the paragraph built to be quoted by Google/LLMs */
.answer-block{background:var(--sand);border-left:6px solid var(--sun);border-radius:var(--r);padding:clamp(18px,3vw,28px);margin:0 0 1.4em}
.answer-block p{margin:0;font-size:1.06rem}
.answer-block p strong{color:var(--sun-text)}

.grid{display:grid;gap:18px}
@media(min-width:640px){.grid-2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:860px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.card{background:#fff;border:1px solid rgba(43,91,117,.14);border-radius:var(--r);padding:20px;box-shadow:0 2px 10px rgba(20,50,70,.05)}
.card h3{margin-bottom:.35em;color:var(--sky-deep)}
.card p:last-child{margin-bottom:0}
.section-dark .card{background:rgba(255,255,255,.06);border-color:var(--line)}
.section-dark .card h3{color:var(--sun-glow)}

/* process */
.steps{counter-reset:s;list-style:none;padding:0;display:grid;gap:14px}
.steps li{counter-increment:s;position:relative;padding:16px 16px 16px 62px;background:#fff;border:1px solid rgba(43,91,117,.14);border-radius:var(--r)}
.steps li::before{
  content:counter(s);position:absolute;left:16px;top:14px;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--sun);color:var(--sky-3);font-family:var(--display);
}

/* cost tables */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 1.2em}
table{border-collapse:collapse;width:100%;min-width:480px;font-size:.95rem;background:#fff}
th,td{text-align:left;padding:.7em .8em;border-bottom:1px solid rgba(43,91,117,.14)}
th{background:var(--sky-deep);color:var(--sand);font-family:var(--display);font-weight:400;letter-spacing:.02em}
tbody tr:nth-child(even){background:var(--sand-light)}
td strong{color:var(--sun-text)}

/* areas */
.area-links{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.area-links a{display:inline-block;padding:.45em .9em;background:var(--sand);color:var(--sky-3);border-radius:999px;text-decoration:none;font-size:.92rem}
.area-links a:hover{background:var(--sun);}

/* reviews */
.review-card{background:#fff;border:1px solid rgba(43,91,117,.14);border-radius:var(--r);padding:20px}
.stars{color:var(--sun);letter-spacing:.12em;font-size:1.05rem}
.review-card blockquote{margin:.5em 0;font-style:italic}
.review-meta{font-size:.88rem;color:var(--muted);margin:0}

/* call band — every one carries all three CTAs */
.cta-band{background:linear-gradient(135deg,var(--sky-deep),var(--sky));color:var(--sand-light);border-radius:var(--r);padding:clamp(22px,4vw,34px);margin:0 0 1em;text-align:center}
.cta-band h2,.cta-band h3{color:#fff;margin-bottom:.4em}
.cta-band .cta-row{justify-content:center}

/* offer */
.offer{background:var(--sand);border-radius:var(--r);padding:clamp(22px,4vw,34px)}

/* form */
.form-wrap{background:#fff;border:1px solid rgba(43,91,117,.16);border-radius:var(--r);padding:clamp(20px,4vw,32px);box-shadow:var(--shadow)}
/* min-width:0 / minmax(0,1fr) everywhere: grid items default to min-width:auto,
   so an <input> cannot shrink below its intrinsic ~398px default width and the
   whole page gains a horizontal scrollbar on a 360-390px phone. */
.lead-form{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.field{display:grid;gap:.3em;min-width:0}
.field label{font-size:.9rem;font-weight:600;color:var(--sky-deep)}
.field input,.field select,.field textarea{min-width:0;max-width:100%;
  font:inherit;font-size:1rem;padding:.75em .85em;border:1px solid rgba(43,91,117,.3);
  border-radius:10px;background:var(--paper);color:var(--ink);width:100%;
}
.field textarea{min-height:110px;resize:vertical}
.field-row{min-width:0}
@media(min-width:680px){.field-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}}
.hp{position:absolute;left:-9999px}
.microcopy{background:var(--sand-light);border-left:4px solid var(--sun);padding:.9em 1em;border-radius:8px;font-size:.93rem;margin:0}
.consent{font-size:.82rem;color:var(--muted);margin:0}
/* .btn sets white-space:nowrap, which is right for Call/Text/Email but makes the
   long submit label overflow a 320px phone. Let this one wrap. */
.lead-form button[type=submit]{white-space:normal;line-height:1.25;text-align:center}
.form-success{background:var(--sand);border-left:6px solid var(--sage);border-radius:var(--r);padding:24px}
.form-success h3{color:var(--sage-deep);margin-bottom:.3em}

/* faq */
.faq-item{border-bottom:1px solid rgba(43,91,117,.16);padding:1em 0}
.faq-item:last-child{border-bottom:0}
.faq-item h3{margin-bottom:.3em;color:var(--sky-deep);font-family:var(--body);font-weight:700;font-size:1.05rem;line-height:1.4}
.faq-item p:last-child{margin-bottom:0}

/* ---------- footer ---------- */
.site-footer{background:var(--sky-3);color:var(--sand);margin-top:clamp(30px,5vw,50px);padding:clamp(30px,5vw,52px) 0 20px;font-size:.95rem}
.footer-grid{display:grid;gap:26px}
@media(min-width:700px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.footer-grid{grid-template-columns:1.1fr 1fr 1fr 1fr}}
.site-footer h3{color:var(--sun-glow);font-size:1.05rem;margin-bottom:.5em}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer a{color:var(--sand);text-decoration:none}
.site-footer a:hover{color:var(--sun);text-decoration:underline}
.ss-stack{width:150px}
.footer-tagline{font-family:var(--display);color:var(--sun-glow);margin:.6em 0 .2em}
.footer-roc{font-size:.86rem;color:var(--muted-light);margin:0}
.footer-legal{border-top:1px solid var(--line);margin-top:26px;padding-top:18px;font-size:.82rem;color:var(--muted-light)}
.footer-legal a{color:var(--sun-glow)}
.dfd-credit a{display:inline-flex;align-items:center;gap:.5em}
.dfd-credit span{font-size:.78rem}


.footer-about{border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:24px;max-width:78ch}
.footer-about h2{font-size:1.15rem;color:var(--sun-glow);margin-bottom:.4em}
.footer-about p{font-size:.9rem;color:var(--muted-light);margin-bottom:.7em}
.footer-about p:last-child{margin-bottom:0}

/* ---------- mobile CTA bar — three buttons, off at 900px ---------- */
.mobile-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  display:grid;grid-template-columns:1.25fr 1fr 1fr;
  box-shadow:0 -4px 18px rgba(10,30,45,.28);
}
.mobile-bar a{
  display:flex;align-items:center;justify-content:center;gap:.35em;
  padding:15px 6px;font-family:var(--display);font-size:1rem;
  text-decoration:none;letter-spacing:.02em;
}
.mb-call{background:linear-gradient(135deg,var(--sun),var(--sun-deep));color:var(--sky-3)}
.mb-text{background:var(--sand);color:var(--sky-3)}
.mb-email{background:var(--sky-3);color:var(--sand)}
@media(max-width:360px){.mobile-bar a{font-size:.9rem;padding:14px 4px}}
@media(min-width:900px){.mobile-bar{display:none}}

@media print{.site-header,.mobile-bar,.info-strip,.license-bar,.cta-band{display:none}body{padding-bottom:0}}