:root{
  --night:#16233B;      /* evening sky, hero */
  --night-2:#223453;
  --porch:#F2B134;      /* porch-light amber, primary accent */
  --paper:#F4F6F8;      /* cool light body */
  --ink:#14202F;
  --steel:#5B6B7F;
  --answered:#2E9E6A;
  --missed:#D5533F;
  --maxw:1080px;
  --display:"Archivo","Arial Narrow",Arial,sans-serif;
  --body:"Public Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--porch);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem}
h1,h2,h3{font-family:var(--display);font-stretch:75%;font-weight:850;line-height:1.02;letter-spacing:-.01em;margin:0}
p{margin:0 0 1rem;max-width:62ch}

/* buttons */
.btn{display:inline-block;font:700 1.05rem/1 var(--body);text-decoration:none;padding:1rem 1.35rem;border-radius:10px;background:var(--porch);color:var(--night);border:2px solid var(--porch)}
.btn:hover{background:#ffc454;border-color:#ffc454}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn.ghost:hover{border-color:#fff}
.btn.dark{background:var(--night);border-color:var(--night);color:#fff}

/* top bar */
.top{background:var(--night);color:#fff}
.top .wrap{display:flex;justify-content:space-between;align-items:center;padding-top:1.1rem;padding-bottom:1.1rem;gap:1rem}
.logo{font-family:var(--display);font-stretch:100%;font-weight:900;font-size:1.45rem;text-decoration:none;letter-spacing:-.02em}
.logo span{color:var(--porch)}
.top a.call{font-weight:700;text-decoration:none;white-space:nowrap}
.top a.call:hover{color:var(--porch)}

/* hero */
.hero{background:var(--night);color:#fff;padding:3rem 0 5rem;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:3.5rem;align-items:center}
.hero h1{font-size:clamp(2.6rem,6.2vw,4.6rem)}
.hero .lede{font-size:1.2rem;color:#D6DEE9;margin:1.5rem 0 2rem}
.hero .ctas{display:flex;flex-wrap:wrap;gap:.8rem}

/* call log - the memorable element */
.log{background:#0F1A2D;border:1px solid #2D4165;border-radius:22px;padding:1.4rem 1.3rem 1rem;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.log h2{font-family:var(--body);font-stretch:100%;font-size:.95rem;font-weight:600;color:#9FB0C6;letter-spacing:0;margin:0 0 .9rem}
.entry{display:grid;grid-template-columns:4.2rem 1fr;gap:.2rem .9rem;padding:.85rem 0;border-top:1px solid #22324F}
.entry time{font-family:var(--display);font-stretch:85%;font-weight:700;font-size:1.05rem;color:#fff}
.entry .who{font-weight:600}
.entry .status{grid-column:2;font-size:.92rem;display:flex;align-items:center;gap:.5rem}
.dot{width:.6rem;height:.6rem;border-radius:50%;flex:none}
.status .miss{color:#F19A8B;display:flex;align-items:center;gap:.5rem}
.status .miss .dot{background:var(--missed)}
.status .ans{color:#8FE0B8;display:none;align-items:center;gap:.5rem}
.status .ans .dot{background:var(--answered)}
.entry.answered .miss{display:none}
.entry.answered .ans{display:flex}
.log .foot{font-size:.85rem;color:#9FB0C6;margin:.6rem 0 0;padding-top:.8rem;border-top:1px solid #22324F}
.entry.flip{animation:flip .45s ease}
@keyframes flip{0%{opacity:.2}100%{opacity:1}}

/* sections */
section{padding:5rem 0}
.kicker{font-family:var(--display);font-stretch:62%;font-weight:800;font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:1rem}
.intro{font-size:1.15rem;color:var(--steel)}

/* familiar list */
.familiar{margin-top:2.5rem;border-top:2px solid var(--ink)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;padding:1.5rem 0;border-bottom:1px solid #D3DAE3}
.pair blockquote{margin:0;font-family:var(--display);font-stretch:85%;font-weight:700;font-size:1.35rem;line-height:1.2}
.pair .fix{margin:0;color:var(--ink)}
.pair .fix strong{color:var(--answered)}
.note{font-size:.9rem;color:var(--steel);margin-top:1rem}

/* expensive leak */
.leak{background:var(--night);color:#fff}
.leak .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:3.5rem;align-items:start}
.leak h2{font-size:clamp(2.2rem,4.6vw,3.3rem)}
.leak p{color:#D6DEE9;font-size:1.1rem}
.question{font-family:var(--display);font-stretch:75%;font-weight:850;font-size:clamp(1.9rem,3.6vw,2.6rem);line-height:1.08;color:var(--porch);border-left:6px solid var(--porch);padding-left:1.2rem;margin:2rem 0 0}

/* outbound */
.out .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem 3rem;margin-top:2rem}
.out h3{font-size:1.5rem;font-stretch:85%;margin-bottom:.4rem}
.out .item{padding:1.2rem 0;border-top:1px solid #D3DAE3}
.out .kicker{max-width:22ch}
.vs{display:grid;grid-template-columns:.8fr 1.2fr;gap:0;margin-top:2.2rem;border-radius:18px;overflow:hidden;border:1px solid #D3DAE3}
.vs-col{padding:1.6rem 1.7rem;background:#fff}
.vs-col h3{font-size:1.45rem;font-stretch:85%;margin-bottom:.8rem;color:var(--steel)}
.vs-col ul{margin:0;padding:0;list-style:none}
.vs-col li{padding:.5rem 0 .5rem 1.7rem;position:relative;color:var(--steel)}
.vs-col li::before{content:"";position:absolute;left:0;top:.95rem;width:.9rem;height:2px;background:#AAB5C3}
.vs-col.avery{background:var(--night);color:#fff}
.vs-col.avery h3{color:var(--porch)}
.vs-col.avery li{color:#fff;font-weight:600}
.vs-col.avery li::before{width:.6rem;height:.6rem;border-radius:50%;background:var(--answered);top:.95rem}
.challenge{margin:1.6rem 0 0;font-size:1.15rem;max-width:none}
.challenge em{font-style:normal;font-weight:700}
@media (max-width:860px){.vs{grid-template-columns:1fr}}
.sources{margin-top:2.5rem;background:#fff;border-radius:14px;padding:1.4rem 1.5rem;border:1px solid #D3DAE3}
.sources p{margin:0;max-width:none}

/* price */
.price{background:#fff;border-top:1px solid #D3DAE3;border-bottom:1px solid #D3DAE3}
.price .wrap{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
.compare{display:grid;gap:1rem}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1.1rem 1.3rem;border-radius:12px;background:var(--paper)}
.row.us{background:var(--night);color:#fff}
.row b{font-family:var(--display);font-stretch:80%;font-weight:850;font-size:1.9rem;white-space:nowrap}
.row.us b{color:var(--porch)}
.row span{font-size:.95rem}
.tiers{font-size:.95rem;color:var(--steel)}

/* final cta */
.final{text-align:left}
.final .box{background:var(--porch);color:var(--night);border-radius:26px;padding:3rem clamp(1.5rem,5vw,3.5rem)}
.final h2{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:1rem}
.final p{font-size:1.15rem}
.final .phone{display:inline-block;font-family:var(--display);font-stretch:90%;font-weight:900;font-size:clamp(2rem,5vw,3rem);text-decoration:none;margin:.5rem 0 1rem}
.final .phone:hover{text-decoration:underline}

footer{background:var(--night);color:#9FB0C6;font-size:.9rem;padding:2rem 0}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}
footer a{color:#fff}

@media (max-width:860px){
  .hero .wrap,.leak .wrap,.price .wrap{grid-template-columns:1fr;gap:2.5rem}
  .pair{grid-template-columns:1fr;gap:.6rem}
  .out .grid{grid-template-columns:1fr}
  section{padding:3.5rem 0}
  .top a.call .label{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}

/* meanwhile entry */
.entry.meanwhile{border-top:1px dashed #F2B134}
.entry.meanwhile time{color:var(--porch);font-size:.95rem}
.entry.meanwhile .who{color:var(--porch)}
.entry.meanwhile .miss{color:#FFD58A}
.entry.meanwhile .miss .dot{background:var(--porch)}

/* nav */
.nav{display:flex;align-items:center;gap:1.4rem}
.nav a{font-weight:700;text-decoration:none}
.nav a:hover,.nav a.active{color:var(--porch)}

/* services page */
.page-head{background:var(--night);color:#fff;padding:3.5rem 0 4rem}
.page-head h1{font-size:clamp(2.4rem,5.5vw,4rem);max-width:18ch}
.page-head .lede{font-size:1.2rem;color:#D6DEE9;margin:1.3rem 0 0}
.promise{border-left:6px solid var(--porch);padding:.3rem 0 .3rem 1.3rem;margin:2rem 0 0;font-size:1.2rem;color:#fff;max-width:60ch}
.svc-group{margin-top:3rem}
.svc-group:first-child{margin-top:0}
.svc-group h2{font-size:clamp(1.8rem,3.6vw,2.4rem);font-stretch:70%;padding-bottom:.7rem;border-bottom:2px solid var(--ink)}
.svc{display:grid;grid-template-columns:1fr 1.4fr;gap:2.5rem;padding:1.2rem 0;border-bottom:1px solid #D3DAE3}
.svc h3{font-size:1.3rem;font-stretch:85%;font-weight:800;line-height:1.15}
.svc p{margin:0}
.svc.out h3::after{content:"Outbound";display:inline-block;margin-left:.6rem;vertical-align:middle;font:700 .72rem/1 var(--body);background:var(--answered);color:#fff;padding:.3rem .5rem;border-radius:6px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
.plan{background:#fff;border:1px solid #D3DAE3;border-radius:16px;padding:1.6rem}
.plan.mid{border:2px solid var(--night)}
.plan h3{font-size:1.5rem;font-stretch:85%}
.plan .amt{font-family:var(--display);font-stretch:80%;font-weight:900;font-size:2.6rem;line-height:1;margin:.6rem 0 .8rem}
.plan .amt small{font:600 1rem var(--body);color:var(--steel)}
.plan p{font-size:.97rem;color:var(--steel);margin:0}
.plan .all{color:var(--answered);font-weight:700;margin-bottom:.5rem}
@media (max-width:860px){.svc{grid-template-columns:1fr;gap:.4rem}.plans{grid-template-columns:1fr}.nav{gap:1rem}}

/* ultra page */
.ultra-hero .wrap{grid-template-columns:1.25fr .75fr}
.spots{border:2px solid var(--porch);border-radius:22px;padding:2rem 1.8rem}
.spots-num{font-family:var(--display);font-stretch:70%;font-weight:900;font-size:clamp(4rem,9vw,6.5rem);line-height:.9;color:var(--porch);margin:0 0 .8rem}
.spots-label{color:#D6DEE9;font-size:1.05rem;margin:0}
.flow,.steps{list-style:none;margin:2.2rem 0 0;padding:0;counter-reset:n}
.flow li,.steps li{counter-increment:n;display:grid;grid-template-columns:3rem 6rem 1fr;gap:.3rem 1.2rem;align-items:baseline;padding:1.3rem 0;border-top:1px solid #D3DAE3}
.flow li::before,.steps li::before{content:counter(n);font-family:var(--display);font-stretch:70%;font-weight:900;font-size:2.2rem;line-height:1;color:var(--night);grid-row:span 2}
.flow h3,.steps h3{font-size:1.35rem;font-stretch:85%;grid-column:3}
.flow p,.steps p{grid-column:3;margin:0}
.who-does{grid-row:span 2;font:700 .8rem/1 var(--body);padding:.4rem .55rem;border-radius:6px;text-align:center;align-self:start;margin-top:.25rem}
.who-does.llsai{background:#DDE6F3;color:var(--night)}
.who-does.avery{background:var(--answered);color:#fff}
.who-does.both{background:var(--porch);color:var(--night)}
.steps li{grid-template-columns:3rem 1fr}
.steps h3,.steps p{grid-column:2}
@media (max-width:860px){
  .ultra-hero .wrap{grid-template-columns:1fr}
  .flow li{grid-template-columns:2.4rem 1fr}
  .flow li::before{grid-row:span 3}
  .who-does{grid-row:auto;grid-column:2;justify-self:start}
  .flow h3,.flow p{grid-column:2}
}