@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Be+Vietnam+Pro:wght@400;500;600&display=swap');
:root { --black:#090a0a; --charcoal:#151717; --panel:#1d1f1f; --accent:#c9ccca; --mist:#e1e3e0; --line:#383b3b; --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif; --body:"Be Vietnam Pro",Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
body { margin:0; overflow-x:hidden; background:var(--black); color:white; font-family:var(--body); }
body.panel-open { overflow:hidden; }
body.loading { overflow:hidden; }
img { display:block; max-width:100%; }
a { color:inherit; }
button,input,textarea,select { font:inherit; }
button { font-family:var(--display); font-weight:600; }
.topline { min-height:32px; padding:0 clamp(18px,3vw,48px); display:flex; align-items:center; justify-content:space-between; gap:0; background:var(--accent); color:#111; font-size:clamp(6px,.5vw,8px); font-weight:600; letter-spacing:.08em; white-space:nowrap; }
.topline span::before { content:"■"; margin-right:8px; font-size:6px; }
.topline a { text-decoration:none; }
.topline-mobile-actions { display:none; }
.site-loader { position:fixed; z-index:1000; inset:0; display:grid; place-items:center; background:#000; opacity:1; visibility:visible; transition:opacity .8s ease,visibility 0s linear .8s; }
.site-loader img { width:clamp(150px,18vw,230px); height:auto; transform-origin:center; animation:loader-accelerate 5s cubic-bezier(.55,.055,.675,.19) forwards; will-change:transform; }
.site-loader.is-hidden { opacity:0; visibility:hidden; pointer-events:none; }
@keyframes loader-accelerate { to { transform:rotate(2160deg); } }
header { height:86px; padding:0 clamp(18px,3vw,48px); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:30px; position:absolute; z-index:10; left:0; right:0; top:32px; border-bottom:1px solid rgba(255,255,255,.17); }
.brand { width:150px; display:block; text-decoration:none; }
.brand img { width:100%; height:auto; }
nav { display:flex; gap:clamp(22px,3vw,48px); }
nav a { font-size:9px; letter-spacing:.09em; text-decoration:none; transition:color .2s; }
nav a:hover { color:var(--accent); }
.quote-trigger { justify-self:end; padding:13px 16px; border:1px solid rgba(255,255,255,.38); background:transparent; color:white; font-size:13px; letter-spacing:.07em; cursor:pointer; }
.header-actions { justify-self:end; display:flex; align-items:center; gap:10px; }
.header-call { min-height:43px; padding:0 16px; display:flex; align-items:center; border:1px solid rgba(255,255,255,.38); background:rgba(9,10,10,.8); color:white; font-family:var(--display); font-size:13px; font-weight:600; letter-spacing:.07em; text-decoration:none; backdrop-filter:blur(8px); transition:border-color .2s,background .2s; }
.header-call:hover { border-color:white; background:var(--black); }
.header-actions>.quote-trigger { border-color:var(--accent); background:var(--accent); color:#111; transition:background .2s,border-color .2s; }
.header-actions>.quote-trigger:hover { border-color:white; background:white; }
.header-actions>.quote-trigger b { margin-left:18px; color:#111; font-size:16px; }
.menu { display:none; }

.hero { min-height:100vh; position:relative; display:flex; align-items:flex-end; overflow:hidden; }
.hero-image,.hero-shade,.hero-grid { position:absolute; inset:0; width:100%; height:100%; }
.hero-image { object-fit:cover; filter:saturate(.45) contrast(1.12); }
.hero-shade { background:linear-gradient(90deg,rgba(8,10,11,.93) 0%,rgba(8,10,11,.64) 55%,rgba(8,10,11,.2)),linear-gradient(0deg,rgba(8,10,11,.64),transparent 55%); }
.hero-grid,.contact-grid { opacity:.16; background-image:linear-gradient(rgba(255,255,255,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.3) 1px,transparent 1px); background-size:9vw 9vw; }
.hero-copy { width:100%; position:relative; z-index:2; padding:190px clamp(22px,6vw,96px) 80px; }
.kicker,.section-code { font-size:9px; line-height:1.7; letter-spacing:.11em; color:#a9b0b1; }
.kicker::before { content:""; display:inline-block; width:36px; height:2px; margin-right:14px; vertical-align:middle; background:var(--accent); }
.hero h1,.intro h2,.services h2,.project-heading h2,.safety h2,.contact h2,.quote-panel h2 { margin:35px 0 0; font-family:var(--display); font-size:clamp(80px,11.2vw,190px); line-height:.72; letter-spacing:-.045em; font-weight:800; }
.hero h1 span,.intro h2 span { color:var(--accent); -webkit-text-stroke:0; }
.hero-bottom { margin-top:70px; display:flex; align-items:end; justify-content:flex-start; max-width:1120px; }
.action { min-width:245px; min-height:62px; padding:0; display:flex; align-items:stretch; border:0; background:var(--accent); color:#111; cursor:pointer; }
.action span { flex:1; display:flex; align-items:center; padding:0 19px; font-size:14px; font-weight:600; letter-spacing:.07em; }
.action b { width:62px; display:grid; place-items:center; border-left:1px solid rgba(0,0,0,.3); font-size:18px; transition:transform .2s; }
.action:hover b { transform:translate(3px,-3px); }
.scroll-cue { position:absolute; z-index:2; right:35px; bottom:35px; display:flex; gap:10px; align-items:center; writing-mode:vertical-rl; font-size:8px; letter-spacing:.12em; color:#bbc0c1; }
.scroll-cue span { height:45px; border-left:1px solid var(--accent); }
.weather-card { position:absolute; z-index:2; right:0; top:26%; width:220px; padding:24px; border:1px solid rgba(255,255,255,.2); border-right:0; background:rgba(10,12,13,.65); backdrop-filter:blur(8px); }
.weather-card small { font-size:8px; color:#aeb5b7; }
.weather-card strong { margin-top:22px; display:block; font-family:var(--display); font-size:28px; }
.weather-card p { margin:3px 0 0; font-size:9px; color:#aeb5b7; }

.ticker { overflow:hidden; background:var(--accent); color:#111; }
.ticker-track { width:max-content; display:flex; animation:ticker 34s linear infinite; }
.ticker-set { min-width:100vw; min-height:55px; padding:0 28px; display:flex; flex-shrink:0; align-items:center; justify-content:space-around; gap:32px; white-space:nowrap; }
.ticker span { font-family:var(--display); font-size:23px; font-weight:800; letter-spacing:.04em; }
.ticker b { flex-shrink:0; }
@keyframes ticker { to { transform:translateX(-50%); } }
.block { padding:clamp(90px,11vw,165px) clamp(22px,6vw,96px); }

.intro { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,.85fr); gap:8vw; align-items:start; background:var(--charcoal); }
.intro h2,.services h2,.project-heading h2,.safety h2 { font-size:clamp(70px,8.5vw,138px); line-height:.76; }
.intro-copy>p { max-width:590px; margin:50px 0 0; color:#9ca4a6; font-size:12px; line-height:1.9; }
.credential-stack { border-top:1px solid var(--line); }
.credential-stack article { min-height:130px; display:grid; grid-template-columns:1fr .8fr 70px; align-items:center; gap:20px; border-bottom:1px solid var(--line); }
.credential-stack b { font-family:var(--display); font-size:30px; letter-spacing:.03em; }
.credential-stack span { color:#9ba2a4; font-size:8px; line-height:1.6; }
.credential-stack i { color:var(--accent); font-size:9px; font-style:normal; }
.credential-logo { display:block; }
.credential-logo img { width:62px; height:auto; }
.credential-logo-round img { width:56px; }

.services { background:var(--mist); color:#121516; }
.services .section-code { color:#63696a; }
.services-head { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(240px,.85fr); gap:8vw; align-items:end; }
.services-head h2 { margin:38px 0 0; }
.services-head>p { margin:0 0 8px; color:#5f6667; font-size:11px; line-height:1.8; }
.service-cards { margin-top:70px; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #9da2a0; border-left:1px solid #9da2a0; }
.service-card { min-height:510px; padding:25px; position:relative; display:flex; flex-direction:column; overflow:hidden; isolation:isolate; border-right:1px solid #9da2a0; border-bottom:1px solid #9da2a0; background:#202222; color:white; }
.service-card::before,.service-card::after { content:""; position:absolute; inset:0; }
.service-card::before { z-index:0; background-position:center; background-size:cover; filter:saturate(.65) contrast(1.08); transform:scale(1.01); transition:filter .45s,transform .65s; }
.service-card::after { z-index:1; background:linear-gradient(180deg,rgba(9,10,10,.42) 0%,rgba(9,10,10,.18) 38%,rgba(9,10,10,.94) 100%); transition:background .35s; }
.service-card>* { position:relative; z-index:2; }
/* Restore these hover states if service cards become links.
.service-card:hover::before { filter:saturate(.9) contrast(1.04); transform:scale(1.055); }
.service-card:hover::after { background:linear-gradient(180deg,rgba(9,10,10,.3) 0%,rgba(9,10,10,.12) 38%,rgba(9,10,10,.88) 100%); }
*/
.service-tiling::before { background-image:url("media/tilingandslating.jpg"); }
.service-flat::before { background-image:url("media/flatroofs.jpg"); }
.service-new-roofs::before { background-image:url("media/newroofs.jpg"); }
.service-roofline::before { background-image:url("media/details-roofline.jpg"); }
.card-top { display:flex; justify-content:space-between; font-size:9px; }
.card-top i { font-size:17px; font-style:normal; }
.service-card h3 { margin:auto 0 0; font-family:var(--display); font-size:clamp(32px,3.2vw,50px); line-height:.88; }
.service-card p { margin:17px 0 0; max-width:220px; color:#d3d7d4; font-size:9px; line-height:1.65; }

.projects { background:var(--black); }
.project-heading { display:flex; justify-content:space-between; align-items:end; }
.project-heading h2 { margin-top:38px; }
.project-nav { display:flex; align-items:center; border:1px solid var(--line); }
.project-nav button { width:60px; height:58px; border:0; background:transparent; color:white; cursor:pointer; font-size:17px; }
.project-nav button:hover { background:var(--accent); color:#111; }
.project-nav button:disabled { opacity:.28; cursor:default; }
.project-nav button:disabled:hover { background:transparent; color:white; }
.project-nav span { min-width:100px; text-align:center; font-size:9px; color:#7e8789; }
.project-nav b { color:var(--accent); }
.project-nav i { font-style:normal; }
.project-stage { height:min(68vw,800px); min-height:500px; margin-top:70px; position:relative; border:1px solid var(--line); overflow:hidden; touch-action:pan-y; }
.project-stage figure { position:absolute; inset:0; margin:0; opacity:0; transform:scale(1.03); transition:opacity .5s,transform .8s; pointer-events:none; }
.project-stage figure.active { opacity:1; transform:scale(1); pointer-events:auto; }
.project-stage img { width:100%; height:100%; object-fit:cover; filter:saturate(.7); }
.project-stage figcaption { position:absolute; left:0; bottom:0; min-width:330px; padding:28px 32px; display:flex; flex-direction:column; background:var(--accent); color:#111; }
.project-stage figcaption span,.project-stage figcaption small { font-size:8px; letter-spacing:.1em; }
.project-stage figcaption b { margin:8px 0 15px; font-family:var(--display); font-size:36px; }
.project-empty { position:absolute; inset:0; display:grid; place-content:center; gap:22px; text-align:center; color:#687072; }
.project-empty span { font-size:8px; letter-spacing:.12em; }
.project-empty b { font-family:var(--display); font-size:clamp(48px,7vw,100px); line-height:.82; color:#bcc1bf; }

.safety { display:grid; grid-template-columns:1.15fr .85fr; gap:8vw; align-items:center; background:var(--charcoal); }
.safety-photo { position:relative; }
.safety-photo img { aspect-ratio:4/5; width:100%; object-fit:cover; filter:grayscale(.65) contrast(1.1); }
.crosshair { position:absolute; left:50%; top:50%; width:120px; height:120px; border:1px solid rgba(201,204,202,.7); border-radius:50%; transform:translate(-50%,-50%); }
.crosshair::before,.crosshair::after { content:""; position:absolute; background:var(--accent); }
.crosshair::before { width:170px; height:1px; left:-25px; top:59px; }.crosshair::after { width:1px; height:170px; top:-25px; left:59px; }
.safety h2 { margin:42px 0; }
.safety-copy>p { color:#a4adaf; font-size:11px; line-height:1.9; }
.safety ul { list-style:none; margin:38px 0; padding:0; border-top:1px solid var(--line); }
.safety li { padding:18px 0; border-bottom:1px solid var(--line); font-size:9px; letter-spacing:.05em; }
.safety li span { margin-right:25px; color:var(--accent); }

.contact { min-height:700px; padding:clamp(100px,12vw,180px) clamp(22px,6vw,96px); position:relative; overflow:hidden; background:#e7e8e5 url("media/theeast-light.jpg") center/cover no-repeat; color:#111; }
.contact-grid { position:absolute; inset:0; opacity:1; background:linear-gradient(90deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.42) 52%,rgba(255,255,255,.12) 100%),linear-gradient(0deg,rgba(255,255,255,.5) 0%,transparent 55%); }
.contact>*:not(.contact-grid) { position:relative; z-index:1; }
.contact h2 { font-size:clamp(94px,14.2vw,230px); line-height:.72; }
.contact h2 em { color:transparent; -webkit-text-stroke:2px #111; font-style:normal; }
.contact-actions { margin-top:85px; display:grid; grid-template-columns:1fr 1fr; max-width:900px; border-top:1px solid rgba(0,0,0,.32); border-bottom:1px solid rgba(0,0,0,.32); }
.contact-actions a,.contact-actions button { padding:25px; display:flex; flex-direction:column; align-items:flex-start; gap:8px; border:0; background:rgba(255,255,255,.48); color:#111; text-decoration:none; font-family:var(--display); font-size:27px; font-weight:600; text-align:left; cursor:pointer; backdrop-filter:blur(5px); }
.contact-actions .quote-trigger { letter-spacing:0; }
.contact-actions>*+* { border-left:1px solid rgba(0,0,0,.32); }
.contact-actions small { font-family:var(--body); font-size:8px; font-weight:500; letter-spacing:.1em; }

footer { padding:55px clamp(22px,4vw,65px) 25px; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:start; gap:35px; background:#090b0c; }
footer>p { margin:0; color:#7f888a; font-size:8px; line-height:1.7; }
footer>div { justify-self:end; display:flex; gap:25px; }
footer>div a { font-size:8px; text-decoration:none; }
footer>small { grid-column:1/-1; margin-top:30px; padding-top:20px; border-top:1px solid var(--line); color:#626a6c; font-size:8px; }

.quote-panel { position:fixed; z-index:50; right:0; top:0; bottom:0; width:min(650px,100%); padding:clamp(50px,6vw,90px); background:var(--accent); color:#111; transform:translateX(105%); transition:transform .45s cubic-bezier(.75,0,.2,1); overflow:auto; }
.quote-panel.open { transform:none; }
.panel-backdrop { position:fixed; z-index:40; inset:0; background:rgba(0,0,0,.72); opacity:0; pointer-events:none; transition:opacity .35s; }
.panel-backdrop.open { opacity:1; pointer-events:auto; }
.panel-close { position:absolute; top:20px; right:25px; width:46px; height:46px; border:1px solid rgba(0,0,0,.4); background:transparent; font-size:27px; cursor:pointer; }
.quote-panel .section-code { color:#343636; }
.quote-panel h2 { margin:35px 0; font-size:clamp(65px,8vw,105px); }
.quote-panel>p:not(.section-code) { font-size:10px; line-height:1.7; }
.quote-panel form { margin-top:40px; display:grid; grid-template-columns:1fr 1fr; gap:28px 20px; }
.quote-panel label { display:flex; flex-direction:column; gap:9px; font-size:8px; letter-spacing:.08em; }
.quote-panel input,.quote-panel select,.quote-panel textarea { padding:10px 0; border:0; border-bottom:1px solid rgba(0,0,0,.45); border-radius:0; outline:0; background:transparent; color:#111; resize:vertical; }
.quote-panel .wide { grid-column:1/-1; }
.quote-panel .action { border:1px solid #111; }
.quote-panel .action:disabled { opacity:.58; cursor:wait; }
.form-trap { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; overflow:hidden!important; }
.panel-status { min-height:18px; margin:0; font-size:8px; }

.reveal { opacity:0; transform:translateY(28px); transition:opacity .65s,transform .65s; }
.reveal.shown { opacity:1; transform:none; }
.service-card:nth-child(2) { transition-delay:.07s; }.service-card:nth-child(3) { transition-delay:.14s; }.service-card:nth-child(4) { transition-delay:.21s; }

@media (max-width:1000px) {
  .topline-service { display:none; }
  header { grid-template-columns:1fr auto; }
  nav { position:absolute; top:86px; left:0; right:0; padding:30px; display:none; flex-direction:column; background:var(--black); }
  nav.open { display:flex; }
  .header-actions { display:none; }
  .menu { width:43px; height:43px; padding:10px; display:block; border:1px solid rgba(255,255,255,.3); background:transparent; }
  .menu span { display:block; height:1px; margin:6px 0; background:white; }
  .hero-copy { padding-top:190px; }
  .weather-card { display:none; }
  .intro,.services-head { grid-template-columns:minmax(0,1fr) 220px; gap:6vw; }
  .service-cards { grid-template-columns:1fr 1fr; }
  .service-card { min-height:450px; }
}

@media (max-width:700px) {
  .topline span:nth-child(-n+2) { display:none; }
  .topline { padding:0 12px; gap:8px; overflow:hidden; font-size:6px; }
  .topline span:nth-child(3) { min-width:0; overflow:hidden; text-overflow:ellipsis; }
  .topline a { flex-shrink:0; }
  .topline-mobile-actions { margin-left:auto; display:flex; flex-shrink:0; align-items:center; }
  .topline-mobile-actions a,.topline-mobile-actions .quote-trigger { min-height:32px; padding:0 9px; display:flex; align-items:center; border:0; border-left:1px solid rgba(0,0,0,.25); background:transparent; color:#111; font-family:var(--body); font-size:7px; font-weight:600; letter-spacing:.06em; white-space:nowrap; }
  header { height:72px; top:32px; }
  header .brand { width:125px; }
  nav { top:72px; }
  .hero { min-height:820px; }
  .hero-copy { padding:170px 20px 75px; }
  .hero h1 { margin-top:30px; font-size:clamp(52px,18.5vw,88px); line-height:.78; white-space:nowrap; }
  .hero-bottom { margin-top:50px; align-items:stretch; flex-direction:column; gap:30px; }
  .action { min-width:0; }
  .action span { font-size:11px; }
  .hero .action { width:100%; }
  .scroll-cue { display:none; }
  .block { padding:90px 20px; }
  .intro,.services-head { grid-template-columns:1fr; }
  .services-head>p { margin-top:30px; }
  .intro h2,.services h2,.project-heading h2,.safety h2 { font-size:clamp(54px,17vw,70px); }
  .credential-stack { margin-top:30px; }
  .service-cards { grid-template-columns:1fr; }
  .service-card { min-height:410px; }
  .project-heading { align-items:flex-start; flex-direction:column; gap:45px; }
  .project-nav button { width:50px; height:50px; }
  .project-nav span { min-width:84px; font-size:8px; }
  .project-stage { min-height:580px; height:110vw; }
  .project-stage figcaption { min-width:0; right:0; padding:20px 22px; }
  .project-stage figcaption span,.project-stage figcaption small { font-size:7px; }
  .project-stage figcaption b { margin:6px 0 10px; font-size:28px; }
  .safety { grid-template-columns:1fr; }
  .contact { min-height:650px; }
  .contact h2 { font-size:clamp(64px,21vw,110px); }
  .contact-actions { grid-template-columns:1fr; }
  .contact-actions .quote-trigger { width:100%; justify-self:stretch; }
  .contact-actions>*+* { border-left:0; border-top:1px solid rgba(0,0,0,.32); }
  footer { grid-template-columns:1fr; }
  footer>div { justify-self:start; }
  .quote-panel form { grid-template-columns:1fr; }
  .quote-panel .wide { grid-column:auto; }
}

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

/* Privacy policy */
.privacy-page { min-height:100vh; }
.privacy-nav { min-height:112px; padding:20px clamp(22px,6vw,96px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.privacy-back { padding:14px 18px; border:1px solid var(--line); font-size:10px; font-weight:600; letter-spacing:.08em; text-decoration:none; transition:border-color .2s,background .2s,color .2s; }
.privacy-back:hover { border-color:var(--accent); background:var(--accent); color:#111; }
.privacy-main { padding:0 clamp(22px,6vw,96px); }
.privacy-hero { padding:clamp(85px,11vw,155px) 0; border-bottom:1px solid var(--line); }
.privacy-hero h1 { margin:35px 0 0; font-family:var(--display); font-size:clamp(82px,13vw,190px); font-weight:800; line-height:.72; letter-spacing:-.045em; }
.privacy-copy { width:min(760px,100%); margin-left:0; padding:clamp(70px,9vw,125px) 0; text-align:left; }
.privacy-copy h2 { margin:70px 0 20px; font-family:var(--display); font-size:clamp(34px,4vw,52px); font-weight:700; line-height:.9; letter-spacing:-.025em; text-transform:uppercase; }
.privacy-copy p,.privacy-copy li { color:#aeb5b7; font-size:13px; line-height:1.9; }
.privacy-copy p { margin:0 0 25px; }
.privacy-copy ul { margin:0 0 35px; padding-left:20px; }
.privacy-copy li { margin:0 0 12px; padding-left:8px; }
.privacy-copy a { color:white; text-underline-offset:4px; }
.privacy-footer { padding:35px clamp(22px,6vw,96px); display:flex; justify-content:space-between; border-top:1px solid var(--line); color:#7f888a; font-size:8px; letter-spacing:.08em; }
.privacy-footer a { color:white; text-decoration:none; }

@media (max-width:700px) {
  .privacy-nav { min-height:90px; }
  .privacy-nav .brand { width:120px; }
  .privacy-back { padding:11px 12px; font-size:8px; }
  .privacy-hero h1 { font-size:clamp(68px,23vw,105px); }
  .privacy-copy h2 { margin-top:55px; }
  .privacy-copy p,.privacy-copy li { font-size:12px; }
}