/* Narrow Gate Digital  narrowgatedigital.com */

:root{
  --navy:#1A2D4E;
  --navy-deep:#132039;
  --navy-soft:#2A4270;
  --gold:#C6A35C;
  --gold-bright:#D9B972;
  --cream:#F7F5F0;
  --cream-deep:#EFEBE2;
  --ink:#1B1F26;
  --body:#454C58;
  --muted:#6B7280;
  --line:#E2DED4;
  --white:#FFFFFF;
  --maxw:1120px;
  --header-h:106px;
  --radius:4px;
  --shadow:0 1px 2px rgba(26,45,78,.06), 0 8px 24px rgba(26,45,78,.06);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--white);
  color:var(--body);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-decoration-color:var(--gold);text-underline-offset:3px}

h1,h2,h3,h4{
  font-family:'Source Serif 4',Georgia,'Times New Roman',serif;
  color:var(--navy);
  line-height:1.18;
  letter-spacing:-.01em;
  margin:0 0 .5em;
  font-weight:600;
}
h1{font-size:clamp(2.05rem,4.4vw,3.15rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
h3{font-size:1.18rem;font-family:'Inter',sans-serif;font-weight:650;letter-spacing:-.005em}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.narrow{max-width:760px}
.section{padding:88px 0}
.section--tight{padding:64px 0}
.cream{background:var(--cream)}
.navy{background:var(--navy);color:rgba(255,255,255,.82)}
.navy h1,.navy h2,.navy h3{color:#fff}

.eyebrow{
  font-size:.75rem;font-weight:650;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin:0 0 14px;
}
.navy .eyebrow{color:var(--gold-bright)}
.lede{font-size:clamp(1.05rem,2vw,1.22rem);line-height:1.6;color:var(--body)}
.navy .lede{color:rgba(255,255,255,.86)}
.rule{width:52px;height:3px;background:var(--gold);border:0;margin:0 0 26px}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(150%) blur(8px);border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;height:var(--header-h)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand svg{width:70px;height:auto;flex:none}
.brand-name{
  font-family:'Source Serif 4',Georgia,serif;font-weight:600;font-size:1.28rem;
  color:var(--navy);line-height:1.1;letter-spacing:-.01em;white-space:nowrap;
}
.brand-name span{display:block;font-family:'Inter',sans-serif;font-size:.68rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:3px}

.nav{display:flex;align-items:center;gap:30px}
.nav a{
  font-size:.93rem;font-weight:520;color:var(--body);text-decoration:none;
  padding:6px 0;border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--navy)}
.nav a[aria-current="page"]{color:var(--navy);border-bottom-color:var(--gold)}

.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:var(--radius);
  padding:9px 11px;cursor:pointer;line-height:0}
.nav-toggle span{display:block;width:19px;height:2px;background:var(--navy);margin:3.5px 0;border-radius:2px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:'Inter',sans-serif;font-size:.96rem;font-weight:600;letter-spacing:.005em;
  padding:14px 26px;border-radius:var(--radius);text-decoration:none;border:1.5px solid transparent;
  transition:transform .12s ease, background .15s ease, border-color .15s ease;white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn--gold{background:var(--gold);color:#20304d;border-color:var(--gold)}
.btn--gold:hover{background:var(--gold-bright);border-color:var(--gold-bright)}
.btn--ghost-light{color:#fff;border-color:rgba(255,255,255,.42)}
.btn--ghost-light:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn--navy{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn--navy:hover{background:var(--navy-soft);border-color:var(--navy-soft)}
.btn--ghost{color:var(--navy);border-color:#C8CDD6}
.btn--ghost:hover{border-color:var(--navy)}
.btn--sm{padding:11px 42px;font-size:.88rem}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.btn svg{width:16px;height:16px;flex:none}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--navy);overflow:hidden}
/* scrolls normally with the page; the gate opens as the hero moves away */
.hero-sticky{
  position:relative;min-height:calc(100vh - var(--header-h));
  display:flex;flex-direction:column;justify-content:center;
  padding:56px 0 88px;box-sizing:border-box;
}
@supports (min-height:100svh){ .hero-sticky{min-height:calc(100svh - var(--header-h))} }
.hero-sticky::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 78% 10%, rgba(198,163,92,.16) 0%, rgba(198,163,92,0) 58%);
}

/* keep-scrolling cue, fades out as the gate opens */
.hero-cue{
  position:absolute;left:0;right:0;bottom:20px;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  opacity:calc(1 - var(--open,0) * 2.2);pointer-events:none;
}
.hero-cue span{
  font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.hero-cue i{
  display:block;width:1px;height:26px;
  background:linear-gradient(rgba(198,163,92,.9),rgba(198,163,92,0));
}
@media (max-height:720px){
  .hero-cue{display:none}
  .hero-sticky{padding-bottom:0}
}
.hero .wrap{position:relative;z-index:2}
/* hero copy hugs the left edge so the gate has room on the right */
.hero .wrap{max-width:none;width:100%;margin:0;padding-left:clamp(24px,5vw,72px);padding-right:24px}
.hero .wrap > *{max-width:600px}
.hero h1{color:#fff;max-width:21ch}
.hero .lede{max-width:50ch;margin-top:20px}
.hero-note{margin-top:26px;font-size:.9rem;color:rgba(255,255,255,.55)}

/* ---------- grids / cards ---------- */
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 28px;box-shadow:var(--shadow);
}
.card h3{margin-bottom:.5em;color:var(--navy)}
.card p{font-size:.97rem;color:var(--body)}
.card--plain{background:transparent;border:0;box-shadow:none;padding:0}
.card--bare{background:var(--cream);border-color:var(--cream-deep);box-shadow:none}

/* numbered steps */
.steps{counter-reset:step;display:grid;gap:0;margin-top:44px;border-top:1px solid var(--line)}
.step{
  counter-increment:step;display:grid;grid-template-columns:78px 1fr;gap:24px;
  padding:30px 0;border-bottom:1px solid var(--line);align-items:start;
}
.step::before{
  content:"0" counter(step);
  font-family:'Source Serif 4',Georgia,serif;font-size:1.9rem;font-weight:600;
  color:var(--gold);line-height:1;padding-top:2px;
}
.step h3{margin:0 0 6px}
.step p{margin:0;font-size:.98rem}

/* feature list with gold ticks */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.ticks li{position:relative;padding-left:32px;font-size:1rem}
.ticks li::before{
  content:"";position:absolute;left:0;top:.52em;width:14px;height:8px;
  border-left:2.5px solid var(--gold);border-bottom:2.5px solid var(--gold);
  transform:rotate(-45deg);
}
.ticks strong{color:var(--navy);font-weight:650}
.ticks--x li::before{
  border:0;background:none;width:13px;height:13px;top:.44em;
  background-image:linear-gradient(#B9BEC7,#B9BEC7),linear-gradient(#B9BEC7,#B9BEC7);
  background-size:13px 2px,2px 13px;background-position:center,center;
  background-repeat:no-repeat;transform:rotate(45deg);
}

/* fit / not fit */
.fit{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
.fit-col{border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;background:var(--white)}
.fit-col h3{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.fit-col--yes{border-top:3px solid var(--gold)}
.fit-col--no{border-top:3px solid #C8CDD6;background:var(--cream)}

/* two-column compare */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:40px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.compare > div{padding:34px 30px}
.compare > div:first-child{background:var(--navy);color:rgba(255,255,255,.82)}
.compare > div:first-child h3{color:#fff}
.compare > div:first-child .ticks li::before{border-color:var(--gold-bright)}
.compare > div:last-child{background:var(--white)}

/* timeline */
.timeline{margin-top:44px;display:grid;gap:0}
.tl{display:grid;grid-template-columns:190px 1fr;gap:28px;padding:28px 0;border-top:1px solid var(--line)}
.tl:last-child{border-bottom:1px solid var(--line)}
.tl-when{font-family:'Source Serif 4',Georgia,serif;font-size:1.14rem;color:var(--navy);font-weight:600}
.tl-when small{display:block;font-family:'Inter',sans-serif;font-size:.75rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-top:5px}
.tl p{margin:0;font-size:.98rem}

/* faq */
.faq{margin-top:40px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;
  font-family:'Inter',sans-serif;font-weight:620;font-size:1.03rem;color:var(--navy);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .faq-body{padding:0 40px 24px 0;font-size:.99rem}
.faq .faq-body p:last-child{margin-bottom:0}

/* verse */
.verse{
  border-left:3px solid var(--gold);padding:6px 0 6px 28px;margin:0 0 34px;
  font-family:'Source Serif 4',Georgia,serif;font-size:clamp(1.12rem,2.3vw,1.4rem);
  line-height:1.5;color:var(--navy);font-style:italic;
}
.verse cite{
  display:block;margin-top:14px;font-family:'Inter',sans-serif;font-style:normal;
  font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
}

/* contact blocks */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:40px}
.contact-card{
  display:block;text-decoration:none;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:34px 30px;box-shadow:var(--shadow);transition:border-color .15s ease,transform .12s ease;
}
.contact-card:hover{border-color:var(--gold);transform:translateY(-2px)}
.contact-card .eyebrow{margin-bottom:10px}
.contact-value{
  font-family:'Source Serif 4',Georgia,serif;font-size:clamp(1.25rem,2.6vw,1.7rem);
  color:var(--navy);font-weight:600;word-break:break-word;line-height:1.25;
}
.contact-sub{margin-top:10px;font-size:.93rem;color:var(--muted)}

/* sector columns */
.sectors{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
.sector{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:32px 30px;box-shadow:var(--shadow)}
.sector h3{margin-bottom:6px}
.sector .sector-note{font-size:.9rem;color:var(--muted);margin-bottom:20px}
.tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.tags li{
  font-size:.87rem;background:var(--cream);border:1px solid var(--cream-deep);
  color:var(--navy);padding:6px 12px;border-radius:999px;
}

/* cta band */
.cta-band{background:var(--navy-deep);position:relative;overflow:hidden;padding:80px 0}
.cta-band::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(90% 120% at 15% 100%, rgba(198,163,92,.15) 0%, rgba(198,163,92,0) 60%);
}
.cta-band .wrap{position:relative;z-index:2}
.cta-band h2{color:#fff;max-width:20ch}
.cta-band p{color:rgba(255,255,255,.78);max-width:58ch}

/* footer */
.site-footer{background:var(--navy);color:rgba(255,255,255,.6);padding:56px 0 40px;font-size:.9rem}
.footer-top{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;align-items:flex-start;
  padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.13)}
.footer-brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.footer-brand svg{width:60px;height:auto}
.footer-brand .brand-name{color:#fff}
.footer-tag{margin-top:14px;max-width:34ch;color:rgba(255,255,255,.55);font-size:.88rem}
.footer-nav{display:grid;grid-template-columns:repeat(2,auto);gap:10px 44px}
.footer-nav a{color:rgba(255,255,255,.72);text-decoration:none}
.footer-nav a:hover{color:var(--gold-bright)}
.footer-bottom{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;padding-top:26px;font-size:.83rem;color:rgba(255,255,255,.42)}
.footer-bottom a{color:rgba(255,255,255,.55);text-decoration:none}
.footer-bottom a:hover{color:var(--gold-bright)}

/* page header */
.page-head{background:var(--cream);border-bottom:1px solid var(--line);padding:76px 0 64px}
.page-head h1{max-width:18ch}
.page-head .lede{margin-top:18px;max-width:62ch}

/* utility */
.mt-0{margin-top:0}
.stack-lg > * + *{margin-top:56px}
.center{text-align:center}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;z-index:100;background:#fff;padding:10px 16px;border-radius:4px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .grid-3{grid-template-columns:1fr}
  .grid-2,.fit,.compare,.contact-grid,.sectors{grid-template-columns:1fr}
  .compare{border-radius:var(--radius)}
  .tl{grid-template-columns:1fr;gap:10px}
  .section{padding:64px 0}

  .page-head{padding:56px 0 48px}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .nav-toggle{display:block}
  .nav{
    display:none;position:absolute;top:var(--header-h);left:0;right:0;background:#fff;
    flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 22px;
    border-bottom:1px solid var(--line);box-shadow:0 14px 24px rgba(26,45,78,.08);
  }
  .nav.open{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid var(--line)}
  .nav a[aria-current="page"]{border-bottom-color:var(--line);color:var(--gold)}
  .nav .btn{margin-top:16px;border-bottom:0}
  .nav a.btn[aria-current="page"]{color:#20304d}
  .header-inner{position:relative}
  .btn{width:100%}
  .btn-row{flex-direction:column;gap:12px}
  .btn-row .btn{width:100%}
  .step{grid-template-columns:52px 1fr;gap:16px}
  .step::before{font-size:1.4rem}
  .footer-nav{grid-template-columns:1fr}
}

/* ---------- about page ---------- */
.bio{display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:start;margin-top:44px}
.bio-photo{
  border-radius:var(--radius);overflow:hidden;background:var(--cream-deep);
  border:1px solid var(--line);aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;
}
.bio-photo img{width:100%;height:100%;object-fit:cover}
.bio-photo .placeholder{
  text-align:center;padding:24px;font-size:.82rem;color:var(--muted);line-height:1.5;
}
.bio-photo .placeholder strong{display:block;color:var(--navy);font-size:.9rem;margin-bottom:6px}
.sig{
  margin-top:30px;padding-top:24px;border-top:1px solid var(--line);
  font-family:'Source Serif 4',Georgia,serif;font-size:1.05rem;color:var(--navy);
}
.sig small{display:block;font-family:'Inter',sans-serif;font-size:.82rem;color:var(--muted);margin-top:4px;font-weight:500}
@media (max-width:900px){ .bio{grid-template-columns:1fr;gap:28px} .bio-photo{max-width:280px;aspect-ratio:1/1} }

/* ---------- client hub ---------- */
.hub-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:40px}
.hub-card{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:var(--radius);padding:28px 26px;box-shadow:var(--shadow)}
.hub-card h3{margin-bottom:8px}
.hub-card p{font-size:.96rem;margin-bottom:.8em}
.hub-card p:last-child{margin-bottom:0}
@media (max-width:900px){ .hub-grid{grid-template-columns:1fr} }

/* nav CTA must beat the `.nav a` color rule */
.nav a.btn{padding:12px 42px}          /* must out-specify `.nav a{padding:6px 0}` */
.nav a.btn--navy{color:#fff;border-bottom:2px solid var(--navy)}
.nav a.btn--navy:hover{color:#fff;border-bottom-color:var(--navy-soft)}
.nav a.btn--navy[aria-current="page"]{color:#fff;border-bottom-color:var(--navy)}
.nav a.btn--gold{color:#20304d;border-bottom:2px solid var(--gold)}

/* keep every reading column left-aligned on the same grid line */
.wrap.narrow{max-width:var(--maxw)}
.wrap.narrow > *{max-width:760px}
.navy .lede,.hero .lede{color:rgba(255,255,255,.88)}
.hero-note{color:rgba(255,255,255,.62)}

.cta-band h2{max-width:26ch}

/* ============================================================
   The gate. Swings open as you scroll.
   --open (0 closed, 1 open) is set on <html> by the scroll
   handler in each page. Each door scales toward its OUTER edge,
   so it reads as swinging toward the viewer. The gold post
   never moves.
   ============================================================ */
.gate{display:block;height:auto;overflow:visible}
.gate-door{fill:var(--navy);transform-box:fill-box;will-change:transform}
.gate-door--l{transform-origin:0% 50%}
.gate-door--r{transform-origin:100% 50%}
.gate-post{fill:var(--gold)}

/* header + footer marks stay legible, so they only part partway */
.brand svg.gate .gate-door,
.footer-brand svg.gate .gate-door{transform:scaleX(calc(1 - var(--open,0) * 0.22))}
.footer-brand svg.gate .gate-door{fill:#fff}

/* the hero mark is the showcase, so it opens the whole way */
/* anchored near the top of the hero and stretched downward as you scroll,
   so the gate lengthens as it opens. Origin is the top edge so it grows
   down rather than outward from the middle. */
.hero .gate--hero{
  position:absolute;right:-60px;top:4%;
  width:660px;opacity:.12;pointer-events:none;z-index:1;
  transform-origin:50% 0%;
  transform:scaleY(calc(1 + var(--open,0) * 1.2));
}
.hero .gate--hero .gate-door{fill:#fff;transform:scaleX(calc(1 - var(--open,0) * 0.86))}
.hero .gate--hero .gate-post{fill:var(--gold);opacity:.85}

@media (max-width:900px){
  .hero .gate--hero{right:-170px;width:520px;opacity:.10}
}
@media (max-width:760px){
  .hero .gate--hero{right:-150px;width:400px}
  .brand svg.gate{width:52px}
  :root{--header-h:88px}
  .brand-name{font-size:1.12rem}
}

/* someone who asked for less motion gets a gate that simply stays shut */
@media (prefers-reduced-motion: reduce){
  .gate-door{transform:none !important}
}

/* ---------- legal pages ---------- */
.legal h2{font-size:1.12rem;font-family:'Inter',sans-serif;font-weight:650;margin:38px 0 10px}
.legal h2:first-of-type{margin-top:0}
.legal p{font-size:.97rem}
.legal .fill{
  background:#FBEFC9;border-bottom:2px solid var(--gold);color:var(--navy);
  font-weight:650;padding:1px 5px;border-radius:2px;
}

/* ---------- client testimonial ---------- */
.quote-block{border-left:3px solid var(--gold);padding:4px 0 4px 30px;margin-top:40px;max-width:720px}
.quote-block p{
  font-family:'Source Serif 4',Georgia,serif;
  font-size:clamp(1.06rem,2vw,1.26rem);line-height:1.56;color:var(--navy);margin-bottom:1em;
}
.quote-attrib{margin-top:24px;font-family:'Inter',sans-serif;font-size:.9rem;color:var(--body);line-height:1.5}
.quote-attrib strong{display:block;color:var(--navy);font-weight:650;font-size:.96rem}
.quote-attrib a{color:var(--body);text-decoration-color:var(--gold)}
.results-note{margin-top:28px;font-size:.83rem;color:var(--muted);max-width:66ch}
@media (max-width:760px){ .quote-block{padding-left:20px} }