/* ============================================================
   bastion.cx — umbrella site
   Palette IS the icon: green foundation, blue outcome, purple intersection.
   Clean TopSelf-derived light ground. Purple = umbrella accent.
   Signature geometry: chamfered "bastion corner".
   ============================================================ */

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

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

  /* type — Archivo (variable width+weight); display = wide/expanded cut */
  --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(27px,4vw,46px);
  --fs-h2:clamp(26px,3.8vw,42px);
  --fs-h3:clamp(19px,1.7vw,23px);
  --fs-body:clamp(16px,1.15vw,17.5px);
  --fs-small:13.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%}

.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(--purple);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;
}

/* shared brand wordmark */
.brand-wm,.hero-wm{font-family:var(--disp);font-weight:800;letter-spacing:-.02em}
.tld{color:var(--purple)}

/* architectural width, pulled from Archivo's variable width axis */
.brand-wm,.section-title,.work-nav li,.practice-name,.practice h3,
.founder-cred dd,.wcard h3,.thesis-body b,.products li b{font-stretch:108%}
.hero-wm,.tagline,.section-title,.contact-title{font-stretch:122%}

/* chamfered corner — the signature geometry */
.chamfer{clip-path:polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%)}

/* 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,.eyebrow{
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.22em;
  font-size:11.5px;font-weight:700;color:var(--purple);margin:0;
}
.section-title{
  font-family:var(--disp);font-weight:800;letter-spacing:-.02em;line-height:1.02;
  font-size:var(--fs-h2);text-wrap:balance;margin:.34em 0 .5em;
}
.section-lede{color:var(--muted);max-width:46ch}
.section-lede em{font-family:var(--serif);font-style:italic;color:var(--ink)}

/* ============ NAV ============ */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);
  backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid 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:19px}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.01em;transition:color .18s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{
  color:#fff !important;background:var(--purple);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:var(--purple-deep)}
.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:var(--ink);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}

/* ============ HERO ============ */
.hero{padding-block:clamp(56px,9vw,110px) var(--sec-y);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)}
.hero-inner{display:grid;grid-template-columns:1fr auto;gap:clamp(28px,6vw,88px);align-items:center}
.hero-main{min-width:0}
.hero-brand{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.mark-hero{width:clamp(108px,13vw,168px)}
.hero-wm{font-size:clamp(33px,4.4vw,52px);line-height:1;color:var(--ink)}
.eyebrow{margin-bottom:22px}
.tagline{
  font-family:var(--disp);font-weight:800;letter-spacing:-.03em;line-height:1.05;
  font-size:var(--fs-hero);max-width:none;font-stretch:108%;color:var(--ink);
}
.tagline em{font-family:var(--serif);font-weight:500;font-style:italic;letter-spacing:-.01em;color:var(--purple)}
.tagline-punch{color:var(--ink)}
.hero-sub{font-family:var(--serif);font-style:italic;font-size:clamp(17px,2.2vw,22px);
  color:var(--muted);margin-top:24px;max-width:40ch}
.hero-index{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:38px}
.hi-item{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:14px;color:var(--muted);
  text-transform:lowercase;transition:color .18s}
.hi-item:hover{color:var(--ink)}

/* ============ THESIS ============ */
.thesis{padding-block:var(--sec-y);background:var(--alt)}
.thesis-inner{max-width:920px}
.thesis-body{
  font-size:clamp(20px,2.6vw,29px);line-height:1.45;letter-spacing:-.01em;
  margin-top:26px;text-wrap:pretty;color:var(--ink);
}
.thesis-body b{font-family:var(--disp);font-weight:700}
.thesis-body em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--purple)}

/* ============ THE WORK ============ */
.work{padding-block:var(--sec-y)}
.work-grid{display:grid;grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);gap:clamp(30px,5vw,72px);align-items:start}
.work-intro{position:sticky;top:96px}
.work-nav{list-style:none;margin-top:26px;padding:0;display:flex;flex-direction:column;gap:2px}
.work-nav li{display:flex;align-items:center;gap:11px;padding:11px 0;border-top:1px solid var(--line-soft);
  font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:-.01em}
.work-nav li span{font-family:var(--sans);font-weight:500;color:var(--muted);letter-spacing:0}

