/* ═══════════════════════════════════════════════════════════
   BLOOMS ROOFING v2 — LINEAR DARK DESIGN SYSTEM
   Brand: precision roofing · dark premium · editorial serif
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,600;9..144,700;9..144,900&family=Figtree:wght@300;400;500;600&family=DM+Mono:wght@300;400;500&display=swap');

/* ── DESIGN TOKENS ───────────────────────────────────────── */
:root {
  /* ── Surfaces (5 depth layers) */
  --s0: #060910;   /* page base       */
  --s1: #0b1018;   /* cards           */
  --s2: #111926;   /* elevated cards  */
  --s3: #182234;   /* hover state     */
  --s4: #1f2c42;   /* active / focus  */
  --s-glass: rgba(11, 16, 24, 0.72);

  /* ── Brand greens */
  --g400: #4ade80;   /* primary  */
  --g500: #22c55e;   /* deeper   */
  --g600: #16a34a;   /* press    */
  --g-glow: rgba(74, 222, 128, 0.16);
  --g-glow-sm: rgba(74, 222, 128, 0.08);
  --g-dim:  rgba(74, 222, 128, 0.55);
  --g-ink:  rgba(74, 222, 128, 0.07);

  /* ── Accent warm */
  --amber: #fbbf24;
  --amber-glow: rgba(251,191,36,0.12);
  --sky:   #7dd3fc;
  --coral: #fb7185;
  --violet:#c4b5fd;

  /* ── Text */
  --t1: #f1f5f9;   /* primary   */
  --t2: #8fa4be;   /* secondary */
  --t3: #4d6480;   /* muted     */
  --t4: #263347;   /* faint     */

  /* ── Borders */
  --b0: rgba(255,255,255,0.035);
  --b1: rgba(255,255,255,0.07);
  --b2: rgba(255,255,255,0.12);
  --bg: rgba(74,222,128,0.22);  /* brand border */

  /* ── Radius */
  --r-xs:  3px;
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-2xl: 28px;
  --r-pill:9999px;

  /* ── Shadows */
  --sh-sm: 0 1px 4px rgba(0,0,0,0.5);
  --sh-md: 0 4px 16px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.35);
  --sh-lg: 0 12px 40px rgba(0,0,0,0.65), 0 4px 12px rgba(0,0,0,0.4);
  --sh-xl: 0 24px 80px rgba(0,0,0,0.75), 0 8px 24px rgba(0,0,0,0.5);
  --sh-glow:    0 0 32px rgba(74,222,128,0.18), 0 0 64px rgba(74,222,128,0.06);
  --sh-glow-sm: 0 0 14px rgba(74,222,128,0.14);

  /* ── Motion */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --ease-io:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-back: cubic-bezier(0.34, 1.48, 0.64, 1);

  --dt: 0.14s var(--ease-io);   /* fast  */
  --dm: 0.26s var(--ease-io);   /* mid   */
  --ds: 0.42s var(--ease-out);  /* slow  */
  --db: 0.52s var(--ease-back); /* bounce*/
}

/* ── BASE RESET ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  background: var(--s0);
  color: var(--t1);
  font-family: 'Figtree', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}
img  { display:block; max-width:100%; }
a    { text-decoration:none; color:inherit; }
ul   { list-style:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }

/* ── NOISE GRAIN OVERLAY ─────────────────────────────────── */
body::after {
  content:'';
  position:fixed; inset:0; z-index:9999;
  pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.5;
}

/* ── TYPOGRAPHY ──────────────────────────────────────────── */
h1,h2,h3,h4,h5 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--t1);
}
h1 { font-size: clamp(3rem, 6vw, 5.6rem); }
h2 { font-size: clamp(2rem, 3.8vw, 3.4rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.75rem); }
h4 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
p  { color: var(--t2); line-height: 1.78; }

.mono {
  font-family: 'DM Mono', monospace;
  letter-spacing: 0.05em;
}
.serif { font-family:'Fraunces',serif; }

/* ── LAYOUT ──────────────────────────────────────────────── */
.wrap     { max-width:1200px; margin:0 auto; padding:0 32px; }
.wrap-md  { max-width:860px;  margin:0 auto; padding:0 32px; }
.wrap-sm  { max-width:640px;  margin:0 auto; padding:0 32px; }
.section  { padding:120px 0; position:relative; }
.section-sm { padding:72px 0; }

.g2 { display:grid; grid-template-columns:1fr 1fr;       gap:28px; }
.g3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.g4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }

