/* ============================================================
   JJ's Roof Tile Repairs — styles
   ============================================================ */

:root{
  --clay:      #cf5f1e;
  --clay-2:    #ea8340;
  --clay-deep: #9c4213;
  --ink:       #15171a;
  --ink-2:     #1e2226;
  --ink-3:     #2b3036;
  --bone:      #f9f5f0;
  --sand:      #ece3d8;
  --line:      #ddd2c4;
  --text:      #24272b;
  --muted:     #6b6660;
  --muted-d:   #a8a29a;

  --wrap: 1180px;
  --r:    14px;
  --r-lg: 22px;

  --shadow:    0 1px 2px rgba(21,23,26,.06), 0 8px 24px -12px rgba(21,23,26,.18);
  --shadow-lg: 0 2px 4px rgba(21,23,26,.06), 0 28px 60px -28px rgba(21,23,26,.42);

  --f-body:   'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-head:   'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  --f-script: 'Great Vibes', 'Snell Roundhand', 'Apple Chancery', cursive;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--f-body);
  font-size:clamp(16px,.55vw + 14.4px,17.5px);
  line-height:1.62;
  color:var(--text);
  background:var(--bone);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--f-head); font-weight:700; line-height:1.04; margin:0;
          letter-spacing:.005em; text-wrap:balance; }
h2{ font-size:clamp(2.1rem,4.4vw,3.5rem); text-transform:uppercase; letter-spacing:.012em; }
h3{ font-size:clamp(1.25rem,1.6vw,1.5rem); text-transform:uppercase; letter-spacing:.02em; }
p{ margin:0; }

.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }
.skip{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--clay); color:#fff; padding:.7rem 1.1rem; border-radius:0 0 var(--r) 0;
}
.skip:focus{ left:0; }

:where(a,button,input,select,textarea):focus-visible{
  outline:3px solid var(--clay-2); outline-offset:3px; border-radius:4px;
}

.eyebrow{
  font-family:var(--f-head); font-weight:600; text-transform:uppercase;
  letter-spacing:.2em; font-size:.82rem; color:var(--clay);
  margin-bottom:.85rem;
}
.section-dark .eyebrow{ color:var(--clay-2); }

/* ---------- Brand lockup ---------- */
.brand,.foot-brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.brand-mark{
  font-family:var(--f-script);
  font-size:2.05rem; line-height:1;
  width:44px; height:44px; flex:0 0 44px;
  display:grid; place-items:center;
  color:var(--clay-2);
  background:linear-gradient(150deg,var(--ink-3),var(--ink));
  border:1px solid rgba(234,131,64,.35);
  border-radius:13px;
  padding-bottom:.32em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
}
.brand-txt,.foot-brand div{ display:flex; flex-direction:column; }
.brand-script{
  font-family:var(--f-script); font-size:1.65rem; line-height:.9;
  color:var(--bone); letter-spacing:.01em;
}
.brand-sub{
  font-family:var(--f-head); font-weight:600; text-transform:uppercase;
  letter-spacing:.16em; font-size:.66rem; color:var(--muted-d); margin-top:.28rem;
}

