@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,900;1,500;1,600&family=Work+Sans:wght@400;500;600;700&family=Oswald:wght@500;600;700&display=swap');

:root{
  --bg:#15111d;
  --bg-raised:#1d1727;
  --bg-raised-2:#241d33;
  --ink:#f3ede2;
  --ink-muted:#ab9fb0;
  --ink-faint:#7a6f84;
  --gold:#e0a458;
  --ember:#e2582c;
  --rule:rgba(243,237,226,0.12);
  --rule-strong:rgba(243,237,226,0.22);
  --sunset:linear-gradient(90deg,#c23b2e 0%,#e0a458 48%,#8a6ba8 100%);
  color-scheme: dark;
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Work Sans',ui-sans-serif,system-ui,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Playfair Display',ui-serif,Georgia,serif;
  font-weight:700;
  line-height:1.15;
  margin:0;
  text-wrap:balance;
  color:var(--ink);
}
em{font-style:italic; color:var(--gold);}
p{margin:0;}
a{color:inherit;}
img,svg{max-width:100%;}

.wrap{max-width:1120px; margin:0 auto; padding:0 28px;}
.prose{max-width:62ch;}

.eyebrow{
  font-family:'Work Sans',sans-serif; font-size:12px; font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--gold);
}

/* -------- header -------- */
header{
  position:sticky; top:0; z-index:20;
  background:rgba(21,17,29,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:18px 28px;}
.wordmark{
  font-family:'Playfair Display',serif; font-weight:900; font-size:22px;
  letter-spacing:0.01em; color:var(--ink); text-decoration:none;
  display:flex; align-items:center; gap:10px;
}
.wordmark .mark{width:18px;height:18px;position:relative;overflow:hidden;flex:none;}
.wordmark .mark::before{
  content:"";position:absolute;left:0;right:0;bottom:2px;top:2px;
  background:linear-gradient(180deg,var(--gold),var(--ember));
  border-radius:50% 50% 0 0 / 60% 60% 0 0;
}
.wordmark .mark::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--ink-faint);}
.back-link{
  font-size:13px; color:var(--ink-faint); text-decoration:none; display:flex; align-items:center; gap:6px;
}
.back-link:hover{color:var(--gold);}
.navlinks{display:flex;align-items:center;gap:28px;}
.navlinks a{font-size:14px; font-weight:500; color:var(--ink-muted); text-decoration:none; transition:color .15s ease;}
.navlinks a:hover, .navlinks a:focus-visible{color:var(--ink);}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Work Sans',sans-serif; font-weight:600; font-size:14px;
  padding:11px 20px; border-radius:3px; text-decoration:none; white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary{background:linear-gradient(135deg,var(--gold),var(--ember)); color:#191220;}
.btn-primary:hover, .btn-primary:focus-visible{box-shadow:0 6px 24px -6px rgba(224,164,88,0.55); transform:translateY(-1px);}
.btn-ghost{color:var(--ink); border:1px solid var(--rule-strong); background:transparent;}
.btn-ghost:hover, .btn-ghost:focus-visible{border-color:var(--gold); color:var(--gold);}
a:focus-visible, button:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}

/* -------- hero -------- */
.hero{padding:96px 0 72px; position:relative; overflow:hidden;}
.hero-glow{
  position:absolute; left:50%; top:-120px; width:640px; height:640px;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(224,164,88,0.16), rgba(226,88,44,0.07) 45%, transparent 70%);
  pointer-events:none; animation:glow 9s ease-in-out infinite;
}
@keyframes glow{
  0%,100%{opacity:.75; transform:translateX(-50%) scale(1);}
  50%{opacity:1; transform:translateX(-50%) scale(1.06);}
}
@media (prefers-reduced-motion: reduce){ .hero-glow{animation:none;} }
.hero-inner{position:relative; text-align:center;}
.hero h1{font-size:clamp(38px,6vw,70px); margin:20px auto 22px; max-width:17ch;}
.hero .sub{color:var(--ink-muted); font-size:18px; max-width:52ch; margin:0 auto 34px;}
.hero-ctas{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.hero-ctas .btn-primary{padding:14px 26px; font-size:15px;}
.sunrule{height:2px; width:100%; border:0; margin:0; background:var(--sunset); opacity:0.85;}

/* -------- proof strip -------- */
.proof-strip{padding:26px 0; border-bottom:1px solid var(--rule);}
.proof-strip .wrap{display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap;}
.proof-strip .eyebrow{margin:0; flex:none;}
.proof-strip .tags{display:flex; gap:10px; flex-wrap:wrap; justify-content:center;}
.proof-strip .tag{
  font-size:13px; color:var(--ink-muted); padding:6px 14px;
  border:1px solid var(--rule); border-radius:999px; white-space:nowrap;
}

/* -------- stat block -------- */
.stats{padding:56px 0; border-bottom:1px solid var(--rule); background:var(--bg-raised);}
.stats-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:28px; text-align:center;}
.stat-num{
  font-family:'Oswald',ui-sans-serif,sans-serif; font-weight:700; font-style:normal;
  text-transform:uppercase; letter-spacing:0.01em;
  font-size:clamp(34px,5vw,52px); color:var(--gold); line-height:1;
}
.stat-label{margin-top:10px; font-size:14px; color:var(--ink-muted);}

