/* ============================================================
   bastion consulting - the umbrella, zoomed in on the consulting register.
   Same DNA as bastion.cx (mark, Archivo/Fraunces, chamfer, palette logic)
   but BLUE-forward: consulting is the "business outcome" pole.
   ============================================================ */

:root{
  /* icon colors */
  --green:#42803F;   --green-ink:#37702F;
  --blue:#40BCF8;    --blue-ink:#1B84C6;
  --purple:#455AB7;  --purple-deep:#3A4CA0;

  /* clean neutral ground (faint cool bias) */
  --paper:#FFFFFF;
  --alt:#F5F6F8;
  --alt2:#ECEEF3;
  --ink:#1D1E28;
  --muted:#5C5E6B;
  --line:#E3E5EC;
  --line-soft:#EDEFF3;

  /* this site leans blue.
     --accent = bright blue for fills/rules; --accent-ink = darker blue for TEXT.
     #1478AD clears WCAG AA (4.5:1) for small text on white, unlike the brighter #1B84C6. */
  --accent:var(--blue);
  --accent-ink:#1478AD;

  /* type */
  --disp:"Archivo",system-ui,sans-serif;
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;

  /* scale */
  --fs-hero:clamp(30px,5vw,58px);
  --fs-h2:clamp(26px,3.8vw,42px);
  --fs-h3:clamp(19px,1.7vw,23px);
  --fs-body:clamp(16px,1.15vw,17.5px);

  --pad-x:clamp(20px,5vw,64px);
  --sec-y:clamp(64px,10vw,128px);
  --maxw:1160px;
  --chamfer:22px;
}

/* ---------- reset-ish ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:var(--fs-body);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,p,dl,dd,ol,ul{margin:0}
a{color:inherit;text-decoration:none}
em{font-style:italic}
img{max-width:100%}
ol,ul{list-style:none;padding:0}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad-x);width:100%}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:2.5px solid var(--accent-ink);outline-offset:3px;border-radius:2px}

/* the mark - real PNG asset, never redrawn */
.mark{
  display:inline-block;aspect-ratio:1/1;flex:none;
  background:url("images/favicon-bastion.png") center/contain no-repeat;
  width:34px;
}

/* wordmark */
.brand-wm{font-family:var(--disp);font-weight:800;letter-spacing:-.02em;font-stretch:108%}
.brand-desc{color:var(--accent-ink)}
.tld{color:var(--purple)}

/* architectural width from Archivo's variable width axis */
.section-title,.tagline,.contact-title,.approach-body b,
.scard h3,.mstep h3,.wcard h3,.founder-cred dd{font-stretch:108%}
.tagline,.section-title,.contact-title{font-stretch:118%}

/* colored dots */
.dot{width:9px;height:9px;display:inline-block;flex:none}
.dot-blue{background:var(--blue)} .dot-purple{background:var(--purple)} .dot-green{background:var(--green)}

/* eyebrows / titles shared */
.section-eyebrow{
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.22em;
  font-size:11.5px;font-weight:700;color:var(--accent-ink);margin:0;
}
.section-title{
  font-family:var(--disp);font-weight:800;letter-spacing:-.02em;line-height:1.03;
  font-size:var(--fs-h2);text-wrap:balance;margin:.34em 0 .5em;
}
.section-lede{color:var(--muted);max-width:52ch}
.section-lede em{font-family:var(--serif);font-style:italic;color:var(--ink)}

