/* ---- original Archē Design stylesheet (verbatim from the current export) ---- */
.sc-placeholder { background: color-mix(in srgb, currentcolor 8%, transparent); border: 1px solid color-mix(in srgb, currentcolor, transparent); border-radius: 2px; box-sizing: border-box; overflow: hidden; }
@keyframes sc-shine { 
  0% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
html.sc-dc-streaming .sc-placeholder, html.sc-dc-streaming .sc-interp.sc-missing { position: relative; background: color-mix(in srgb, currentcolor 5%, transparent); border-color: transparent; }
html.sc-dc-streaming .sc-placeholder::before, html.sc-dc-streaming .sc-interp.sc-missing::before { content: ""; position: absolute; inset: 0px; pointer-events: none; background: linear-gradient(90deg, rgba(217, 119, 87, 0) 25%, rgba(247, 225, 211, 0.95) 37%, rgba(217, 119, 87, 0) 63%) 0% 0% / 400% 100%; animation: 1.4s ease 0s infinite normal none running sc-shine; }
html.sc-dc-streaming .sc-placeholder:nth-child(n+9 of .sc-placeholder)::before, html.sc-dc-streaming .sc-interp.sc-missing:nth-child(n+9 of .sc-interp.sc-missing)::before { animation: auto ease 0s 1 normal none running none; background: color-mix(in srgb, currentcolor 8%, transparent); }
.sc-placeholder-error { padding: 4px 8px; font: 11px / 1.4 ui-monospace, monospace; color: color-mix(in srgb, currentcolor 70%, transparent); word-break: break-word; }
.sc-interp.sc-missing { display: inline-block; width: 2em; height: 1em; overflow: hidden; vertical-align: text-bottom; background: rgba(255, 255, 255, 0.3); border: 1px solid rgba(0, 0, 0, 0.5); border-radius: 2px; box-sizing: border-box; color: transparent; user-select: none; }
.sc-interp.sc-unresolved { font-family: ui-monospace, monospace; font-size: 0.85em; color: color-mix(in srgb, currentcolor, transparent); background: color-mix(in srgb, currentcolor 10%, transparent); border-radius: 3px; padding: 0px 3px; }
.sc-host.sc-has-error { position: relative; }
.sc-logic-error { position: absolute; top: 8px; left: 8px; z-index: 2147483647; max-width: 60ch; padding: 6px 10px; background: rgb(176, 0, 32); color: rgb(255, 255, 255); font: 12px / 1.4 ui-monospace, monospace; border-radius: 4px; white-space: pre-wrap; pointer-events: none; }
@media print {
  @page { margin: 0.5cm; }
  figure, table { break-inside: avoid; }
  #dc-root, #dc-root > .sc-host { height: auto; }
  *, ::before, ::after { print-color-adjust: exact; backdrop-filter: none !important; animation-delay: -99s !important; animation-duration: 0.001s !important; animation-iteration-count: 1 !important; animation-fill-mode: both !important; animation-play-state: running !important; transition-duration: 0s !important; }
}
x-dc { display: none !important; }
.scp0:hover { color: rgb(255, 255, 255) !important; }
.scp1:hover { background: rgb(184, 151, 62) !important; color: rgb(10, 26, 48) !important; }
.scp2:hover { background: rgba(184, 151, 62, 0.12) !important; }
.scp3:hover { transform: translateY(-6px) !important; border-color: rgba(184, 151, 62, 0.55) !important; }
.scp4:hover { background: rgba(14, 40, 65, 0.92) !important; border-color: rgb(14, 40, 65) !important; color: rgb(250, 249, 246) !important; }
.scp5:hover { animation-play-state: paused !important; }
.scp6:hover { gap: 16px !important; }
.scp7:hover { border-color: rgba(184, 151, 62, 0.5) !important; transform: translateY(-4px) !important; }
.scp8:hover { background: rgb(184, 151, 62) !important; color: rgb(10, 26, 48) !important; border-color: rgb(184, 151, 62) !important; }
.scp9:hover { background: rgb(184, 151, 62) !important; }
.scpa:hover { transform: translateY(-3px) !important; box-shadow: rgba(184, 151, 62, 0.32) 0px 14px 36px !important; }
.scpb:hover { border-color: rgba(184, 151, 62, 0.5) !important; transform: translateY(-5px) !important; }
.scpc:hover { background: rgba(184, 151, 62, 0.06) !important; padding-left: 14px !important; }
.scpd:hover { border-color: rgba(184, 151, 62, 0.6) !important; transform: translateY(-4px) !important; }
.scpe:hover { transform: scale(1.03) !important; }
.scpf:hover { background: rgba(184, 151, 62, 0.14) !important; }
.scpg:hover { background: rgba(184, 151, 62, 0.05) !important; padding-left: 16px !important; }
.scph:focus { border-color: rgb(184, 151, 62) !important; }
.scpi:hover { transform: translateY(-2px) !important; box-shadow: rgba(184, 151, 62, 0.3) 0px 12px 30px !important; }
.scpj:hover { border-color: rgb(184, 151, 62) !important; color: rgb(154, 125, 46) !important; }
.scpk:hover { border-color: rgba(184, 151, 62, 0.7) !important; transform: translateY(-3px) !important; }
.scpl:hover { background: rgba(184, 151, 62, 0.06) !important; }
.scpm:hover { border-color: rgba(184, 151, 62, 0.7) !important; transform: translateY(-4px) !important; }
.scpn:hover { border-color: rgba(184, 151, 62, 0.7) !important; }
.scpo:hover { color: rgb(230, 207, 135) !important; }
* { box-sizing: border-box; margin: 0px; padding: 0px; }
html { scroll-behavior: smooth; }
body { background: rgb(250, 249, 246); color: rgb(29, 43, 63); font-family: Mulish, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: rgb(154, 125, 46); text-decoration: none; transition: color 0.25s; }
a:hover { color: rgb(184, 151, 62); }
::selection { background: rgb(184, 151, 62); color: rgb(10, 26, 48); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: rgb(239, 238, 232); }
::-webkit-scrollbar-thumb { background: rgb(203, 201, 193); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: rgb(179, 177, 167); }
input, textarea, button, select { font-family: inherit; }
@keyframes pageIn { 
  0% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: none; }
}
@keyframes menuIn { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes kenburns { 
  0% { transform: scale(1.06); }
  100% { transform: scale(1.2) translate(-2%, -1.5%); }
}
@keyframes auroraA { 
  0%, 100% { transform: translate(0px, 0px) scale(1); }
  50% { transform: translate(8%, 6%) scale(1.16); }
}
@keyframes auroraB { 
  0%, 100% { transform: translate(0px, 0px) scale(1); }
  50% { transform: translate(-7%, -5%) scale(1.12); }
}
@keyframes teamScroll { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(-50%); }
}
/* ================= restored behaviour + site chrome ================= */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:#b8973e;color:#0a1a30;
  padding:12px 20px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid #b8973e;outline-offset:3px}
