/* Tempest Roofing — built on the Tempest Roofing Design System.
   Radius is 0 everywhere. Merriweather Sans 700 uppercase headings, Lato body.
   Palette, type scale and spacing are the design system's tokens. */

:root{
  --blue-600:#0059C4; --blue-700:#004494; --blue-800:#003471;
  --ink-900:#231F20;
  --grey-600:#686E77; --grey-200:#EBEBEB; --grey-100:#F5F5F5;
  --white:#FFFFFF;
  --on-dark-muted:rgba(255,255,255,.72);
  --border-on-dark:rgba(255,255,255,.18);
  --overlay-photo:rgba(35,31,32,.62);

  --font-display:'Merriweather Sans','Segoe UI',Arial,sans-serif;
  --font-body:Lato,'Helvetica Neue',Arial,sans-serif;

  --fs-display:56px; --fs-h1:42px; --fs-h2:35px; --fs-h3:28px; --fs-h4:21px; --fs-h5:16.8px;
  --fs-body-lg:17px; --fs-body:14px; --fs-small:13px; --fs-micro:12px;

  --container:1140px; --gutter:20px; --band:80px; --gap:24px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--white); color:var(--ink-900);
  font-family:var(--font-body); font-size:var(--fs-body); line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%; height:auto}
a{color:var(--blue-600); text-decoration:none; transition:color 200ms ease}
a:hover{color:var(--blue-700)}
p{margin:0}
h1,h2,h3,h4{
  margin:0; font-family:var(--font-display); font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; line-height:1.2;
}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h4)}
:focus-visible{outline:2px solid var(--blue-600); outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gutter);top:8px;z-index:100;background:var(--white);color:var(--ink-900);padding:12px 20px}

.container{max-width:var(--container); margin:0 auto; padding:0 var(--gutter)}
.band{padding:var(--band) 0}
.band--ink{background:var(--ink-900); color:var(--white)}
.band--grey{background:var(--grey-100)}
.stack{display:flex; flex-direction:column}
.hr{height:1px; background:var(--border-on-dark); border:0; margin:0}

.display{font-size:var(--fs-display); text-wrap:balance}
.lead{font-size:var(--fs-body-lg); line-height:1.7}
.muted{color:var(--grey-600)}
.muted-dark{color:var(--on-dark-muted)}

/* Buttons — sentence case, 2px border in their own colour, radius 0 */
.btn{
  display:inline-block; padding:18px 40px; border-radius:0; border:2px solid var(--blue-600);
  background:var(--blue-600); color:var(--white); font-family:var(--font-body); font-weight:700;
  font-size:var(--fs-body); letter-spacing:.05em; line-height:1; cursor:pointer;
  transition:background 200ms ease,border-color 200ms ease,color 200ms ease;
}
.btn:hover{background:var(--blue-700); border-color:var(--blue-700); color:var(--white)}
.btn:active{background:var(--blue-800); border-color:var(--blue-800)}
.btn--sm{padding:15px 30px}
.btn--outline{background:transparent; color:var(--blue-600)}
.btn--outline:hover{background:var(--blue-600); color:var(--white)}
.btn--light{background:transparent; border-color:var(--white); color:var(--white)}
.btn--light:hover{background:var(--white); border-color:var(--white); color:var(--ink-900)}

/* Masthead */
.masthead{background:var(--ink-900)}
.masthead-inner{display:flex; align-items:center; justify-content:space-between; gap:40px; padding:22px var(--gutter)}
.masthead{position:relative}
.logo{width:208px}
.nav{display:flex; gap:26px; align-items:center; list-style:none; margin:0; padding:0}
.nav>li{position:relative; display:flex; align-items:center; gap:6px}
.nav a{
  display:block; padding:0 0 8px; border-bottom:2px solid transparent; color:var(--white);
  font-weight:700; font-size:var(--fs-small); letter-spacing:.05em; text-transform:uppercase; line-height:1;
}
.nav a:hover{color:var(--white); border-bottom-color:var(--blue-600)}
.nav a[aria-current="page"]{border-bottom-color:var(--blue-600)}
.masthead-cta{display:flex; align-items:center; gap:24px}
.tel{color:var(--white); font-weight:700; font-size:15px; white-space:nowrap}
.tel:hover{color:var(--white)}
.nav-toggle{
  display:none; width:48px; height:48px; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--border-on-dark); border-radius:0; cursor:pointer;
}