/* -------- proof section (case-study stats) -------- */
.proof-section{padding:72px 0; border-bottom:1px solid var(--rule); background:var(--bg-raised); position:relative;}
.proof-section .section-head{margin-bottom:36px;}
.proof-section .section-head p.body{color:var(--ink-muted); font-size:15.5px; margin-top:12px; max-width:58ch;}

/* -------- blueprint grid texture -------- */
.blueprint{
  background-image:
    linear-gradient(rgba(243,237,226,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243,237,226,0.05) 1px, transparent 1px);
  background-size:38px 38px;
  background-position:center top;
}

/* -------- hazard stripe divider -------- */
.hazard-rule{
  height:7px; width:100%; border:0; margin:0; padding:0;
  background:repeating-linear-gradient(-45deg,
    var(--gold) 0, var(--gold) 13px,
    var(--bg-raised) 13px, var(--bg-raised) 26px);
  opacity:0.6;
}

/* -------- riveted corners -------- */
.riveted{position:relative;}
.riveted::before, .riveted::after{
  content:""; position:absolute; width:6px; height:6px; border-radius:50%;
  background:var(--ink-faint); opacity:0.45; box-shadow:0 1px 0 rgba(0,0,0,0.3) inset;
}
.riveted::before{top:12px; left:12px;}
.riveted::after{top:12px; right:12px;}

/* -------- tiers (two-column comparison) -------- */
.tiers{padding:72px 0; border-bottom:1px solid var(--rule);}
.tiers-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.tier{
  background:var(--bg-raised); border:1px solid var(--rule); border-radius:8px;
  padding:36px 32px; display:flex; flex-direction:column; gap:18px;
}
.tier-featured{border-color:rgba(224,164,88,0.45); background:linear-gradient(180deg, rgba(224,164,88,0.09), var(--bg-raised) 45%);}
.tier-label{font-size:12px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint);}
.tier-featured .tier-label{color:var(--gold);}
.tier h3{font-size:22px;}
.tier-price{font-family:'Playfair Display',serif; font-weight:700; color:var(--gold); font-size:24px;}
.tier-price small{font-family:'Work Sans',sans-serif; font-weight:500; color:var(--ink-faint); font-size:12px; text-transform:uppercase; letter-spacing:0.04em;}
.tier ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; flex:1;}
.tier li{color:var(--ink-muted); font-size:14.5px; padding-left:18px; position:relative;}
.tier li::before{content:"\2022"; position:absolute; left:0; color:var(--ember);}
.tier .btn{align-self:flex-start; margin-top:4px;}
@media (max-width:780px){ .tiers-grid{grid-template-columns:1fr;} }

/* -------- intro strip -------- */
.intro{padding:64px 0; border-bottom:1px solid var(--rule);}
.intro-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;}
.intro h2{font-size:clamp(24px,3vw,32px); font-weight:600;}
.intro h2 em{font-style:italic;}
.intro .body{color:var(--ink-muted); font-size:16px;}
.intro .body + .body{margin-top:14px;}
.intro .note{margin-top:22px; font-size:13px; color:var(--ink-faint); border-left:2px solid var(--rule-strong); padding-left:14px;}
@media (max-width:780px){ .intro-grid{grid-template-columns:1fr; gap:22px;} }

/* -------- why / numbered blocks (reused by why + process) -------- */
.why{padding:72px 0; border-bottom:1px solid var(--rule);}
.section-head{margin-bottom:40px; max-width:60ch;}
.section-head h2{font-size:clamp(26px,3.4vw,36px); margin-top:10px;}
.why-grid{display:grid; grid-template-columns:1fr 1fr; gap:36px 48px;}
.why-item{display:flex; gap:18px;}
.why-num{
  font-family:'Playfair Display',serif; font-weight:700; font-style:italic;
  font-size:30px; color:var(--ember); flex:none; width:44px; font-variant-numeric:tabular-nums;
}
.why-item h3{font-size:18px; font-weight:700; margin-bottom:8px;}
.why-item p{color:var(--ink-muted); font-size:15px;}
@media (max-width:780px){ .why-grid{grid-template-columns:1fr;} }

/* -------- process -------- */
.process{padding:72px 0; border-bottom:1px solid var(--rule);}
.process-list{display:grid; grid-template-columns:1fr 1fr; gap:36px 48px; margin-bottom:48px;}
.step{display:flex; gap:18px;}
.step-num{
  font-family:'Playfair Display',serif; font-weight:700; font-style:italic;
  font-size:30px; color:var(--ember); flex:none; width:44px; font-variant-numeric:tabular-nums;
}
.step h3{font-size:18px; font-weight:700; margin-bottom:8px;}
.step p{color:var(--ink-muted); font-size:15px;}
@media (max-width:780px){ .process-list{grid-template-columns:1fr;} }
.process-cta{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background:var(--bg-raised); border:1px solid rgba(224,164,88,0.35); border-radius:6px; padding:30px 34px;
}
.process-cta p{font-size:17px; color:var(--ink); max-width:42ch; font-style:italic;}
.process-cta .btn-primary{padding:14px 24px; font-size:15px; flex:none;}
@media (max-width:640px){ .process-cta{flex-direction:column; align-items:flex-start;} }

