*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

html{scroll-behavior:smooth;overflow-x:hidden;}

body{
margin:0;
font-family:Arial,Helvetica,sans-serif;
background:#f7f5ef;
color:#111;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}

.ribbon{
height:40px;
background:#dba514;
display:flex;
align-items:center;
justify-content:center;
gap:45px;
font-weight:900;
font-size:14px;
}

header{
height:100px;
background:#111;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 7%;
position:sticky;
top:0;
z-index:500;
}

.logo{
height:105px;
background:transparent;
object-fit:contain;
}

nav a{
color:white;
margin:20px;
font-weight:700;
}

.hero{
min-height:850px;
background:
linear-gradient(90deg,rgba(0,0,0,.55) 10%,rgba(0,0,0,.15)),
url('assets/hero.png');
background-size:cover;
display:grid;
grid-template-columns:1.2fr .8fr;
align-items:center;
gap:60px;
padding:6%;
color:white;
}

.hero-logo{
width:320px;
}

.badge{
display:inline-block;
border:1px solid #dba514;
padding:10px 18px;
color:#dba514;
font-weight:bold;
}

h1{
font-size:76px;
line-height:.95;
}

.hero p{
font-size:22px;
}

.quote-box{
border:2px solid #dba514;
background:rgba(15,15,15,.88);
padding:40px;
border-radius:10px;
}

.quote-box span{
color:#dba514;
}

input,select,textarea{
width:100%;
margin:8px 0;
padding:16px;
background:#080808;
border:1px solid #555;
color:white;
}

button{
width:100%;
padding:18px;
background:#dba514;
border:0;
font-weight:900;
}

.icon-row,.cards,.diff-grid,.gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
}

.icon-card{
border:2px solid #dba514;
border-radius:50%;
height:100px;
width:100px;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
}

section{
padding:90px 7%;
}



.services{
text-align:center;
}

.script{
font-size:40px;
color:#dba514;
font-family:cursive;
}

.cards>div{
background:white;
padding:40px;
border:1px solid #dba514;
box-shadow:0 20px 60px #0002;
}

.circle{
margin:auto;
height:80px;
width:80px;
background:#111;
color:#dba514;
border-radius:50%;
border:3px solid #dba514;
display:flex;
align-items:center;
justify-content:center;
font-size:32px;
}

.difference{
background:#111;
color:white;
}

.diff-grid div{
border-left:1px solid #dba514;
padding:30px;
text-align:center;
}

.gallery img{
width:100%;
border-radius:10px;
}

footer{
background:#080808;
color:#dba514;
text-align:center;
padding:70px;
letter-spacing:8px;
}

/* old mobile block removed — handled by comprehensive breakpoints below */


/* Transparent logo premium integration */

.logo,
.hero-logo,
footer img{
background:transparent !important;
filter: drop-shadow(0 12px 25px rgba(0,0,0,.45));
}

.hero-logo{
mix-blend-mode:normal;
}

header .logo{
height:120px;
}



/* Hero photo luxury upgrade */

.hero{
filter:none;
background-position:center;
}

.hero::before{
content:"";
position:absolute;
}

.hero{
position:relative;
}

.hero:after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
180deg,
rgba(255,210,80,.12),
rgba(255,255,255,.05)
);
pointer-events:none;
}

.hero-left,
.quote-box{
position:relative;
z-index:2;
}

/* removed duplicate hero logo */
.hero-logo{
display:none;
}



/* Final polish updates */

header{
height:130px;
overflow:visible;
}

.logo{
height:125px !important;
max-width:280px;
object-fit:contain;
}

.hero{
align-items:start;
padding-top:90px;
}

.hero-left{
padding-top:30px;
}

.hero h1{
margin-top:0;
}

.badge,
.icon-row{
display:none!important;
}

/* Premium footer rebuild */

.premium-footer{
background:#080808;
color:white;
display:grid;
grid-template-columns:1.3fr 1fr 1fr;
gap:60px;
text-align:left;
padding:90px 8%;
letter-spacing:normal;
border-top:4px solid #dba514;
}

.premium-footer h2{
color:#dba514;
font-size:42px;
}

.premium-footer h3{
color:#dba514;
}

.premium-footer p{
line-height:1.8;
color:#ddd;
}

.premium-footer ul{
padding:0;
columns:2;
}

.premium-footer li{
list-style:none;
margin-bottom:12px;
color:#ddd;
}

@media(max-width:900px){

.premium-footer{
grid-template-columns:1fr;
}

header{
height:110px;
}

.logo{
height:95px!important;
}

}