.split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}
.split.flip { direction:rtl; }
.split.flip > * { direction:ltr; }

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  font-family:'DM Mono', monospace;
  font-size:0.82rem; font-weight:500; letter-spacing:0.04em;
  padding:12px 26px; border-radius:var(--r-sm);
  white-space:nowrap; position:relative; overflow:hidden;
  transition:all var(--dm);
}
.btn::after {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.07),transparent 60%);
  opacity:0; transition:opacity var(--dt);
}
.btn:hover::after { opacity:1; }
.btn:active { transform:scale(0.97); }

.btn-green {
  background:var(--g400); color:#060910;
  box-shadow:0 0 24px rgba(74,222,128,0.28),inset 0 1px 0 rgba(255,255,255,0.25);
  font-weight:600;
}
.btn-green:hover {
  background:var(--g500);
  box-shadow:0 0 40px rgba(74,222,128,0.42),inset 0 1px 0 rgba(255,255,255,0.2);
  transform:translateY(-1px);
}

.btn-line {
  background:transparent; color:var(--t1);
  border:1px solid var(--b2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}
.btn-line:hover {
  border-color:var(--bg); color:var(--g400);
  background:var(--g-ink);
  transform:translateY(-1px);
}

.btn-ghost {
  background:var(--s2); color:var(--t2); border:1px solid var(--b1);
}
.btn-ghost:hover { background:var(--s3); color:var(--t1); }

.btn-lg  { padding:16px 36px; font-size:0.9rem; border-radius:var(--r-md); }
.btn-xl  { padding:18px 44px; font-size:0.92rem; border-radius:var(--r-md); }
.btn-sm  { padding:8px 16px;  font-size:0.76rem; border-radius:var(--r-xs); }
.w100    { width:100%; justify-content:center; }

/* ── CARDS ──────────────────────────────────────────────── */
.card {
  background:var(--s1);
  border:1px solid var(--b1);
  border-radius:var(--r-lg);
  transition:border-color var(--dm), box-shadow var(--dm), transform var(--ds);
}
.card:hover { border-color:var(--b2); box-shadow:var(--sh-md); }
.card-hi { background:var(--s2); border-color:var(--b2); }
.card-brand:hover {
  border-color:var(--bg);
  box-shadow:var(--sh-glow);
}
.card-top::before {
  content:''; display:block;
  height:1px; width:100%;
  background:linear-gradient(90deg,transparent,var(--bg) 50%,transparent);
}

/* ── TAGS / BADGES / CHIPS ───────────────────────────────── */
.tag {
  display:inline-flex; align-items:center; gap:6px;
  font-family:'DM Mono',monospace;
  font-size:0.68rem; font-weight:500; letter-spacing:0.1em;
  text-transform:uppercase;
  padding:4px 11px; border-radius:var(--r-pill); border:1px solid;
}
.tag-green  { color:var(--g400);  background:var(--g-ink);        border-color:rgba(74,222,128,0.2); }
.tag-amber  { color:var(--amber); background:rgba(251,191,36,0.07); border-color:rgba(251,191,36,0.2); }
.tag-sky    { color:var(--sky);   background:rgba(125,211,252,0.07); border-color:rgba(125,211,252,0.2); }
.tag-violet { color:var(--violet);background:rgba(196,181,253,0.07);border-color:rgba(196,181,253,0.2);}

/* ── EYEBROW LABEL ───────────────────────────────────────── */
.eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-family:'DM Mono', monospace;
  font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--g400); margin-bottom:16px;
}
.eyebrow::before {
  content:''; display:block;
  width:24px; height:1px; background:currentColor; opacity:0.6;
}

/* ── DIVIDERS ────────────────────────────────────────────── */
.div-h { height:1px; background:linear-gradient(90deg,transparent,var(--b2),transparent); }
.div-brand { height:1px; background:linear-gradient(90deg,transparent,var(--bg) 40%,transparent); }

/* ── DOT + LINE GLOWS ────────────────────────────────────── */
.g-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--g400);
  box-shadow:0 0 10px rgba(74,222,128,0.7);
  flex-shrink:0;
}
.pulse { animation:pulse-glow 2.4s ease-in-out infinite; }
@keyframes pulse-glow {
  0%,100% { box-shadow:0 0 10px rgba(74,222,128,0.7); }
  50%      { box-shadow:0 0 20px rgba(74,222,128,1), 0 0 40px rgba(74,222,128,0.3); }
}

