/* TriGate vFinal overrides, 2026-10-26.
   1. No top bar: the header and the map stage sit directly at the top of the window.
   2. Phones: property card sized to its content above the controls, lighter shading at
      each stop so the site outline shows, legend hidden while the tour controls are up.
   3. TriGate comments: homepage video hero, Who we are, standing team photos,
      target-market map on Investment philosophy. */

/* Stage offsets follow the header heights in site.css: 94px, 82px at <=1000px, 76px at <=720px. */
html:has(.theme-atlas){scroll-padding-top:112px}
.theme-atlas .site-header{top:0!important}
.atlas-stage{top:94px;height:calc(100svh - 94px)}

@media(max-width:1000px){
  html:has(.theme-atlas){scroll-padding-top:100px}
  .atlas-stage{top:82px;height:calc(100svh - 82px)}
}

@media(max-width:720px){
  html:has(.theme-atlas){scroll-padding-top:92px}
  .atlas-stage{top:76px;height:calc(100svh - 76px)}
}

@media(max-width:700px){
  html:has(.theme-atlas) .atlas-stage{top:76px;height:calc(100svh - 76px);max-height:calc(100svh - 76px)}
  .atlas-deal-panel{top:auto!important;bottom:102px!important;max-height:calc(100% - 150px)}
  .atlas-tour-started .atlas-footprint-legend{display:none!important}
  .atlas-vignette{background:linear-gradient(0deg,#020d1ce8,transparent 22%)}
  .atlas-vignette::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,#030c14 0%,#030c14ed 30%,#030c14cc 43%,#030c1400 62%);
    transition:opacity .5s ease}
  .atlas-stage:has(#atlas-deal-panel:not([hidden])) .atlas-vignette::before{opacity:.12}
}

@media(max-width:700px) and (max-height:760px){
  .atlas-card-body{padding:10px 12px 4px}
  .atlas-deal-panel h2{font-size:20px}
  .atlas-place{margin-top:2px}
  .atlas-deal-stats{margin-top:8px}
  .atlas-deal-stats>div{padding:6px 8px}
  .atlas-deal-stats strong{font-size:16px}
  .atlas-deal-stats strong.long-value{font-size:15px}
  .atlas-deal-stats span{font-size:8px;margin-top:2px}
  .atlas-deal-note-wrap summary{min-height:32px;font-size:11px}
}

@media(max-width:700px){
  .atlas-begin{text-shadow:0 0 2px #020c14,0 1px 8px #020c14}
}

@media(prefers-reduced-motion:reduce){
  .atlas-vignette::before{transition:none}
}

/* Homepage video hero */
.vf-hero{position:relative;height:calc(100svh - 94px);min-height:560px;overflow:hidden;isolation:isolate;background:#07141d;color:#f1f3eb}
.vf-hero-still,.vf-hero-still img,.vf-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;margin:0}
.vf-hero-video{opacity:0;transition:opacity .8s ease}
.vf-hero.is-playing .vf-hero-video{opacity:1}
.vf-hero-shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(3,12,20,.42) 0%,rgba(3,12,20,.2) 46%,rgba(3,12,20,0) 74%),
             linear-gradient(0deg,rgba(3,12,20,.3) 0%,rgba(3,12,20,0) 30%)}
.vf-hero-copy{position:absolute;left:4.5%;top:50%;transform:translateY(-50%);width:min(680px,52%);z-index:2}
.vf-hero-copy .eyebrow{font-size:11px;letter-spacing:.19em;color:#a9d4c0;margin-bottom:22px}
.vf-hero-copy h1{font-size:clamp(44px,4.4vw,70px);line-height:1.08;letter-spacing:-.048em;color:#f1f3eb;margin:0}
.vf-hero-copy p{font-size:17px;line-height:1.75;color:#dbe4e0;max-width:540px;margin:24px 0 0}
.vf-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px;margin-top:34px}
.vf-hero-actions .text-link{color:#f1f3eb}
.vf-hero-toggle{position:absolute;right:4.5%;bottom:28px;z-index:2;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 16px;
  border:1px solid rgba(241,243,235,.5);border-radius:999px;background:rgba(3,12,20,.5);color:#f1f3eb;font:13px/1.2 var(--sans,Arial,sans-serif);cursor:pointer}
.vf-hero-toggle:hover{background:rgba(3,12,20,.72)}
.vf-hero-toggle:focus-visible{outline:2px solid #c5d9b7;outline-offset:3px}
@media(max-width:1100px){.vf-hero-copy{width:62%}}
@media(max-width:1000px){.vf-hero{height:calc(100svh - 82px)}}
@media(max-width:720px){
  .vf-hero{height:calc(100svh - 76px);min-height:520px}
  .vf-hero-copy{left:6%;right:6%;width:auto;top:auto;bottom:40px;transform:none}
  .vf-hero-copy h1{font-size:clamp(34px,9.6vw,44px)}
  .vf-hero-copy p{font-size:15px;line-height:1.65;margin-top:16px}
  .vf-hero-actions{margin-top:22px;gap:14px 24px}
  .vf-hero-shade{background:linear-gradient(0deg,rgba(3,12,20,.66) 0%,rgba(3,12,20,.3) 55%,rgba(3,12,20,.06) 100%)}
  .vf-hero-toggle{top:16px;bottom:auto;right:6%}
}
@media(prefers-reduced-motion:reduce){.vf-hero-video{transition:none}}

/* Homepage: Who we are */
.vf-who{padding-bottom:40px}
.vf-who-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:64px;align-items:center}
.vf-who-copy p{font-size:17px;line-height:1.75;color:var(--ink);margin:0 0 18px;max-width:580px}
.vf-who-copy p.intro-copy{font-size:21px;line-height:1.6;margin-bottom:22px}
.vf-who-photo{margin:0}
.vf-who-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
@media(max-width:900px){.vf-who-grid{grid-template-columns:1fr;gap:32px}}
@media(max-width:720px){.vf-who-copy p.intro-copy{font-size:18px}}

/* Our people: standing photos, one head size */
.theme-journey .current-team-layout .person-card img{aspect-ratio:4/5;object-position:50% 0}

/* Investment philosophy: target-market map in the style of the earlier trigatecapital.com/strategy map */
.target-map{margin-top:34px;padding:28px 28px 22px;border:1px solid var(--line,#cdd3c8);background:var(--tint,#e9ece3)}
.tm-img{display:block;width:100%;height:auto}
.tm-list{display:none;list-style:none;margin:18px 0 0;padding:0;font-size:14px;line-height:1.45;color:var(--ink,#183a29)}
.tm-list li{padding:7px 0;border-top:1px solid var(--line,#cdd3c8)}
.tm-list strong{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#58675c)}
@media(max-width:700px){
  .target-map{padding:14px 12px 12px}
  .tm-list{display:grid;grid-template-columns:1fr 1fr;column-gap:18px}
}

/* Logo-cutout intro (alternate homepage at /intro, 2026-10-27): white page, TriGate logo as a window onto the video,
   zoom into the gate, then the header and headline settle in. Active only while html.vf-intro-on is set. */
.vf-intro{position:fixed;inset:0;z-index:70;pointer-events:auto;cursor:default}
.vf-intro-svg{display:block;width:100%;height:100%}
html.vf-intro-on,html.vf-intro-on body{overflow:hidden}
html.vf-intro-on .vf-hero{position:fixed;top:0;left:0;right:0;bottom:0;height:auto;min-height:0;z-index:60;transition:top .75s cubic-bezier(.22,.7,.2,1)}
html.vf-intro-on.vf-intro-settle .vf-hero{top:var(--vf-header-h,94px)}
html.vf-intro-on .vf-hero-copy>*,html.vf-intro-on .vf-hero-toggle{opacity:0;transform:translateY(14px)}
html.vf-intro-on.vf-intro-text .vf-hero-copy>*,html.vf-intro-on.vf-intro-text .vf-hero-toggle{opacity:1;transform:none;transition:opacity .6s ease,transform .75s cubic-bezier(.22,.7,.2,1)}
html.vf-intro-on.vf-intro-text .vf-hero-copy>:nth-child(2){transition-delay:.1s}
html.vf-intro-on.vf-intro-text .vf-hero-copy>:nth-child(3){transition-delay:.2s}
html.vf-intro-on.vf-intro-text .vf-hero-copy>:nth-child(4){transition-delay:.3s}
html.vf-intro-on.vf-intro-text .vf-hero-toggle{transition-delay:.45s}
@media(prefers-reduced-motion:reduce){
  html.vf-intro-on .vf-hero{transition:none}
  html.vf-intro-on .vf-hero-copy>*,html.vf-intro-on .vf-hero-toggle{transform:none}
}
/* Case studies: summary links */
.vf-case-links{display:flex;flex-wrap:wrap;gap:4px 32px;margin-top:24px}
.prose .vf-case-links .text-link{margin-top:0}
/* Investments tour: Continue to property list */
.atlas-playback-controls #atlas-to-list{background:none;border-color:transparent;padding-inline:6px;color:#d1e2d7;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.atlas-playback-controls #atlas-to-list:hover{color:#fff}

/* 29 Oct: Where we invest map legend (target states, target markets, investment locations) */
.tm-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin:16px 0 0;padding:0;list-style:none;font-size:13px;line-height:1.4;color:var(--muted,#58675c)}
.tm-legend li{display:inline-flex;align-items:center;gap:8px}
.tm-legend i{display:inline-block;flex:none;box-sizing:border-box}
.tm-key-state{width:16px;height:11px;background:#1d684b}
.tm-key-city{width:12px;height:12px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1.5px #1d684b}
.tm-key-deal{width:9px;height:9px;border-radius:50%;background:#5fd884;border:1px solid #ecffe0;box-shadow:0 0 0 2px #0e332452}
@media(max-width:700px){.tm-legend{font-size:12px;gap:6px 16px}}

/* 29 Oct: phones. During the property tour the map fills the whole stage (an older rule cut it to the top half of the
   screen, which left the lower half dark between stops). Once the tour starts, the dark band that keeps the opening
   text readable fades out, and a deeper shade at the foot of the stage keeps the tour controls legible over the map. */
@media(max-width:700px){
  .atlas-tour-started #atlas-earth,
  .atlas-tour-started .atlas-cloud-pass,
  .atlas-tour-started .atlas-vignette,
  .atlas-tour-started .atlas-footprint-markers{top:0;right:0;bottom:0;left:0;width:100%;height:100%;max-height:none}
  .atlas-tour-started .atlas-vignette{background:linear-gradient(0deg,#020d1cf0 0%,#020d1ce0 15%,#020d1c00 30%)}
  .atlas-tour-started .atlas-vignette::before{opacity:.12}
}

/* 29 Oct: tablets in portrait and other tall screens wider than a phone. The Investments globe opens below the opening
   text there (atlas-flight.js sets .atlas-open-below and the band positions), so the stage above the US is darkened,
   as on phones, to keep the text readable over the globe. The band fades once the tour starts. */
@media(min-width:701px){
  .atlas-open-below .atlas-vignette::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,#030c14 0,#030c14ed var(--atlas-band-a,30%),
      #030c148c calc(var(--atlas-band-a,30%)*.6 + var(--atlas-band-b,45%)*.4),#030c1433 calc(var(--atlas-band-a,30%)*.28 + var(--atlas-band-b,45%)*.72),
      #030c1400 var(--atlas-band-b,45%));
    transition:opacity .5s ease}
  .atlas-open-below.atlas-tour-started .atlas-vignette::before{opacity:0}
}

/* 29 Oct: "Continue to property list" moves focus to the investments list, so the next Tab reaches the search box and
   filters. The list is not a control itself, so it shows no focus outline (Safari drew a blue box around filters and grid). */
#portfolio:focus{outline:none}

/* 29 Oct: Our firm shows five figures (TriGate, 29 Oct). Wider screens fit them on one row; phones keep two columns. */
@media(min-width:721px){.fact-strip.fact-strip-5{grid-template-columns:repeat(5,1fr)}}

/* 30 Oct: the Privacy Policy and Terms of Use now live on this site; lists inside legal text keep their bullets. */
.legal-copy ul{list-style:disc;margin:0 0 18px;padding-left:1.4em}
.legal-copy li{font-size:16px;line-height:1.8;margin:6px 0}
.legal-copy li ul{margin:6px 0 0}
@media(max-width:720px){.legal-copy li{font-size:15px}}
/* 30 Oct (Jeff): second property photo under the investment snapshot; direct phone and email on profiles. */
.vf-snapshot-photo{margin:34px 0 0}
.vf-snapshot-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.profile-role+.profile-contact{margin-top:-22px}
.profile-contact{display:flex;flex-wrap:wrap;gap:6px 24px;margin:0 0 35px;font-size:16px}
.profile-contact a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
@media(max-width:720px){.vf-snapshot-photo{margin:26px 0 6px}.profile-contact{font-size:15px}}
.split>.investment-facts{align-self:start}
/* 31 Oct: image credits move from the footer panel to one line at the foot of the Investments page. */
#atlas-source-button{display:none}
/* 2 Nov: links to the property list land flush under the header, as "Continue to property list" does. */
#portfolio{scroll-margin-top:-18px}
@media(max-width:720px){#portfolio{scroll-margin-top:-16px}}