@font-face{font-family:Manrope;src:url('assets/Manrope-800.ttf');font-weight:800}@font-face{font-family:DM;src:url('assets/DM-Sans-400.ttf')}*{box-sizing:border-box}body{margin:0;background:#f5f4f8;color:#171d36;font:17px/1.6 DM,Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}aside{position:fixed;inset:0 auto 0 0;width:285px;padding:38px 30px;background:#14182d;color:#dedbea;overflow:auto;z-index:5;border-right:1px solid #39354d}.wordmark{font:800 32px Manrope;letter-spacing:-2px;color:white}.wordmark span{color:#b79bf4}.resource-button{display:flex;justify-content:space-between;margin:30px 0;background:#b79bf4;color:#171d36;padding:13px 16px;border-radius:5px;font-weight:bold}nav h2{font:800 18px Manrope;color:#b79bf4;border-bottom:1px solid #38374b;padding-bottom:12px;margin:28px 0 10px}nav a{display:block;font-size:14px;padding:6px 0}nav a:before{content:'▸';color:#b79bf4;margin-right:12px}nav a.active,nav a:hover{color:white}footer{font-size:12px;color:#aaa7bc;margin-top:46px}main{margin-left:285px}.hero{position:relative;min-height:960px;background:radial-gradient(ellipse at 75% 25%,#333450,#171d36 65%);color:white;overflow:hidden;isolation:isolate}.backdrop{position:absolute;inset:0;width:100%;height:100%;z-index:-1}.portrait{position:absolute;right:-9%;top:9%;width:65%;height:95%;z-index:-1;opacity:.8;mask-image:linear-gradient(90deg,transparent,#000 25%),linear-gradient(#000 70%,transparent);mask-composite:intersect}.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 0;filter:grayscale(1);mix-blend-mode:screen}.hero-content{position:relative;max-width:650px;padding:50px 50px 60px}.eyebrow{font-size:10px;letter-spacing:2px;color:#c4b4dc;margin:0 0 25px}.intro-video{width:min(100%,510px);height:230px;border:1px solid #b79bf451;border-radius:7px;background:linear-gradient(125deg,#453651b3,#161a2fbd);display:flex;align-items:center;justify-content:center;gap:18px;position:relative;box-shadow:0 20px 70px #0003}.intro-video .play{display:grid;place-items:center;width:58px;height:58px;border:1px solid #b79bf4;border-radius:50%;font-size:29px;color:#c9b1ff}.intro-video strong,.intro-video span{display:block}.intro-video strong{font:800 17px Manrope}.intro-video div>span{font-size:12px;color:#bcb5ca;margin-top:4px}.intro-video small{position:absolute;bottom:14px;right:18px;font-size:9px;letter-spacing:2px;color:#c4b4dc}.small-label{font-size:10px;letter-spacing:2px;font-weight:bold;color:#6836ce}.hero .small-label{color:#c4b4dc;margin-top:32px}h1,h2{font-family:Manrope;letter-spacing:-1.8px;line-height:1.12}h1{font-size:clamp(40px,4.7vw,66px);margin:15px 0 24px}h1 em{font-style:normal;color:#c2a4ff}.bio{font-size:18px;line-height:1.7;color:#ede8f6;text-shadow:0 2px 15px #171d36}.story-button{display:inline-flex;gap:30px;align-items:center;background:#b79bf4;color:#171d36;font-weight:bold;padding:16px 23px;border-radius:4px;margin-top:12px}.hero-foot{font-size:12px;color:#bcb5ca;margin-top:25px}.life{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;padding:80px 55px;max-width:1200px;margin:auto}.life h2{font-size:38px}.life p{max-width:400px;color:#59576a}.orbit{height:300px;position:relative;display:grid;place-items:center}.orbit img{width:116px;height:116px;border-radius:50%;object-fit:cover;border:6px solid #fff;box-shadow:0 10px 35px #6836ce25;z-index:2}.ellipse{position:absolute;width:95%;height:170px;border:1px solid #bba4d8;border-radius:50%;animation:orbit 35s linear infinite}.e2{transform:rotate(-35deg);animation-direction:reverse}.orbit>span{position:absolute;background:#f5f4f8;padding:5px 10px;font-size:13px;color:#6836ce}.freedom{top:20px;left:25%}.choice{right:0;top:45%}.creativity{bottom:20px;right:15%}.business{left:0;top:52%}@keyframes orbit{to{transform:rotate(360deg)}}.resources{padding:55px;max-width:1000px;border-top:1px solid #ddd6e6;margin:0 auto 30px}.resources h2{font-size:34px}.resources p{max-width:600px}.resources button{border:1px solid #6836ce;border-radius:4px;padding:12px 18px;color:#6836ce;background:white}dialog{border:1px solid #ddd3ed;border-radius:15px;padding:42px;max-width:480px;width:calc(100% - 36px);color:#171d36;box-shadow:0 30px 100px #0004}dialog::backdrop{background:#10162ab8}dialog h2{font-size:32px}.close{position:absolute;right:12px;top:5px;border:0;background:none;font-size:30px;color:#171d36}.popup-note{font-size:13px;color:#777}.announcement{background:#6836ce;color:white;padding:12px 30px;text-align:center}.menu{display:none}a:focus-visible,button:focus-visible{outline:3px solid #d3b6ff;outline-offset:5px}@media(max-width:1050px){aside{width:240px;padding:30px 23px}main{margin-left:240px}.hero-content{padding:40px 30px;max-width:590px}.portrait{right:-30%;width:90%;opacity:.4}.life{padding:50px 30px;gap:20px}.life h2{font-size:30px}}@media(max-width:760px){aside{transform:translateX(-100%);transition:transform .2s;width:280px}.nav-open aside{transform:translateX(0)}main{margin-left:0}.menu{display:block;position:fixed;top:12px;right:12px;z-index:10;background:#b79bf4;border:0;border-radius:5px;padding:8px 13px;color:#171d36}.hero{min-height:900px}.hero-content{padding:65px 24px 40px}.portrait{right:-40%;width:110%;top:30%;opacity:.25}.intro-video{height:200px}.bio{font-size:16px}.life{grid-template-columns:1fr;padding:35px 24px}.orbit{max-width:380px;width:100%;margin:auto}.resources{padding:35px 24px}h1{font-size:47px}}@media(prefers-reduced-motion:reduce){.ellipse{animation:none}*{scroll-behavior:auto!important;transition:none!important}}

/* Amanda selected the restaurant portrait for the orbit, 2026-11-03. */
.orbit img{object-position:50% 35%;}
/* Owner-selected finished navy portrait, replacing the earlier portrait. */
.hero .portrait{right:0;top:auto;bottom:0;height:90%}
.portrait img{filter:none;mix-blend-mode:normal;object-fit:contain;object-position:right bottom}
@media(max-width:760px){.hero .portrait{height:65%;width:55%}}
.hero .portrait{opacity:.3;pointer-events:none}


@media (min-width: 1051px) {
  .hero .portrait {
    right: auto;
    left: clamp(45%, 600px, 60%);
    width: min(55%, 580px);
  }

  .hero .portrait img {
    object-position: center bottom;
  }
}

/* Reserve a clear band for both ends of the illustrated route. */
.hero { padding-bottom: 116px; }
.journey-art {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: min(620px, 92%);
  height: auto;
  max-height: 108px;
  pointer-events: none;
}
@media (max-width: 760px) {
  .hero { padding-bottom: 88px; }
  .journey-art { max-height: 78px; }
}

/* Editorial city-to-coast composition, integrated into the hero layers. */
.hero {
  padding-bottom: 0;
  background:
    radial-gradient(ellipse at 72% 32%, #51445e66, transparent 50%),
    radial-gradient(ellipse at 95% 90%, #33385980, transparent 50%),
    linear-gradient(115deg, #141a30 15%, #242841 65%, #181e35);
}
.backdrop { opacity: .35; }
.journey-art {
  inset: 0 0 0 auto;
  left: auto;
  bottom: auto;
  transform: none;
  width: 82%;
  height: 100%;
  max-height: none;
  z-index: -2;
  opacity: .85;
}
.hero .portrait {
  opacity: .68;
  mask-image: linear-gradient(to bottom, #000 75%, transparent 100%);
  mask-composite: add;
}
.hero-content {
  background: linear-gradient(90deg, #171d3655, transparent);
}
.intro-video {
  background: linear-gradient(135deg, #71608030, #191e3390);
  border-color: #c5a8ee45;
  box-shadow: 0 24px 65px #080c2026, inset 0 1px #ffffff0b;
  backdrop-filter: blur(8px);
}
@media (max-width: 1050px) {
  .journey-art { width: 100%; opacity: .6; }
}
@media (max-width: 760px) {
  .hero { padding-bottom: 0; }
  .journey-art { width: 100%; height: 100%; opacity: .45; }
  .hero .portrait { opacity: .3; }
}

/* Amanda's work and life form the editorial backdrop around her portrait. */
.identity-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  color: #c7b1e8;
}
.editorial-word {
  position: absolute;
  top: 22px;
  left: 48%;
  font: 800 clamp(60px, 8vw, 135px)/1 Manrope, sans-serif;
  letter-spacing: -.07em;
  color: #c6afe70b;
}
.strategy-sketch {
  position: absolute;
  top: 8%;
  right: 3%;
  width: 50%;
  opacity: .24;
}
.field-notes {
  position: absolute;
  top: 40%;
  left: 48%;
  width: 220px;
  padding: 24px 0 20px 22px;
  border-left: 1px solid #c7b1e830;
  transform: rotate(-4deg);
  opacity: .55;
}
.field-notes span {
  font-size: 8px;
  letter-spacing: 2.5px;
}
.field-notes p {
  font-size: 13px;
  line-height: 1.8;
}
.field-notes i {
  font: italic 21px Georgia, serif;
  color: #d5bdf4;
}
.life-note {
  position: absolute;
  right: 5%;
  bottom: 13%;
  font: italic 24px/1.4 Georgia, serif;
  color: #cfbce754;
}
.journey-art {
  width: 66%;
  right: -3%;
  opacity: .38;
}
.hero .portrait { opacity: .48; }
@media (max-width: 1250px) {
  .field-notes { left: 59%; top: 30%; opacity: .28; }
  .life-note { font-size: 19px; }
}
@media (max-width: 760px) {
  .editorial-word { left: 15%; top: 22px; font-size: 65px; }
  .strategy-sketch { top: 28%; right: -15%; width: 100%; opacity: .12; }
  .field-notes { display: none; }
  .life-note { bottom: 5%; right: 8%; font-size: 17px; }
  .journey-art { width: 100%; right: -20%; opacity: .22; }
  .hero .portrait { opacity: .3; }
}

/* Distribute the identity artwork across the complete hero canvas. */
.journey-art {
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .32;
}
.editorial-word {
  left: 3%;
  top: 2%;
  font-size: clamp(80px, 12vw, 190px);
  letter-spacing: .01em;
}
.strategy-sketch {
  top: 12%;
  left: 1%;
  right: auto;
  width: 96%;
  height: 76%;
  opacity: .15;
}
.field-notes {
  top: 72%;
  left: 43%;
  width: 230px;
  opacity: .34;
}
.life-note {
  right: 4%;
  bottom: 8%;
}
.hero-content {
  background: radial-gradient(ellipse at 30% 58%, #171d3680, transparent 75%);
}
@media (max-width: 1050px) {
  .field-notes { left: 66%; top: 50%; width: 175px; opacity: .2; }
}
@media (max-width: 760px) {
  .journey-art { inset: 0; width: 100%; height: 100%; opacity: .2; }
  .editorial-word { left: 4%; top: 3%; font-size: 63px; }
  .strategy-sketch { left: -15%; top: 16%; width: 130%; height: 70%; opacity: .1; }
  .life-note { right: 5%; bottom: 4%; }
}

/* 2026-11-04: How I help section, dark band with the two-shops picture (Amanda: it needed design, and to sit below the room-for-life section) */
.how{background:#151622;color:#fff;padding:90px 55px;margin:0;max-width:none}.how-inner{max-width:1100px;margin:auto;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}.how .small-label{color:#c4b4dc;margin:0 0 12px}.how h2{font-size:40px;line-height:1.1;margin:0 0 24px;color:#fff}.how h2 em{font-style:normal;color:#b79bf4}.how p{color:#d9d7e1;font-size:18px;line-height:1.6;margin:0 0 16px;max-width:520px}.how-btn{display:inline-flex;align-items:center;gap:12px;background:#b79bf4;color:#171d36;font:800 16px/1.2 Manrope,Arial,sans-serif;padding:16px 30px;border-radius:999px;text-decoration:none;margin-top:14px;box-shadow:0 10px 26px #b79bf44d;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}.how-btn:hover{background:#c8b0f7;transform:translateY(-2px)}.how-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}.how-art svg{width:100%;height:auto;display:block;filter:drop-shadow(0 18px 40px #6836ce55)}
@media(max-width:1250px){.how{padding:70px 40px}.how-inner{gap:36px;grid-template-columns:1fr 1fr}.how h2{font-size:34px}}@media(max-width:1000px){.how{padding:60px 30px}.how h2{font-size:32px}}@media(max-width:760px){.how{padding:48px 24px}.how-inner{grid-template-columns:1fr}.how h2{font-size:30px}.how-btn{width:100%;justify-content:space-between}}

/* 2026-11-04: soft blends between the dark and light sections, so the page flows instead of cutting at straight lines (Amanda) */
.blend{height:170px;margin:-1px 0;pointer-events:none}.blend-down{background:linear-gradient(to bottom,#171d36 0%,#1c2140 14%,#2e3158 32%,#585a80 50%,#9d9ab8 68%,#d3d0e2 84%,#f5f4f8 100%)}.blend-up{background:linear-gradient(to bottom,#f5f4f8 0%,#d3d0e2 16%,#9d9ab8 32%,#585a80 50%,#2e3158 68%,#1c2140 86%,#151622 100%)}@media(max-width:760px){.blend{height:110px}}
/* unify the hero's bottom colour with the blend below it */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;background:linear-gradient(to bottom,rgba(23,29,54,0),#171d36);pointer-events:none;z-index:5}