/* placeholder markers - visible, low-key, obviously not final copy */
.ph-note,.ph-inline{font-family:var(--sans);font-style:normal}
.ph-note{display:inline-block;margin-top:.5em;font-size:12.5px;font-weight:600;color:var(--purple);
  background:#EEF0FB;border:1px dashed #B9C0E6;padding:6px 10px;border-radius:3px}
.ph-inline{font-size:.85em;font-weight:600;color:var(--purple);opacity:.85}

/* ============ NAV ============
   Default = transparent, sitting over the dark hero (light text).
   .solid = scrolled past the hero → white bar, dark text. */
.nav{position:sticky;top:0;z-index:50;background:transparent;box-shadow:0 0 0 rgba(0,0,0,0);
  transition:background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease}
.nav.solid{background:rgba(255,255,255,.85);backdrop-filter:saturate(1.4) blur(12px);box-shadow:0 1px 0 var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px}
.brand{display:flex;align-items:center;gap:11px}
.brand .mark{width:30px}
.brand-wm{font-size:18px;color:#fff;transition:color .3s}
.brand-desc{color:#8fd4f7}
.nav-links{display:flex;align-items:center;gap:24px}
.nav-links a{font-size:13px;font-weight:600;color:rgba(255,255,255,.82);letter-spacing:.01em;transition:color .18s;position:relative}
.nav-links a:hover{color:#fff}
.nav-cta{
  color:#fff !important;background:var(--accent-ink);padding:9px 18px;font-weight:700;
  clip-path:polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
  transition:background .18s;
}
.nav-cta:hover{background:#136599}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{width:24px;height:2px;background:#fff;transition:.25s}
.menu{display:flex;flex-direction:column;border-bottom:1px solid var(--line);background:var(--paper)}
.menu[hidden]{display:none}
.menu a{padding:15px var(--pad-x);border-top:1px solid var(--line-soft);font-weight:600;color:var(--ink)}

.nav-links a.active{color:#fff}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;background:var(--accent)}
/* Contact CTA active indicator - a white underline inside the button, not below it */
.nav-links a.nav-cta.active::after{background:#fff;left:16px;right:16px;bottom:6px}

/* solid (scrolled) - revert to dark text on white */
.nav.solid .brand-wm{color:var(--ink)}
.nav.solid .brand-desc{color:var(--accent-ink)}
.nav.solid .nav-links a{color:var(--muted)}
.nav.solid .nav-links a:hover{color:var(--ink)}
.nav.solid .nav-links a.active{color:var(--ink)}
.nav.solid .nav-toggle span{background:var(--ink)}

/* ============ HERO (dark photo - current-site breakwater + dark overlay) ============ */
.hero{
  position:relative;overflow:hidden;color:#fff;
  margin-top:-68px;  /* pull up under the transparent sticky nav */
  padding-block:clamp(128px,18vw,220px) clamp(76px,11vw,140px);
  background:#0f1118 url("images/hero-banner.jpg") center 62% / cover no-repeat;
}
.hero-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(13,15,22,.66) 0%, rgba(13,15,22,.50) 42%, rgba(15,21,32,.86) 100%),
    linear-gradient(105deg, rgba(9,28,46,.58) 0%, rgba(27,132,198,.05) 55%, rgba(58,76,160,.34) 100%);
}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.10);z-index:2}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:clamp(30px,6vw,76px)}
.hero-copy{max-width:40rem;min-width:0}

/* the real bastion consulting logo (pic01) in a bright circular "spotlight" disc, to the
   right of the copy - echoes the original Landed banner's round, popping logo treatment */
.hero-disc{position:relative;isolation:isolate;justify-self:end;
  width:clamp(190px,23vw,296px);aspect-ratio:1}
.hero-disc::before{content:"";position:absolute;inset:-24%;border-radius:50%;z-index:0;
  background:radial-gradient(circle, rgba(150,196,255,.42) 0%, rgba(150,196,255,.14) 40%, rgba(150,196,255,0) 68%)}
.hero-disc img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;border-radius:50%;
  background:#fff;
  box-shadow:0 30px 74px -16px rgba(0,0,0,.62), 0 0 0 5px rgba(255,255,255,.16), 0 0 0 1px rgba(255,255,255,.4)}

.tagline{
  font-family:var(--disp);font-weight:800;letter-spacing:-.03em;line-height:1.04;
  font-size:var(--fs-hero);color:#fff;
}
/* rotating completion of "…kind of ___" */
.rotator{display:inline-block;position:relative;color:#5cc6fa}
.rotator-word{display:inline-block;font-family:var(--serif);font-weight:500;font-style:italic;
  letter-spacing:-.01em;will-change:opacity,transform;transition:opacity .3s ease, transform .3s ease}
.rotator-word.swap{opacity:0;transform:translateY(-.12em)}
.rotator-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hero-statement{margin-top:26px;font-size:clamp(17px,2.2vw,22px);color:rgba(255,255,255,.86);max-width:44ch;line-height:1.5}
.hero-statement u{font-family:var(--disp);font-weight:700;text-decoration:none;
  border-bottom:2.5px solid var(--blue);padding-bottom:1px;font-stretch:104%}
.hero-statement em{font-family:var(--serif);font-style:italic;color:rgba(255,255,255,.66)}

/* ============ APPROACH (light statement - the dark "moment" now lives in the hero) ============ */
.approach{padding-block:var(--sec-y);background:var(--paper)}
.approach-inner{max-width:920px}
.approach .section-eyebrow{color:var(--accent-ink)}
.approach-body{
  font-size:clamp(20px,2.6vw,29px);line-height:1.45;letter-spacing:-.01em;
  margin-top:26px;text-wrap:pretty;color:var(--ink);
}
.approach-body b{font-family:var(--disp);font-weight:700;color:var(--ink)}
.approach-body em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--accent-ink)}