/* ── FORMS ──────────────────────────────────────────────── */
.fg    { display:flex; flex-direction:column; gap:7px; }
.flabel {
  font-family:'DM Mono',monospace;
  font-size:0.72rem; letter-spacing:0.08em; color:var(--t3);
}
.finput {
  background:var(--s2); border:1px solid var(--b1);
  border-radius:var(--r-sm); padding:11px 15px;
  font-family:'Figtree',sans-serif; font-size:0.9rem; color:var(--t1);
  outline:none; transition:border-color var(--dt), box-shadow var(--dt); width:100%;
}
.finput::placeholder { color:var(--t4); }
.finput:focus {
  border-color:var(--g400);
  box-shadow:0 0 0 3px rgba(74,222,128,0.12);
}
textarea.finput { min-height:110px; resize:vertical; }
select.finput {
  appearance:none; cursor:pointer; padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234d6480' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.frow  { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.fcheck { display:flex; align-items:flex-start; gap:10px; }
.fcheck input[type='checkbox'] { width:15px;height:15px;accent-color:var(--g400);margin-top:3px;flex-shrink:0; }
.fcheck label { font-size:0.82rem; color:var(--t3); line-height:1.55; }
.fcheck a { color:var(--g400); }

/* ── MODAL ──────────────────────────────────────────────── */
.modal-wrap {
  position:fixed; inset:0; z-index:9000;
  background:rgba(4,7,12,0.88);
  backdrop-filter:blur(18px);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; pointer-events:none; transition:opacity var(--dm);
}
.modal-wrap.open { opacity:1; pointer-events:all; }
.modal {
  background:var(--s1); border:1px solid var(--b2);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-xl), var(--sh-glow);
  width:100%; max-width:520px; max-height:92vh; overflow-y:auto;
  padding:40px; position:relative;
  transform:translateY(20px) scale(0.95);
  transition:transform var(--ds);
}
.modal-wrap.open .modal { transform:translateY(0) scale(1); }
.modal::before {
  content:''; position:absolute; top:0;left:0;right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--bg) 50%,transparent);
}
.modal-x {
  position:absolute; top:16px;right:16px;
  width:30px;height:30px; border-radius:var(--r-sm);
  background:var(--s2); border:1px solid var(--b1);
  color:var(--t3); font-size:0.9rem;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--dt);
}
.modal-x:hover { background:var(--s3);color:var(--t1); }

/* ── COOKIE ─────────────────────────────────────────────── */
.cookie {
  position:fixed; bottom:20px; left:50%;
  transform:translateX(-50%) translateY(0);
  width:min(760px, calc(100% - 40px));
  background:var(--s2); border:1px solid var(--b2);
  border-radius:var(--r-xl); box-shadow:var(--sh-xl);
  padding:20px 28px;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  z-index:8000; transition:transform 0.5s var(--ease-out), opacity 0.4s;
}
.cookie::before {
  content:''; position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--bg) 50%,transparent);
}
.cookie.gone {
  transform:translateX(-50%) translateY(140%); opacity:0; pointer-events:none;
}
.cookie p { flex:1; min-width:200px; font-size:0.84rem; color:var(--t3); margin:0; }
.cookie a { color:var(--g400); }

/* ── NAV ─────────────────────────────────────────────────── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:62px;
  background:rgba(6,9,16,0.75);
  backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid var(--b0);
  transition:border-color var(--dm), background var(--dm);
}
.nav.scrolled { background:rgba(6,9,16,0.95); border-bottom-color:var(--b1); }
.nav-inner {
  max-width:1200px; margin:0 auto; padding:0 32px;
  height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav-logo {
  display:flex; align-items:center; gap:9px;
  font-family:'Fraunces',serif; font-weight:700; font-size:1.1rem;
  color:var(--t1); letter-spacing:-0.02em; white-space:nowrap;
}
.nav-logo-icon {
  width:30px;height:30px; border-radius:var(--r-sm);
  background:var(--g400); display:flex;align-items:center;justify-content:center;
  font-size:0.85rem; color:#060910; font-weight:700; flex-shrink:0;
  box-shadow:var(--sh-glow-sm);
}
.nav-logo .accent { color:var(--g400); }
.nav-links {
  display:flex; align-items:center; gap:2px;
}
.nav-links a {
  padding:6px 13px; border-radius:var(--r-sm);
  font-family:'DM Mono',monospace; font-size:0.78rem; letter-spacing:0.03em;
  color:var(--t3); transition:all var(--dt);
}
.nav-links a:hover { color:var(--t1); background:var(--s2); }
.nav-links a.active { color:var(--g400); }
.nav-right { display:flex; align-items:center; gap:10px; }
.nav-tel {
  font-family:'DM Mono',monospace; font-size:0.76rem; letter-spacing:0.04em;
  color:var(--t3); padding:6px 12px; border:1px solid var(--b1); border-radius:var(--r-sm);
  transition:all var(--dt);
}
.nav-tel:hover { color:var(--g400); border-color:var(--bg); }
.ham {
  display:none; flex-direction:column; gap:5px; padding:6px;
  border-radius:var(--r-sm); transition:background var(--dt);
}
.ham:hover { background:var(--s2); }
.ham span { display:block; width:18px;height:1.5px;background:var(--t2); border-radius:2px; transition:all var(--dm); }

/* ── SCROLL REVEAL ───────────────────────────────────────── */
.rv {
  opacity:0; transform:translateY(28px);
  transition:opacity 0.72s var(--ease-out), transform 0.72s var(--ease-out);
}
.rv.in { opacity:1; transform:none; }
.rv-d1 { transition-delay:0.09s; }
.rv-d2 { transition-delay:0.18s; }
.rv-d3 { transition-delay:0.27s; }
.rv-d4 { transition-delay:0.36s; }
.rv-d5 { transition-delay:0.45s; }