/* Hero */
.hero{position:relative; min-height:660px; display:flex; align-items:center; overflow:hidden}
.hero--page{min-height:380px}
.hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero::after{content:""; position:absolute; inset:0; background:var(--overlay-photo)}
.hero .container{position:relative; z-index:1; width:100%; padding-top:var(--band); padding-bottom:var(--band)}
.hero .stack{gap:28px}
.hero h1,.hero p{color:var(--white)}
.hero p{color:var(--on-dark-muted); max-width:620px}
.hero-actions{display:flex; flex-wrap:wrap; gap:16px; align-items:center}

/* Credentials, stated plainly under the hero actions */
.creds{
  list-style:none; margin:12px 0 0; padding:0; display:flex; flex-wrap:wrap;
  align-items:center; gap:10px 20px;
}
.creds li{
  display:flex; align-items:center; color:var(--on-dark-muted);
  font-size:var(--fs-micro); letter-spacing:.05em; text-transform:uppercase; line-height:1.4;
}
.creds li+li::before{
  content:""; display:block; width:1px; height:12px; margin-right:20px;
  background:var(--border-on-dark);
}


/* Section headers */
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:48px; margin-bottom:48px}
.section-head h2{max-width:620px}
.section-head p{max-width:420px}

/* Grids */
.grid{display:grid; gap:var(--gap)}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr)); gap:40px}
.grid--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.grid--tiles{grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px}

/* Service cards */
.card{background:var(--white); border:1px solid var(--grey-200); padding:36px 32px; display:flex; flex-direction:column; gap:14px}
.card p{color:var(--grey-600)}
.link-more{margin-top:6px; font-weight:700; font-size:var(--fs-small); letter-spacing:.05em; text-transform:uppercase}

/* Photo tiles */
.tile{position:relative; height:380px; overflow:hidden; display:block}
.tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 400ms ease}
.tile:hover img{transform:scale(1.04)}
.tile::after{content:""; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(35,31,32,.92) 0%,rgba(35,31,32,.15) 60%,rgba(35,31,32,0) 100%)}
.tile-body{position:absolute; left:0; right:0; bottom:0; z-index:1; padding:24px; display:flex; flex-direction:column; gap:10px}
.tile h3{font-size:var(--fs-h5); color:var(--white)}
.tile-body span{color:var(--white); font-weight:700; font-size:var(--fs-micro); letter-spacing:.05em; text-transform:uppercase}

/* Split bands */
.split{display:grid; grid-template-columns:1.25fr 1fr; gap:80px; align-items:center}
.split--flip{grid-template-columns:1fr 1.25fr}
.split .stack{gap:20px}
.badge-frame{display:flex; align-items:center; justify-content:center; background:var(--white); border:1px solid var(--grey-200); padding:56px}
.badge-frame img{width:260px}
.rule-left{border-left:2px solid var(--blue-600); padding-left:32px}

/* Service detail rows */
.row{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:64px; align-items:center}
.row .stack{gap:16px}
.row-photo{height:380px; overflow:hidden}
.row-photo img{width:100%; height:100%; object-fit:cover}

/* Values */
.value{display:flex; flex-direction:column; gap:16px}
.value img{width:88px; height:88px; object-fit:contain}
.value p{color:var(--grey-600)}
.value--ruled{border-top:2px solid var(--blue-600); padding-top:24px}
.value--ruled img{width:72px; height:72px}

/* Team */
.member figure{margin:0}
.member-photo{background:var(--ink-900); border:1px solid var(--border-on-dark); height:300px;
  display:flex; align-items:flex-end; justify-content:center; overflow:hidden}
.member-photo img{height:300px; width:auto; object-fit:contain}
.member figcaption{padding-top:20px; display:flex; flex-direction:column; gap:4px}
.member h3{font-size:var(--fs-h5); color:var(--white)}
.member p{color:var(--on-dark-muted); font-size:var(--fs-small)}

/* Certifications */
.cert{background:var(--white); border:1px solid var(--grey-200); display:flex; align-items:center;
  justify-content:center; padding:18px; height:116px}
.cert img{max-width:88px; max-height:80px; width:auto}

