/* Hollycrest Advisors - one stylesheet for the marketing pages.
   Printed on warm stock rather than white: the ground is a cream paper and the
   only colour is a deep laurel, used for the crest, the rules and the one
   button. The motif is the torn line - a dashed rule that opens each section
   and separates the footer, the same perforation the application form uses, so
   the two halves of the brand read as one piece of stationery.

   Laurel at #1D3F03 clears 11:1 on the cream, so it is safe as small text; the
   cream is never used as text on the laurel at small sizes. */
:root{
  --stock:#FAF7F0; --card:#FFFDF8; --laurel:#1D3F03; --laurel-deep:#173102;
  --ink:#20240F; --set:#464A36; --faint:#6E7361;
  --torn:rgba(32,36,15,.22); --rule:#E6E1D4; --tint:#F2EEE2; --on-laurel:#FBFDF7;
  --display:"Raleway","Segoe UI",system-ui,-apple-system,sans-serif;
  --text:"Catamaran","Segoe UI",system-ui,-apple-system,sans-serif;
  --span:1080px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --stock:#14160F; --card:#1B1E14; --laurel:#A8CE86; --laurel-deep:#C2E0A5;
    --ink:#EDF0E5; --set:#C3C8B6; --faint:#8B9280;
    --torn:rgba(237,240,229,.22); --rule:#2A2E20; --tint:#1F2317; --on-laurel:#14160F;
  }
}
:root[data-theme="dark"]{
  --stock:#14160F; --card:#1B1E14; --laurel:#A8CE86; --laurel-deep:#C2E0A5;
  --ink:#EDF0E5; --set:#C3C8B6; --faint:#8B9280;
  --torn:rgba(237,240,229,.22); --rule:#2A2E20; --tint:#1F2317; --on-laurel:#14160F;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--stock);color:var(--set);
  font-family:var(--text);font-size:17px;line-height:1.72;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);color:var(--ink);margin:0;font-weight:700;
  text-wrap:balance;letter-spacing:-.012em}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--laurel);outline-offset:3px;border-radius:2px}

.wrap{width:100%;max-width:var(--span);margin:0 auto;padding-inline:30px}

/* ---- the torn line ------------------------------------------------------- */
.torn{display:block;height:0;border-top:2px dashed var(--torn);margin:0 0 26px}

/* ---- crown (header) ------------------------------------------------------ */
.crown{border-top:4px solid var(--laurel);background:var(--stock)}
.crown .line{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:20px 0 18px;border-bottom:1px solid var(--rule)}
.badge{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);
  font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.01em}
.badge svg{flex:none}
.trails{display:flex;align-items:center;gap:24px;font-size:15px;flex-wrap:wrap}
.trails a{text-decoration:none;color:var(--set)}
.trails a:hover{color:var(--laurel)}
.trails .act{background:var(--laurel);color:var(--on-laurel);padding:10px 20px;
  border-radius:2px;font-weight:600}
.trails .act:hover{background:var(--laurel-deep);color:var(--on-laurel)}

/* ---- opener -------------------------------------------------------------- */
.opener{padding:66px 0 58px}
.opener h1{font-size:clamp(32px,4.9vw,52px);line-height:1.1;max-width:18ch}
.pitch{font-size:clamp(16.5px,1.45vw,19px);line-height:1.66;max-width:58ch;margin:20px 0 0}
.off{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:30px}
.go{display:inline-block;background:var(--laurel);color:var(--on-laurel);text-decoration:none;
  font-family:var(--display);font-weight:700;font-size:16px;padding:14px 28px;border-radius:2px}
.go:hover{background:var(--laurel-deep);color:var(--on-laurel)}
.murmur{color:var(--faint);font-size:14.5px}

/* ---- slabs --------------------------------------------------------------- */
.slab{padding:54px 0}
.tag{display:block;font-family:var(--display);font-size:12px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--laurel);margin:0 0 12px}
.slab h2{font-size:clamp(24px,2.9vw,32px);line-height:1.18;max-width:24ch}
.set{margin:13px 0 0;max-width:62ch}

