/*
Theme Name: Venn (Hello Elementor Child)
Theme URI: https://www.vennwealth.com
Template: hello-elementor
Author: Venn Wealth & Benefit Services, LLC
Description: Child theme carrying the approved Venn V11 design system. Elementor supplies the content shell; this stylesheet supplies all the styling.
Version: 1.0.0
License: Proprietary — all rights reserved
Text Domain: venn-child
*/

/* ==========================================================================
   HOW THIS WORKS

   Elementor is used as a CONTENT shell, not a design tool. Each section is an
   Elementor Container with a CSS class from this file (hero, start, signup...).
   All spacing, type, colour and layout come from here. Elementor's own style
   controls are left at their defaults.

   Why: the design is already approved, and styling every section through
   Elementor's UI would bloat the page with generated CSS and make the design
   drift on every edit. This way Mike edits words and images in Elementor and
   the design cannot break.

   RULE FOR EDITING: change copy in Elementor. Change design here.
   ========================================================================== */

/* --- Elementor resets ---------------------------------------------------
   Elementor wraps everything in .e-con / .elementor-widget-container with its
   own padding and max-widths. These rules stop that fighting the layout.

   NO !important HERE, DELIBERATELY. This stylesheet loads after Elementor's,
   so a plain rule already beats Elementor's default on an equal-specificity
   tie. With !important it also beat OUR OWN band rules further down the file
   — .section, .start and .quote lost their vertical padding and .narrow lost
   its 900px cap, because the band class sits on the container that carries
   .e-con. Keep these declarations weak so the design rules below can win. */
.elementor-section,.e-con,.e-con-inner{max-width:none;padding:0}
.elementor-widget-container{margin:0!important}
.elementor .elementor-widget:not(:last-child){margin-block-end:0}
.elementor-widget-text-editor p:last-child{margin-bottom:0}
.hello-elementor-page .site-header,.hello-elementor-page .site-footer{display:none}

/* ==========================================================================
   Venn Wealth & Benefit Services, LLC
   V11 — consolidated stylesheet

   The V8, V9 and V10 refinements have been merged into the base rules rather
   than stacked as override blocks. Every value here is the value that was
   actually rendering in V10; nothing was re-tuned. One rule per thing.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root{
  --ink:#111214;
  --ink-deep:#0d0e10;
  --paper:#f7f6f1;
  --gold:#fbd219;
  --muted:#ebe9e2;
  --line:#d4d2ca;
  --sand:#d9d4ca;      /* hero field */
  --clay:#e3ded3;      /* split copy panel */
  --grey:#555;
  --grey-soft:#676862;
  --max:1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.55 Arial,Helvetica,sans-serif;
}
/* width/height attributes are present on images to reserve space and stop
   layout shift; height:auto keeps them from locking the rendered height. */
img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* --- Accessibility ------------------------------------------------------ */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:#fff;padding:14px 20px;font-weight:800;
}
.skip:focus{left:12px;top:12px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
}

