/* Torchlight Services: navy and gold with a New Orleans gas-lantern hero. Self-hosted fonts; no frameworks. */
@font-face{font-family:"Playfair Display";src:url(/assets/fonts/playfair-display-latin.v40.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:Inter;src:url(/assets/fonts/inter-latin.v20.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{--navy:#0b1d3a;--navy-2:#102748;--line:rgba(255,255,255,.1);--ink:#eef2f8;--muted:#a9b6c9;--gold:#ffb800;--copper:#c4824a;--max:72rem;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;--sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--navy);color:var(--ink);font:1.03rem/1.7 var(--sans)}
a{color:inherit}
img{display:block;max-width:100%}
a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:1rem;top:1rem;z-index:10;background:#fff;color:var(--navy);padding:.5rem .8rem}
.wrap{max-width:var(--max);margin:0 auto;padding:0 1.25rem}

/* Header over the hero */
.site-header{position:absolute;inset:0 0 auto;z-index:4}
.site-header .wrap{display:flex;justify-content:space-between;align-items:center;gap:.6rem 1.5rem;flex-wrap:wrap;padding-block:1.1rem}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;font:700 1.3rem var(--serif)}
.brand img{width:34px;height:34px}
.brand em{font-style:normal;color:var(--gold)}
.site-nav{display:flex;align-items:center;gap:.6rem 1.5rem;flex-wrap:wrap}
.nav{display:flex;gap:.4rem 1.5rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav a{text-decoration:none;font-weight:500;color:var(--muted)}
.nav a:hover{color:#fff}
.cta{background:var(--gold);color:var(--navy);padding:.6rem 1.2rem;border-radius:999px;font-weight:700;text-decoration:none}
.cta:hover{background:#ffc933}

/* Hero: headline beside a glowing gas lantern */
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:8rem 0 5rem}
.hero::before{content:"";position:absolute;left:62%;top:-16rem;width:64rem;height:46rem;transform:translateX(-50%);z-index:-1;
  background:radial-gradient(closest-side,rgba(255,184,0,.22),rgba(255,184,0,.06) 55%,transparent 75%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,#0e2447 0%,var(--navy) 75%)}
.hero .wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:2rem;align-items:center;width:100%}
.kick{color:var(--muted);letter-spacing:.2em;text-transform:uppercase;font-size:.78rem;font-weight:600;margin:0 0 1.2rem}
h1{font:700 clamp(2.6rem,6vw,4.4rem)/1.08 var(--serif);margin:0 0 1.3rem}
h1 em{font-style:normal;color:var(--gold)}
.lead{color:var(--muted);font-size:1.15rem;max-width:38rem;margin:0 0 2.2rem}
.lamp{position:relative;display:grid;place-items:center}
.lamp .glow{position:absolute;width:30rem;height:30rem;border-radius:50%;
  background:radial-gradient(circle,rgba(255,184,77,.42) 0%,rgba(255,150,50,.1) 40%,transparent 68%)}
.lamp .lantern{position:relative;width:min(14rem,55vw);height:auto;filter:drop-shadow(0 0 30px rgba(255,184,77,.45))}

/* Buttons */
.btns{display:flex;gap:.8rem;flex-wrap:wrap}
.btn{display:inline-block;padding:.9rem 1.6rem;border-radius:999px;font-weight:700;text-decoration:none;background:var(--gold);color:var(--navy);transition:background .15s}
.btn:hover{background:#ffc933}
.btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.3)}
.btn.ghost:hover{border-color:var(--gold)}

/* Sections */
section{padding:clamp(4rem,9vw,6rem) 0;border-top:1px solid var(--line);scroll-margin-top:1rem}
.label{color:var(--gold);letter-spacing:.2em;text-transform:uppercase;font-size:.78rem;font-weight:700;margin:0 0 .6rem}
h2{font:700 clamp(2rem,4.2vw,2.9rem)/1.15 var(--serif);margin:0 0 1rem}
h3{margin:0 0 .5rem;font-size:1.25rem;line-height:1.3}
.intro{color:var(--muted);max-width:40rem;margin:0 0 2.5rem}

.about .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:3rem;align-items:center}
.about p{color:var(--muted)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:0}
.stats div{background:var(--navy-2);border:1px solid var(--line);border-radius:14px;padding:1.4rem}
.stats dt{font:700 2rem var(--serif);color:var(--gold)}
.stats dd{margin:0;color:var(--muted);font-size:.9rem}

.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:1.25rem}
.pillar{background:var(--navy-2);border:1px solid var(--line);border-radius:16px;padding:1.9rem;transition:border-color .2s,transform .2s}
.pillar:hover{border-color:rgba(255,184,0,.5);transform:translateY(-3px)}
.ico{display:grid;place-items:center;width:3.2rem;height:3.2rem;border-radius:12px;background:rgba(255,184,0,.12);color:var(--gold);margin-bottom:1rem}
.pillar p{color:var(--muted);margin:0 0 1rem}
.pillar ul{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.pillar li{padding:.55rem 0;border-bottom:1px solid var(--line);font-size:.93rem}
.pillar li::before{content:"› ";color:var(--gold)}

.vals{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:2rem}
.val{border-left:2px solid var(--gold);padding-left:1.25rem}
.val h3{font:700 1.35rem var(--serif)}
.val p{color:var(--muted);margin:0}

.contact{text-align:center;background:radial-gradient(ellipse at 50% 120%,rgba(255,184,0,.16),transparent 60%)}
.contact .intro{margin:0 auto 2rem}
.clist{list-style:none;padding:0;margin:0 0 2rem;display:flex;justify-content:center;gap:1rem 2.5rem;flex-wrap:wrap}
.clist span{display:block;color:var(--gold);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700}

.site-footer{border-top:1px solid var(--line);padding:1.75rem 0;color:var(--muted);font-size:.88rem}
.site-footer .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

@keyframes flicker{0%,100%{opacity:1;transform:scale(1)}20%{opacity:.86;transform:scale(.98)}45%{opacity:.96;transform:scale(1.01)}70%{opacity:.82;transform:scale(.985)}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}.lamp .glow{animation:flicker 4.5s ease-in-out infinite}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:52rem){
  .hero .wrap,.about .wrap{grid-template-columns:1fr}
  .lamp{order:-1}
  .lamp .lantern{width:8.5rem}
  .lamp .glow{width:18rem;height:18rem}
  .hero{padding-top:9rem}
}

/* phone menu */
.menu-btn{display:none;place-items:center;align-content:center;gap:5px;width:44px;height:44px;margin-right:-8px;padding:0;border:0;border-radius:10px;background:transparent;color:inherit;cursor:pointer}
.menu-btn span{display:block;width:22px;height:2px;border-radius:2px;background:currentColor;transition:transform .2s,opacity .2s}
.site-header.open .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}.site-header.open .menu-btn span:nth-child(2){opacity:0}
.site-header.open .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu-btn:focus-visible{outline:2px solid currentColor;outline-offset:2px}
@media (max-width:52rem){
  .menu-btn{display:grid}
  .site-nav{display:none;width:100%}
  .site-header.open{background:#0b1d3a}
  .site-header.open .site-nav{display:flex;flex-direction:column;align-items:stretch;gap:.25rem;padding:.25rem 0 1rem}
  .site-header.open .nav{display:flex;flex-direction:column;gap:0}
  .site-header.open .nav a{display:block;padding:.8rem .25rem;font-size:1.05rem;border-bottom:1px solid rgba(255,255,255,.12)}
  .site-header.open .cta{margin-top:.8rem;text-align:center;padding:.8rem 1rem}
}

/* phones: the header is one row now */
@media (max-width:52rem){.hero{padding-top:6rem}.site-header .wrap{padding-block:.8rem}}

/* text wrapping and large monitors */
h1,h2,h3{text-wrap:balance}p,li,dd{text-wrap:pretty}
@media (min-width:100rem){:root{--max:78rem}}
@media (min-width:118rem){html{font-size:17px}}
@media (min-width:150rem){html{font-size:19px}:root{--max:80rem}}
/* tablets: no orphaned cards, hero stays side by side */
@media (min-width:40rem) and (max-width:64rem){.pillars{grid-template-columns:1fr}.pillar ul{columns:2;column-gap:2rem}.vals{grid-template-columns:repeat(3,1fr);gap:1.25rem}}
@media (min-width:40rem) and (max-width:52rem){.hero .wrap{grid-template-columns:1.35fr .65fr}.lamp{order:0}.hero{padding-top:7rem}}
