/* ============================================================
   ARISE CONSTRUCTION — Shared stylesheet
   Built to the Website Build Brief, Part A (site-wide settings)
   ============================================================ */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800&family=Inter:wght@400;600&family=Kaushan+Script&display=swap');

/* ---------- Design tokens (Part A1 / A2) ---------- */
:root{
  --red:#D62027;
  --black:#0B0B0B;
  --offwhite:#F6F5F3;
  --white:#FFFFFF;
  --grey:#8A8681;

  --font-display:'Barlow Condensed', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-script:'Kaushan Script', cursive;

  --h1-desktop:72px;   --h1-mobile:40px;
  --h2-desktop:48px;   --h2-mobile:30px;
  --h3-desktop:24px;   --h3-mobile:20px;
  --body-desktop:17px; --body-mobile:16px;
  --small-desktop:14px;--small-mobile:13px;
  --btn-size:15px;
  --script-desktop:34px; --script-mobile:24px;

  --section-pad-desktop:100px;
  --section-pad-mobile:60px;
  --content-max:1280px;
  --card-gap-desktop:30px;
  --card-gap-mobile:20px;
  --heading-space-desktop:24px;
  --heading-space-mobile:18px;

  --header-h-desktop:90px;
  --header-h-shrunk:70px;
  --header-h-mobile:70px;

  --mobile-bar-h:64px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{overflow-x:clip;max-width:100%;}
body{
  margin:0;
  background:var(--offwhite);
  color:var(--black);
  font-family:var(--font-body);
  font-size:var(--body-desktop);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;}

h1,h2,h3{
  font-family:var(--font-display);
  text-transform:uppercase;
  margin:0;
  line-height:1.05;
}
h1{font-weight:800;font-size:var(--h1-mobile);}
h2{font-weight:700;font-size:var(--h2-mobile);}
h3{font-weight:700;font-size:var(--h3-mobile);}
@media(min-width:768px){
  h1{font-size:var(--h1-desktop);}
  h2{font-size:var(--h2-desktop);}
  h3{font-size:var(--h3-desktop);}
}

.script{
  display:block;
  font-family:var(--font-script);
  font-weight:400;
  text-transform:none;
  color:var(--red);
  font-size:var(--script-mobile);
}
@media(min-width:768px){ .script{font-size:var(--script-desktop);} }

small,.small{font-size:var(--small-mobile);color:var(--grey);}
@media(min-width:768px){ small,.small{font-size:var(--small-desktop);} }

/* ---------- Layout helpers ---------- */
.container{
  width:100%;
  max-width:var(--content-max);
  margin:0 auto;
  padding:0 20px;
}
.section{
  padding:var(--section-pad-mobile) 0;
}
@media(min-width:768px){
  .section{padding:var(--section-pad-desktop) 0;}
}
.section-heading{margin-bottom:var(--heading-space-mobile);}
@media(min-width:768px){
  .section-heading{margin-bottom:var(--heading-space-desktop);}
}
.bg-black{background:var(--black);color:var(--white);}
.bg-offwhite{background:var(--offwhite);}
.bg-white{background:var(--white);}
.bg-red{background:var(--red);color:var(--white);}
.text-red{color:var(--red);}

/* ---------- Buttons (Part A3 — only two styles exist) ---------- */
.btn{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:56px;
  padding:0 40px;
  border-radius:4px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:var(--btn-size);
  text-transform:uppercase;
  letter-spacing:1px;
  border:none;
  background:none;
  cursor:pointer;
  white-space:nowrap;
  text-align:center;
}
.btn span{position:relative;z-index:2;transition:color 300ms ease;}
.btn::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 300ms ease;
}
/* Red button — main action */
.btn-red{background:var(--red);}
.btn-red span{color:var(--white);}
.btn-red::before{background:var(--black);}

/* Outline button — second action */
.btn-outline{background:transparent;border:2px solid currentColor;}
.btn-outline::before{background:var(--red);}
.btn-outline:hover span{color:var(--white);}
.btn-outline-photo{color:var(--white);}
.btn-outline-light{color:var(--black);}

.btn:hover::before{transform:scaleX(1);}

.btn-row{display:flex;gap:16px;flex-wrap:wrap;}
@media(max-width:767px){
  .btn-row{flex-direction:column;}
  .btn-row .btn{width:100%;}
}