/* Contact / form band */
.contact{position:relative; overflow:hidden}
.storm{position:absolute; bottom:0; width:300px; pointer-events:none; opacity:.9}
.storm--l{left:0} .storm--r{right:0}
.contact .container{position:relative; z-index:1}
.contact-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:64px; align-items:start}
.contact-tel{color:var(--white); font-family:var(--font-display); font-weight:700; font-size:var(--fs-h3); letter-spacing:.05em}
.contact-tel:hover{color:var(--white)}
.form-panel{background:transparent; border:1px solid var(--border-on-dark); padding:40px}
.form-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}
.field{display:flex; flex-direction:column; gap:8px}
.field--full{grid-column:1 / -1}
.field label{font-weight:700; font-size:var(--fs-micro); letter-spacing:.05em; text-transform:uppercase; color:var(--on-dark-muted)}
.field input,.field select,.field textarea{
  width:100%; padding:12px 14px; min-height:46px; border-radius:0;
  background:transparent; border:1px solid var(--border-on-dark); color:var(--white);
  font-family:var(--font-body); font-size:var(--fs-body);
}
.field textarea{min-height:104px; resize:vertical}
.field select{appearance:none; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23ffffff' stroke-opacity='.72' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:14px; padding-right:36px}
.field select option{color:var(--ink-900)}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.45)}

/* Footer */
.footer{background:var(--ink-900); border-top:1px solid var(--border-on-dark); padding-top:64px}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px}
.footer h4{font-size:var(--fs-h5); color:var(--white); margin-bottom:6px}
.footer-col{display:flex; flex-direction:column; gap:10px}
.footer a{color:var(--on-dark-muted)}
.footer a:hover{color:var(--white)}
.footer p{color:var(--on-dark-muted)}
.social{display:flex; gap:12px}
.social a{display:flex; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid var(--border-on-dark)}
.footer-legal{
  max-width:var(--container); margin:48px auto 0; padding:24px var(--gutter) 32px;
  border-top:1px solid var(--border-on-dark); display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.footer-legal p{font-size:var(--fs-micro)}

/* Responsive */
@media (max-width:1100px){
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid--5{grid-template-columns:repeat(4,minmax(0,1fr))}
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split,.split--flip{grid-template-columns:1fr; gap:48px}
  .footer-grid{grid-template-columns:1fr 1fr; gap:40px}
  }
@media (max-width:900px){
  :root{--fs-display:40px; --fs-h1:32px; --fs-h2:28px; --fs-h3:24px; --band:56px}
  .nav,.masthead-cta .btn{display:none}
  .nav-toggle{display:flex}
  .masthead-inner{gap:16px; padding-top:16px; padding-bottom:16px}
  .logo{width:150px}
    .masthead[data-open="true"] .nav{
    display:flex; flex-direction:column; gap:0; align-items:stretch;
    position:absolute; left:0; right:0; top:100%; z-index:20;
    background:var(--ink-900); border-top:1px solid var(--border-on-dark); padding:8px var(--gutter) 20px;
  }
  .masthead{position:relative}
  .masthead[data-open="true"] .nav a{padding:16px 0; border-bottom:1px solid var(--border-on-dark)}
  .section-head{flex-direction:column; align-items:flex-start; gap:20px; margin-bottom:32px}
  .row,.contact-grid{grid-template-columns:1fr; gap:32px}
  .row-photo{height:280px; order:-1}
  }
@media (max-width:620px){
  :root{--fs-display:32px; --fs-h1:28px; --fs-h2:24px}
  .grid--3,.grid--4,.grid--5,.grid--tiles,.form-grid,.footer-grid{grid-template-columns:1fr}
  .grid--tiles{gap:12px}
    .hero{min-height:520px}
  .tile{height:220px}
  .hero-actions .btn{width:100%; text-align:center}
  .form-panel{padding:24px}
  .badge-frame{padding:32px}
  .badge-frame img{width:200px}
  .footer-legal{flex-direction:column; gap:8px}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:0.01ms !important; animation-duration:0.01ms !important}
  .tile:hover img{transform:none}
}

/* Services dropdown */
.sub-toggle{
  display:flex; align-items:center; justify-content:center; width:22px; height:22px; padding:0;
  margin-bottom:8px; background:transparent; border:0; border-radius:0; color:var(--white); cursor:pointer;
}
.sub{
  display:none; list-style:none; margin:0; padding:8px 0; position:absolute; top:100%; left:-16px; z-index:30;
  min-width:264px; background:var(--ink-900); border:1px solid var(--border-on-dark);
}
.nav>li.has-sub:hover>.sub,
.nav>li.has-sub:focus-within>.sub,
.nav>li.has-sub[data-open="true"]>.sub{display:block}
.sub li{display:block}
.sub a{
  display:block; padding:12px 20px; border-bottom:0; color:var(--on-dark-muted);
  font-weight:700; font-size:var(--fs-small); letter-spacing:.05em; text-transform:uppercase;
}
.sub a:hover{color:var(--white); background:rgba(255,255,255,.06)}