/* ---------- Header ---------- */
.site-head{
  position:fixed; inset:0 0 auto; z-index:100;
  background:transparent;
  transition:background .35s var(--ease), box-shadow .35s var(--ease);
}
.site-head::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom,rgba(10,11,13,.62),transparent);
  pointer-events:none; transition:opacity .35s var(--ease);
}
.site-head.stuck{ background:rgba(21,23,26,.94); backdrop-filter:blur(12px);
                  box-shadow:0 1px 0 rgba(255,255,255,.07), 0 10px 30px -18px #000; }
.site-head.stuck::before{ opacity:0; }
.head-inner{ display:flex; align-items:center; gap:1.5rem; padding:.9rem 0; position:relative; }
.nav{ margin-left:auto; display:flex; align-items:center; gap:.35rem; }
.nav a{
  font-family:var(--f-head); font-weight:600; text-transform:uppercase;
  letter-spacing:.1em; font-size:.85rem; color:rgba(249,245,240,.82);
  text-decoration:none; padding:.55rem .78rem; border-radius:9px;
  transition:color .2s, background .2s;
}
.nav a:hover{ color:#fff; background:rgba(255,255,255,.1); }
.nav .nav-cta{
  background:var(--clay); color:#fff; margin-left:.5rem; padding-inline:1.15rem;
  box-shadow:0 8px 20px -10px var(--clay);
}
.nav .nav-cta:hover{ background:var(--clay-2); }

.nav-toggle{
  display:none; margin-left:auto; width:44px; height:44px; padding:11px 10px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  border-radius:11px; cursor:pointer;
  flex-direction:column; justify-content:space-between;
}
.nav-toggle span{ display:block; height:2px; background:var(--bone); border-radius:2px;
                  transition:transform .3s var(--ease), opacity .2s; transform-origin:center; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--f-head); font-weight:700; text-transform:uppercase;
  letter-spacing:.09em; font-size:1rem;
  padding:.92rem 1.7rem; border-radius:11px; border:1px solid transparent;
  text-decoration:none; cursor:pointer;
  transition:transform .18s var(--ease), background .2s, box-shadow .25s, color .2s;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn-primary{ background:var(--clay); color:#fff; box-shadow:0 12px 28px -14px var(--clay); }
.btn-primary:hover{ background:var(--clay-2); box-shadow:0 18px 34px -14px var(--clay); }
.btn-ghost{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.36);
            backdrop-filter:blur(6px); }
.btn-ghost:hover{ background:rgba(255,255,255,.17); }
.btn-block{ width:100%; }

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:min(100svh,860px); display:grid; align-items:center;
       overflow:hidden; isolation:isolate; }
.hero-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  animation:heroIn 1.6s var(--ease) both;
}
@keyframes heroIn{ from{ transform:scale(1.07); } to{ transform:scale(1); } }
.hero-scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(105deg,rgba(12,13,15,.9) 0%,rgba(12,13,15,.72) 42%,rgba(12,13,15,.24) 78%),
    linear-gradient(to top,rgba(12,13,15,.85),transparent 46%);
}
.hero-inner{ padding:9rem 0 6.5rem; color:#fff; max-width:62ch; }
/* the capital J swash rides high — keep it clear of the eyebrow */
.hero .eyebrow{ margin-bottom:2.9rem; }
.hero-title{ margin-bottom:1.35rem; }
.hero-title .script{
  display:block;
  font-family:var(--f-script); font-weight:400; text-transform:none;
  font-size:clamp(4.2rem,12.5vw,9.5rem); line-height:.82;
  color:var(--clay-2);
  text-shadow:0 6px 34px rgba(0,0,0,.5);
  margin-left:-.06em;
}
.hero-title .stack{
  display:block; margin-top:.4em;
  font-size:clamp(1.9rem,5.1vw,3.9rem); line-height:1;
  text-transform:uppercase; letter-spacing:.055em; color:#fff;
}
.hero-lede{ font-size:clamp(1.05rem,1.3vw,1.2rem); color:rgba(255,255,255,.9);
            max-width:46ch; margin-bottom:2rem; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:2.6rem; }
.hero-chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.55rem; }
.hero-chips li{
  font-family:var(--f-head); font-weight:600; text-transform:uppercase;
  letter-spacing:.1em; font-size:.78rem; color:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.07);
  padding:.42rem .85rem; border-radius:100px; backdrop-filter:blur(4px);
}
.hero-chips li::before{ content:'✓'; color:var(--clay-2); margin-right:.45rem; font-weight:700; }

.scroll-hint{
  position:absolute; left:50%; bottom:1.6rem; translate:-50% 0;
  width:26px; height:42px; border:2px solid rgba(255,255,255,.4); border-radius:14px;
  display:grid; justify-items:center; padding-top:7px;
}
.scroll-hint span{ width:3px; height:8px; border-radius:2px; background:rgba(255,255,255,.85);
                   animation:scrollDot 1.9s var(--ease) infinite; }
@keyframes scrollDot{ 0%,100%{ transform:translateY(0); opacity:1 }
                      55%{ transform:translateY(12px); opacity:.15 } }