/* ---------- Header (Part A6) ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  height:var(--header-h-mobile);
  background:var(--black);
  transition:height 300ms ease;
}
@media(min-width:768px){
  .site-header{height:var(--header-h-desktop);}
  .site-header.is-scrolled{height:var(--header-h-shrunk);}
}
.site-header .container{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.logo-placeholder{
  height:50px;
  display:flex;
  align-items:center;
  flex-shrink:0;
}
.logo-placeholder img{height:100%;width:auto;display:block;}
@media(max-width:767px){
  .site-header .container{gap:8px;}
  .logo-placeholder{height:40px;}
}
@media(max-width:400px){
  .logo-placeholder{height:34px;}
}

.main-nav{display:none;}
@media(min-width:1024px){
  .main-nav{
    display:flex;
    align-items:center;
    gap:36px;
    margin-left:auto;
  }
  .main-nav > ul{display:flex;align-items:center;gap:36px;}
  .main-nav a.nav-link{
    position:relative;
    color:var(--white);
    font-family:var(--font-body);
    font-weight:600;
    font-size:15px;
    text-transform:uppercase;
    letter-spacing:1px;
    padding:6px 0;
  }
  .main-nav a.nav-link::after{
    content:'';
    position:absolute;
    left:0;bottom:0;
    height:2px;width:100%;
    background:var(--red);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 250ms ease;
  }
  .main-nav a.nav-link:hover::after{transform:scaleX(1);}
  .has-dropdown{position:relative;}
  .dropdown{
    position:absolute;
    top:100%;left:0;
    background:var(--black);
    min-width:230px;
    padding:10px 0;
    opacity:0;
    visibility:hidden;
    transform:translateY(6px);
    transition:opacity 200ms ease, transform 200ms ease, visibility 200ms;
    border-top:2px solid var(--red);
  }
  .has-dropdown:hover .dropdown,
  .has-dropdown:focus-within .dropdown{
    opacity:1;visibility:visible;transform:translateY(0);
  }
  .dropdown a{
    display:block;
    padding:10px 20px;
    color:var(--white);
    font-size:14px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.5px;
  }
  .dropdown a:hover{color:var(--red);}
}
.header-call-btn{height:44px;padding:0 24px;font-size:14px;flex-shrink:0;}
@media(min-width:768px){ .header-call-btn{height:48px;} }
@media(max-width:767px){
  .header-call-btn{height:36px;padding:0 12px;font-size:11px;letter-spacing:.3px;}
}
@media(max-width:360px){
  .header-call-btn span{display:none;}
  .header-call-btn{padding:0;width:36px;}
  .header-call-btn::after{content:'\260E';display:inline-block;font-size:15px;color:#fff;}
}

/* Hamburger */
.hamburger{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:32px;height:32px;
  background:none;border:none;cursor:pointer;
  padding:0;
  flex-shrink:0;
}
@media(min-width:1024px){ .hamburger{display:none;} }
.hamburger span{display:block;height:2px;width:100%;background:var(--white);transition:transform 250ms ease, opacity 250ms ease;}
.hamburger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.is-open span:nth-child(2){opacity:0;}
.hamburger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-nav{
  display:none;
  position:fixed;
  top:var(--header-h-mobile);
  left:0;right:0;bottom:0;
  background:var(--black);
  z-index:999;
  overflow-y:auto;
  padding:20px 20px 100px;
}
.mobile-nav.is-open{display:block;}
@media(min-width:1024px){ .mobile-nav{display:none !important;} }
.mobile-nav a{
  display:block;
  padding:14px 0;
  color:var(--white);
  font-family:var(--font-display);
  font-weight:700;
  font-size:22px;
  text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.mobile-nav .mobile-sub{padding-left:16px;}
.mobile-nav .mobile-sub a{font-size:17px;color:rgba(255,255,255,.75);border-bottom:none;padding:10px 0;}

/* ---------- Licence bar (Part A8) ---------- */
.licence-bar{
  background:var(--black);
  color:var(--white);
  text-align:center;
  padding:14px 20px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:13px;
  letter-spacing:1px;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
@media(min-width:768px){ .licence-bar{font-size:14px;} }
.licence-bar svg{flex-shrink:0;}
@media(max-width:767px){
  .licence-bar{display:none;}
}

/* Mobile fixed bottom bar */
.mobile-sticky-bar{
  display:none;
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:998;
  height:var(--mobile-bar-h);
}
@media(max-width:767px){
  .mobile-sticky-bar{display:flex;}
  body{padding-bottom:var(--mobile-bar-h);}
}
.mobile-sticky-bar a{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-body);
  font-weight:600;
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:1px;
}
.mobile-sticky-bar .call{background:var(--red);color:var(--white);}
.mobile-sticky-bar .estimate{background:var(--white);color:var(--black);border-left:2px solid var(--black);}

/* ---------- Footer (Part A7) ---------- */
.site-footer{
  background:var(--black);
  color:var(--white);
  padding:50px 0 30px;
}
@media(min-width:768px){ .site-footer{padding:70px 0 40px;} }
.footer-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
}
@media(min-width:768px){
  .footer-grid{grid-template-columns:repeat(4,1fr);gap:30px;}
}
.footer-grid h4{
  font-family:var(--font-body);
  font-weight:600;
  font-size:14px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--white);
  margin:0 0 16px;
}
.footer-grid p{color:rgba(255,255,255,.85);font-size:15px;margin:14px 0 0;}
.footer-grid ul li{margin-bottom:10px;}
.footer-grid ul a{font-size:15px;color:rgba(255,255,255,.85);}
.footer-grid ul a:hover{color:var(--red);}
.footer-logo-placeholder{
  height:60px;
  display:inline-flex;align-items:center;
}
.footer-logo-placeholder img{height:100%;width:auto;display:block;}
.badge{
  margin-top:16px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.5px;
  color:var(--white);
}
.footer-socials{display:flex;gap:12px;margin-top:16px;}
.social-icon{
  width:36px;height:36px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  display:flex;align-items:center;justify-content:center;
  transition:background 200ms ease, border-color 200ms ease;
}
.social-icon:hover{background:var(--red);border-color:var(--red);}
.social-icon svg{width:16px;height:16px;}