/* Process + Trust + Reviews upgrade */

.process-section,
.homeowners,
.reviews{
background:#f8f6ef;
color:#111;
padding:100px 7%;
}

.gold-label{
color:#dba514;
font-size:28px;
font-family:cursive;
}

.process-grid,
.trust-photo-grid,
.review-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
}

.process-card,
.trust-photo-grid div,
.review-grid div{
background:white;
padding:45px;
border-radius:20px;
border:1px solid #dba514;
box-shadow:0 25px 70px rgba(0,0,0,.12);
}

.process-card span{
font-size:45px;
font-weight:900;
color:#dba514;
}

.process-card h3{
font-size:28px;
}

.homeowners{
background:#111;
color:white;
}

.trust-photo-grid div{
background:#181818;
color:white;
}

.rating{
font-size:28px;
margin-bottom:30px;
color:#111;
}

.reviews button{
margin-top:30px;
background:#dba514;
padding:18px 35px;
border:0;
font-weight:bold;
}



/* Spacing + layout optimization */

.process-section{
padding-top:70px !important;
padding-bottom:80px !important;
}

.process-title{
text-align:center;
max-width:900px;
margin:0 auto 55px auto;
font-size:52px;
line-height:1.1;
}

.process-grid{
margin-top:20px;
}

section{
padding-top:75px;
padding-bottom:75px;
}

.hero{
min-height:760px;
}

.hero-left{
display:flex;
flex-direction:column;
justify-content:center;
}

.cards,
.process-grid,
.trust-photo-grid,
.review-grid{
align-items:stretch;
}

.process-card{
display:flex;
flex-direction:column;
justify-content:flex-start;
}

.process-card span{
margin-bottom:10px;
}

@media(max-width:800px){

.process-title{
font-size:38px;
}

section{
padding-top:55px;
padding-bottom:55px;
}

}



/* Final layout refinement */

.centered-heading,
.main-trust-title,
.review-title{
text-align:center;
font-weight:900;
}

.main-trust-title{
font-size:54px;
margin-bottom:55px;
}

.gold-label.centered-heading{
font-size:34px;
display:block;
}

.review-title{
font-size:52px;
}

.rating{
text-align:center;
font-size:32px;
margin:0 auto 50px auto;
}

.rating strong{
font-size:60px;
color:#dba514;
}

/* Bigger premium branding */

header{
height:145px;
}

.logo{
height:145px !important;
max-width:340px;
}

/* enlarge top ribbon icons/text */

.ribbon{
height:52px;
font-size:17px;
gap:55px;
}

.ribbon span{
display:flex;
align-items:center;
font-weight:900;
}
.ribbon .ribbon-icon{font-size:17px;margin-right:4px;}

/* rebalance after removing section */

.homeowners{
padding-bottom:85px;
}

@media(max-width:900px){

.logo{
height:105px!important;
}

.ribbon{
font-size:12px;
gap:15px;
}

}



/* FIXED Trust Images */

.trust-card{
padding:0!important;
overflow:hidden;
border-radius:22px;
}

.trust-card img{
width:100%;
height:260px;
object-fit:cover;
display:block;
}

.trust-card h3{
padding:30px 30px 5px;
font-size:26px;
}

.trust-card p{
padding:0 30px 35px;
}



/* Real photography trust cards */

.trust-card img{
height:280px!important;
width:100%;
object-fit:cover;
filter:contrast(1.05) brightness(1.05);
}



/* Final spacing/mobile/header fixes */
section{padding-top:55px!important;padding-bottom:55px!important;}
nav a{font-size:18px;font-weight:900;}
.ribbon span{font-size:17px!important;}
.hero{grid-template-columns:1.35fr .65fr!important;gap:40px!important;}
.hero-left{max-width:560px;align-items:flex-start;}
.hero p{font-size:18px!important;max-width:500px;line-height:1.55;margin-top:-15px;}
.quote-box{max-width:430px;margin-left:auto;}
.consent{display:flex;gap:10px;color:white;font-size:12px;line-height:1.4;margin:10px 0 15px;}
.consent input{width:auto;}
.gold-label.centered-heading,.services-section .gold-label,.roofing-services .gold-label{font-family:Montserrat,sans-serif!important;font-size:34px!important;font-weight:900!important;}
.main-trust-title,.services-title,.roofing-services h2{font-family:Montserrat,sans-serif!important;font-size:54px!important;font-weight:900!important;}
.footer-services,.footer-contact{text-align:center;}
/* ── Hamburger menu ── */
.hamburger{display:none;background:none;border:none;color:white;font-size:32px;cursor:pointer;padding:0;line-height:1;}
.hamburger:focus{outline:none;}
.nav-close{display:none;}