.work-cards{display:flex;flex-direction:column;gap:18px}
.practice{
  position:relative;background:var(--paper);border:1px solid var(--line);
  padding:30px clamp(22px,3vw,38px) 32px;
  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;
}
.practice:hover{transform:translateY(-4px);box-shadow:0 26px 50px -34px rgba(29,30,40,.4)}
.practice-rule{position:absolute;left:0;top:0;height:5px;width:64%;background:var(--c)}
.p-blue{--c:var(--blue)} .p-purple{--c:var(--purple)} .p-green{--c:var(--green)}
.practice-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px;margin-bottom:14px}
.practice-name{font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:-.02em}
.practice-desc{color:var(--cink)}
.p-blue{--cink:var(--blue-ink)} .p-purple .practice-desc{color:var(--purple)} .p-green{--cink:var(--green-ink)}
.practice-tag{font-size:11px;text-transform:uppercase;letter-spacing:.16em;font-weight:700;color:var(--muted)}
.practice h3{font-family:var(--disp);font-weight:700;font-size:var(--fs-h3);letter-spacing:-.015em;
  line-height:1.15;margin-bottom:11px;text-wrap:balance}
.practice p{color:var(--muted);max-width:60ch}
.practice-link{display:inline-block;margin-top:18px;font-weight:700;font-size:13px;text-transform:uppercase;
  letter-spacing:.09em;color:var(--cink,var(--purple));border-bottom:2px solid currentColor;padding-bottom:2px}
.p-purple .practice-link{color:var(--purple)}
.practice-link::after{content:" →";letter-spacing:0}

.pillars{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.pillars li{font-size:12.5px;font-weight:600;color:var(--ink);background:var(--alt);
  border:1px solid var(--line);padding:5px 11px;
  clip-path:polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%)}
.products{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);border:1px solid var(--line)}
.products li{background:var(--paper);padding:13px 15px;display:flex;flex-direction:column;gap:2px}
.products li b{font-family:var(--disp);font-weight:700;font-size:14px}
.products li span{font-size:12.5px;color:var(--muted);line-height:1.4}
.products li a{color:var(--green-ink);font-weight:600}

/* ============ 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}
.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-soft)}
.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(--purple);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}

/* ============ WRITING ============ */
.writing{padding-block:var(--sec-y)}
.writing-grid{display:block}
.writing-intro{max-width:64ch;margin-bottom:clamp(28px,4vw,46px)}
.writing-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.wcard{display:flex;flex-direction:column;border:1px solid var(--line);border-top:3px solid var(--wc,var(--line));
  padding:26px clamp(20px,2.6vw,32px);background:var(--paper);
  clip-path:polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
  transition:transform .3s ease}
.wcard:hover{transform:translateY(-3px)}
.writing-items .wcard:nth-child(1){--wc:var(--purple)}
.writing-items .wcard:nth-child(2){--wc:var(--blue-ink)}
.writing-items .wcard:nth-child(3){--wc:var(--green-ink)}
.wcard-kind{font-size:11px;text-transform:uppercase;letter-spacing:.16em;font-weight:700;color:var(--wc,var(--muted))}
.wcard h3{font-family:var(--disp);font-weight:700;font-size:var(--fs-h3);letter-spacing:-.015em;margin:8px 0 8px;color:var(--wc,var(--ink))}
.wcard h3 em{font-family:var(--serif);font-style:italic;font-weight:600;color:var(--wc,var(--purple))}
.wcard p{color:var(--muted);max-width:58ch}
.wcard .practice-link{margin-top:auto;padding-top:16px;color:var(--wc,var(--purple))}