/* --- Layout utilities --------------------------------------------------- */
.shell{width:min(var(--max),calc(100% - 48px));margin:auto}
.narrow{max-width:900px}
.center{text-align:center}
.section{padding:105px 0}
.muted{background:var(--muted)}
.dark{background:var(--ink);color:#fff}
.dark .big,.dark p{color:#bbb}

/* --- Typography --------------------------------------------------------- */
h1,h2,h3{
  font-family:Georgia,'Times New Roman',serif;
  font-weight:500;
  line-height:1.03;
  margin:0;
  letter-spacing:-.035em;
}
h1{font-size:clamp(3.5rem,6vw,6.6rem)}
h2{font-size:clamp(2.5rem,4.2vw,4.5rem)}
h3{font-size:1.75rem}
p{margin:0}
.kick{font-size:.75rem;font-weight:900;letter-spacing:.15em;margin-bottom:20px}
.lead{font-size:clamp(1.1rem,1.7vw,1.4rem);color:#444;margin-top:28px;max-width:690px}
.big{font-size:clamp(1.3rem,2vw,1.7rem);color:#50514d;margin-top:28px}

/* --- Buttons ------------------------------------------------------------ */
/* Native button chrome OFF, everywhere.

   A <button> is not a neutral box: the browser paints its own background,
   text colour and border, and those show through in states an author rule
   does not name. On this design it rendered the three Venn labels crimson,
   turned the centre badge crimson after a click, and would have done the
   same to the mobile menu button. appearance:none removes the native widget
   rendering so only the rules below decide how these look.

   Every button in this design belongs on this list. If you add another,
   add it here too and give it an explicit background and colour. */
.btn,.circle,.core,#menu,.topbarBtn,.dialogClose{
  appearance:none;
  -webkit-appearance:none;
}

.btn{
  display:inline-block;
  background:var(--ink);
  color:#fff;
  padding:15px 23px;
  border-radius:999px;
  font-weight:800;
  font-family:inherit;
  font-size:1rem;
  border:0;
  cursor:pointer;
}
.btn:hover{background:#000}
.gold{background:var(--gold);color:var(--ink)}
.gold:hover{background:#e8c30f}

/* --- Utility bar -------------------------------------------------------- */
.topbar{background:var(--ink-deep);color:#cfd0cc;font-size:.8rem}
.topbar .shell{
  display:flex;align-items:center;gap:26px;
  min-height:40px;justify-content:flex-end;
  /* Four items now (Client Login joined the three reference links), so the
     bar has to be allowed to wrap rather than overflow on a narrow screen. */
  flex-wrap:wrap;
}
.topbar a{font-weight:700;white-space:nowrap}
.topbar a:hover{color:var(--gold)}
.topbar .tel{color:#fff}
/* Client Login. A button, not a link, because it opens a dialog rather than
   navigating — but it has to sit in the bar looking like its siblings. The
   gold rule marks it as the action among three pieces of reference info. */
.topbarBtn{
  border:0;background:none;padding:0;cursor:pointer;
  font-family:inherit;font-size:inherit;font-weight:700;
  color:#fff;white-space:nowrap;line-height:1.3;
  border-bottom:2px solid var(--gold);
}
.topbarBtn:hover{color:var(--gold)}

/* Client Login dialog. Shares .dialogHead and .dialogClose with the
   newsletter dialog; only the choice list is specific to it. */
.loginDialog{
  width:min(460px,calc(100% - 40px));
  padding:0;
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--ink);
}
.loginDialog::backdrop{background:rgba(17,18,20,.6)}
.loginChoices{display:grid;gap:1px;background:var(--line);margin:20px 30px 0}
.loginChoices a{display:block;background:var(--paper);padding:20px 22px}
.loginChoices a:hover{background:#fff}
.loginChoices b{display:block;font-size:1.05rem;font-weight:900}
.loginChoices span{display:block;margin-top:6px;font-size:.85rem;line-height:1.5;color:var(--grey)}
.loginNote{margin:18px 30px 26px;font-size:.78rem;line-height:1.5;color:var(--grey-soft)}

/* --- Header ------------------------------------------------------------- */
header{
  height:92px;
  position:sticky;top:0;z-index:50;
  background:rgba(247,246,241,.95);
  backdrop-filter:blur(12px);
  border-bottom:1px solid #ddd;
}
.nav{height:100%;display:flex;align-items:center;justify-content:space-between}
.nav>a img{width:235px;max-height:72px;object-fit:contain}
.nav nav{display:flex;gap:34px;font-weight:700;font-size:.9rem}
.nav nav a{padding-bottom:3px;border-bottom:2px solid transparent}
.nav nav a:hover,.nav nav a[aria-current="page"]{border-bottom-color:var(--gold)}
#menu{display:none;border:0;background:none;font-weight:800;font-family:inherit;font-size:1rem;cursor:pointer;color:var(--ink)}

/* --- Homepage hero ------------------------------------------------------ */
.hero{min-height:790px;position:relative;overflow:hidden;background:var(--sand)}
.hero>img{
  position:absolute;
  inset:0 0 0 39%;
  width:61%;height:100%;
  object-fit:cover;
  /* 30%, not centre. The hero fades its left edge so the headline stays
     readable, and the subject of this photograph sits at 22-40% of the frame
     — centre-cropping put his face under that fade and within ~45px of the
     headline on a 1440px laptop. Biasing the crop leftward moves him clear:
     under 12% tint and 90-150px from the text at every width 1280-1920. */
  object-position:30% center;
}
.hero:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(
    90deg,
    rgba(217,212,202,.99) 0%,
    rgba(217,212,202,.96) 27%,
    rgba(217,212,202,.64) 38%,
    rgba(217,212,202,.12) 50%,
    rgba(217,212,202,0) 64%
  );
}
.hero>.shell{min-height:790px;display:flex;align-items:center;position:relative;z-index:2}
.heroCopy{width:43%;max-width:525px}
.heroCopy .kick{font-size:.66rem;letter-spacing:.145em;color:#202124}
.heroCopy h1{font-size:clamp(2.8rem,4.45vw,4.95rem);line-height:1.01}
.heroCopy .lead{
  font-size:clamp(.98rem,1.15vw,1.08rem);
  line-height:1.52;
  max-width:500px;
  color:#252623;
  font-weight:500;
}
.actions{display:flex;gap:20px;align-items:center;margin-top:30px;font-weight:800;flex-wrap:wrap}
.heroCopy .actions>a:not(.btn){color:#151618;font-weight:900}

/* --- Interactive Venn --------------------------------------------------- */
.vennGrid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center}
.sub{color:#666;margin-top:20px}
.venn{height:610px;position:relative;max-width:100%}
.circle{
  position:absolute;
  width:335px;height:335px;
  border-radius:50%;
  background:rgba(255,255,255,.6);
  border:7px solid var(--ink);
  font-family:inherit;font-size:1rem;font-weight:900;
  text-transform:uppercase;letter-spacing:.05em;
  cursor:pointer;
  transition:background .25s ease;
  /* Buttons do NOT inherit colour from their parent — without this the
     browser supplies its own, which is not reliably black. It rendered
     crimson on two different machines before this line existed. */
  color:var(--ink);
}
/* The circles are <button> elements, so with no hover state of our own the
   browser supplied its own tint. Declared explicitly here: a light neutral
   grey, one step down from --muted so it reads against the paper ground. */
.circle:hover{background:#e5e3dd}
.circle.top{left:50%;top:0;transform:translateX(-50%);border-color:var(--gold)}
/* The side circles push their text outward, away from the centre badge that
   sits between them. Without this the badge covers the first word of the
   right-hand circle. The mobile rules below already did this; desktop did not.

   PIXELS, NOT PERCENTAGES. A percentage padding resolves against the
   CONTAINING BLOCK — .venn, 688px — not against the 335px circle, so 24%
   became 165px and pushed the text clean out of the right-hand circle. */
.circle.left{left:4%;top:225px;padding-right:70px}
.circle.right{right:4%;top:225px;padding-left:70px}
/* Selected beats hover — declared after :hover so it wins the tie. */
.circle.active,.circle.active:hover{background:#fff;z-index:5}
/* The centre badge is a button: clicking it returns the panel to "Start with
   your life". Smaller than it was (140px) so it stops covering the first word
   of the right-hand circle. */
.core{
  position:absolute;z-index:10;
  left:50%;top:59%;transform:translate(-50%,-50%);
  width:112px;height:112px;border-radius:50%;
  background:var(--ink);color:#fff;
  display:grid;place-items:center;text-align:center;
  font-family:inherit;font-size:.95rem;font-weight:900;line-height:1.25;
  border:0;cursor:pointer;
  transition:background .25s ease;
}
/* Every interactive state is declared. Leaving :focus and :active to the
   browser is what let native button chrome show through after a click. */
.core:hover,.core:focus,.core:active{background:#000;color:#fff}
.core:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
#detail{border-left:4px solid var(--gold);padding-left:24px;margin-top:35px;min-height:145px}
#detail p{color:var(--grey);margin-top:12px}
#detail strong{display:block;margin-top:12px}

/* --- Two-up cards ------------------------------------------------------- */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:50px}
.cards>a{height:610px;position:relative;overflow:hidden}
.cards img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.cards>a:hover img{transform:scale(1.03)}
.cards>a:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.9),transparent 65%);
}
.cards>a>div{position:absolute;z-index:2;bottom:34px;left:34px;right:34px;color:#fff}
.cards b{color:var(--gold)}
.cards h3{font-size:2.3rem;margin:8px 0}
.cards p{color:#ddd;margin-bottom:16px}

/* --- Start-here band ---------------------------------------------------- */
.start{background:var(--ink);color:#fff;padding:88px 0}
.start .kick{color:var(--gold)}
.start h2{font-size:clamp(2.1rem,3.4vw,3.4rem);max-width:820px}
.startGrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:52px}
.startGrid article{
  border:1px solid #2c2d30;
  padding:38px 36px 34px;
  display:flex;flex-direction:column;
  background:#161719;
}
.startGrid h3{font-size:1.55rem;margin-bottom:14px}
.startGrid p{color:#b9bab6;flex:1}
.startGrid .btn{align-self:flex-start;margin-top:28px}
/* An ink button would vanish against the dark band, so the secondary action
   is outlined instead. */
.startGrid .btn:not(.gold){background:transparent;border:2px solid #fff;color:#fff}
.startGrid .btn:not(.gold):hover{background:#fff;color:var(--ink)}

/* --- Pull quote --------------------------------------------------------- */
.quote{
  background:var(--gold);
  padding:70px 0;
  font:500 clamp(2rem,3vw,3.5rem)/1.1 Georgia,'Times New Roman',serif;
}

/* --- Photo CTA ---------------------------------------------------------- */
.photoCta{
  min-height:600px;
  background-size:cover;background-position:center;
  display:flex;align-items:center;color:#fff;
}
.photoCta .shell>div{max-width:650px}
.photoCta h2{margin-bottom:32px}
.photoCta p{color:#e2e2de;margin-bottom:32px}

/* --- Split hero (interior pages) ---------------------------------------- */
.split{min-height:700px;display:grid;grid-template-columns:1fr 1fr}
/* Left padding lines the copy up with the .shell gutter so the hero text sits
   on the same axis as everything below it. The RIGHT side must not use the
   same value: on a wide screen the gutter is hundreds of pixels, and applying
   it twice inside a half-width panel squeezed the headline into a column a few
   characters wide. */
.split .copy{
  padding:80px clamp(35px,4vw,80px) 80px max(35px,calc((100vw - var(--max))/2));
  display:flex;flex-direction:column;justify-content:center;
  background:var(--clay);
}
.split .copy h1{font-size:clamp(3.2rem,5vw,5.7rem)}
.split .copy .btn{align-self:flex-start;margin-top:32px}
.split>img{width:100%;height:100%;object-fit:cover}
.employer .copy{background:var(--ink);color:#fff}
.employer .lead{color:#ccc}
.employer .kick{color:var(--gold)}

/* --- Story rows --------------------------------------------------------- */
.stories article{
  display:grid;grid-template-columns:1fr 1fr;
  background:#fff;margin-bottom:28px;min-height:540px;
}
.stories article:nth-child(even) img{order:2}
.stories img{width:100%;height:100%;object-fit:cover}
.stories article>div{padding:60px;display:flex;flex-direction:column;justify-content:center}
.stories article>div>p:last-child{margin-top:22px;color:var(--grey)}

/* --- Paired image/text grids -------------------------------------------- */
.risk,.audit,.about{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.risk>div>p:last-child{margin-top:24px;color:var(--grey);font-size:1.15rem}
.audit img{box-shadow:0 25px 60px #0002}
.about>img{width:100%;height:650px;object-fit:cover;object-position:center top}

/* --- Six questions ------------------------------------------------------ */
.questions{
  display:grid;grid-template-columns:repeat(3,1fr);
  margin-top:50px;border-left:1px solid #333;border-top:1px solid #333;
}
.questions article{padding:35px;min-height:250px;border-right:1px solid #333;border-bottom:1px solid #333}
.questions b{color:var(--gold)}
.questions h3{margin-top:25px}
.questions p{margin-top:15px}

/* --- Beliefs ------------------------------------------------------------ */
.beliefs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#ccc;margin-top:45px}
.beliefs p{background:var(--muted);padding:32px;font-size:1.2rem}

/* --- About: primary profile + team -------------------------------------- */
.primary-profile-name{margin-top:24px}
/* h2, not h3. SEO.md records that the About page's heading jump from H1 to
   H3 was fixed by promoting the profile name to H2, and reference-site does
   emit an h2 — this selector was left behind on h3, so in the WordPress
   build the name rendered as a full-size Georgia h2. */
.primary-profile-name h2{
  font-family:Arial,Helvetica,sans-serif;
  font-size:1.2rem;font-weight:900;letter-spacing:-.01em;
}
.primary-profile-name p{margin-top:5px;color:var(--grey-soft);font-weight:700}

.team{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  margin:50px auto 0;max-width:980px;
}
.team article{background:#fff;padding-bottom:22px;text-align:center}
.team img,.placeholder>div{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top}
.team h3,.team p{margin:18px 20px 0}
.team h3{margin-bottom:0}
.team p{margin-top:5px;color:var(--grey);font-weight:800}
.placeholder>div{display:grid;place-items:center;background:#ddd;font:4rem Georgia,serif;color:#777}

/* --- Employer fiduciary CTA --------------------------------------------- */
.employer-risk-cta{background:var(--ink);color:#fff;padding:82px 0;border-top:1px solid #292a2d}
.employer-risk-cta-inner{display:grid;grid-template-columns:1fr auto;gap:55px;align-items:center}
.employer-risk-cta h2{max-width:760px;font-size:clamp(2.25rem,3.7vw,4rem)}
.employer-risk-cta p:not(.kick){margin-top:18px;color:#b9bab6;max-width:760px;font-size:1.05rem}
.employer-risk-cta .kick{color:var(--gold)}
.employer-risk-cta .btn{max-width:300px;text-align:center}

/* --- Connect page ------------------------------------------------------- */
.connect{min-height:700px;display:flex;align-items:center}
.connectGrid{display:grid;grid-template-columns:1fr .8fr;gap:90px}
.prompt{border-left:4px solid var(--gold);padding-left:20px;margin-top:40px}
.reach{display:grid;gap:6px;margin-top:38px;font-size:1.05rem}
.reach b{font-size:.75rem;font-weight:900;letter-spacing:.15em;margin-bottom:8px}
.reach a{font-weight:700;border-bottom:2px solid var(--gold);display:inline-block}
.reach span{color:var(--grey)}

form{background:#fff;padding:40px;display:grid;gap:18px;border:1px solid var(--line)}
label{font-size:.8rem;font-weight:800}
input,textarea,select{
  display:block;width:100%;margin-top:7px;
  border:0;border-bottom:1px solid #aaa;
  padding:12px;background:#fafafa;font:inherit;
}
textarea{resize:vertical}
form small{color:#6b6c68;font-size:.78rem;line-height:1.5}
form small a{border-bottom:1px solid var(--line)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.78rem;font-weight:400;color:#4a4b48;line-height:1.5}
.consent input{width:auto;margin:3px 0 0;flex:none}
/* The honeypot. Hidden from people, left in the DOM for bots to fill in.
   aria-hidden and tabindex=-1 keep it away from screen readers and the tab
   order, so it costs a real visitor nothing. */
.venn-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.formNote{
  display:none;
  background:var(--muted);
  border-left:4px solid var(--gold);
  padding:16px 18px;
  font-size:.88rem;line-height:1.55;
}
.formNote.show{display:block}
.formNote a{font-weight:800;border-bottom:1px solid var(--line)}

/* --- Newsletter band ---------------------------------------------------- */
/* A short ask: copy on the left, one button on the right. The form itself
   lives in the <dialog> below. It used to sit inline in a two-column grid,
   where — the grid being centre-aligned — the form column set the band
   height and made the band four times taller than the message needed. */
.signup{background:var(--muted);padding:52px 0;border-top:1px solid var(--line)}
.signupBand{display:flex;align-items:center;justify-content:space-between;gap:48px;flex-wrap:wrap}
.signupBand>div{max-width:640px}
.signupBand .btn{flex:none}
.signup h2{font-size:clamp(1.7rem,2.4vw,2.3rem)}
.signup .kick{margin-bottom:14px}
.signup .lead{margin-top:14px;font-size:1rem;max-width:600px}

/* Subscribe dialog -------------------------------------------------------
   A native <dialog>, so the browser supplies the focus trap, Esc-to-close,
   focus return and an inert background. None of that is worth hand-rolling,
   and hand-rolled modals are where keyboard accessibility usually breaks. */
.subscribeDialog{
  width:min(520px,calc(100% - 40px));
  padding:0;
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--ink);
}
.subscribeDialog::backdrop{background:rgba(17,18,20,.6)}
.dialogHead{display:flex;align-items:center;justify-content:space-between;padding:26px 30px 0}
.dialogHead .kick{margin:0}
.dialogClose{
  border:0;background:none;cursor:pointer;line-height:1;
  font-family:Arial,sans-serif;font-size:1.7rem;color:var(--grey);
  padding:0 2px;
}
.dialogClose:hover{color:var(--ink)}
.subscribeDialog form{border:0;background:var(--paper);gap:14px;padding:20px 30px 30px}
.subscribeDialog form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* --- Full-width figure --------------------------------------------------
   For infographics whose text has to stay legible. A detailed chart in a
   half-column is decoration; at full shell width it can actually be read. */
.figure{margin:52px 0 0}
.figure img{width:100%;border:1px solid var(--line)}
.figure figcaption{
  margin-top:18px;font-size:.86rem;line-height:1.6;
  color:var(--grey-soft);max-width:820px;
}

/* --- Brand band ---------------------------------------------------------
   A full-bleed image shown on its own. No gradient, no overlaid type —
   this is used for artwork that already has the logo composed into it. */
.brandBand{display:block;background:var(--sand);line-height:0}
/* Shown uncropped — the mark and its reflection are the composition, so
   cover-cropping this would cut the artwork. */
.brandBand img{width:100%;height:auto}

/* --- Closing CTA -------------------------------------------------------- */
.closing{background:var(--paper);padding:96px 0;border-top:1px solid var(--line)}
.closingGrid{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:center}
.closing h2{font-size:clamp(2.1rem,3.4vw,3.3rem)}
.closing p{color:var(--grey);margin-top:22px;font-size:1.08rem;max-width:560px}
.closing .actions{margin-top:34px}

/* --- Footer ------------------------------------------------------------- */
footer{background:var(--ink-deep);color:#fff;padding:65px 0 25px}
.foot{display:grid;grid-template-columns:1.6fr .9fr 1.1fr;gap:64px}
.foot img{width:210px;background:#fff;padding:8px;border-radius:3px}
.foot p{color:#aaa;margin-top:15px;font-size:.92rem}
.foot a{display:block;color:#bbb;margin-top:10px;font-size:.9rem}
.foot a:hover{color:var(--gold)}
.foot b{color:var(--gold);font-size:.8rem;letter-spacing:.12em;font-weight:900}
.footContact{margin-top:22px;color:#bbb;font-size:.9rem;line-height:1.7}
.footContact a{display:inline;margin:0;color:#fff;font-weight:700}
.footContact a:hover{color:var(--gold)}
.footContact address{font-style:normal;margin-top:10px;color:#9a9b97}

.legal{
  border-top:1px solid #2a2b2e;
  margin-top:52px;padding-top:26px;
  color:#84857f;font-size:.72rem;line-height:1.65;
}
.legal p{color:#84857f;margin-bottom:14px;max-width:1100px}
.legal a{color:#a9aaa4;text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--gold)}
.legalLinks{
  display:flex;flex-wrap:wrap;gap:8px 22px;
  margin-bottom:24px;font-size:.75rem;font-weight:700;
}
.legalLinks a{color:#c2c3bd;text-decoration:none}
.legalLinks a:hover{color:var(--gold)}
.copyright{margin-top:20px;padding-top:18px;border-top:1px solid #1e1f22;color:#6e6f6a}

/* --- Disclosures page --------------------------------------------------- */
.doc{max-width:820px;margin:auto}
.doc h2{font-size:clamp(1.7rem,2.4vw,2.3rem);margin-top:56px}
.doc h2:first-of-type{margin-top:0}
.doc p{margin-top:18px;color:#3c3d3a;font-size:1.02rem;line-height:1.72}
.doc ul{margin-top:18px;padding-left:20px;color:#3c3d3a;line-height:1.72}
.doc li{margin-bottom:10px}
.doc a{border-bottom:2px solid var(--gold);font-weight:700}
.docMeta{
  margin-top:40px;padding:24px 28px;
  background:var(--muted);border-left:4px solid var(--gold);
  font-size:.9rem;color:#4a4b48;
}
.docList{display:grid;gap:2px;margin-top:26px;background:var(--line)}
.docList a{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  background:var(--paper);padding:22px 26px;
  font-weight:800;border-bottom:0;
}
.docList a:hover{background:#fff}
.docList span{font-size:.78rem;font-weight:700;color:var(--grey-soft);white-space:nowrap}

/* --- Responsive: tablet ------------------------------------------------- */
@media(max-width:900px){
  .topbar .shell{justify-content:center;gap:14px 20px;font-size:.76rem;padding:8px 0}
  .nav nav{
    display:none;position:absolute;top:92px;left:0;right:0;
    background:var(--paper);padding:25px;flex-direction:column;
    border-bottom:1px solid #ddd;
  }
  .nav nav.open{display:flex}
  #menu{display:block}

  .hero>img{inset:0;width:100%}
  .hero:after{
    background:linear-gradient(90deg,rgba(217,212,202,.97),rgba(217,212,202,.68) 55%,rgba(217,212,202,.12));
  }
  .heroCopy{width:58%;max-width:560px}

  .vennGrid,.risk,.audit,.about,.connectGrid,.closingGrid{grid-template-columns:1fr}
  .cards,.split,.startGrid{grid-template-columns:1fr}
  .stories article{grid-template-columns:1fr}
  .stories article:nth-child(even) img{order:0}
  .stories img{height:420px}
  .questions{grid-template-columns:1fr 1fr}
  .team{grid-template-columns:1fr 1fr}
  .employer-risk-cta-inner{grid-template-columns:1fr;align-items:start}
  .closingGrid{gap:46px}
  .foot{grid-template-columns:1fr 1fr}
  .foot>div:first-child{grid-column:1/-1}
}

/* --- Responsive: phone -------------------------------------------------- */
@media(max-width:620px){
  .shell{width:calc(100% - 28px)}
  .section{padding:75px 0}
  .topbar .shell{height:auto;padding:9px 0;flex-wrap:wrap;gap:6px 18px}

  /* Venn scales to the viewport instead of forcing a fixed 430px width,
     which is what caused the homepage to scroll sideways on a phone. */
  .venn{width:100%;max-width:430px;margin:0 auto;height:auto;aspect-ratio:43/41}
  .circle{width:52%;height:auto;aspect-ratio:1;border-width:5px;font-size:.72rem;line-height:1.25}
  .circle.top{left:50%;top:0;transform:translateX(-50%);padding-bottom:26%}
  /* The centre badge sits on the vertical midline of the side circles, so
     their labels are padded outward to stay clear of it.

     These percentages resolve against .venn, NOT against the circle. The
     circle is 52% of .venn, so 32% here was 61% of the circle and pushed
     the right-hand label clean outside it. 13% of .venn is a quarter of the
     circle, which is what was meant. */
  .circle.left{left:1%;top:34%;padding-right:13%}
  .circle.right{right:1%;top:34%;padding-left:13%}
  .core{width:19%;height:auto;aspect-ratio:1;font-size:.74rem}

  .heroCopy{width:85%;max-width:none}
  .heroCopy h1{font-size:clamp(2.65rem,12vw,3.7rem)}
  .cards>a{height:500px}
  .questions,.team,.beliefs{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .foot>div:first-child{grid-column:auto}
  .split>img{height:430px}
  .about>img{height:500px}
  .subscribeDialog form .row{grid-template-columns:1fr}
  form{padding:28px}
  .stories article>div{padding:38px 28px}
  .startGrid article{padding:30px 26px}
}

/* A figure used inside a two-column grid cell rather than at full width. */
.sideFigure{margin:0}
.sideFigure img{border:0;box-shadow:0 25px 60px #0002}

/* --- WordPress nav menu support ----------------------------------------
   wp_nav_menu outputs a <ul>, so the flex row moves onto the list. */
.nav nav ul{list-style:none;display:flex;gap:34px;margin:0;padding:0;align-items:center}
.nav nav li{margin:0}
.nav nav li a{display:block}
.nav nav .current-menu-item > a{border-bottom-color:var(--gold)}
@media(max-width:900px){
  .nav nav ul{flex-direction:column;align-items:flex-start;gap:18px}
}

/* ==========================================================================
   ELEMENTOR BRIDGE

   Elementor puts a CSS class on the widget WRAPPER, not on the inner tag it
   renders. So a Text Editor widget with class "lead" produces:

       <div class="elementor-widget lead">
         <div class="elementor-widget-container"><p>...</p></div>
       </div>

   Font size, colour and letter-spacing inherit down to that <p> on their own.
   These rules clear the inner element's own margins and defaults so the result
   matches the reference build. Without this block, Elementor pages will look
   subtly wrong — extra gaps, wrong paragraph spacing.
   ========================================================================== */
.kick p,.lead p,.big p,.sub p{
  margin:0;
  font:inherit;
  color:inherit;
  letter-spacing:inherit;
  line-height:inherit;
}
.elementor-widget.kick{margin-bottom:20px}
.elementor-widget.lead,.elementor-widget.big{margin-top:0}

/* Elementor Heading widget renders the real tag, so h1/h2/h3 rules already
   apply. This just removes the widget's own default.

   DO NOT ADD `font:inherit` HERE. It reads as harmless but `font` is a
   shorthand: it resets size, family, weight and line-height together to
   whatever the widget wrapper inherits, which is 16px Arial body text. A
   class selector also outranks a tag selector, so h1/h2/h3 never got a look
   in and every native Heading widget rendered as body text. Same trap with
   letter-spacing:inherit, which defeated the -.035em on h1,h2,h3. */
.elementor-heading-title{margin:0;color:inherit}

/* Button widget. Put the class btn-el (plus gold if wanted) on the widget. */
.btn-el .elementor-button{
  background:var(--ink);
  color:#fff;
  padding:15px 23px;
  border-radius:999px;
  font-family:inherit;
  font-size:1rem;
  font-weight:800;
  border:0;
  fill:#fff;
}
.btn-el .elementor-button:hover{background:#000;color:#fff}
.btn-el.gold .elementor-button{background:var(--gold);color:var(--ink)}
.btn-el.gold .elementor-button:hover{background:#e8c30f;color:var(--ink)}

/* Image widget wrappers */
.elementor-widget-image figure,.elementor-widget-image img{margin:0}
.elementor-widget-image img{display:block}

/* Elementor's container gap would add space our sections already account for */
.e-con{--gap:0px}