@media(max-width:900px){
  /* Ribbon: show only first 2 items, bigger on mobile */
  .ribbon{height:auto;flex-wrap:nowrap;padding:12px 16px;gap:0;justify-content:space-around;}
  .ribbon span{font-size:14px!important;font-weight:900!important;gap:4px;}
  .ribbon span:nth-child(n+3){display:none;}

  /* Header: logo left, hamburger far right via flexbox */
  header{
    height:74px!important;
    padding:0 16px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    position:sticky!important;
    top:0!important;
    z-index:500!important;
    box-sizing:border-box!important;
    width:100%!important;
  }
  .hamburger{
    display:block!important;
    background:none!important;
    border:none!important;
    color:white!important;
    font-size:32px!important;
    cursor:pointer!important;
    padding:8px!important;
    line-height:1!important;
    flex-shrink:0!important;
  }
  .logo{height:64px!important;max-width:160px;}

  /* Nav overlay */
  nav{
    display:none!important;
    position:fixed!important;
    top:0!important;left:0!important;right:0!important;bottom:0!important;
    background:rgba(10,10,10,.97)!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:0!important;
    z-index:999!important;
  }
  nav.open{display:flex!important;}
  nav.open .nav-close{
    display:block;
    position:absolute;
    top:24px;right:28px;
    color:white;font-size:36px;
    background:none;border:none;cursor:pointer;
  }
  nav a{
    font-size:26px!important;
    font-weight:900;
    padding:18px 0;
    width:100%;
    text-align:center;
    border-bottom:1px solid #222;
    margin:0!important;
  }
  nav a:last-child{border-bottom:none;}

  /* Hero */
  .hero{grid-template-columns:1fr!important;padding:30px 5% 45px!important;min-height:auto!important;gap:24px!important;}
  .hero h1{font-size:34px!important;line-height:1.05;}
  .hero p{font-size:14px!important;margin-top:0;}
  .quote-box{max-width:100%;margin:0;}
  .quote-box h2{font-size:20px;}
  input,select,textarea{font-size:16px;} /* prevents iOS zoom on focus */

  /* Sections */
  section{padding-top:36px!important;padding-bottom:36px!important;}
  .process-title{font-size:24px!important;}
  .main-trust-title{font-size:26px!important;}
  .review-title{font-size:26px!important;}
  .gold-label.centered-heading{font-size:20px!important;}
  .process-card h3{font-size:20px;}
  .process-card span{font-size:34px;}

  /* Footer */
  .premium-footer{grid-template-columns:1fr!important;text-align:center;padding:40px 6%;gap:32px;}
  .premium-footer h2{font-size:24px;}
  .premium-footer ul{columns:1;}
  .premium-footer p,.premium-footer li{font-size:14px;}

  /* Page hero */
  .page-hero{padding:40px 6% 32px;}
  .page-hero h1{font-size:30px!important;}
  .page-hero p{font-size:14px;}

  /* Hero background — better crop for portrait mobile */
  .hero{background-position:20% center!important;}

  /* Rating/review section */
  .rating{font-size:20px;}
  .rating strong{font-size:40px!important;}
  .review-grid>div{padding:24px 20px;}

  /* Process grid force single column on narrow screens */
  .process-grid,.trust-photo-grid,.review-grid{grid-template-columns:1fr;}

  /* Contact info tappable sizing */
  .contact-info .info-item p{font-size:16px;}
  .contact-info .info-item a{font-size:18px;}

  /* Trust card images — shorter on mobile */
  .trust-card img{height:180px!important;}

  /* Reviews button — full width on mobile */
  .reviews button{width:100%;margin-top:20px;}

  /* Sticky header raises over hero overlay */
  header{top:0;}
}

/* ── Very small phones (iPhone SE, 375px and below) ── */
@media(max-width:480px){
  .ribbon span{font-size:10px!important;}
  .hero h1{font-size:28px!important;}
  .quote-box{padding:24px 18px;}
  .process-card,.trust-card,.review-grid>div{padding:24px 20px;}
  .process-grid,.trust-photo-grid,.review-grid{grid-template-columns:1fr;}
  .page-hero h1{font-size:26px!important;}
  .hiring-header h2{font-size:24px;}
  .value-card{padding:22px;}
  .contact-form-box,.hiring-form-box{padding:22px 18px;}
  .premium-footer{padding:30px 5%;}
  button{min-height:48px;} /* ensures all buttons are easy to tap */
}