/* ============ 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:#9ea6e8}
.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-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.btn{font-weight:700;font-size:14px;letter-spacing:.01em;padding:15px 26px;transition:transform .2s, background .2s;
  clip-path:polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%)}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--blue);color:#08243a}
.btn-primary:hover{background:#5ec8fa}
.btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px #fff}

/* contact form (dark section) */
.contact-form{max-width:840px;width:100%;margin:12px auto 0;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:#9ea6e8}
.contact-form input,.contact-form select,.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 select: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}
.contact-form select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:38px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%239ea6e8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;
}
.contact-form select option{color:#14151c;background:#fff}
.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}
.contact-alt{margin-top:24px;font-size:13.5px;color:#9a9db0}
.contact-alt a{color:#fff;text-decoration:underline;text-underline-offset:3px}
@media (max-width:560px){.cf-row{grid-template-columns:1fr}}

/* ============ 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:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px 48px;align-items:start}
.footer-brand{display:flex;align-items:center;gap:10px}
.footer-brand .mark{width:26px}
.footer-brand .brand-wm{color:#fff;font-size:17px}
.land{font-size:12.5px;line-height:1.6;color:#9a9db0}
.copyright{justify-self:end;text-align:right;font-size:12.5px;color:#7b7e92;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ============ REVEAL ANIMATION ============ */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ============ RESPONSIVE ============ */
@media (max-width:920px){
  .work-grid,.founder-grid,.writing-grid{grid-template-columns:1fr}
  .work-intro,.writing-intro{position:static}
}
@media (max-width:820px){
  .hero-inner{grid-template-columns:1fr;gap:26px}
  .hero-brand{order:-1;justify-self:center}
  .writing-items{grid-template-columns: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)}
  .products{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr;gap:18px;align-items:flex-start}
  .copyright{white-space:normal;justify-self:start;text-align:left}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .practice,.wcard,.btn{transition:none}
}

/* ==================================================================
   v5 layer — Ogden Point washed out behind the hero (non-destructive)
   The breakwater as faint atmosphere behind the type, not its own band.
   ================================================================== */
.hero{
  position:relative;overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.47) 0%, rgba(255,255,255,.55) 55%, rgba(255,255,255,.9) 100%),
    url("images/breakwater.jpg") center 58% / cover no-repeat;
}
.hero-sub{color:#3a3c47}
.hi-item{color:#3f414d}

/* v5: dark thesis only (no other section changes) */
.thesis{background:var(--ink)}
.thesis .section-eyebrow{color:#9ea6e8}
.thesis-body{color:#e9e7e2}
.thesis-body em{color:#a6aef0}

/* v5 section grounds: work grey, founder white, thinking grey (tiles stay white) */
.work{background:var(--alt)}
.founder{background:var(--paper)}
.writing{background:var(--alt)}

/* v5: fill the credentials card so it pops on the white founder section */
.founder-cred{background:var(--alt)}
.founder-cred dl>div{border-top-color:var(--line)}

/* v9: hero without the lockup — tagline over the open breakwater */
.hero-inner{grid-template-columns:minmax(0,42rem) 1fr}

/* clickable product tiles — hover borrows each destination's brand */
.products li.product-link{padding:0}
.products li.product-link a{display:flex;flex-direction:column;gap:2px;padding:13px 15px;height:100%;
  color:var(--ink);font-weight:inherit;position:relative;transition:background .22s ease, color .22s ease}
.products li.product-link a b{color:var(--ink);transition:color .22s ease}
.products li.product-link a span{color:var(--muted);transition:color .22s ease}
.products li.product-link a::after{content:"↗";position:absolute;top:11px;right:13px;font-size:12px;
  font-weight:700;opacity:.3;transition:opacity .22s ease}
.pl-saasr a:hover{background:#FF6E40;box-shadow:inset 0 0 0 2px #C7461A}
.pl-topself a:hover{background:#40BCF8;box-shadow:inset 0 0 0 2px #1B84C6}
.products li.product-link a:hover,
.products li.product-link a:hover b,
.products li.product-link a:hover span{color:var(--ink)}
.products li.product-link a:hover::after{opacity:.95}

/* two links per practice card (site + Contact) */
.practice-links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 22px;align-items:center;margin-top:18px}
.practice-links .practice-link{margin-top:0}

/* nav active-section indicator (scrollspy) */
.nav-links a{position:relative}
.nav-links a.active{color:var(--ink)}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;background:var(--purple)}

/* Contact CTA active indicator — white underline inside the button */
.nav-links a.nav-cta.active::after{background:#fff;bottom:6px;left:16px;right:16px}

/* contact form — inline field validation errors */
.cf-error{margin:0;font-size:12px;font-weight:600;color:#ff9d9d;line-height:1.4}
.contact-form .invalid{border-color:#ff9d9d}
.contact-form .invalid:focus{border-color:#ff9d9d}