/* ---------- Section shells ---------- */
.section{ padding:clamp(4.5rem,9vw,7.5rem) 0; }
.section-dark{ background:var(--ink); color:#e7e3dd; }
.section-dark h2,.section-dark h3{ color:#fff; }
.section-clay{
  background:linear-gradient(160deg,var(--sand),#f5ece1 60%);
  border-block:1px solid var(--line);
}
.sec-head{ max-width:62ch; margin-bottom:clamp(2.5rem,4.5vw,4rem); }
.sec-lede{ margin-top:1.15rem; font-size:1.08rem; color:var(--muted); max-width:56ch; }
.section-dark .sec-lede{ color:#a9a49c; }

/* ---------- Services ---------- */
.svc-grid{ display:grid; gap:clamp(1.5rem,2.4vw,2rem);
           grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.svc{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.svc:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.svc-media{ display:block; aspect-ratio:16/11; overflow:hidden; background:var(--ink-2); }
.svc-media img{ width:100%; height:100%; object-fit:cover;
                transition:transform .7s var(--ease); }
/* tall portrait shots: frame the ridge line, not the sky */
.img-low{ object-position:center 72%; }
.svc:hover .svc-media img{ transform:scale(1.055); }
.svc-body{ padding:1.7rem 1.6rem 1.9rem; display:flex; flex-direction:column; flex:1; }
.svc-num{
  font-family:var(--f-head); font-weight:700; font-size:.8rem; letter-spacing:.22em;
  color:var(--clay); display:block; margin-bottom:.5rem;
}
.svc h3{ margin-bottom:.85rem; }
.svc p{ color:var(--muted); }
.ticks{ list-style:none; margin:1.35rem 0 0; padding:0; display:grid; gap:.55rem;
        border-top:1px solid var(--line); padding-top:1.2rem; }
.ticks li{ position:relative; padding-left:1.65rem; font-size:.95rem; color:var(--text); }
.ticks li::before{
  content:''; position:absolute; left:0; top:.52em;
  width:9px; height:9px; border-radius:50%;
  background:var(--clay); box-shadow:0 0 0 3px rgba(207,95,30,.16);
}

/* ---------- Work blocks ---------- */
.work-block{ margin-top:clamp(3rem,6vw,5rem); }
.work-block:first-of-type{ margin-top:0; }
.work-label{ max-width:56ch; margin-bottom:1.6rem; }
.work-split{
  display:grid; align-items:center;
  gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
}
.work-split .work-label{ margin-bottom:0; }
.work-split .ba-tall{ max-width:none; }
.tag{
  display:inline-block; font-family:var(--f-head); font-weight:700;
  text-transform:uppercase; letter-spacing:.18em; font-size:.72rem;
  color:var(--clay-2); border:1px solid rgba(234,131,64,.4);
  padding:.28rem .7rem; border-radius:100px; margin-bottom:.9rem;
}
.work-label h3{ font-size:clamp(1.5rem,2.6vw,2.1rem); margin-bottom:.7rem; }
.work-label p{ color:#a9a49c; }

/* ---------- Before / after slider ---------- */
.ba{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  --pos:50%;
  box-shadow:var(--shadow-lg); background:var(--ink-2);
  margin-bottom:1.6rem; touch-action:pan-y;
  user-select:none; -webkit-user-select:none;
}
.ba:last-child{ margin-bottom:0; }
.ba-tall{ max-width:640px; }
.ba-img{ width:100%; display:block; }
.ba-before{ position:relative; }
.ba-after{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  clip-path:inset(0 0 0 var(--pos));
}
.ba::after{  /* divider line */
  content:''; position:absolute; top:0; bottom:0; left:var(--pos);
  width:2px; margin-left:-1px; background:rgba(255,255,255,.92);
  box-shadow:0 0 14px rgba(0,0,0,.45); pointer-events:none; z-index:2;
}
.ba-handle{
  position:absolute; top:50%; left:var(--pos); translate:-50% -50%;
  width:52px; height:52px; border-radius:50%; z-index:3;
  background:rgba(255,255,255,.96); box-shadow:0 6px 22px rgba(0,0,0,.4);
  display:grid; place-items:center; pointer-events:none;
  transition:scale .2s var(--ease);
}
.ba-handle i{
  width:20px; height:12px;
  background:
    linear-gradient(var(--ink),var(--ink)) left center/6px 12px no-repeat,
    linear-gradient(var(--ink),var(--ink)) right center/6px 12px no-repeat;
  clip-path:polygon(0 50%,45% 0,45% 100%, 55% 0,100% 50%,55% 100%);
}
.ba:hover .ba-handle{ scale:1.08; }
.ba-range{
  position:absolute; inset:0; z-index:4;
  width:100%; height:100%; margin:0; padding:0;
  opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none;
  background:transparent;
}
.ba-range::-webkit-slider-thumb{ -webkit-appearance:none; width:56px; height:100vh; }
.ba-range::-moz-range-thumb{ width:56px; height:100vh; border:0; }
.ba-range:focus-visible ~ .ba-handle{ outline:3px solid var(--clay-2); outline-offset:4px; }
.ba-tag{
  position:absolute; top:1rem; z-index:2;
  font-family:var(--f-head); font-weight:700; text-transform:uppercase;
  letter-spacing:.15em; font-size:.72rem; color:#fff;
  background:rgba(12,13,15,.72); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.2);
  padding:.34rem .8rem; border-radius:100px; pointer-events:none;
}
.ba-tag-before{ left:1rem; }
.ba-tag-after{ right:1rem; background:rgba(207,95,30,.9); border-color:rgba(255,255,255,.28); }

/* ---------- Gallery ---------- */
.gal{ display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.gal-item{
  position:relative; margin:0; border-radius:var(--r); overflow:hidden;
  background:var(--ink-2); box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column;
}
.gal-item img{ width:100%; aspect-ratio:4/3; object-fit:cover;
               transition:transform .7s var(--ease); }
.gal-item:hover img{ transform:scale(1.05); }
.gal-wide{ grid-column:1/-1; }
.gal-wide img{ aspect-ratio:16/7; }
.gal-item figcaption{
  padding:.95rem 1.1rem 1.15rem; font-size:.92rem; color:#a9a49c;
  background:var(--ink-2); flex:1;
}
.gal-item figcaption strong{ color:#fff; }
.badge{
  position:absolute; top:.85rem; left:.85rem; z-index:2;
  font-family:var(--f-head); font-weight:700; text-transform:uppercase;
  letter-spacing:.15em; font-size:.68rem; color:#fff;
  padding:.3rem .72rem; border-radius:100px;
  border:1px solid rgba(255,255,255,.24); backdrop-filter:blur(6px);
}
.badge-before{ background:rgba(12,13,15,.75); }
.badge-after{ background:rgba(207,95,30,.92); }

/* ---------- Warning signs ---------- */
.signs-grid{ display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(265px,1fr)); }
.sign{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:1.7rem 1.5rem; box-shadow:var(--shadow);
  transition:transform .3s var(--ease), border-color .3s;
}
.sign:hover{ transform:translateY(-4px); border-color:var(--clay-2); }
.sign svg{
  width:34px; height:34px; margin-bottom:1rem;
  fill:none; stroke:var(--clay); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.sign h3{ font-size:1.12rem; margin-bottom:.6rem; }
.sign p{ color:var(--muted); font-size:.96rem; }

/* ---------- Process ---------- */
.steps{ list-style:none; margin:0; padding:0; display:grid; gap:1.2rem;
        grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); counter-reset:s; }
.step{ position:relative; padding-top:1.9rem; border-top:2px solid var(--line); }
.step-n{
  position:absolute; top:-1.35rem; left:0;
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--f-head); font-weight:700; font-size:1.25rem; color:#fff;
  background:var(--clay); box-shadow:0 8px 20px -10px var(--clay);
  border:4px solid #f2e9dd;
}
.step h3{ margin:.85rem 0 .6rem; font-size:1.15rem; }
.step p{ color:var(--muted); font-size:.97rem; }

/* ---------- Areas ---------- */
.areas-inner{ display:grid; gap:clamp(2rem,4vw,4rem); grid-template-columns:1fr 1fr;
              align-items:center; }
.areas-lede{ margin-bottom:2rem; }
.area-list{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.area-list li{
  background:#fff; border:1px solid var(--line); border-left:4px solid var(--clay);
  border-radius:10px; padding:.9rem 1.15rem;
  font-family:var(--f-head); font-weight:600; letter-spacing:.03em; font-size:1.05rem;
  transition:transform .25s var(--ease);
}
.area-list li:hover{ transform:translateX(5px); }

/* ---------- Quote ---------- */
.quote-inner{ display:grid; gap:clamp(2.2rem,4vw,4rem); grid-template-columns:1fr 1fr;
              align-items:start; }
.contact-cards{ display:grid; gap:.8rem; margin-top:2.2rem; }
.contact-card{
  display:flex; align-items:center; gap:1rem; text-decoration:none;
  background:var(--ink-2); border:1px solid var(--ink-3); border-radius:var(--r);
  padding:1rem 1.2rem; transition:border-color .25s, transform .25s var(--ease);
}
.contact-card:hover{ border-color:var(--clay); transform:translateY(-3px); }
.contact-card svg{ width:24px; height:24px; flex:0 0 24px; fill:none; stroke:var(--clay-2);
                   stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.contact-card span{ display:flex; flex-direction:column; min-width:0; }
.contact-card small{ font-family:var(--f-head); text-transform:uppercase;
                     letter-spacing:.16em; font-size:.68rem; color:var(--muted-d); }
.contact-card strong{ font-size:1.02rem; color:#fff; font-weight:500;
                      overflow-wrap:anywhere; }

.quote-form{
  background:#fff; border-radius:var(--r-lg); padding:clamp(1.6rem,3vw,2.3rem);
  box-shadow:var(--shadow-lg); color:var(--text);
}
.field{ display:flex; flex-direction:column; margin-bottom:1.05rem; }
.quote-form .row{ display:grid; gap:1.05rem; grid-template-columns:1fr 1fr; }
.field label{
  font-family:var(--f-head); font-weight:600; text-transform:uppercase;
  letter-spacing:.11em; font-size:.78rem; color:var(--muted); margin-bottom:.4rem;
}
.field .opt{ text-transform:none; letter-spacing:0; font-weight:400; }
.field input,.field select,.field textarea{
  font-family:var(--f-body); font-size:1rem; color:var(--text);
  background:var(--bone); border:1px solid var(--line); border-radius:10px;
  padding:.78rem .9rem; transition:border-color .2s, background .2s;
}
.field textarea{ resize:vertical; }
.field :is(input,select,textarea):focus{ background:#fff; border-color:var(--clay); }
.form-note{ text-align:center; font-size:.87rem; color:var(--muted); margin-top:.9rem; }

/* ---------- Footer ---------- */
.site-foot{ background:#0f1113; color:#8f8a83; padding:3.5rem 0 2.5rem; }
.foot-inner{ display:grid; gap:1.6rem; justify-items:center; text-align:center; }
.foot-nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:.35rem 1.4rem; }
.foot-nav a{
  font-family:var(--f-head); font-weight:600; text-transform:uppercase;
  letter-spacing:.11em; font-size:.83rem; color:#b6b0a8; text-decoration:none;
}
.foot-nav a:hover{ color:var(--clay-2); }
.foot-fine{ font-size:.9rem; line-height:1.8; }
.foot-copy{ font-size:.82rem; color:#5f5b56; }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(26px);
         transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .areas-inner,.quote-inner,.work-split{ grid-template-columns:1fr; }
  .work-split .work-label{ margin-bottom:1.6rem; }
  .work-split .ba-tall{ max-width:640px; }
  .nav-toggle{ display:flex; }
  .nav{
    position:absolute; inset:calc(100% + .4rem) 0 auto;
    flex-direction:column; align-items:stretch; gap:.2rem;
    background:rgba(21,23,26,.97); backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.1); border-radius:var(--r);
    padding:.6rem; margin:0 1.25rem;
    box-shadow:var(--shadow-lg);
    display:none;
  }
  .nav.open{ display:flex; }
  .nav a{ padding:.85rem 1rem; font-size:.95rem; }
  .nav .nav-cta{ margin:.35rem 0 0; text-align:center; justify-content:center; }
  .hero-inner{ padding:7.5rem 0 5.5rem; }
}
@media (max-width:620px){
  .quote-form .row{ grid-template-columns:1fr; }
  .gal-wide img{ aspect-ratio:4/3; }
  .ba-handle{ width:44px; height:44px; }
  .hero-cta .btn{ flex:1 1 100%; }
}

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