/* ============ LAND ACKNOWLEDGEMENT (dark band between intersection & services) ============ */
.land-ack{background:var(--ink);color:#fff;padding-block:clamp(52px,8vw,92px);text-align:center}
.land-ack-inner{max-width:760px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.land-ack-body{font-size:clamp(17px,1.9vw,21px);line-height:1.6;color:#d7d9e2;text-wrap:pretty;max-width:60ch}
.land-ack-body b{font-family:var(--disp);font-weight:600;color:#fff}

/* ============ SERVICES ============ */
.services{padding-block:var(--sec-y);background:var(--alt)}
.services-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,64px);align-items:start}
.services-intro{position:sticky;top:96px}
.service-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.scard{
  position:relative;background:var(--paper);border:1px solid var(--line);
  padding:26px clamp(20px,2.4vw,28px) 28px;
  clip-path:polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
  transition:transform .3s ease, box-shadow .3s ease;
}
.scard::before{content:"";position:absolute;left:0;top:0;height:4px;width:52%;background:var(--accent)}
.scard:hover{transform:translateY(-4px);box-shadow:0 26px 50px -34px rgba(29,30,40,.4)}
.scard-no{font-family:var(--disp);font-weight:800;font-size:13px;color:var(--accent-ink);
  letter-spacing:.08em;font-variant-numeric:tabular-nums}
.scard h3{font-family:var(--disp);font-weight:700;font-size:var(--fs-h3);letter-spacing:-.015em;
  line-height:1.15;margin:8px 0 8px;text-wrap:balance}
.scard p{color:var(--muted);font-size:15px}

/* ============ METHOD ============ */
.method{padding-block:var(--sec-y);background:var(--paper)}
.method-head{max-width:64ch;margin-bottom:clamp(30px,4vw,52px)}

/* shared tile */
.mstep{position:relative;background:var(--paper);border:1px solid var(--line);
  padding:20px clamp(15px,1.7vw,20px) 22px;
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%)}
.mstep::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--accent)}
.c-blue::before{background:var(--blue)} .c-purple::before{background:var(--purple)}
.c-green::before{background:var(--green)} .c-blueink::before{background:var(--blue-ink)}
.mstep-no{font-family:var(--disp);font-weight:800;font-size:22px;color:var(--alt2);
  letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.mstep h3{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:-.015em;margin:8px 0 7px;text-wrap:balance}
.mstep-sub{display:block;font-family:var(--sans);font-weight:600;font-size:12px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--accent-ink);margin-top:3px}
.mstep p{color:var(--muted);font-size:14px;line-height:1.5}

/* hub → cycle flow */
.method-flow{display:flex;flex-direction:column;align-items:center;margin-top:clamp(26px,4vw,46px)}
.mhub{width:min(100%,252px);z-index:3}

/* radial cycle: tiles at 12/3/6/9, dashed ring + cycle glyph in the centre */
.method-cycle{position:relative;width:min(100%,820px);aspect-ratio:1;margin-top:30px}
.method-cycle::before{content:"";position:absolute;top:-30px;left:50%;width:2px;height:30px;
  background:var(--line);transform:translateX(-50%)}
.cycle-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.cycle-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:168px;height:168px;border-radius:50%;background:var(--alt);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--accent-ink)}
.cycle-core svg{width:66px;height:66px}
.cyc{position:absolute;width:min(46%,252px)}
.pos-12{top:0;left:50%;transform:translateX(-50%)}
.pos-3{top:50%;right:0;transform:translateY(-50%)}
.pos-6{bottom:0;left:50%;transform:translateX(-50%)}
.pos-9{top:50%;left:0;transform:translateY(-50%)}

/* ============ FOUNDER ============ */
.founder{padding-block:var(--sec-y);background:var(--alt)}
.founder-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(30px,5vw,64px);align-items:start}
.founder-story p{color:var(--muted);margin-top:16px;max-width:56ch;font-size:clamp(16px,1.4vw,18px)}
.founder-story em{font-family:var(--serif);font-style:italic;color:var(--ink)}
.founder-role{font-family:var(--sans);font-weight:600;color:var(--ink) !important;margin-top:6px !important}
/* name + LinkedIn icon (Mac's personal profile) on one row */
.founder-name{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.founder-name .section-title{margin:0}
.founder-linkedin{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:42px;height:42px;border-radius:50%;color:var(--accent-ink);
  background:var(--paper);border:1.5px solid var(--line);
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease}
.founder-linkedin svg{width:19px;height:19px}
.founder-linkedin:hover{background:#0A66C2;border-color:#0A66C2;color:#fff;transform:translateY(-2px);
  box-shadow:0 14px 26px -14px rgba(10,102,194,.9)}
.founder-cred{background:var(--paper);border:1px solid var(--line);padding:28px clamp(22px,2.6vw,32px);position:relative;
  clip-path:polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%)}
