:root{--black:#090a0b;--charcoal:#111315;--card:#17191b;--gold:#d4af37;--gold2:#f2d27a;--white:#f8f7f3;--muted:#b8b6af;--line:rgba(212,175,55,.25)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--white);font-family:Montserrat,Arial,sans-serif;font-size:16px;line-height:1.65}
a{color:inherit;text-decoration:none}
.nav{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;position:absolute;z-index:5;width:100%;border-bottom:1px solid rgba(255,255,255,.12);background:linear-gradient(#08090ad9,transparent)}
.brand{display:flex;flex-direction:row;align-items:center;gap:.72rem;font-size:.66rem;letter-spacing:.31em;color:var(--gold2);line-height:1.25}
.brand-name{display:flex;flex-direction:column}
.brand-logo{display:block;width:92px;height:54px;flex:0 0 92px;background:#000 url("assets/swfl-logo-services.png") center 47.5%/90px auto no-repeat}
.brand .mark{font-family:"Cormorant Garamond",serif;font-size:1.75rem;letter-spacing:.14em;color:white;font-weight:700}
.nav nav{display:flex;gap:2rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.13em}
.nav nav a:hover{color:var(--gold2)}
.nav-call{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}
.nav-call strong{display:block;color:var(--gold2);font-size:.9rem}
.hero{min-height:820px;height:100vh;position:relative;display:flex;align-items:center;padding:120px 7vw 80px;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:linear-gradient(120deg,#0b1116 0%,#121b20 48%,#071017 100%)}
.hero-bg:after{content:"";position:absolute;inset:12% -8% -18% 36%;background:radial-gradient(ellipse at 50% 65%,rgba(240,190,83,.3),transparent 38%),linear-gradient(155deg,transparent 35%,rgba(212,175,55,.16) 36%,rgba(212,175,55,.04) 49%,transparent 50%);filter:blur(2px)}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,6,7,.98) 0%,rgba(5,6,7,.79) 43%,rgba(5,6,7,.18) 78%),linear-gradient(0deg,rgba(5,6,7,.86),transparent 32%)}
.hero-copy{position:relative;z-index:2;width:min(760px,66vw)}
.eyebrow{text-transform:uppercase;letter-spacing:.22em;color:var(--gold2);font-size:.76rem;font-weight:600;margin:0 0 1.2rem}
h1,h2,h3{font-family:"Cormorant Garamond",serif;line-height:1.03;margin:0}
h1{font-size:clamp(3.5rem,7.4vw,7.1rem);font-weight:600;letter-spacing:-.025em}
h2{font-size:clamp(2.65rem,5vw,4.7rem);font-weight:600}
h3{font-size:2rem}
.lead{max-width:690px;font-size:1.08rem;color:#deddd8;margin:1.6rem 0 2rem}
.actions{display:flex;gap:.8rem;flex-wrap:wrap}
.button{display:inline-flex;min-height:54px;align-items:center;justify-content:center;padding:.85rem 1.4rem;text-transform:uppercase;letter-spacing:.09em;font-weight:700;font-size:.72rem;border:1px solid var(--gold);cursor:pointer}
.gold{background:var(--gold);color:#090909}
.gold:hover{background:var(--gold2)}
.ghost{background:rgba(8,9,10,.45)}
.ghost:hover{background:#fff;color:#111;border-color:#fff}
.trust{font-size:.73rem;text-transform:uppercase;letter-spacing:.12em;color:#aaa;margin-top:1.4rem}
.slogan{position:absolute;z-index:2;right:5vw;bottom:4vh;margin:0;padding-top:1rem;font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:600;font-size:clamp(2.1rem,3.2vw,3.4rem);line-height:1;letter-spacing:-.015em;color:var(--gold2);text-shadow:0 0 22px rgba(212,175,55,.22)}
.slogan:before{content:"";position:absolute;top:0;right:0;width:min(220px,55%);height:1px;background:linear-gradient(90deg,transparent,rgba(242,210,122,.82))}
section{padding:110px 7vw}
.service-gateway{padding-top:70px;padding-bottom:70px;background:#0b0c0d;border-bottom:1px solid var(--line)}
.gateway-heading{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:2rem}
.gateway-heading .eyebrow{margin:0}
.gateway-heading h2{max-width:720px;font-size:clamp(2.5rem,4.5vw,4.25rem);text-align:right}
.gateway-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.gateway-card{position:relative;display:block;min-height:430px;overflow:hidden;border:1px solid rgba(242,210,122,.32);background:#111315}
.gateway-image,.gateway-shade{position:absolute;inset:0;display:block}
.gateway-image{background-position:center;background-size:cover;transition:transform .65s ease}
.gateway-christmas .gateway-image{background-image:url("assets/holiday-roofline-palms-2026.webp");background-position:63% center}
.gateway-landscape .gateway-image{background-image:url("assets/front-elevation-landscape-2026.webp");background-position:54% center}
.gateway-shade{background:linear-gradient(0deg,rgba(3,4,5,.97) 0%,rgba(3,4,5,.7) 47%,rgba(3,4,5,.08) 76%)}
.gateway-card:hover .gateway-image{transform:scale(1.035)}
.gateway-copy{position:absolute;z-index:1;left:2rem;right:2rem;bottom:1.8rem;display:flex;flex-direction:column;align-items:flex-start}
.gateway-copy small{color:var(--gold2);font-size:.68rem;font-style:normal;font-weight:700;text-transform:uppercase;letter-spacing:.15em}
.gateway-copy strong{font-family:"Cormorant Garamond",serif;font-size:clamp(2.5rem,4vw,4.1rem);line-height:1;margin:.5rem 0;color:#fff}
.gateway-copy em{max-width:520px;color:#d8d6d0;font-size:.88rem;font-style:normal}
.gateway-copy b{margin-top:1.1rem;color:var(--gold2);font-size:.7rem;text-transform:uppercase;letter-spacing:.09em}
.intro{text-align:center;max-width:970px;margin:auto}
.intro h2{max-width:850px;margin:auto}
.intro>p:last-child{max-width:740px;margin:1.7rem auto 0;color:var(--muted);font-size:1.08rem}
.seasonal-lead{position:relative;min-height:680px;display:flex;align-items:center;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.seasonal-photo{position:absolute;inset:0;background:#070809 url("assets/holiday-roofline-palms-2026.webp") 70% center/cover no-repeat}
.seasonal-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,5,6,.97) 0%,rgba(4,5,6,.88) 45%,rgba(4,5,6,.2) 80%),linear-gradient(0deg,rgba(4,5,6,.82),transparent 42%)}
.seasonal-copy{position:relative;z-index:1;max-width:690px}
.seasonal-copy h2{max-width:660px}
.seasonal-copy>p:not(.eyebrow){max-width:620px;margin:1.5rem 0;color:#d8d6d0;font-size:1.04rem}
.seasonal-points{display:flex;flex-wrap:wrap;gap:.55rem;margin:0 0 1.8rem}
.seasonal-points span{border:1px solid rgba(242,210,122,.45);background:rgba(4,5,6,.58);padding:.5rem .68rem;color:#e4e1d7;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em}
.services{background:var(--charcoal)}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:3rem;margin-bottom:3.2rem}
.section-head>p{max-width:480px;color:var(--muted)}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.service{background:var(--card);padding:2.5rem;min-height:280px;transition:.25s}
.service:hover{background:#1d1f21;transform:translateY(-3px)}
.service.featured{background:linear-gradient(145deg,#24200f,#161719)}
.service span{color:var(--gold);font-size:.72rem;letter-spacing:.18em}
.service h3{margin:1.3rem 0 .8rem}
.service p{color:var(--muted);font-size:.91rem}
.service-link{display:inline-block;margin-top:.65rem;color:var(--gold2);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.service-link:hover{text-decoration:underline;text-underline-offset:.25rem}
.difference{display:grid;grid-template-columns:.78fr 1.22fr;gap:8vw;align-items:start}
.difference h2{position:sticky;top:3rem}
.points{border-top:1px solid var(--line)}
.points>div{padding:2rem 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:.7fr 1.3fr;gap:2rem}
.points strong{font-family:"Cormorant Garamond",serif;font-size:1.65rem}
.points p{margin:0;color:var(--muted)}
.process{background:#0d0f10}
.process>h2{max-width:700px}
.process ol{list-style:none;padding:0;margin:3.5rem 0 0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.process li{padding:2rem 2.2rem 0 0;display:flex;gap:1.2rem}
.process li b{color:var(--gold);font-size:.75rem}
.process li span{color:var(--muted)}
.process li strong{display:block;color:white;font-family:"Cormorant Garamond",serif;font-size:1.55rem;margin-bottom:.4rem}
.consultation{background:linear-gradient(135deg,#211d0d 0%,#111315 40%);display:grid;grid-template-columns:.85fr 1.15fr;gap:8vw}
.consult-copy{position:sticky;top:3rem;align-self:start}
.consult-copy p:not(.eyebrow){color:var(--muted);max-width:520px}
.consult-trust{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.35rem 0 .35rem}
.consult-trust span{border:1px solid var(--line);padding:.45rem .65rem;color:#dedbd1;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em}
.phone{display:inline-block;margin-top:1rem;color:var(--gold2)}
.consult-options{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem}
.photo-link{color:#f0eee7;font-size:.84rem;text-decoration:underline;text-underline-offset:.25rem}
form{background:#0b0c0d;padding:2.2rem;border:1px solid var(--line)}
label{display:flex;flex-direction:column;text-transform:uppercase;letter-spacing:.1em;font-size:.68rem;color:#cfccc3;margin-bottom:1.1rem}
.optional{display:inline;color:#777;font-size:.61rem;letter-spacing:.06em}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
input,select,textarea{margin-top:.45rem;background:#151719;border:1px solid #343638;color:white;padding:.9rem;font:inherit;font-size:.92rem;border-radius:0}
input:focus,select:focus,textarea:focus{outline:1px solid var(--gold);border-color:var(--gold)}
textarea{resize:vertical}
form .button{width:100%;border:0}
form .button:disabled{opacity:.7;cursor:wait}
.form-note{font-size:.72rem;color:#8f8e89;margin:.8rem 0 0;text-align:center}
.form-honey{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.form-status{margin-top:1rem;padding:1rem;border:1px solid var(--line);font-size:.84rem}
.form-status strong,.form-status span{display:block}
.form-status span{margin-top:.25rem;color:#d5d3cc}
.form-status a{color:var(--gold2);text-decoration:underline}
.form-status.success{border-color:rgba(114,190,136,.55);background:rgba(44,101,62,.22)}
.form-status.error{border-color:rgba(224,121,105,.6);background:rgba(125,48,37,.2)}
footer{padding:65px 7vw 90px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr 1fr;gap:2rem;color:var(--muted)}
footer .brand{flex-direction:column;align-items:flex-start;gap:0}
footer p{font-size:.84rem}
footer>div:nth-of-type(2){display:flex;flex-direction:column;text-align:right;color:var(--gold2);font-size:.84rem}
footer small{grid-column:1/-1;color:#777}
.mobile-actions{display:none}
@media(max-width:900px){.nav nav{display:none}
.nav-call{display:none}
.hero{min-height:720px;padding-left:6vw;padding-right:6vw}
.hero-copy{width:100%}
.slogan{left:6vw;right:6vw}
.slogan:before{left:0;right:auto;background:linear-gradient(90deg,rgba(242,210,122,.82),transparent)}
.service-grid{grid-template-columns:1fr 1fr}
.difference,.consultation{grid-template-columns:1fr}
.difference h2,.consult-copy{position:static}
.process ol{grid-template-columns:1fr}
.section-head{display:block}
.gateway-heading{display:block}.gateway-heading h2{text-align:left;margin-top:.7rem}.gateway-grid{grid-template-columns:1fr}.gateway-card{min-height:390px}
.points>div{grid-template-columns:1fr}
.mobile-actions{display:grid;grid-template-columns:.8fr 1.2fr;position:fixed;z-index:20;bottom:0;left:0;right:0;box-shadow:0 -8px 28px rgba(0,0,0,.38)}
.mobile-actions a{background:#f5f2e8;color:#090909;text-align:center;padding:.82rem .5rem;text-transform:uppercase;font-weight:700;letter-spacing:.06em;font-size:.68rem}
.mobile-actions a:last-child{background:var(--gold)}
footer{padding-bottom:110px}
}
@media(max-width:600px){.nav{height:72px}
.hero{height:auto;min-height:760px;padding-top:120px;padding-bottom:230px;align-items:flex-start}
.hero-shade{background:linear-gradient(90deg,rgba(5,6,7,.96),rgba(5,6,7,.72)),linear-gradient(0deg,#050607,transparent)}
h1{font-size:3.5rem}
.lead{font-size:.96rem}
.actions{flex-direction:column}
.button{width:100%}
.trust{line-height:1.7}
.slogan{bottom:1.6rem;padding-top:1.15rem;font-size:clamp(2.15rem,9vw,3rem);max-width:88vw}
section{padding:80px 6vw}
.service-gateway{padding:58px 4vw}.gateway-heading{padding:0 2vw}.gateway-card{min-height:360px}.gateway-copy{left:1.35rem;right:1.35rem;bottom:1.25rem}.gateway-copy strong{font-size:2.75rem}.gateway-copy em{font-size:.82rem}
.service-grid{grid-template-columns:1fr}
.service{min-height:auto}
.seasonal-lead{min-height:720px;align-items:flex-end;padding-bottom:90px}
.seasonal-photo{background-position:64% center}
.seasonal-shade{background:linear-gradient(0deg,rgba(4,5,6,.98) 0%,rgba(4,5,6,.88) 56%,rgba(4,5,6,.26) 100%)}
.seasonal-copy h2{font-size:3rem}
.field-row{grid-template-columns:1fr}
.consultation{gap:3rem}
footer{grid-template-columns:1fr}
footer>div:nth-of-type(2){text-align:left}
footer small{grid-column:auto}
}

/* Brand imagery and project photography */
.hero-bg{background:#0b1116 url("assets/hero-home.webp") center/cover no-repeat}
.hero-bg:after{inset:0;background:linear-gradient(180deg,transparent 52%,rgba(5,6,7,.5));filter:none}
.signature{display:grid;grid-template-columns:minmax(360px,.95fr) 1.05fr;align-items:center;gap:7vw;padding-top:55px;padding-bottom:55px;background:linear-gradient(135deg,#050505,#11100c)}
.signature-art{height:440px;overflow:hidden;position:relative;border:1px solid var(--line);background:#000}
.signature-art img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center 50%;transform:none}
.signature-copy p:not(.eyebrow){color:var(--muted);max-width:620px;margin:1.5rem 0}
.text-link{display:inline-flex;gap:.75rem;align-items:center;color:var(--gold2);text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;font-weight:700}
.text-link span{font-size:1.2rem;transition:transform .2s}
.text-link:hover span{transform:translateX(5px)}
.portfolio{background:#0d0f10}
.portfolio-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:280px;gap:14px}
.project{position:relative;overflow:hidden;margin:0;border:1px solid rgba(255,255,255,.09);grid-column:span 6}
.project-wide{grid-column:span 7}
.project-tall{grid-column:span 5}
.project img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.project:hover img{transform:scale(1.035)}
.project:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(3,4,5,.92))}
.project figcaption{position:absolute;z-index:2;left:1.4rem;right:1.4rem;bottom:1.2rem}
.project figcaption span{display:block;color:var(--gold2);font-size:.66rem;text-transform:uppercase;letter-spacing:.15em}
.project figcaption strong{display:block;font-family:"Cormorant Garamond",serif;font-size:1.55rem;margin-top:.25rem}
.portfolio-cta{display:flex;align-items:center;justify-content:space-between;gap:2rem;margin-top:2rem;padding-top:2rem;border-top:1px solid var(--line)}
.portfolio-cta p{font-family:"Cormorant Garamond",serif;font-size:1.65rem;margin:0}
.amp-standard{display:grid;grid-template-columns:minmax(300px,.75fr) 1.25fr;gap:7vw;align-items:center;background:linear-gradient(145deg,#17140a,#08090a);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.amp-badge{border:1px solid rgba(242,210,122,.62);background:#050505;padding:2.1rem 2.3rem;box-shadow:0 24px 65px rgba(0,0,0,.42),inset 0 0 35px rgba(212,175,55,.05)}
.amp-badge>div{display:flex;align-items:baseline;gap:.85rem;line-height:1}
.amp-badge strong{font-family:Arial,sans-serif;font-style:italic;font-size:clamp(3.2rem,6vw,5.4rem);letter-spacing:-.08em;color:#e1261c}
.amp-badge sup{font-size:.25em;vertical-align:top;margin-left:.12em}
.amp-badge span{font-size:clamp(1.8rem,3.2vw,3rem);font-weight:300;letter-spacing:-.04em;color:#fff}
.amp-badge p{margin:1rem 0 0;padding-top:1rem;border-top:1px solid rgba(255,255,255,.18);font-size:1.05rem;letter-spacing:.03em;color:#fff}
.amp-badge b{color:#e1261c}
.amp-copy>p:not(.eyebrow){color:var(--muted);max-width:580px}
.amp-benefits{display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1.6rem;margin-top:1.8rem}
.amp-benefits span{padding:.75rem 0;border-bottom:1px solid var(--line);color:#deddd8;font-size:.88rem}
.amp-benefits span:before{content:"✦";color:var(--gold);margin-right:.65rem}
.brand-promise{text-align:center;background:radial-gradient(circle at 50% 42%,rgba(212,175,55,.17),transparent 45%),#080909;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.brand-promise h2{font-size:clamp(4rem,8.7vw,8.5rem);font-style:italic;color:var(--gold2);text-shadow:0 0 35px rgba(212,175,55,.2)}
.brand-promise>p:not(.eyebrow){max-width:680px;margin:1.4rem auto 2rem;color:#d2d0c9;font-size:1.05rem}
@media(max-width:900px){.signature,.amp-standard{grid-template-columns:1fr}.signature-art{height:360px}.portfolio-grid{grid-auto-rows:260px}.project,.project-wide,.project-tall{grid-column:span 6}.portfolio-cta{align-items:flex-start;flex-direction:column}.amp-badge{max-width:580px}}
@media(max-width:600px){.hero-bg{background-position:65% center}.brand{gap:.45rem}.brand-logo{width:68px;height:43px;flex-basis:68px;background-size:68px auto}.brand .mark{font-size:1.45rem}.brand-name>span:last-child{font-size:.55rem}.signature-art{height:290px}.signature-art img{transform:none}.portfolio-grid{display:block}.project{height:260px;margin-bottom:12px}.portfolio-cta .button{width:100%}.amp-badge{padding:1.45rem}.amp-benefits{grid-template-columns:1fr}.amp-copy h2{font-size:2.8rem}.brand-promise h2{font-size:3.6rem}}