/* Benefit + listing blocks on service pages */
.grid--tight{gap:var(--gap)}
.benefit{border-top:2px solid var(--blue-600); padding-top:20px; display:flex; flex-direction:column; gap:10px}
.benefit p{color:var(--grey-600)}
.listing{display:flex; flex-direction:column}
.listing-row{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:40px;
  padding:28px 0; border-top:1px solid var(--border-on-dark);
}
.listing-row:last-child{border-bottom:1px solid var(--border-on-dark)}
.listing-row h3{font-size:var(--fs-h4); color:var(--white)}
.listing-row p{color:var(--on-dark-muted)}
.band:not(.band--ink) .listing-row{border-color:var(--grey-200)}
.band:not(.band--ink) .listing-row h3{color:var(--ink-900)}
.band:not(.band--ink) .listing-row p{color:var(--grey-600)}

/* Prose sections */
.prose-stack{display:flex; flex-direction:column; gap:56px}
.prose{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:64px; align-items:start}
.prose h2{max-width:420px}
.prose p+p{margin-top:16px}
.footnote{color:var(--grey-600); font-size:var(--fs-micro); line-height:1.6}

/* Other services */
.mini-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap)}
.mini{
  display:flex; flex-direction:column; gap:10px; padding:28px 24px;
  border:1px solid var(--grey-200); background:var(--white); transition:border-color 200ms ease;
}
.mini:hover{border-color:var(--blue-600)}
.mini h3{font-size:var(--fs-h5); color:var(--ink-900)}
.mini span{font-weight:700; font-size:var(--fs-micro); letter-spacing:.05em; text-transform:uppercase; color:var(--blue-600)}

@media (max-width:1100px){
  .listing-row,.prose{grid-template-columns:1fr; gap:16px}
  .mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .masthead[data-open="true"] .nav>li{flex-direction:column; align-items:stretch; gap:0}
  .masthead[data-open="true"] .sub{
    display:block; position:static; min-width:0; border:0; border-bottom:1px solid var(--border-on-dark);
    padding:0 0 8px 0; background:transparent;
  }
  .masthead[data-open="true"] .sub a{padding:12px 0 12px 16px; border-bottom:0}
  .masthead[data-open="true"] .sub-toggle{display:none}
}
@media (max-width:620px){
  .mini-grid{grid-template-columns:1fr}
}

/* Form note + thank-you page */
.form-note{color:var(--on-dark-muted); font-size:var(--fs-micro); line-height:1.6}
.form-note a{color:var(--white); font-weight:700}
.form-note a:hover{color:var(--white); text-decoration:underline}
.thanks{padding-top:96px; padding-bottom:96px}
.thanks-mark{
  width:56px; height:56px; display:flex; align-items:center; justify-content:center;
  border:2px solid var(--blue-600); background:transparent;
}
.thanks-mark svg{width:24px; height:24px; stroke:var(--blue-600); stroke-width:2.5; fill:none; stroke-linecap:round; stroke-linejoin:round}

/* Scroll reveal for photography. Only applies when JS is present to un-hide it,
   so the pictures are never stranded invisible. Deliberately small: a short fade
   and a 12px rise, no movement on the page itself. */
.js .reveal{
  opacity:0; transform:translateY(12px);
  transition:opacity 400ms ease, transform 400ms ease;
  will-change:opacity, transform;
}
.js .reveal.is-in{opacity:1; transform:none}
/* Gentle stagger across a row so a grid does not snap in as one block. */
.js .grid .reveal:nth-child(2),.js .mini-grid .reveal:nth-child(2){transition-delay:60ms}
.js .grid .reveal:nth-child(3),.js .mini-grid .reveal:nth-child(3){transition-delay:120ms}
.js .grid .reveal:nth-child(4){transition-delay:180ms}
.js .grid .reveal:nth-child(5){transition-delay:240ms}

@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1; transform:none; transition:none}
}