.page{position:relative;min-height:100vh;
  /* DB 2026-08-27: linen white ground. This gradient - not body's colour -
     is what the page actually sits on, and the gold radial over it was the
     main source of the yellow cast. Both neutralised; gold stays on rules,
     eyebrows, numerals and the logo. */
  background:radial-gradient(1200px 700px at 78% -8%, rgba(28,53,87,.05) 0%, rgba(28,53,87,0) 55%),
             linear-gradient(180deg,#faf9f6 0%,#f3f2ed 45%,#faf9f6 100%)}
.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aurora i{position:absolute;border-radius:50%;filter:blur(30px);display:block}
.aurora i:nth-child(1){width:62vw;height:62vw;left:-12vw;top:-24vh;
  background:radial-gradient(circle,rgba(28,53,87,.10),rgba(28,53,87,0) 70%);animation:auroraA 26s ease-in-out infinite}
.aurora i:nth-child(2){width:56vw;height:56vw;right:-14vw;top:34vh;
  background:radial-gradient(circle,rgba(28,53,87,.05),rgba(28,53,87,0) 70%);animation:auroraB 32s ease-in-out infinite}
#bg-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
main{position:relative;z-index:10}
.site-header a{text-decoration:none}

.menu-toggle{display:none;background:transparent;border:1px solid rgba(230,207,135,.5);color:#e6cf87;
  width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer}
.menu-toggle span{width:18px;height:2px;background:#e6cf87;display:block}
.mobile-menu{position:fixed;inset:0;z-index:60;background:rgba(250,249,246,.98);backdrop-filter:blur(6px);
  animation:menuIn .3s ease;display:none;flex-direction:column;padding:20px clamp(20px,6vw,40px)}
.mobile-menu.open{display:flex}
.mobile-menu .row{display:flex;justify-content:space-between;align-items:center}
/* the file is 696x263; never let a width attribute stretch it */
.mobile-menu .row img{height:44px;width:auto;max-width:60%}
.mobile-menu .close{background:transparent;border:none;color:#9a7d2e;font-size:34px;cursor:pointer;line-height:1}
.mobile-menu nav{margin-top:34px;display:flex;flex-direction:column;gap:2px}
.mobile-menu nav a{border-bottom:1px solid rgba(18,35,59,.08);color:#1d2b3f;padding:17px 4px;
  font-family:'Cormorant Garamond',serif;font-size:25px;text-decoration:none}
.mobile-menu nav .cta{margin-top:24px;background:#b8973e;color:#0a1a30;padding:17px;font-family:'Mulish',sans-serif;
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-align:center;border-bottom:none}
@media (max-width:939px){
  .site-header nav{display:none!important}
  .menu-toggle{display:flex}
  .site-header img{height:44px!important}
}

/* Reveal on hover/focus ONLY where a real pointer exists. These were global,
   and that is why the "+" would open a column on touch but not close it: the
   column carries tabindex=0 for keyboard use, so tapping it focused it,
   :focus-within matched, and the !important reveal outlived the removal of
   .is-open. iOS compounds it by keeping a sticky :hover after a tap. Neither
   reproduces under Chromium touch emulation - the class was being removed
   correctly the whole time, which a classList assertion happily confirmed
   while the panel sat there open. Assert on computed opacity, always. */
/* Click drives state now, on every device (see criteria() in site.js). Hover
   must NOT reveal: on a pointer device that fights the click, because moving
   the mouse away collapses what you just opened - which is the "just showing
   up" behaviour DB asked to replace. Hover only lifts the affordance. */
@media (hover:hover) and (pointer:fine){
  .crit-col:hover::after{background:rgba(230,207,135,.14);border-color:rgba(230,207,135,.8)}
}
/* the reveal itself - identical on every device */
.crit-col{cursor:pointer;-webkit-tap-highlight-color:transparent}
.crit-col .crit-art{opacity:.35!important;transform:none!important;
  transition:opacity .6s ease,transform 1.1s ease}
.crit-col .crit-list{opacity:0!important;transform:translateY(14px)!important;
  transition:opacity .55s ease,transform .55s ease}
/* the "+" affordance - on every device now, since every device clicks */
.crit-col::after{
  content:"+";position:absolute;top:16px;right:16px;width:36px;height:36px;
  border:1px solid rgba(230,207,135,.45);color:#e6cf87;
  display:flex;align-items:center;justify-content:center;
  font-family:'Mulish',sans-serif;font-size:21px;line-height:1;font-weight:300;
  transition:transform .35s ease,background .25s,border-color .25s;
  pointer-events:none;z-index:3}
.crit-col.is-open::after{transform:rotate(45deg);background:rgba(230,207,135,.12)}
.crit-col:focus-visible{outline:2px solid #e6cf87;outline-offset:-4px}
.crit-col.is-open .crit-art{opacity:0!important;transform:scale(.96)!important}
.crit-col.is-open .crit-list{opacity:1!important;transform:none!important}
/* Touch: tap is the hover equivalent. Rest state matches desktop's rest
   state (line-art at .35, list hidden); .is-open is what hover does. */
@media (hover:none){
  /* Note: .crit-list is position:relative and keeps its space at opacity 0, so
     revealing causes NO layout jump - same as desktop. I tried compressing the
     closed panels by replacing margin-top:auto with a fixed 18px; measured, it
     made every column 18px TALLER, because the auto margin was already
     resolving to zero. Columns are content-sized already. Left alone. */
}

.rot-slide{opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .55s ease,transform .55s ease}
.rot-slide.is-active{opacity:1;transform:none;pointer-events:auto}

.form-error{margin-top:18px;padding:16px 18px;border-left:3px solid #a4343a;background:#fdf4f4;
  font-size:14.5px;color:#7d2a2f;font-family:'Mulish',sans-serif;line-height:1.6}
.form-error a{color:#7d2a2f}
form.sending{opacity:.6;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* hidden attribute must beat the inline display coming from the design export */
.portal-panel[hidden]{display:none!important}

/* keep the criteria line-art inside its panel on narrow screens */
.crit-col{overflow:hidden}

/* decorative layers must never create a horizontal scrollbar */
html{overflow-x:hidden}
body{overflow-x:hidden}

/* investor portal sign-in feedback */
.portal-error{margin-top:16px;padding:12px 14px;border-left:3px solid #a4343a;background:#fdf4f4;
  font-family:'Mulish',sans-serif;font-size:13.5px;font-weight:600;color:#7d2a2f;letter-spacing:.01em}

/* thesis imagery follows the active slide */
.rot-media{opacity:0;transition:opacity .55s ease}
.rot-media.is-active{opacity:1}

/* ============ interaction polish requested 2026-08-19 ============ */

/* Hero CTAs: the design sets a transition but never a hover state, so they
   sat inert. Match the gold fill used by the other primary CTAs. */
main section:first-of-type a[href="/about/"],
main section:first-of-type a[href="/team/"],
main section:first-of-type a[href="/focus/"]{
  transition:background .3s ease,border-color .3s ease,color .3s ease,transform .3s ease!important;
}
main section:first-of-type a[href="/about/"]:hover,
main section:first-of-type a[href="/team/"]:hover,
main section:first-of-type a[href="/focus/"]:hover{
  background:#b8973e!important;border-color:#b8973e!important;color:#0a1a30!important;
  transform:translateY(-2px);
}

/* Footer "Explore" links — the design had no transition, so hover snapped. */
.site-footer a,.site-footer button{transition:color .25s ease,opacity .25s ease}

/* Where we partner — lift the three blocks in on scroll, then hover-raise */
.pillar-in{transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
.pillar-in:hover{box-shadow:0 20px 44px rgba(18,35,59,.14)}

/* Team marquee: pause + identify on hover */
.team-strip{will-change:transform}
.team-card{position:relative}
.team-cap{
  position:absolute;left:0;right:0;bottom:0;padding:14px 12px 12px;
  background:linear-gradient(180deg,rgba(8,18,36,0) 0%,rgba(8,18,36,.55) 38%,rgba(8,18,36,.92) 100%);
  opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease;
  pointer-events:none;text-align:left}
.team-card.is-hover .team-cap,.team-card:hover .team-cap,.team-card:focus-visible .team-cap{opacity:1;transform:none}
.team-cap .tc-name{display:block;font-family:'Cormorant Garamond',serif;font-size:16px;line-height:1.15;color:#fff}
.team-cap .tc-role{display:block;margin-top:3px;font-family:'Mulish',sans-serif;font-size:10.5px;
  letter-spacing:.06em;line-height:1.35;color:rgba(230,207,135,.92)}

/* Archē Network accordion */
.acc-panel{max-height:0;overflow:hidden;opacity:0;
  transition:max-height .45s cubic-bezier(.2,.7,.2,1),opacity .35s ease}
.accordion-btn{cursor:pointer}
.accordion-btn .acc-sign,.accordion-btn::after{transition:transform .35s ease}

/* Advisor cards — biography expands on click, peeks on hover */
/* Archē Network — the design opens a navy detail panel under the grid.
   Selected thumbnail brightens; the panel fades and slides in. */
.adv-card{position:relative;cursor:pointer}
.adv-card > div:first-child{transition:filter .3s ease,opacity .3s ease,border-color .3s ease,transform .3s ease}
.adv-card.is-peek > div:first-child,
.adv-card.is-open > div:first-child{filter:saturate(1)!important;opacity:1!important;
  border-color:rgba(184,151,62,.55)!important}
.adv-card.is-open > div:first-child{transform:translateY(-3px)}
.adv-card::after{content:'';position:absolute;left:50%;bottom:-2px;width:0;height:1px;background:#b8973e;
  transform:translateX(-50%);transition:width .3s ease}
.adv-card.is-open::after,.adv-card:hover::after{width:38%}
.adv-panel{opacity:0;transform:translateY(10px);scroll-margin-top:100px;
  transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.adv-panel.is-open{opacity:1;transform:none}
.adv-panel[hidden]{display:none!important}
.adv-panel .adv-li:hover span{border-color:#e6cf87}
@media (max-width:780px){
  .adv-panel-grid{grid-template-columns:1fr!important}
  .adv-panel-grid > div:first-child{max-width:230px;margin:0 auto}
}

/* About — Dallas skyline: slow, continuous zoom-out */
@keyframes dallasOut{from{background-size:118%}to{background-size:100%}}
.dallas-zoom{animation:dallasOut 34s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){.dallas-zoom{animation:none;background-size:104%}}

/* ============ round 2 revisions (2026-08-19) ============ */

/* 1. One CTA dynamic across the whole site.
   The design shipped five different hover rules (scp1/scp2/scp4/scpa/scpf/scpi)
   so the buttons never felt like a set. Everything now behaves like the hero
   "Our Story" button: gold fill, navy text, a 2px lift. */
.cta-out,.cta-solid{
  transition:background .3s ease,border-color .3s ease,color .3s ease,
             transform .3s ease,box-shadow .3s ease!important;
  will-change:transform}
.cta-out:hover,.cta-out:focus-visible{
  background:#b8973e!important;border-color:#b8973e!important;color:#0a1a30!important;
  transform:translateY(-2px)!important;box-shadow:0 12px 30px rgba(184,151,62,.30)!important}
.cta-solid:hover,.cta-solid:focus-visible{
  background:#c9a648!important;border-color:#c9a648!important;color:#0a1a30!important;
  transform:translateY(-2px)!important;box-shadow:0 12px 30px rgba(184,151,62,.30)!important}
.cta-out:active,.cta-solid:active{transform:translateY(0)!important;box-shadow:none!important}

/* 2. Dallas band - the skyline stretches the full width of the section.
   The source photo is portrait (1350x1800) with a lot of empty sky and water.
   dallas-band.jpg is a panorama crop of rows 25%-52% (1350x486, aspect 2.78),
   which is close enough to the band's own aspect that `cover` fills it edge to
   edge with almost no loss. DB asked for it to "stretch across the section"
   (2026-08-19); before that it was a contained image sitting on the left. */
.dallas-inner{padding:clamp(34px,3.8vw,50px) clamp(20px,5vw,54px)!important}
.dallas-zoom{
  background-size:cover!important;
  background-position:center 42%!important;
  background-repeat:no-repeat!important;
  filter:contrast(1.18) saturate(1.08)!important;
  animation:none!important}
/* the copy now sits over buildings, so the scrim carries more of the load on
   the right while staying clear of the skyline on the left */
.dallas-scrim{
  background:linear-gradient(260deg,
    rgba(255,255,255,.99) 0%,
    rgba(255,255,255,.97) 34%,
    rgba(255,255,255,.80) 56%,
    rgba(255,255,255,.42) 76%,
    rgba(255,255,255,.20) 100%)!important}
.dallas-band h2{color:#0e2841!important}
.dallas-band p{color:#2c3f58!important}

/* 3. The three cards under "We ignite the Archē" had no hover state at all.
   Give them the same dynamic as the "Where We Partner" boxes. */
.ignite-card{
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease,
             background .35s ease}
.ignite-card:hover,.ignite-card:focus-within{
  transform:translateY(-6px);
  border-top-color:#b8973e;
  box-shadow:0 20px 44px rgba(18,35,59,.14)}

/* 4 + 5. Rotator state is driven by the class, not by inline styles.
   !important is required because the design export writes opacity/transform
   inline on every layer. */
.rot-slide{opacity:0!important;transform:translateY(16px)!important;pointer-events:none!important}
.rot-slide.is-active{opacity:1!important;transform:none!important;pointer-events:auto!important}
.rot-media{opacity:0!important}
.rot-media.is-active{opacity:1!important}

/* 5. Active theses — blue fading left to right. */
.theses-panel{background-attachment:local}

/* ============ mobile pass (2026-08-19) ============
   DB: "we need to really work on the mobile interface - spacing and
   everything looks not great". Spacing itself is retuned in the builder by
   lowering the clamp() minimums (see tighten_mobile_spacing); what follows is
   legibility and touch ergonomics, which CSS has to own. */

@media (max-width: 760px){

  /* -- 1. iOS Safari zooms the whole page when a focused field is under 16px.
        This was the single worst thing about using the contact form on a
        phone. 16px minimum on every control. -- */
  input, textarea, select{
    font-size:16px!important;
    min-height:48px;
    padding:13px 14px!important}
  textarea{min-height:120px}

  /* -- 2. Nothing below 12px. The design's 10.5-11px eyebrows and role lines
        are unreadable at arm's length on a phone. -- */
  main, footer{ -webkit-text-size-adjust:100%; }
  .tc-role{font-size:11.5px!important;line-height:1.4!important}
  main [style*="font-size: 10.5px"],
  main [style*="font-size:10.5px"],
  footer [style*="font-size: 10.5px"]{font-size:12px!important}
  main [style*="font-size: 11px"],
  main [style*="font-size:11px"],
  footer [style*="font-size: 11px"]{font-size:12.5px!important}
  main [style*="font-size: 11.5px"],
  main [style*="font-size:11.5px"]{font-size:12.5px!important}
  main p, main li{line-height:1.75}

  /* -- 3. Touch targets. Apple asks for 44px, Android 48px; the footer links
        were 16px tall and the rotator dots 3px. -- */
  .site-footer nav a, .site-footer a[href^="mailto"], .site-footer a[href^="http"],
  .site-footer a[href^="/"]{
    display:block;padding:11px 0;min-height:44px;line-height:1.5}
  main a[href*="linkedin"], main a[href^="/insights/"],
  main a[href^="mailto"], main a[href^="tel:"]{
    display:inline-flex;align-items:center;min-height:44px}
  [data-prev],[data-next]{
    min-width:46px!important;min-height:46px!important;
    display:inline-flex!important;align-items:center;justify-content:center}
  /* keep the dot's hairline look but give it a finger-sized hit area */
  [data-dot]{position:relative}
  [data-dot]::after{
    content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:100%;min-width:30px;height:44px}
  .accordion-btn{min-height:56px}

  /* -- 4. The hero is min-height:100vh AND heavily padded, so on a phone the
        headline sat below the fold. 100vh also mis-measures under mobile
        Safari's URL bar - svh is the corrected unit. -- */
  main [style*="min-height: 100vh"]{
    min-height:auto!important;
    padding-bottom:52px!important}

  /* -- 5. Dallas band: portrait-ish box, so `contain` fits by width and the
        whole skyline sits across the top with the copy beneath it. -- */
  .dallas-zoom{
    background-size:contain!important;
    background-position:center top!important;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 96%);
            mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 96%)}
  .dallas-scrim{background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%,rgba(255,255,255,.35) 22%,
    rgba(255,255,255,.94) 36%,rgba(255,255,255,.99) 100%)!important}
  /* the contained skyline is exactly viewport-width / 1.875 tall, so reserve
     that much plus a gap before the copy starts */
  /* contained panorama is viewport-width / 2.78 tall */
  .dallas-inner{padding-top:calc(36vw + 24px)!important;
                padding-bottom:34px!important}

  /* -- 6. Marquee: half-height cards so the strip is a band, not a wall. -- */
  .team-strip{animation-duration:52s!important}
}

/* -- 7. Grids that never collapsed. These are the layouts that made mobile
      look broken rather than merely cramped:
      - About / Principles: `minmax(240px,340px) 1fr` left the text column
        25px wide, so every principle rendered one character per line.
      - Focus: a 4-across stat row squeezed into ~110px columns.
      - Insights: press rows gave the headline 117px next to a 150px date.
      - Team: the accordion's 96px number gutter ate the title. -- */
@media (max-width: 760px){
  main [style*="minmax(240px, 340px) 1fr"]{
    grid-template-columns:1fr!important;gap:26px!important}
  main .invest-row{
    grid-template-columns:repeat(2,1fr)!important;gap:22px 18px!important}
  main [style*="grid-template-columns: 150px 1fr auto"]{
    grid-template-columns:1fr!important;gap:6px!important;
    padding-top:22px!important;padding-bottom:22px!important}
  main [style*="clamp(40px, 8vw, 96px) 1fr auto"]{
    grid-template-columns:30px 1fr 22px!important;gap:14px!important}
  /* the rotator panel needs to be a stacked block once it is one column */
  main [style*="minmax(240px, 340px) 1fr"] > *{min-width:0}
}

@media (max-width: 420px){
  /* the narrowest common phones - iPhone SE / mini */
  main h1{font-size:clamp(30px,8.5vw,38px)!important;line-height:1.12!important}
  .cta-out,.cta-solid{width:100%;text-align:center}
}

/* ============ contact form validation (2026-08-19) ============
   `required` was always on Full Name and Email, so the browser did refuse to
   submit - but the only signal was a native tooltip and nothing on the page
   marked the fields as mandatory, so it read as "it submitted anyway".
   These styles replace the tooltip with an inline, screen-reader-announced
   message and put a visible marker on the required labels. */
.req-star{color:#b8973e;font-weight:700}
.field-note{
  display:block;margin-top:7px;
  font-family:'Mulish',sans-serif;font-size:12.5px;line-height:1.45;
  color:#8a2c31;letter-spacing:.01em}
.field-note[hidden]{display:none!important}
input.is-invalid,textarea.is-invalid{
  border-color:#a4343a!important;
  background:#fdf7f7!important;
  box-shadow:0 0 0 1px rgba(164,52,58,.16)!important}
input.is-invalid:focus,textarea.is-invalid:focus{
  outline:none;border-color:#a4343a!important;
  box-shadow:0 0 0 2px rgba(164,52,58,.24)!important}
@media (max-width:760px){
  .field-note{font-size:13px}
}

/* ============ mobile pass 2 (2026-08-19) ============
   DB: "the mobile interface still needs a lot of work for all the content to
   fit and look good". Everything below was found by screenshotting each page
   at 390px and reading it, rather than by measuring. */

@media (max-width: 760px){

  /* -- 1. Home "First Principles" band ------------------------------------
     The navy scrim fades out from 58% so the skyline behind it can show. On
     desktop the copy is capped at 1000px and stops well short of the fade; on
     a phone it runs the full width, so line-ends like "resources and" sat as
     white text on a near-white patch. Hold the navy across the text. */
  main section [style*="linear-gradient(90deg, rgb(14, 40, 65)"]{
    background-image:linear-gradient(90deg,
      rgb(14,40,65) 0%, rgb(14,40,65) 88%,
      rgba(14,40,65,.92) 96%, rgba(14,40,65,.78) 100%)!important}

  /* -- 2. Insights white papers -------------------------------------------
     The card is a flex row: a fixed 128px thumbnail plus the text. At 390px
     that left the copy ~132px wide, so the pull-quote broke to two or three
     words a line and the eyebrow ran to eight lines. Stack it. */
  main div[style*="display: flex"][style*="gap: 26px"]{
    flex-direction:column!important;
    gap:20px!important;
    padding:24px!important}
  main div[style*="display: flex"][style*="gap: 26px"] > a[style*="width: 128px"]{
    width:150px!important;align-self:flex-start!important}

  /* -- 3. Team key stats ---------------------------------------------------
     minmax(160px,1fr) could only fit one column at 390px, so four numbers ate
     a whole screen. Two by two. */
  main div[style*="minmax(160px, 1fr)"]{
    grid-template-columns:repeat(2,1fr)!important;
    gap:26px 18px!important}

  /* -- 4. Home team marquee ------------------------------------------------
     Cards alternate 150/105px wide and are vertically staggered, which reads
     as broken on a narrow screen, and the name caption only appeared on hover
     so a touch user never saw who anyone was. Even them up and show names. */
  .team-strip .team-card{
    width:152px!important;margin-top:0!important}
  .team-cap{opacity:1!important;transform:none!important;
    background:linear-gradient(180deg,rgba(8,18,36,0) 0%,rgba(8,18,36,.62) 42%,rgba(8,18,36,.94) 100%)}
  .team-cap{padding:16px 11px 11px}
  .team-cap .tc-name{font-size:13.5px}
  .team-cap .tc-role{font-size:11.5px!important;letter-spacing:.03em!important}

  /* -- 5. Focus: the four-across figure row --------------------------------
     Two columns still gave ~166px each, so "Equity Deployed Into Growth" took
     three lines above three more of body copy. */
  main .invest-row{
    grid-template-columns:1fr!important;gap:20px!important}
  main .invest-row > div > div:first-child{font-size:20px!important}

  /* -- 6. About: the Archē wordmark block ----------------------------------
     Display type at desktop tracking overflows its box and gets clipped. */
  main [style*="font-size: clamp(64px"],
  main [style*="font-size: clamp(72px"]{
    font-size:clamp(46px,15vw,64px)!important;letter-spacing:.02em!important}

  /* -- 6b. The Archē wordmark block carries a hard-coded 561x282 box from
     the design canvas, 171px wider than a 390px phone, so "Source of action"
     was clipped off the right edge. Make it fluid. */
  main div[style*="width: 561px"]{
    width:100%!important;height:auto!important;min-height:0!important}

  /* -- 6c. Home insight teasers carry min-height:200px so the three cards
     line up as a row on desktop. Stacked on a phone that is ~110px of dead
     space per card, with the date pushed to the bottom by margin-top:auto. */
  main [style*="min-height: 200px"]{min-height:0!important}
  main [style*="min-height: 200px"] > div:last-child{margin-top:18px!important}

  /* -- 7. Uppercase labels ------------------------------------------------
     0.12-0.16em tracking on an 11-13px label wraps "CO-FOUNDER & MANAGING
     PARTNER" mid-phrase. Tighten it just enough to hold a line. */
  main [style*="text-transform: uppercase"],
  footer [style*="text-transform: uppercase"]{letter-spacing:.08em!important}
  .cta-out,.cta-solid{
    letter-spacing:.09em!important;
    min-height:46px;display:inline-flex!important;
    align-items:center;justify-content:center}
}

/* -- 8. Dallas band: give the skyline real presence on a phone.
   `contain` on a 2.78:1 panorama at 390px is only ~140px tall, which reads as
   a sliver. Fill a taller band instead and let the sides crop. */
@media (max-width: 760px){
  .dallas-band{position:relative}
  .dallas-zoom{
    background-size:cover!important;
    background-position:center 45%!important;
    height:210px!important;top:0!important;bottom:auto!important;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 74%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 0%,#000 74%,transparent 100%)}
  .dallas-scrim{background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%,rgba(255,255,255,.10) 40%,
    rgba(255,255,255,.92) 60%,rgba(255,255,255,.99) 100%)!important}
  .dallas-inner{padding-top:224px!important;padding-bottom:34px!important}
}

/* ============ white paper pages (2026-08-19) ============
   DB: "Convert the white papers from PDFs to HTML pages ... Publish each as a
   proper page with the PDF as a download option." Typography follows the rest
   of the site: Cormorant Garamond display, Mulish body, navy #12233b on the
   paper ground, gold #b8973e for rules and emphasis. */

.wp-art{font-family:'Mulish',sans-serif;color:#41546b}
.wp-wrap{max-width:820px;margin:0 auto;padding:0 clamp(41px,5vw,54px)}
/* The 41px floor is the gutter every other page uses on a phone. The white
   papers were on 20px, which put the copy half a centimetre further left
   than the rest of the site - and, worse, inside the decorative hairline the
   background canvas draws at 7% of the viewport (27px at 390px wide). The
   line cut straight through the Download button. Above 820px the clamp
   behaves exactly as before. */

/* -- hero ---------------------------------------------------------------- */
.wp-hero{padding:clamp(120px,17vh,190px) 0 clamp(30px,5vw,46px);
  background:linear-gradient(180deg,rgba(28,53,87,.05) 0%,rgba(28,53,87,0) 100%)}
.wp-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:#7d8ea3;margin-bottom:24px}
.wp-crumbs a{color:#9a7d2e;text-decoration:none;border-bottom:1px solid rgba(154,125,46,.3)}
.wp-crumbs a:hover{border-bottom-color:#9a7d2e}
.wp-crumbs span[aria-current]{color:#5b6b80}
.wp-eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:20px;
  font-size:12px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:#9a7d2e}
.wp-eyebrow span{width:40px;height:1px;background:#b8973e;flex-shrink:0}
.wp-hero h1{font-family:'Cormorant Garamond',serif;font-weight:500;
  font-size:clamp(38px,6.2vw,66px);line-height:1.02;color:#12233b;letter-spacing:-.01em}
.wp-sub{margin-top:12px;font-family:'Cormorant Garamond',serif;font-style:italic;
  font-weight:400;font-size:clamp(20px,2.7vw,27px);line-height:1.35;color:#41546b}
.wp-lede{margin-top:26px;font-size:clamp(16.5px,1.6vw,18.5px);line-height:1.75;color:#41546b;
  padding-left:20px;border-left:2px solid rgba(184,151,62,.5)}
.wp-byline{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:30px;padding-top:24px;border-top:1px solid rgba(18,35,59,.1)}
.wp-byline img{width:52px;height:52px;border-radius:50%;object-fit:cover;
  border:1px solid rgba(184,151,62,.5);flex-shrink:0}
.wp-byline > div{display:flex;flex-direction:column;gap:2px}
.wp-au{font-size:14.5px;font-weight:700;color:#12233b;letter-spacing:.01em}
.wp-role{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#7d8ea3}
.wp-read{margin-left:auto;font-size:11.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#9a7d2e}
.wp-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.wp-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:46px;
  text-decoration:none;padding:14px 26px;font-size:12.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;transition:.3s}
.wp-actions .cta-solid{background:#b8973e;border:1px solid #b8973e;color:#0a1a30}
.wp-actions .cta-solid:hover{background:#a5872f;border-color:#a5872f}
.wp-actions .cta-out{background:transparent;border:1px solid rgba(154,125,46,.55);color:#9a7d2e}
.wp-actions .cta-out:hover{background:rgba(184,151,62,.1)}

/* -- contents ------------------------------------------------------------ */
.wp-toc{padding:clamp(22px,3vw,30px) 0;border-top:1px solid rgba(18,35,59,.08);
  border-bottom:1px solid rgba(18,35,59,.08);background:rgba(255,255,255,.5)}
.wp-toc-lab{display:block;font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:#9a7d2e;margin-bottom:14px}
.wp-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px;counter-reset:toc}
.wp-toc li{counter-increment:toc}
.wp-toc a{display:inline-block;text-decoration:none;font-size:12.5px;font-weight:600;
  letter-spacing:.06em;color:#41546b;border:1px solid rgba(184,151,62,.32);
  padding:8px 14px;transition:.25s}
.wp-toc a::before{content:counter(toc) ". ";color:#9a7d2e;font-weight:700}
.wp-toc a:hover{background:rgba(184,151,62,.1);border-color:rgba(184,151,62,.6);color:#12233b}

/* -- body ---------------------------------------------------------------- */
.wp-sec{padding:clamp(44px,6vw,68px) 0;scroll-margin-top:112px}
.wp-sec + .wp-sec{border-top:1px solid rgba(18,35,59,.07)}
.wp-kicker{font-size:11.5px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
  color:#9a7d2e;margin-bottom:14px}
.wp-sec h2{font-family:'Cormorant Garamond',serif;font-weight:500;
  font-size:clamp(27px,3.9vw,40px);line-height:1.14;color:#12233b;margin-bottom:26px}
.wp-sec p{font-size:16.5px;line-height:1.85;color:#41546b;margin-bottom:20px}
.wp-sec p strong{color:#12233b;font-weight:700}
.wp-sec q{quotes:"\201C" "\201D";font-family:'Cormorant Garamond',serif;
  font-style:italic;font-size:18px;color:#1d2b3f}

.wp-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:26px 22px;margin:34px 0;padding:30px 0;
  border-top:1px solid rgba(184,151,62,.35);border-bottom:1px solid rgba(184,151,62,.35)}
.wp-big{display:block;font-family:'Cormorant Garamond',serif;font-weight:600;
  font-size:clamp(28px,3.4vw,38px);line-height:1;color:#b8973e;letter-spacing:-.01em}
.wp-small{display:block;margin-top:9px;font-size:12.5px;line-height:1.5;color:#5b6b80}

.wp-grid-head{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(20px,2.5vw,25px);
  color:#12233b;margin:38px 0 20px}
.wp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.wp-cell{border:1px solid rgba(184,151,62,.28);
  background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(239,238,232,.95));
  padding:24px}
.wp-cell h4{font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:#9a7d2e;margin-bottom:11px;line-height:1.4}
.wp-cell p{font-size:14.5px;line-height:1.7;margin:0;color:#41546b}

.wp-call{margin:34px 0;padding:26px 28px;border-left:3px solid #b8973e;
  background:rgba(184,151,62,.08)}
.wp-call-lab{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#9a7d2e;margin-bottom:10px!important}
.wp-call p:last-child{margin-bottom:0;font-family:'Cormorant Garamond',serif;
  font-size:18.5px;line-height:1.6;color:#1d2b3f}
.wp-attrib{display:block;margin-top:12px;font-family:'Mulish',sans-serif;font-size:12px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9a7d2e}
.wp-src{font-size:12.5px!important;line-height:1.7!important;color:#7d8ea3!important;
  margin:26px 0 0!important;padding-top:16px;border-top:1px solid rgba(18,35,59,.07)}

/* -- closing ------------------------------------------------------------- */
.wp-close{padding:clamp(50px,7vw,80px) 0;background:linear-gradient(135deg,#0e2841 0%,#12233b 100%)}
.wp-close p{font-family:'Cormorant Garamond',serif;font-size:clamp(18px,2.2vw,22px);
  line-height:1.65;color:#dfe6ef}
.wp-tag{margin-top:22px;font-family:'Mulish',sans-serif!important;font-size:12px!important;
  font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:#e6cf87!important}
.wp-close .cta-out{border-color:rgba(230,207,135,.55)!important;color:#e6cf87!important}
.wp-close .cta-out:hover{background:rgba(230,207,135,.12)!important}

/* -- sources ------------------------------------------------------------- */
.wp-refs ul{list-style:none;margin:0;padding:0}
.wp-refs li{position:relative;padding-left:20px;margin-bottom:12px;
  font-size:13.5px;line-height:1.65;color:#5b6b80}
.wp-refs li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:1px;background:#b8973e}
.wp-disc{margin-top:30px!important;padding-top:20px;border-top:1px solid rgba(18,35,59,.08);
  font-size:12px!important;line-height:1.7!important;color:#7d8ea3!important}

/* -- next paper ---------------------------------------------------------- */
.wp-next{padding:clamp(44px,6vw,70px) 0 clamp(60px,8vw,96px);
  border-top:1px solid rgba(18,35,59,.08)}
.wp-next-card{display:flex;flex-direction:column;gap:8px;text-decoration:none;
  border:1px solid rgba(184,151,62,.3);
  background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(239,238,232,.95));
  padding:30px 32px;transition:.3s}
.wp-next-card:hover{border-color:rgba(184,151,62,.7);transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(18,35,59,.1)}
.wp-next-eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#9a7d2e}
.wp-next-title{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(22px,2.8vw,28px);
  line-height:1.15;color:#12233b}
.wp-next-sub{font-size:14.5px;line-height:1.6;color:#5b6b80}
.wp-next-go{margin-top:8px;font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#9a7d2e}
.wp-back{margin-top:24px;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.wp-back a{color:#9a7d2e;text-decoration:none;border-bottom:1px solid rgba(154,125,46,.35)}
.wp-back a:hover{border-bottom-color:#9a7d2e}

/* -- insights card: PDF sits beside the HTML link ------------------------ */
.wp-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:18px}
.wp-cta-row > a[class*="cta-out"]{margin-top:0!important}
.wp-dl{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#7d8ea3;text-decoration:none;border-bottom:1px solid rgba(125,142,163,.4);
  padding-bottom:2px;transition:.25s}
.wp-dl:hover{color:#9a7d2e;border-bottom-color:#9a7d2e}

@media (max-width:760px){
  .wp-hero{padding-top:clamp(104px,15vh,140px)}
  .wp-lede{padding-left:16px;font-size:16px}
  .wp-read{margin-left:0;width:100%}
  .wp-actions a{width:100%}
  .wp-stats{grid-template-columns:repeat(2,1fr);gap:24px 16px}
  .wp-call{padding:22px 20px}
  .wp-cell{padding:20px}
  .wp-next-card{padding:24px 22px}
  .wp-toc a{font-size:12px;padding:7px 12px}
}

/* ============ mobile pass 3 — UI + rhythm + touch (2026-08-20) ============
   DB: "the user interface needs to be better and the spacing of the entire
   site needs to be corrected. For the areas where the user can click left or
   right, id like for them to be able to scroll as well with touch (this
   includes the team on the home page, the guiding principles and the active
   theses)."

   Everything here was driven by measurement at 390px, not by eye — the 2x
   device-pixel screenshots make every gap look twice as bad as it is, which
   is how the last pass nearly over-corrected. Numbers quoted in the comments
   are the measured "before". */

/* -- 1. HOME TEAM STRIP: a real scroller on touch -------------------------
   The strip is a CSS marquee inside an overflow:hidden wrapper. Measured, it
   sat at left:-34px mid-animation and ran flush to both viewport edges, so
   the first and last faces were always sliced. site.js adds .is-scroll /
   .team-scroller on devices without a fine pointer; here we stop the
   animation and hand the wrapper to the browser as a snap scroller. Native
   momentum beats a JS drag, and scroll-padding keeps the first card off the
   edge. */
.team-viewport{overflow:hidden}     /* clips the marquee on desktop */
.team-rail{
  overflow-x:auto!important;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  overscroll-behavior-x:contain;   /* don't chain to Safari's back gesture */
  /* NO scroll-snap here: snapping yanks the rail back to a card boundary and
     fights the continuous drift. The drift is the design; snap is not. */
}
.team-rail::-webkit-scrollbar{display:none}
.team-strip.is-rail{
  animation:none!important;        /* JS drives scrollLeft instead */
  transform:none!important;
  width:max-content;
}
/* .team-dupe stays VISIBLE in rail mode - the duplicate set is what hides
   the wrap-around at half width. */

/* -- 2. ROTATOR SLIDES: kill the dead space ------------------------------
   /about/ pinned the slide host at min-height:300px while the five slides
   measured 143-199px tall, so every principle sat above 100-157px of empty
   paper with the gold rule running down through it. The host only needs to
   be as tall as the tallest slide, which it already is via the absolutely
   positioned stack. */
@media (max-width:760px){
  /* Grid-stack the slides instead. The host then sizes to its TALLEST slide
     with no min-height at all, every slide still occupies the same cell so
     the cross-fade is untouched, and nothing below it can be overlapped.

     Two traps here, both of which bit me:
       - /about/ carries position:absolute INLINE on every slide, so a plain
         `.rot-slide{position:relative}` silently loses and the host collapses
         to height 0 — the CTA underneath then lands on top of the copy.
         Hence !important.
       - /focus/ already ships as a grid with relative slides, which is why it
         never had a min-height and never showed the fault. Same rule is a
         no-op there.
     Sizing to the tallest slide rather than the active one is deliberate:
     sizing to the active slide makes the page jump on every rotation. */
  .rot-host{min-height:0!important; display:grid!important}
  .rot-host > .rot-slide{position:relative!important; grid-area:1/1}
}

/* -- 3. ROTATOR DOTS: 3px is not a tap target ----------------------------
   The indicator bars are <button>s with an inline height:3px and padding:0,
   so the measured hit area was 34x3 and 16x3. Keep the bar 3px visually but
   give the button 44px of height: content-box sizing plus transparent
   vertical padding, and background-clip so the inline background colour that
   site.js writes still paints only the bar. */
[data-dot]{
  box-sizing:content-box!important;
  padding:21px 7px!important;
  background-clip:content-box!important;
  -webkit-background-clip:content-box!important;
  margin:-21px -7px!important;          /* keep the row's visual height */
  cursor:pointer;
}
[data-dot]:focus-visible{outline-offset:-14px}

/* -- 4. SWIPEABLE SURFACES ----------------------------------------------
   pan-y tells the browser we may claim horizontal gestures while vertical
   scrolling stays native — belt and braces alongside the axis lock in
   site.js. Also stop the long-press callout and blue tap flash, which make a
   swipe feel like a mis-tap. */
.theses-panel,.rot-slide{
  touch-action:pan-y;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
}
.team-rail{touch-action:pan-x pan-y}

/* -- 5. VERTICAL RHYTHM --------------------------------------------------
   Measured section padding at 390px was 78/52, 36/36, 30/36, 40/30, 26/26,
   26/20, 20/36, 30/30 — no pattern at all. build_port.tag_sections() marks
   only the sections that already carry inline padding (bare wrappers are
   left alone so nothing double-spaces), and they all get one value. */
@media (max-width:760px){
  main .sec-pad{
    padding-top:46px!important;
    padding-bottom:46px!important;
    padding-left:22px!important;
    padding-right:22px!important}
  main .sec-hero{
    padding-top:104px!important;     /* clears the 88px fixed header */
    padding-bottom:40px!important;
    padding-left:22px!important;
    padding-right:22px!important}

  /* the hero H1 sat 63px clear of its own standfirst */
  main .sec-hero h1{margin-bottom:0}
  main .sec-hero h1 + *{margin-top:26px!important}
}

/* -- 6. PILLAR NUMERALS --------------------------------------------------
   0.3em tracking from the design turned "II" into "I I" and "III" into
   "I I I". Tracking on a two- or three-glyph numeral only ever adds a gap
   after the last glyph, so pull it back and trim the trailing space. */
.pillar-num{letter-spacing:.06em!important;margin-right:-.06em}

/* -- 7. PILLAR CARDS ------------------------------------------------------
   38px of padding top and bottom on a 242px card is 31% air. */
@media (max-width:760px){
  .pillar-in{padding:26px 22px!important}
}

/* -- 8. SMALL TEXT LINKS need a real hit area ---------------------------- */
@media (max-width:760px){
  .wp-dl{display:inline-flex;align-items:center;min-height:44px}
}

/* -- 9. /team/ founding partners two-up on mobile (2026-08-20) ------------
   DB: "put Dane and Jack on the team page horizontal versus vertical to show
   parity between the two leaders." Photo + name + role go side by side; the
   bio is lifted out to full width by founders() in site.js, because measured
   at 390px a full two-up card gives 21 characters per line against 43
   stacked. Below ~30 the copy stops being readable, so parity is bought in
   the header only, where it is actually visible. */
@media (max-width:760px){
  .founder-grid{grid-template-columns:1fr 1fr!important;gap:12px!important}
  .founder-card .founder-body{padding:14px 14px 18px!important}
  .founder-card h3{font-size:19px!important;line-height:1.12!important}
  .founder-card .founder-body > div{font-size:11px!important;letter-spacing:.05em!important;
    margin-top:6px!important;line-height:1.35}
  /* identical photo crop on both, so neither reads as the larger partner */
  .founder-photo{aspect-ratio:4/4.2!important}

  /* Bios are revealed by tapping a headshot, and land directly beneath the
     pair. Closed by default - class-driven only, never :hover/:focus-within,
     because on iOS both stick after a tap and would block re-closing. */
  .founder-bios{display:flex;flex-direction:column}
  .founder-bio{display:none;margin-top:26px;
    border-top:1px solid rgba(184,151,62,.32);padding-top:18px}
  .founder-bio.is-open{display:block;animation:bioIn .32s ease both}
  .founder-bio-name{font-size:11px;font-weight:700;letter-spacing:.16em;
    text-transform:uppercase;color:#9a7d2e;margin:0 0 14px}
  .founder-bio > ul{margin-top:0!important}
  @keyframes bioIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

  .founder-card{cursor:pointer;-webkit-tap-highlight-color:transparent;
    transition:border-color .25s,box-shadow .25s}
  .founder-card.is-open{border-color:rgba(184,151,62,.75)!important;
    box-shadow:0 10px 26px rgba(18,35,59,.12)}
  .founder-cue{display:inline-flex;align-items:center;gap:6px;margin-top:12px;
    font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:#9a7d2e}
  .founder-cue::after{content:"+";font-size:15px;line-height:1;font-weight:400;
    transition:transform .3s}
  .founder-card.is-open .founder-cue::after{transform:rotate(45deg)}
}

/* ============ home "Where We Partner" pillars (2026-08-24) ============
   DB: "is there a way to make those more prominent at least on the desk top?
   ... making them larger type, and displayed numerals".

   The numeral was 15px with 0.3em tracking - a label, not a display element.
   It now scales as real display type. Everything steps up with it so the card
   keeps its internal hierarchy rather than just having a big number bolted on.
   clamp() means desktop gets the full effect while mobile scales down instead
   of overflowing a 390px card. */
.pillar-in{position:relative}

.pillar-num{
  /* DB: centre the numeral in each bucket rather than sitting it left. The
     heading and body stay left-aligned - centring those too would turn the
     card into a different, softer thing than the rest of the page. */
  text-align:center!important;
  font-size:clamp(34px,4.2vw,56px)!important;
  line-height:.95!important;
  color:rgba(184,151,62,.6)!important;
  display:block;
  /* No tracking at all now. The export's 0.3em made "III" read as "I I I";
     once centred, ANY tracking also throws the glyph off-centre, because the
     space it adds after the last character widens the text box on one side
     only. At display size a roman numeral needs no tracking, so this fixes
     both problems at once. Measured offset from card centre: 0.0px. */
  letter-spacing:0!important;
  text-indent:0}

.pillar-in h3{
  margin-top:clamp(10px,1vw,16px)!important;
  /* DB wants these on ONE line. The binding constraint is the longest title,
     "The Right Side of Healthcare"; the ceiling below is the largest size at
     which it still fits the narrowest card without clipping. Still well up
     from the original 18px. */
  font-size:clamp(16.5px,1.55vw,22px)!important;
  line-height:1.14!important;
  white-space:nowrap!important}

.pillar-in p{
  margin-top:clamp(10px,1vw,15px)!important;
  font-size:clamp(14.5px,1.05vw,15.5px)!important;
  line-height:1.72!important}

/* the aphorism under pillar I */
.pillar-in p.pillar-quote{
  margin-top:16px!important;
  padding-top:14px;
  border-top:1px solid rgba(184,151,62,.28);
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:clamp(15px,1.15vw,17px)!important;
  line-height:1.5!important;
  color:#5b6b80!important}

@media (min-width:761px){
  /* trimmed from 34px to buy the one-line titles their width back */
  .pillar-in{padding:44px 26px 40px!important}
}

/* -- How we invest: five across ------------------------------------------
   DB 2026-08-27 added a real estate item to what the export built as a
   four-column inline grid. Five columns leave ~185px of text width at the
   1200px cap and ~146px at 1000px, so the row steps down to three columns
   below 1060px and the title type comes down a notch throughout. The inline
   font-size on the title needs !important to be overridden at all. */
.invest-wide{max-width:1480px!important}
.invest-row{gap:18px!important}
.invest-row > div{padding-left:16px!important;position:relative}
.invest-row > div > div:first-child{
  font-size:clamp(15.5px,1.36vw,21px)!important;
  line-height:1.16!important}

/* Five across only holds while a column can carry its longest title on one
   line. Measured: the widest is "Real Estate, Where It Fits" at 232px @21px,
   and the type clamp keeps it inside the column down to ~1160px. Below that
   the row goes three up, where there is room to spare. */
@media (min-width:761px) and (max-width:1340px){
  .invest-row{grid-template-columns:repeat(3,1fr)!important;gap:24px 20px!important}
  /* three columns are ~380px wide here, so the five-across clamp would leave
     the titles far smaller than the space allows */
  .invest-row > div > div:first-child{font-size:clamp(16.5px,1.9vw,22px)!important}
}

/* -- Hover response (DB 2026-08-27: "more dynamic") ----------------------
   Pointer-gated, as the criteria panel had to be after the tap-to-close bug:
   a sticky :hover on iOS would leave a column raised with no way to release
   it. The rule scales rather than re-widths so nothing reflows. */
.invest-row > div::before{
  content:"";position:absolute;left:-1px;top:0;bottom:0;width:1px;
  background:rgb(184,151,62);transform-origin:left center;
  transition:transform .38s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover) and (pointer:fine){
  .invest-row > div{
    transition:transform .38s cubic-bezier(.2,.7,.2,1)}
  .invest-row > div > div:first-child{transition:color .38s ease}
  .invest-row > div:hover{transform:translateY(-4px)}
  .invest-row > div:hover::before{transform:scaleX(3)}
  .invest-row > div:hover > div:first-child{color:rgb(125,101,38)!important}
}
@media (prefers-reduced-motion:reduce){
  .invest-row > div,.invest-row > div::before{transition:none!important}
  .invest-row > div:hover{transform:none!important}
}

/* -- Team hero portrait ---------------------------------------------------
   DB 2026-08-27. The photograph is a navy duotone mixed to the page's own
   two inks (#0e2841 shadow, #faf9f6 highlight) rather than the untouched
   photograph: the studio backdrop is a warm neutral and on linen it goes
   olive, which is what made every "faded photo" attempt read as muddy.

   The vertical geometry is the part that took three passes to get right.
   .sec-hero starts at y=0, BEHIND the fixed header, so sizing the image to
   the section height put the air above their heads underneath the navy bar
   and cropped both founders. The image is therefore inset by the measured
   header height (--hdr, set in site.js) and sized `auto 100%` - its height
   is always exactly the visible band, so there is no vertical crop to get
   wrong at any viewport.

   Below 600px the phone gets its own crop and geometry - see the 599px
   block at the foot of this section. */
.team-hero{position:relative;
  min-height:calc(var(--hdr,84px) + clamp(292px,24vw,348px));
  display:flex;flex-direction:column;justify-content:center}
.team-hero > *{position:relative;z-index:3}
.team-hero::before{content:"";position:absolute;
  top:var(--hdr,84px);bottom:0;
  left:calc(50% - 50vw);right:calc(50% - 50vw);width:100vw;
  z-index:1;pointer-events:none;
  /* THREE layers under one mask, top to bottom:
       1. the linen wash, which lifts anything the copy can reach
       2. the photograph, height-fitted and pinned to the right
       3. a flat field matching the photograph's own left column
     Layer 3 is the important one and was missing.

     DB 2026-09-01: "it should blend all the way to the left, fading right to
     left with our picture being the darkest background."

     The photograph is 2400x772, so height-fitted into a 348px band it renders
     1082px wide - narrower than the viewport on any monitor past ~1100px, and
     it therefore has a LEFT EDGE sitting inside the page. The old mask hid
     that edge by cutting everything at 44% from the left, which is why no
     seam showed; but it also meant the fade stopped dead at 44% and left a
     bright gap between the photograph and the page's own left-hand artwork.
     That gap, not a seam, is the hard line he is seeing.

     Extending the fade to the left edge alone re-exposes the photograph's
     edge as a genuine 26-level step. Layer 3 continues the backdrop past it -
     sampled from the image's column 0, which measures flat horizontally
     (53,75,95 from x=0 to x=1500) with a mild vertical falloff - so there is
     no edge left to expose and the mask can now run the full width. */
  background:
    linear-gradient(to right,
      rgba(250,249,246,.92) 0%,  rgba(250,249,246,.86) 20%,
      rgba(250,249,246,.70) 38%, rgba(250,249,246,.46) 52%,
      rgba(250,249,246,.20) 66%, rgba(250,249,246,.05) 79%,
      rgba(250,249,246,0) 90%),
    url(/assets/img/team-hero.5f8e2dc2f9.jpg) right bottom/auto 100% no-repeat,
    linear-gradient(to bottom,
      rgb(55,76,97) 0%, rgb(59,80,99) 25%, rgb(59,80,101) 50%,
      rgb(49,71,92) 75%, rgb(37,62,84) 100%);
  opacity:.86;
  /* mask-size 200% is what makes the entrance sweep possible: at
     mask-position 0% the whole element falls in the gradient's transparent
     half and the band is invisible; at 100% it sits in the opaque half and
     shows the finished fade. Animating between the two reveals the picture
     from the right. */
  /* The stop percentages are tied to mask-size: at mask-position 100% the
     element spans p = 0 .. 100/size of the mask box, so transparency has to
     land at 38.46% for a 260% box if the fade is to reach exactly zero at the
     left edge. 260% rather than 200% only because it lengthens the sweep's
     travel - at 200% the picture is already faintly present everywhere on the
     first frames and the entrance reads as a plain fade-up rather than as
     something arriving from the right. The FINAL state is identical either
     way; only the journey changes. */
  -webkit-mask-image:linear-gradient(to left,#000 0%,rgba(0,0,0,.96) 7.7%,rgba(0,0,0,0) 38.46%);
          mask-image:linear-gradient(to left,#000 0%,rgba(0,0,0,.96) 7.7%,rgba(0,0,0,0) 38.46%);
  -webkit-mask-size:260% 100%;         mask-size:260% 100%;
  -webkit-mask-repeat:no-repeat;       mask-repeat:no-repeat;
  -webkit-mask-position:100% 0;        mask-position:100% 0;
  -webkit-animation:heroSweep 1.35s cubic-bezier(.22,.61,.36,1) both;
          animation:heroSweep 1.35s cubic-bezier(.22,.61,.36,1) both}

/* The sweep is declared in CSS, not started by script, so it runs on the very
   first painted frame. Driving it from JS would show one frame of the
   finished state before the class landed, and would leave no-JS visitors
   with nothing. site.js only ever RE-plays it. */
@keyframes heroSweep{
  from{-webkit-mask-position:0% 0;   mask-position:0% 0}
  to  {-webkit-mask-position:100% 0; mask-position:100% 0}}
.team-hero.is-still::before{
  -webkit-animation:none!important;animation:none!important}
@media (prefers-reduced-motion:reduce){
  .team-hero::before{-webkit-animation:none!important;animation:none!important}}
/* The copy has to clear the figures, and the figures move LEFT as the band
   gets taller (the image is height-fitted, so a taller band is a wider one).
   Measured at 1440/1280/1024/900/768/700/620: the pair's left edge never
   comes inside 62% of the content box, so the copy is capped below that. */
main .team-hero h1{max-width:62%!important}
main .team-hero p{max-width:54%!important}
@media (max-width:760px){
  main .team-hero h1{font-size:clamp(23px,4.4vw,30px)!important}
}
/* Below 600px the desktop geometry stops working: the leftward fade that
   dissolves the photograph into the page needs ~700px of empty backdrop to
   run across, and a phone has none - it lands on the left founder and erases
   him.

   The phone therefore gets its own file. It is a PORTRAIT canvas: the same
   photograph placed in the right 41% with the studio backdrop extended around
   it, so the picture can fill the hero top to bottom (DB: "it should have the
   same height as the total hero section") without either partner being cropped
   to fit a tall, narrow slot. That was the trade that could not be solved by
   positioning alone - two people side by side is a wide shape, and a phone
   hero beside copy is a tall one, so the room has to be built into the file.

   Two washes, not one. The horizontal wash carries the body copy on the left;
   the vertical wash lifts the top band where the headline runs full width.
   Splitting them means neither has to be strong enough to reach the founders,
   who sit at 55-96% across and 33-67% down.

   The soft edges are baked into the file as transparency rather than applied
   with a CSS mask: mask-composite is not reliable across Safari versions, and
   this is the device most visitors are on.

   Measured glyph by glyph against the pixels actually behind them, at 360,
   390, 414 and 430: headline 8.3:1 or better, body 7.1:1 or better, against a
   4.5:1 requirement. */
@media (max-width:599px){
  .team-hero{min-height:0;display:block}
  .team-hero::before{display:block;opacity:1;
    top:var(--hdr,77px);bottom:0;
    background:
      linear-gradient(to bottom,
        rgba(250,249,246,.98) 0%,  rgba(250,249,246,.96) 14%,
        rgba(250,249,246,.90) 21%, rgba(250,249,246,.70) 27%,
        rgba(250,249,246,.44) 33%, rgba(250,249,246,.20) 39%,
        rgba(250,249,246,.07) 45%, rgba(250,249,246,0) 52%),
      /* the wash carries the copy only; the picture's own alpha does the
         blending, so this falls away well before the figures */
      linear-gradient(to right,
        rgba(250,249,246,.98) 0%,  rgba(250,249,246,.96) 40%,
        rgba(250,249,246,.80) 46%, rgba(250,249,246,.52) 51%,
        rgba(250,249,246,.26) 56%, rgba(250,249,246,.10) 61%,
        rgba(250,249,246,.02) 66%, rgba(250,249,246,0) 71%),
      url(/assets/img/team-hero-tall.0fe70a9115.webp) center/100% auto no-repeat;
    -webkit-mask-image:none;mask-image:none;
    -webkit-animation:none;animation:none}
  main .team-hero{padding-top:calc(var(--hdr,77px) + 24px)!important;
    padding-bottom:34px!important}
  /* DB 2026-08-27: break after "spirit," and let both lines reach the edges.
     Sized so the longer of the two lines fills the measure. */
  main .team-hero h1{max-width:100%!important;line-height:1.08!important;
    font-size:clamp(26px,8.75vw,41px)!important}
  main .team-hero h1 .h1-b{display:block}
  /* the left inset moved right to clear the drawn rule, which pushed this
     column's RIGHT edge into the photograph - the percentage comes down to
     hold the same distance from the figures */
  main .team-hero p{max-width:44%!important;font-size:14.5px!important;
    line-height:1.72!important}
}
@media print{ .team-hero::before{display:none} }

/* -- White paper gate -----------------------------------------------------
   DB 2026-08-27: preview the paper, ask for an email for the rest.
   The locked state is applied BY JAVASCRIPT (.is-locked), never in the
   stylesheet: a reader with JS off, or a crawler, gets the whole paper
   rather than a wall with no way past it. */
.wp-gate{display:none}
.wp-art.is-locked .wp-gate{display:block;
  padding:clamp(26px,3.4vw,40px) 0 clamp(10px,1.4vw,18px)}
.wp-art.is-locked .wp-gated{
  max-height:130px;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.25) 62%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.25) 62%,rgba(0,0,0,0) 100%)}
.wp-gate .wp-wrap{border-top:1px solid rgba(184,151,62,.35);
  border-bottom:1px solid rgba(184,151,62,.35);padding-top:clamp(26px,3vw,38px);
  padding-bottom:clamp(26px,3vw,38px)}
.wp-gate h2{margin-top:6px}
.wp-gate-lede{margin-top:12px;font-size:16px;line-height:1.75;color:#41546b;max-width:60ch}
.wp-gate-form{margin-top:26px;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));align-items:end;max-width:860px}
.wp-gate-form label{display:flex;flex-direction:column;gap:8px}
.wp-gate-form label span{font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#5b6b80}
.wp-gate-form label i{font-style:normal;color:#9a7d2e}
.wp-gate-form input{background:#fff;border:1px solid rgba(18,35,59,.16);color:#12233b;
  padding:14px 16px;font-family:'Mulish',sans-serif;font-size:15px;outline:none;
  transition:border-color .25s}
.wp-gate-form input:focus{border-color:#b8973e}
.wp-gate-form input.bad{border-color:#a4343a;background:#fdf7f7}
.wp-gate-form button{grid-column:1/-1;justify-self:start;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;min-height:46px;
  padding:14px 26px;font-family:'Mulish',sans-serif;font-size:12.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  background:#b8973e;border:1px solid #b8973e;color:#0a1a30}
.wp-gate .wp-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.wp-gate-fine{margin-top:18px;font-size:12.5px;line-height:1.7;color:#6b7c92;max-width:66ch}
.wp-gate-note{margin-top:14px;padding:12px 14px;border-left:3px solid #a4343a;
  background:#fdf4f4;font-size:13.5px;font-weight:600;color:#7d2a2f}
.wp-gate-note[hidden]{display:none}
.wp-gate-form button[aria-busy="true"]{opacity:.65;pointer-events:none}
@media (max-width:600px){
  .wp-gate-form{grid-template-columns:1fr}
  .wp-gate-form button{width:100%;justify-self:stretch;text-align:center}
}

/* -- One left edge on phones ---------------------------------------------
   DB 2026-08-27: "Insights and news on the home page are not aligned with
   the other sections." Measured at 390px across every page: sections landed
   on three different left edges - 20px where only the export's inner wrapper
   pads, 22px where the mobile stylesheet pads the section, and 42px on home's
   "One team", the single place in the site where BOTH apply and the padding
   compounds. Insights was not the outlier; it was correct and its neighbour
   was not. Everything is pinned to 22px here. */
@media (max-width:760px){
  main .sec-pad > div[style*="clamp(20px, 5vw,"]{
    padding-left:0!important;padding-right:0!important}
  main section:not(.sec-pad) > div[style*="clamp(20px, 5vw,"]{
    padding-left:22px!important;padding-right:22px!important}
}

/* -- Clear the drawn margin rule on phones --------------------------------
   DB 2026-08-27: "the left background dynamic of the line drawing; mobile
   content sits on top of that". #bg-canvas draws a vertical rule at 7% of the
   viewport - 27px on a 390px phone - and the mobile content edge was pinned at
   22px, so the type ran straight through it. On desktop the same rule sits at
   ~101px with the content starting at 174px, i.e. the copy has always been
   meant to begin to the RIGHT of that line. This restores that relationship at
   phone width by tying the left inset to the rule's own position, so the two
   can never drift apart again. The right inset stays at 22px: the rule is a
   margin, and a margin is asymmetric by nature. */
@media (max-width:760px){
  main .sec-pad,
  main .sec-hero,
  main section:not(.sec-pad) > div[style*="clamp(20px, 5vw,"]{
    padding-left:calc(7% + 14px)!important}
}

/* -- Contact card rhythm --------------------------------------------------
   DB 2026-08-27: "the spacing between lines looks off." Every line was
   line-height:normal, so the leading came from each font's own default -
   Cormorant for the name, Mulish for the role and links - and the four lines
   shared no rhythm. Explicit leading and spacing throughout.

   On phones the touch-target rule (44px minimum on mailto and LinkedIn links)
   was turning each link into a tall box with uneven air around it. The rule
   stays - a finger still needs the target - but the rows now sit flush so the
   height reads as two deliberate tappable rows rather than as loose spacing. */
.contact-card > div:nth-child(1){line-height:1.2!important}
.contact-card > div:nth-child(2){margin-top:5px!important;line-height:1.45!important}
.contact-card > div:nth-child(3){margin-top:14px!important;gap:3px!important}
.contact-card a{line-height:1.6}
@media (max-width:760px){
  .contact-card > div:nth-child(3){margin-top:10px!important;gap:0!important}
  /* The site-wide 44px touch minimum left 28px of air between the two links -
     nearly three times the desktop rhythm, which is what read as "off". These
     two are text links inside a card rather than primary controls, so 36px is
     the trade: still a comfortable target, spacing that matches the rest of
     the card. The 44px rule stands everywhere else. */
  .contact-card a[href^="mailto"], .contact-card a[href*="linkedin"]{
    min-height:36px!important}
}

/* ---- Network grid: centred wrap ---------------------------------------
   DB 2026-09-01: "Can we order the network folks tiles better? 2 rows of 4?
   One row of 5 then second row centered of 3?"

   Both of his options work at eight, and they fail differently at nine. A
   rigid 4-column grid leaves the last card stranded at the left edge whenever
   the count is not a multiple of four; five-then-three has the same problem at
   eleven. Since Abdul is still to come and the roster will keep moving, the
   layout should not depend on the number.

   Flex-wrap with justify-content:center gives four per row AND centres
   whatever the last row happens to hold. At eight it renders exactly as his
   "two rows of four". At nine the odd card sits centred and reads as
   deliberate rather than broken. It never needs revisiting.

   The export ships an inline `repeat(auto-fit, minmax(132px, 1fr))` on this
   grid, and inline styles beat a stylesheet, so display and gap need
   !important to win. */
.adv-grid{
  display:flex!important;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(20px,2.6vw,32px)!important}
.adv-grid > .adv-card{
  flex:0 0 calc((100% - 3 * clamp(20px,2.6vw,32px)) / 4)}
@media (max-width:1000px){
  .adv-grid > .adv-card{flex-basis:calc((100% - 2 * clamp(20px,2.6vw,32px)) / 3)}}
@media (max-width:680px){
  .adv-grid > .adv-card{flex-basis:calc((100% - clamp(20px,2.6vw,32px)) / 2)}}

/* ---------------------------------------------------------------------------
   Insights - white paper cards

   The card is a flex row: a fixed-width cover thumbnail plus a text column.
   The grid was three-up from 320px, so on a 1440px screen each card was ~348px
   and, after 32px padding either side and the 128px cover, the copy had 132px
   of measure. The pull-quote broke to two or three words a line and the cards
   ran 885px tall. Two-up gives the copy roughly 340px, which is a sane measure
   and roughly halves the height.

   Below 1100px two columns no longer fit, so the card goes full width. That
   would hand the copy 700px+ of measure, which reads as badly as 132px does,
   so the body is capped. Under 760px the card stacks (rule 2 above).
   --------------------------------------------------------------------------- */
.ins-grid{
  grid-template-columns:repeat(auto-fill,minmax(430px,1fr))!important;
  gap:34px!important}

.ins-card{
  gap:28px!important;
  padding:30px!important}

.ins-card > a{width:130px!important}

.ins-card-body{max-width:62ch}

@media (max-width:1100px){
  .ins-grid{grid-template-columns:1fr!important;gap:28px!important}
}

@media (max-width:760px){
  .ins-grid{gap:28px!important}
  .ins-card{gap:20px!important;padding:24px!important}
  .ins-card > a{width:150px!important}
  .ins-card-body{max-width:none}
}


/* ---------------------------------------------------------------------------
   White paper - the confirmation panel after an unlock

   Sits where the form was. The reader has just given us an email; this tells
   them the file is open and keeps a standing link to it, so a blocked popup or
   a closed tab never leaves them stranded with nothing but a longer web page.

   The outer section is full width like .wp-sec; the card lives inside .wp-wrap
   so it lines up with the article column rather than bleeding across the page.
   The button is styled here in full: .cta-solid only carries transitions and
   hover on its own - its shape comes from inline styles on the buttons in the
   original export, which a button built in script does not inherit.
   --------------------------------------------------------------------------- */
.wp-done{padding:clamp(30px,4vw,44px) 0}
.wp-done-card{padding:30px 32px;
  border:1px solid rgba(184,151,62,.45);
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(239,238,232,.96))}
.wp-done-eyebrow{margin:0;font-size:11px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:#9a7d2e}
.wp-done-head{margin:10px 0 0;font-family:'Cormorant Garamond',Georgia,serif;
  font-size:30px;line-height:1.2;font-weight:600;color:#12233b}
.wp-done-lede{margin:12px 0 0;font-size:15.5px;line-height:1.75;color:#41546b;max-width:58ch}
.wp-done-act{margin:24px 0 0}
.wp-done-act a{display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 30px;
  background:#b8973e;border:1px solid #b8973e;color:#0a1a30;
  font-family:'Mulish',sans-serif;font-size:12.5px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;text-decoration:none;
  transition:background .3s ease,border-color .3s ease,transform .3s ease,box-shadow .3s ease}
.wp-done-act a:hover{background:#c9a648;border-color:#c9a648;
  transform:translateY(-2px);box-shadow:0 12px 30px rgba(184,151,62,.30)}
.wp-done-act a:active{transform:translateY(0);box-shadow:none}
.wp-done-act a:focus-visible{outline:2px solid #9a7d2e;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.wp-done-act a{transition:none}
  .wp-done-act a:hover{transform:none;box-shadow:none}}
@media (max-width:760px){
  .wp-done-card{padding:24px 20px}
  .wp-done-head{font-size:24px}
  .wp-done-act a{display:flex;width:100%}
}


/* Once a request is in, the form is removed so it cannot be submitted twice.
   The hidden attribute alone is not enough: .wp-art.is-locked .wp-gate sets
   display:block, and an author rule beats the browser's own styling of
   [hidden]. Say it explicitly. */
.wp-art.is-locked .wp-gate[hidden]{display:none!important}

/* ---------------------------------------------------------------------------
   Who We Are - the two panels cross-fade through the four investment themes.

   The shots are stacked, not swapped by src: swapping would flash white on a
   cold cache. The parent already carries the aspect ratio, the overflow clip
   and, on the lower panel, the Ken Burns drift - so position against it and
   inherit all three for free.

   The panels start two themes apart and advance together, so the same
   photograph is never showing in both at once.
   --------------------------------------------------------------------------- */
.wwa-rot{position:relative}
.wwa-shot{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;opacity:0;transition:opacity 1.1s ease}
.wwa-shot.is-on{opacity:1}
@media (prefers-reduced-motion:reduce){
  .wwa-shot{transition:none}
}