/* Copyright bar */
.site-copyright{background:#040404;color:#777;text-align:center;padding:18px;font-size:13px;border-top:1px solid #222;}

/* Tappable ribbon links */
.ribbon a{color:inherit;text-decoration:none;}
.ribbon a:hover{text-decoration:underline;}

/* Tappable contact info links */
.contact-info .info-item a{color:#111;text-decoration:none;font-weight:600;}
.contact-info .info-item a:hover{color:#dba514;}

/* Nav link styles */
nav a{text-decoration:none;cursor:pointer;}
nav a:hover{color:#dba514;}

/* Sub-page hero banner */
.page-hero{background:#111;color:white;padding:80px 8% 60px;border-bottom:4px solid #dba514;text-align:center;}
.page-hero h1{font-size:56px;margin:0 0 12px;color:#dba514;}
.page-hero p{font-size:18px;color:#ccc;max-width:700px;margin:0 auto;}

/* About page */
.about-section{padding:70px 8%;max-width:1100px;margin:auto;}
.about-section h2{font-size:36px;color:#dba514;margin-top:50px;text-align:center;}
.about-section p{font-size:17px;line-height:1.8;color:#333;}
.values-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:30px;}
.value-card{background:white;border:1px solid #dba514;border-radius:14px;padding:30px;box-shadow:0 10px 40px rgba(0,0,0,.08);text-align:center;}
.value-card h3{color:#dba514;font-size:20px;margin:0 0 8px;}
.value-card p{font-size:15px;color:#444;margin:0;}

/* Services page */
.services-page{padding:70px 8%;}
.service-block{background:white;border:1px solid #dba514;border-radius:16px;padding:50px;margin-bottom:40px;box-shadow:0 10px 40px rgba(0,0,0,.07);}
.service-block h2{font-size:32px;color:#111;margin:0 0 14px;}
.service-block p{font-size:16px;line-height:1.8;color:#444;margin:0 0 28px;}
.btn-group{display:flex;flex-wrap:wrap;gap:14px;}
.btn-gold{background:#dba514;color:#111;font-weight:900;padding:14px 26px;border:0;border-radius:4px;cursor:pointer;font-size:14px;text-decoration:none;display:inline-block;}
.btn-gold:hover{background:#c49010;}
.btn-outline{background:transparent;color:#dba514;font-weight:900;padding:13px 26px;border:2px solid #dba514;border-radius:4px;cursor:pointer;font-size:14px;text-decoration:none;display:inline-block;}
.btn-outline:hover{background:#dba514;color:#111;}
.storm-block{background:#111;color:white;border-radius:16px;padding:50px;margin-bottom:40px;}
.storm-block h2{font-size:32px;color:#dba514;margin:0 0 14px;}
.storm-block p{font-size:16px;line-height:1.8;color:#ccc;margin:0 0 28px;}
.service-photo{width:100%;height:320px;object-fit:cover;border-radius:10px;margin-bottom:24px;display:block;}

/* Contact page */
.contact-page{padding:70px 8%;display:grid;grid-template-columns:1fr 1fr;gap:60px;max-width:1200px;margin:auto;}
.contact-info h2{font-size:34px;color:#dba514;margin:0 0 28px;}
.contact-info .info-item{margin-bottom:28px;}
.contact-info .info-item h3{font-size:15px;font-weight:900;text-transform:uppercase;color:#888;margin:0 0 4px;}
.contact-info .info-item p{font-size:18px;color:#111;margin:0;line-height:1.6;}
.contact-form-box{background:white;border:1px solid #dba514;border-radius:16px;padding:45px;box-shadow:0 10px 40px rgba(0,0,0,.08);}
.contact-form-box h2{font-size:28px;margin:0 0 24px;}
.contact-form-box label{display:block;font-size:13px;font-weight:700;margin-bottom:4px;color:#333;}
.contact-form-box input,.contact-form-box select,.contact-form-box textarea{width:100%;padding:13px 15px;border:1px solid #ccc;border-radius:6px;font-size:15px;margin-bottom:16px;background:#fafafa;color:#111;}
.contact-form-box button{background:#dba514;color:#111;font-weight:900;padding:16px;border:0;border-radius:6px;width:100%;font-size:16px;cursor:pointer;}
.map-placeholder{background:#111;color:#dba514;border-radius:12px;padding:50px;text-align:center;margin-top:30px;font-size:18px;font-weight:700;}

/* Gallery page */
.gallery-page{padding:60px 8%;}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;}
.gallery-grid img{width:100%;height:280px;object-fit:cover;border-radius:12px;display:block;transition:transform .2s;}
.gallery-grid img:hover{transform:scale(1.02);}

/* Now Hiring section */
.hiring-section{background:#f8f6ef;padding:80px 8%;border-top:4px solid #dba514;}
.hiring-header{text-align:center;margin-bottom:50px;}
.hiring-header h2{font-size:48px;font-weight:900;color:#111;margin:0 0 14px;}
.hiring-header p{font-size:18px;color:#555;max-width:650px;margin:0 auto;}
.hiring-form-box{background:white;border:1px solid #dba514;border-radius:16px;padding:50px;max-width:800px;margin:0 auto;box-shadow:0 10px 40px rgba(0,0,0,.08);}
.hiring-form-box h3{font-size:26px;margin:0 0 28px;color:#111;}
.hiring-form-box label{display:block;font-size:13px;font-weight:700;margin-bottom:4px;color:#333;}
.hiring-form-box input,.hiring-form-box select{width:100%;padding:13px 15px;border:1px solid #ccc;border-radius:6px;font-size:15px;margin-bottom:16px;background:#fafafa;color:#111;}
.hiring-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;}
.file-upload-box{position:relative;margin-bottom:20px;}
.file-upload-box input[type="file"]{position:absolute;width:1px;height:1px;opacity:0;}
.file-upload-label{display:inline-block;padding:12px 22px;background:white;color:#111;border:2px solid #dba514;border-radius:6px;cursor:pointer;font-weight:700;font-size:14px;margin-bottom:6px;}
.file-upload-label:hover{background:#fff8e6;}
.file-name{display:block;font-size:13px;color:#777;margin-top:4px;}
.hiring-submit{width:100%;background:#dba514;color:#111;font-weight:900;padding:16px;border:0;border-radius:6px;font-size:16px;cursor:pointer;margin-top:10px;}
.hiring-submit:hover{background:#c49010;}

@media(max-width:900px){
  /* Contact */
  .contact-page{grid-template-columns:1fr;padding:40px 6%;gap:40px;}
  .contact-form-box{padding:28px;}
  .contact-info h2{font-size:26px;}

  /* Services */
  .service-block,.storm-block{padding:28px;}
  .service-block h2,.storm-block h2{font-size:24px;}
  .services-page{padding:35px 6%;}
  .btn-group{flex-direction:column;}
  .btn-gold,.btn-outline{text-align:center;width:100%;box-sizing:border-box;}
  .service-photo{height:200px;}

  /* About */
  .about-section{padding:35px 6%;}
  .about-section h2{font-size:26px;}
  .values-grid{grid-template-columns:1fr;}

  /* Gallery */
  .gallery-page{padding:35px 6%;}
  .gallery-grid{grid-template-columns:1fr;gap:14px;}
  .gallery-grid img{height:220px;}

  /* Hiring */
  .hiring-section{padding:50px 6%;}
  .hiring-header h2{font-size:30px;}
  .hiring-form-grid{grid-template-columns:1fr;}
  .hiring-form-box{padding:28px;}
  .hiring-header p{font-size:15px;}
}

/* Careers banner */
.careers-banner{background:#111;padding:90px 8%;text-align:center;border-top:4px solid #dba514;}
.careers-banner-inner{max-width:700px;margin:0 auto;}
.careers-eyebrow{color:#dba514;font-size:13px;font-weight:900;letter-spacing:3px;text-transform:uppercase;margin:0 0 12px;}
.careers-banner h2{color:white;font-size:48px;font-weight:900;margin:0 0 18px;}
.careers-banner p{color:#bbb;font-size:17px;line-height:1.7;margin:0 0 32px;}
.careers-banner .btn-gold{font-size:15px;padding:16px 36px;}

@media(max-width:900px){
  .careers-banner{padding:55px 6%;}
  .careers-banner h2{font-size:30px;}
  .careers-banner p{font-size:15px;}
  .careers-banner .btn-gold{width:100%;box-sizing:border-box;text-align:center;display:block;}
}

/* Form success message */
.form-success{text-align:center;padding:40px 20px;}
.form-success .success-icon{font-size:56px;margin-bottom:16px;}
.form-success h3{font-size:26px;margin:0 0 12px;color:#dba514;}
.form-success p{font-size:16px;margin:0;color:#ccc;line-height:1.6;}
.form-success.light h3{color:#111;}
.form-success.light p{color:#555;}