/* ---------- Shared: shield icon ---------- */
.shield-icon{color:var(--red);}

/* ---------- Reveal-on-scroll animation (Part H) ---------- */
.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity 400ms ease, transform 400ms ease;
}
.reveal.in-view{opacity:1;transform:translateY(0);}

.hero-text > *{
  opacity:0;
  transform:translateY(20px);
  transition:opacity 600ms ease, transform 600ms ease;
}
.hero-text.is-loaded > *{opacity:1;transform:translateY(0);}
.hero-text.is-loaded > *:nth-child(1){transition-delay:0ms;}
.hero-text.is-loaded > *:nth-child(2){transition-delay:60ms;}
.hero-text.is-loaded > *:nth-child(3){transition-delay:120ms;}

@media(prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important;}
  .reveal,.hero-text > *{opacity:1 !important;transform:none !important;}
}

/* ---------- Photo hover zoom ---------- */
.photo-hover{overflow:hidden;position:relative;}
.photo-hover img{transition:transform 500ms ease;}
.photo-hover::after{
  content:'';
  position:absolute;inset:0;
  background:var(--red);
  opacity:0;
  transition:opacity 500ms ease;
  pointer-events:none;
}
.photo-hover:hover img{transform:scale(1.04);}
.photo-hover:hover::after{opacity:.08;}

/* ---------- Placeholder image blocks ---------- */
.placeholder-img{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:repeating-linear-gradient(45deg,#e7e4e0,#e7e4e0 10px,#efece8 10px,#efece8 20px);
  border:1px dashed var(--grey);
  color:var(--grey);
  text-align:center;
  font-size:13px;
  padding:16px;
}
.placeholder-img strong{color:var(--black);font-size:14px;text-transform:uppercase;letter-spacing:.5px;}

/* ---------- Form placeholder card ---------- */
.form-card{
  background:var(--white);
  border-radius:6px;
  padding:40px;
}
.form-embed{
  border-radius:8px;
  overflow:hidden;
}
.form-embed iframe{
  display:block;
  width:100%;
  min-height:652px;
  border:none;
  border-radius:8px;
}

/* ---------- Utility icon circle ---------- */
.icon-circle{
  width:60px;height:60px;
  border-radius:50%;
  background:var(--red);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.icon-circle svg{width:26px;height:26px;color:var(--white);}