.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:32px}
.tiles div{background:var(--card);border:1px solid var(--rule);border-top:3px solid var(--laurel);
  padding:24px 24px 26px}
.tiles h3{font-size:18px;margin-bottom:7px}
.tiles p{font-size:16px;line-height:1.62}

.ranks{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:0}
.ranks li{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:24px 0;
  border-bottom:2px dashed var(--torn)}
.ranks li:first-child{border-top:2px dashed var(--torn)}
.ranks .n{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.14em;
  color:var(--laurel);padding-top:4px}
.ranks h3{font-size:18.5px;margin-bottom:6px}
.ranks p{font-size:16px;margin:0}

.notice{background:var(--tint);border:1px dashed var(--torn);padding:26px 28px;margin-top:30px}
.notice ul{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.notice li{font-size:16px;line-height:1.6;padding-left:26px;position:relative}
.notice li::before{content:"";position:absolute;left:0;top:.62em;width:13px;height:13px;
  border:2px solid var(--laurel);border-radius:0 9px 0 9px}

.qa{margin-top:30px}
.qa details{border-bottom:2px dashed var(--torn)}
.qa details:first-child{border-top:2px dashed var(--torn)}
.qa summary{cursor:pointer;list-style:none;padding:18px 34px 18px 0;position:relative;
  font-family:var(--display);font-weight:700;font-size:17.5px;color:var(--ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:6px;top:16px;color:var(--laurel);
  font-size:22px;font-family:var(--text);font-weight:400;line-height:1.4}
.qa details[open] summary::after{content:"\2013"}
.qa .say{padding:0 0 20px;max-width:70ch;font-size:16px}

.more{margin-top:24px;font-size:15.5px}
.more a{color:var(--laurel);font-weight:700;text-decoration:underline;text-underline-offset:4px}
.more a:hover{color:var(--ink)}

.reachout{display:grid;grid-template-columns:1fr 290px;gap:40px;margin-top:30px;align-items:start}
.reachout dl{margin:0;font-size:16px;background:var(--card);border:1px solid var(--rule);
  padding:22px 24px}
.reachout dt{font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--laurel);margin-top:16px}
.reachout dt:first-child{margin-top:0}
.reachout dd{margin:4px 0 0;color:var(--ink)}

/* ---- prose pages --------------------------------------------------------- */
.top{padding:52px 0 6px}
.top h1{font-size:clamp(28px,3.7vw,41px);line-height:1.14;max-width:21ch}
.top .pitch{margin-top:15px}
.copy{padding:28px 0 68px;max-width:72ch}
.copy h2{font-size:22px;margin:38px 0 10px}
.copy h3{font-size:17.5px;margin:25px 0 6px}
.copy ul,.copy ol{margin:0 0 1.05em;padding-left:22px}
.copy li{margin-bottom:8px}
.copy .when{font-size:14.5px;color:var(--faint);margin-bottom:28px}
.copy .mind{background:var(--tint);border:1px dashed var(--torn);padding:18px 22px;
  margin:24px 0;font-size:16px}

/* ---- footer -------------------------------------------------------------- */
footer{padding:34px 0 44px;font-size:14.5px;color:var(--faint)}
footer a{color:var(--set);text-decoration:none}
footer a:hover{color:var(--laurel);text-decoration:underline}
.sign{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.sign nav{display:flex;gap:22px;flex-wrap:wrap}
.tiny{margin:20px 0 0;max-width:92ch;line-height:1.6}

@media (max-width:880px){
  .tiles{grid-template-columns:1fr}
  .reachout{grid-template-columns:1fr;gap:26px}
  .opener{padding:48px 0 44px}
  .slab{padding:42px 0}
}
@media (max-width:560px){
  .wrap{padding-inline:20px}
  .crown .line{flex-wrap:wrap;row-gap:14px}
  .trails{width:100%;gap:16px;font-size:14.5px}
  .badge{font-size:17px}
  .ranks li{grid-template-columns:1fr;gap:6px}
}