.cred-mark{width:40px;margin-bottom:20px}
.founder-cred dl{display:flex;flex-direction:column}
.founder-cred dl>div{padding:15px 0;border-top:1px solid var(--line)}
.founder-cred dl>div:first-of-type{border-top:0;padding-top:0}
.founder-cred dt{font-size:11px;text-transform:uppercase;letter-spacing:.16em;font-weight:700;color:var(--accent-ink);margin-bottom:5px}
.founder-cred dd{font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:-.01em;line-height:1.3}
.founder-cred .cred-year{display:block;margin-top:6px;font-size:12.5px;color:var(--muted);line-height:1.4;font-variant-numeric:tabular-nums}

/* ============ CONTACT ============ */
.contact{padding-block:var(--sec-y);background:var(--ink);color:#fff;text-align:center;position:relative;overflow:hidden}
.contact-inner{display:flex;flex-direction:column;align-items:center}
.contact-mark{width:56px;margin-bottom:22px}
.contact .section-eyebrow{color:#8fd4f7}
.contact-title{font-family:var(--disp);font-weight:800;letter-spacing:-.025em;line-height:1.05;
  font-size:var(--fs-h2);margin:.4em 0 1.1em;text-wrap:balance}
.contact-form{max-width:840px;width:100%;margin:0 auto;text-align:left;display:flex;flex-direction:column;gap:16px}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cf-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.cf-field label{font-size:11.5px;text-transform:uppercase;letter-spacing:.15em;font-weight:700;color:#8fd4f7}
.contact-form input,.contact-form textarea{
  font-family:var(--sans);font-size:15px;color:#fff;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.16);padding:12px 14px;width:100%;
  transition:border-color .18s, background .18s;
}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:rgba(255,255,255,.35)}
.contact-form input:focus,.contact-form textarea:focus{
  outline:none;border-color:var(--blue);background:rgba(255,255,255,.09);
}
.contact-form textarea{resize:vertical;min-height:118px;line-height:1.5}
.cf-submit{
  align-self:flex-start;font-family:var(--sans);font-weight:700;font-size:14px;letter-spacing:.01em;
  padding:14px 30px;color:#08243a;background:var(--blue);border:0;cursor:pointer;
  clip-path:polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%);
  transition:transform .2s, background .2s;
}
.cf-submit:hover{transform:translateY(-2px);background:#5ec8fa}
.cf-submit:disabled{opacity:.55;cursor:default;transform:none}
.cf-status{margin:0;font-size:13.5px;min-height:1.1em}
.cf-status.ok{color:#79d6a0}
.cf-status.err{color:#ff9d9d}
.cf-error{margin:0;font-size:12px;font-weight:600;color:#ff9d9d;line-height:1.4}
.contact-form .invalid{border-color:#ff9d9d}

/* ============ FOOTER ============ */
.footer{background:var(--ink);color:#c9cbd6;padding-block:clamp(32px,5vw,52px);border-top:1px solid rgba(255,255,255,.08)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:18px 40px;flex-wrap:wrap}
.footer-brand{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.footer-brand .mark{width:26px}
.footer-brand .brand-wm{color:#fff;font-size:17px}
.footer-brand .brand-desc{color:#8fd4f7}
.footer-meta{display:flex;align-items:center}
.copyright{font-size:12.5px;color:#7b7e92;font-variant-numeric:tabular-nums}

/* ============ REVEAL ANIMATION ============ */
/* only hide-then-reveal when JS is present; no-JS users see everything immediately */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease}
.js .reveal.in{opacity:1;transform:none}

/* ============ RESPONSIVE ============ */
@media (max-width:860px){
  .hero-inner{grid-template-columns:1fr;gap:32px;justify-items:center;text-align:center}
  .hero-disc{order:-1;justify-self:center;width:clamp(150px,40vw,220px)}
  .hero-copy{max-width:100%}
  .hero-statement{max-width:100%;margin-left:auto;margin-right:auto}
}
@media (max-width:760px){
  /* radial cycle collapses to a simple vertical stack */
  .method-cycle{position:static;aspect-ratio:auto;width:100%;display:flex;flex-direction:column;gap:14px;margin-top:22px}
  .method-cycle::before,.cycle-ring,.cycle-core{display:none}
  .cyc{position:static;transform:none;width:100%}
  .mhub{width:100%}
}
@media (max-width:920px){
  .services-grid,.founder-grid{grid-template-columns:1fr}
  .services-intro{position:static}
  .method-steps{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .nav-links{display:none}
  .nav-toggle{display:flex}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .service-cards{grid-template-columns:1fr}
  .method-steps{grid-template-columns:1fr}
  .footer-inner{gap:16px}
}
@media (max-width:560px){.cf-row{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.js .reveal{opacity:1;transform:none;transition:none}
  .scard,.wcard,.mstep{transition:none}
  .rotator-word{transition:none !important}
}