/* -------- starter tier -------- */
.starter{padding:56px 0; border-bottom:1px solid var(--rule);}
.starter-card{
  background:var(--bg-raised); border:1px solid var(--rule); border-radius:8px;
  padding:32px 36px; display:flex; align-items:center; justify-content:space-between;
  gap:28px; flex-wrap:wrap;
}
.starter-card .copy{max-width:54ch;}
.starter-card .eyebrow{margin-bottom:6px; display:block;}
.starter-card h2{font-size:21px; margin-bottom:8px;}
.starter-card p{color:var(--ink-muted); font-size:14.5px;}
.starter-card .price{
  font-family:'Playfair Display',serif; font-weight:700; color:var(--gold);
  font-size:22px; white-space:nowrap; margin-top:2px; display:block;
}
.starter-card .price small{font-family:'Work Sans',sans-serif; font-weight:500; color:var(--ink-faint); font-size:12px; text-transform:uppercase; letter-spacing:0.04em;}
.starter-card .btn{flex:none;}
@media (max-width:640px){ .starter-card{flex-direction:column; align-items:flex-start;} }

/* -------- footer/cta -------- */
footer{padding:88px 0 56px; text-align:center;}
footer .mark-lg{width:40px;height:40px;position:relative;margin:0 auto 26px;}
footer .mark-lg::before{
  content:"";position:absolute;left:0;right:0;bottom:6px;top:6px;
  background:linear-gradient(180deg,var(--gold),var(--ember));
  border-radius:50% 50% 0 0 / 60% 60% 0 0;
}
footer .mark-lg::after{content:"";position:absolute;left:-6px;right:-6px;bottom:6px;height:1.5px;background:var(--ink-faint);}
footer h2{font-size:clamp(26px,4vw,40px); max-width:18ch; margin:0 auto 36px;}
footer .sub{color:var(--ink-muted); font-size:16px; max-width:44ch; margin:0 auto;}
.contact-card{
  display:inline-flex; flex-direction:column; align-items:center; gap:12px;
  background:var(--bg-raised); border:1px solid var(--rule);
  border-radius:6px; padding:32px 48px; margin-bottom:30px;
}
.contact-card a{text-decoration:none; font-size:16px;}
.contact-card a:hover{color:var(--gold);}
.contact-card .phone-big{
  font-family:'Playfair Display',serif; font-weight:700; font-size:30px;
  color:var(--gold); font-variant-numeric:tabular-nums;
}
.contact-card .phone-big:hover{color:var(--ink);}
.contact-card .loc{color:var(--ink-faint); font-size:12px; letter-spacing:0.06em; text-transform:uppercase;}
footer .copyright{color:var(--ink-faint); font-size:12.5px; margin-top:40px;}

section{scroll-margin-top:80px;}

/* -------- gateway (chooser) -------- */
.gateway-hero{padding:120px 0 64px; text-align:center;}
.gateway-hero h1{font-size:clamp(36px,5.6vw,60px); max-width:16ch; margin:20px auto 18px;}
.gateway-hero .sub{color:var(--ink-muted); font-size:17px; max-width:48ch; margin:0 auto;}
.choices{padding:16px 0 100px;}
.choice-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.choice{
  display:flex; flex-direction:column; gap:16px;
  background:var(--bg-raised); border:1px solid var(--rule); border-radius:8px;
  padding:32px 28px; text-decoration:none; color:var(--ink);
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.choice:hover, .choice:focus-visible{
  border-color:rgba(224,164,88,0.5); transform:translateY(-2px);
  box-shadow:0 20px 40px -28px rgba(224,164,88,0.4);
}
.choice-mark{width:34px; height:34px; position:relative; flex:none;}
.choice h2{font-size:22px;}
.choice p{color:var(--ink-muted); font-size:14.5px; flex:1;}
.choice .enter{font-size:12.5px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--gold);}
@media (max-width:860px){ .choice-grid{grid-template-columns:1fr; max-width:440px; margin:0 auto;} }

/* mark variants for the three verticals */
.mark-hospitality::before{
  content:"";position:absolute;left:0;right:0;bottom:18%;top:18%;
  background:linear-gradient(180deg,var(--gold),var(--ember));
  border-radius:50% 50% 0 0 / 60% 60% 0 0;
}
.mark-hospitality::after{content:"";position:absolute;left:0;right:0;bottom:18%;height:1.5px;background:var(--ink-faint);}

.mark-construction{border-left:2.5px solid var(--gold); border-bottom:2.5px solid var(--gold);}
.mark-construction::before{
  content:"";position:absolute;right:0;top:0;width:8px;height:8px;border-radius:50%;background:var(--ember);
}

.mark-personal{border:2px solid var(--gold); border-radius:50%;}
.mark-personal::before{
  content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;border-radius:50%;
  background:var(--ember); transform:translate(-50%,-50%);
}