/* ── FOOTER ─────────────────────────────────────────────── */
footer {
  background:var(--s0); border-top:1px solid var(--b0); padding:72px 0 40px;
  position:relative;
}
footer::after {
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:320px; height:1px;
  background:linear-gradient(90deg,transparent,var(--g400),transparent);
}
.foot-grid {
  display:grid; grid-template-columns:1.8fr 1fr 1fr 1.2fr; gap:56px; margin-bottom:56px;
}
.foot-logo-desc { font-size:0.86rem; color:var(--t4); line-height:1.75; margin:14px 0 22px; max-width:270px; }
.foot-social { display:flex; gap:8px; }
.foot-soc-btn {
  width:33px;height:33px;border-radius:var(--r-sm);
  border:1px solid var(--b1); color:var(--t4);
  display:flex;align-items:center;justify-content:center;
  font-size:0.78rem;font-weight:700; transition:all var(--dt);
}
.foot-soc-btn:hover { border-color:var(--bg); color:var(--g400); background:var(--g-ink); }
.foot-col-h {
  font-family:'DM Mono',monospace; font-size:0.7rem;letter-spacing:0.14em;
  text-transform:uppercase; color:var(--t2); margin-bottom:18px;
}
.foot-links li { margin-bottom:9px; }
.foot-links a { font-size:0.87rem; color:var(--t4); transition:color var(--dt); }
.foot-links a:hover { color:var(--t2); }
.foot-bottom {
  border-top:1px solid var(--b0); padding-top:28px;
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
}
.foot-copy { font-size:0.78rem; color:var(--t4); }
.foot-legal { display:flex;gap:18px; }
.foot-legal a { font-size:0.78rem;color:var(--t4);transition:color var(--dt); }
.foot-legal a:hover { color:var(--t3); }
.foot-disc { font-size:0.72rem;color:var(--t4);line-height:1.6;margin-top:20px; }

/* ── PAGE HERO (inner) ───────────────────────────────────── */
.inner-hero {
  padding:152px 0 76px; position:relative; overflow:hidden; text-align:center;
}
.inner-hero-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--b0) 1px, transparent 1px),
    linear-gradient(90deg, var(--b0) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 50%, black 20%, transparent 80%);
}

/* ── UTILITIES ──────────────────────────────────────────── */
.tc     { text-align:center; }
.flex   { display:flex; }
.items-center { align-items:center; }
.gap-8  { gap:8px; }
.gap-12 { gap:12px; }
.gap-16 { gap:16px; }
.mt-auto { margin-top:auto; }

/* ── GRID BG PATTERN ─────────────────────────────────────── */
.grid-bg {
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(var(--b0) 1px, transparent 1px),
    linear-gradient(90deg, var(--b0) 1px, transparent 1px);
  background-size:52px 52px;
}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width:1024px) {
  .g4 { grid-template-columns:repeat(2,1fr); }
  .foot-grid { grid-template-columns:1fr 1fr; gap:40px; }
}
@media (max-width:768px) {
  .nav-links,.nav-tel { display:none; }
  .ham { display:flex; }
  .nav-links.open {
    display:flex; flex-direction:column; gap:4px;
    position:absolute; top:62px; left:0; right:0;
    background:var(--s1); border-bottom:1px solid var(--b1); padding:14px 20px;
  }
  .nav-links.open a { padding:10px 13px; }
  .split { grid-template-columns:1fr; gap:48px; direction:ltr; }
  .split.flip { direction:ltr; }
  .g2,.g3,.g4 { grid-template-columns:1fr; }
  .foot-grid { grid-template-columns:1fr; gap:32px; }
  .foot-bottom { flex-direction:column; text-align:center; }
  .frow { grid-template-columns:1fr; }
  .section { padding:80px 0; }
  h1 { font-size:2.6rem; }
  h2 { font-size:2rem; }
  .wrap,.wrap-md { padding:0 20px; }
}
@media (max-width:500px) {
  .cookie { bottom:12px; padding:16px; }
  .modal  { padding:28px 20px; }
}