/* ==========================================================================
   Mainline Digital Solutions
   Shared stylesheet. Loaded by every page.
   ========================================================================== */

:root{
  color-scheme:only light;
  --teal:#2C6576;
  --teal-deep:#1C4350;
  --teal-light:#5fb3c1;
  --ink:#10171b;
  --ink-soft:#2a3338;
  --paper:#f6f2ea;
  --paper-soft:#efe9dd;
  --gold:#C69A2D;
  --gold-deep:#9E7A22;
  --gold-soft:rgba(198,154,45,0.34);
  --line:rgba(16,23,27,0.12);
  --line-dark:rgba(246,242,234,0.14);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;background:var(--paper);color-scheme:only light;}
body{
  font-family:'Montserrat',sans-serif;
  background:var(--paper);color:var(--ink);
  color-scheme:only light;
  line-height:1.65;font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  border-top:5px solid var(--gold);
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:0.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{background:var(--teal);color:var(--paper);}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:'Cormorant Garamond',serif;font-weight:600;line-height:1.06;letter-spacing:-0.01em;}
.eyebrow{
  font-family:'Montserrat',sans-serif;font-size:0.74rem;font-weight:600;
  letter-spacing:0.26em;text-transform:uppercase;color:var(--teal-deep);
}
.container{max-width:1120px;margin:0 auto;padding:0 32px;}

/* Skip link, keyboard users land here first */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:2000;
  background:var(--teal-deep);color:var(--paper);padding:12px 20px;
  font-size:0.8rem;letter-spacing:0.1em;text-transform:uppercase;
}
.skip-link:focus{left:12px;top:12px;}

/* --------------------------------------------------------------------------
   Scroll progress
   A thin gold gradient at the very top of the viewport, above the nav, that
   fills left to right as the page scrolls. site.js sets --scroll-progress;
   the bar itself just reads it. Home page only.
   -------------------------------------------------------------------------- */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:1200;
  transform-origin:0 50%;transform:scaleX(var(--scroll-progress, 0));
  transition:transform .12s linear;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold) 55%,var(--gold-deep));
  box-shadow:0 0 8px rgba(198,154,45,0.55);
  pointer-events:none;
}
@media(prefers-reduced-motion:reduce){.scroll-progress{transition:none;}}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;padding:22px 32px;
  transition:background .4s ease,padding .4s ease,box-shadow .4s ease;
}
#nav.scrolled{background:rgba(246,242,234,0.9);backdrop-filter:blur(12px);padding:14px 32px;box-shadow:0 1px 0 var(--line);}
.brand{display:flex;align-items:center;gap:11px;}
.brand-mark{width:26px;height:26px;flex:none;}
.nav-links{display:flex;align-items:center;gap:38px;}
.nav-links a.navlink{
  position:relative;font-size:0.78rem;font-weight:400;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--ink-soft);transition:color .25s ease;
}
.nav-links a.navlink:hover{color:var(--teal-deep);}
.nav-links a.navlink.is-active{color:var(--teal-deep);font-weight:500;}
.nav-links a.navlink.is-active::after{
  content:"";position:absolute;left:0;right:0;bottom:-7px;
  height:2px;background:var(--gold);border-radius:2px;
}
a:focus-visible,button:focus-visible{outline:2px solid var(--teal);outline-offset:3px;}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn{
  display:inline-block;font-family:'Montserrat',sans-serif;font-size:0.76rem;font-weight:500;
  letter-spacing:0.1em;text-transform:uppercase;padding:13px 26px;
  border:1px solid var(--teal);background:var(--teal);color:var(--paper);border-radius:2px;
  transition:background .3s ease,color .3s ease,transform .3s ease;cursor:pointer;
}
.btn:hover{background:var(--teal-deep);border-color:var(--teal-deep);transform:translateY(-2px);}
.btn-ghost{background:transparent;color:var(--teal-deep);}
.btn-ghost:hover{background:var(--teal);color:var(--paper);transform:translateY(-2px);}
.btn-deep{background:var(--teal-deep);border-color:var(--teal-deep);color:var(--paper);}
.btn-deep:hover{background:var(--teal);border-color:var(--teal);transform:translateY(-2px);}
.btn-light{border-color:var(--paper);background:var(--paper);color:var(--teal-deep);}
.btn-light:hover{background:transparent;color:var(--paper);}
.nav-toggle{display:none;}

/* --------------------------------------------------------------------------
   Home hero
   -------------------------------------------------------------------------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;}
.rings{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(150vh,150vw);height:min(150vh,150vw);pointer-events:none;z-index:0;}
.rings span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;border:1.5px solid var(--teal);opacity:0;animation:ringpulse 11s ease-out infinite;}
.rings span.gold{border-color:var(--gold);border-width:2px;}
.rings span:nth-child(1){width:18%;height:18%;animation-delay:0s;}
.rings span:nth-child(2){width:36%;height:36%;animation-delay:1.4s;}
.rings span:nth-child(3){width:56%;height:56%;animation-delay:2.8s;}
.rings span:nth-child(4){width:78%;height:78%;animation-delay:4.2s;}
.rings span:nth-child(5){width:100%;height:100%;animation-delay:5.6s;}
@keyframes ringpulse{0%{opacity:0;}16%{opacity:0.45;}72%{opacity:0.12;}100%{opacity:0;}}
.hero-inner{position:relative;z-index:2;max-width:760px;margin:0 auto;text-align:center;}
.hero .eyebrow{display:block;margin-bottom:26px;}
.hero h1{font-size:clamp(3rem,8vw,5.4rem);margin-bottom:28px;color:var(--ink);font-weight:700;}
.grad{color:var(--teal-deep);}
.hero p.lead{font-size:1.12rem;font-weight:400;max-width:500px;color:var(--ink);margin:0 auto 38px;}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;align-items:center;}
.hero .hero-cta{justify-content:center;}
.hero .hero-cta .btn{width:min(500px,100%);padding:20px 26px;font-size:0.95rem;letter-spacing:0.14em;text-align:center;}

/* --------------------------------------------------------------------------
   Interior page header
   Compact counterpart to the home hero, sits under the fixed nav.
   -------------------------------------------------------------------------- */
.page-hero{
  position:relative;overflow:hidden;
  padding:clamp(150px,18vw,190px) 0 clamp(60px,7vw,84px);
  background:var(--paper-soft);
  border-bottom:1px solid var(--line);
}
.page-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--gold),rgba(199,154,46,0));
}
.page-hero-inner{max-width:720px;}
.page-hero .eyebrow{display:block;margin-bottom:18px;}
.page-hero h1{font-size:clamp(2.6rem,6.4vw,4.2rem);color:var(--ink);margin-bottom:20px;}
.page-hero p.lead{font-size:1.05rem;font-weight:300;color:var(--ink-soft);max-width:560px;}
.page-hero .hero-cta{justify-content:flex-start;margin-top:30px;}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
section{position:relative;}
.pad{padding:clamp(72px,9vw,110px) 0;}
.divider{border:none;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);max-width:1120px;margin:0 auto;}
.section-head{max-width:640px;margin-bottom:64px;}
.section-head .eyebrow{display:block;margin-bottom:18px;}
.section-head h2{font-size:clamp(2.2rem,5vw,3.4rem);}
.section-head h2::after{content:"";display:block;width:64px;height:3px;background:var(--gold);margin-top:22px;border-radius:2px;}
.section-head p{font-size:1rem;color:var(--ink-soft);font-weight:300;margin-top:20px;max-width:540px;}
.story .section-head h2::after{background:var(--gold);}

.story{background:var(--ink);color:var(--paper);}
.story .eyebrow{color:var(--teal-light);}
.story .section-head p{color:rgba(246,242,234,0.78);}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:0;}
.pillar{padding:44px 34px 0;border-top:1px solid var(--line-dark);}
.pillar:first-child{padding-left:0;}
.pillar:last-child{padding-right:0;}
.pillar:not(:last-child){border-right:1px solid var(--line-dark);}
.pillar h3{font-size:1.9rem;margin-bottom:14px;color:var(--paper);}
.pillar p{font-size:0.96rem;color:rgba(246,242,234,0.78);font-weight:300;}
.pillar .num{font-family:'Montserrat',sans-serif;font-size:0.72rem;letter-spacing:0.2em;color:var(--teal-light);display:block;margin-bottom:20px;}

.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);}
.svc{background:var(--paper);padding:54px 46px;}
.svc h3{font-size:2.1rem;margin-bottom:10px;}
.svc .svc-sub{font-size:0.8rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--teal-deep);margin-bottom:26px;}
.svc ul{list-style:none;}
.svc li{font-size:0.96rem;color:var(--ink-soft);font-weight:300;padding:11px 0;border-top:1px solid var(--line);display:flex;align-items:center;gap:13px;}
.svc li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--teal);flex:none;}

/* Process steps, used on How We Work */
.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.step{background:var(--paper);padding:40px 38px;}
.step .num{font-family:'Montserrat',sans-serif;font-size:0.72rem;letter-spacing:0.2em;color:var(--teal-deep);display:block;margin-bottom:16px;font-weight:600;}
.step h3{font-size:1.55rem;margin-bottom:10px;}
.step p{font-size:0.94rem;color:var(--ink-soft);font-weight:300;}

/* --------------------------------------------------------------------------
   Founding partner counter
   -------------------------------------------------------------------------- */
.founding{
  position:relative;overflow:hidden;margin-bottom:44px;border-radius:4px;
  padding:44px 46px;color:var(--paper);
  background:radial-gradient(120% 150% at 12% 0%,var(--teal) 0%,var(--teal-deep) 58%,#012f37 100%);
  box-shadow:0 20px 50px rgba(1,63,73,0.18);
}
.founding::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),rgba(199,154,46,0));}
.founding-top{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;}
.founding .eyebrow{color:var(--teal-light);display:block;margin-bottom:16px;}
.founding-count{display:flex;align-items:baseline;gap:14px;}
.founding-num{
  font-family:'Cormorant Garamond',serif;font-weight:700;line-height:0.9;
  font-size:clamp(3.4rem,9vw,5rem);color:var(--gold);
}
.founding-label{font-size:0.95rem;font-weight:300;color:rgba(246,242,234,0.86);max-width:230px;}
.founding-side{text-align:right;}
.founding-claimed{font-size:0.74rem;font-weight:600;letter-spacing:0.22em;text-transform:uppercase;color:rgba(246,242,234,0.6);}
.founding-deadline{font-size:0.92rem;font-weight:400;color:var(--paper);margin-top:8px;}
.founding-deadline[hidden]{display:none;}
.seats{display:flex;flex-wrap:wrap;gap:9px;margin-top:34px;}
.seat{
  width:22px;height:22px;border-radius:2px;flex:none;
  border:1px solid rgba(199,154,46,0.55);background:transparent;
  transform:scale(0.7);opacity:0;transition:transform .34s ease,opacity .34s ease,background .34s ease;
}
.seat.shown{transform:scale(1);opacity:1;}
.seat.taken{background:var(--gold);border-color:var(--gold);}
.founding-foot{margin-top:26px;padding-top:20px;border-top:1px solid var(--line-dark);font-size:0.9rem;font-weight:300;color:rgba(246,242,234,0.72);}
.founding.is-closed .founding-num{color:var(--paper);}
@media (prefers-reduced-motion:reduce){.seat{transition:none;}}

/* Compact founding strip, used on pages other than Pricing */
.founding-strip{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:28px 34px;border-radius:4px;color:var(--paper);
  background:radial-gradient(120% 150% at 12% 0%,var(--teal) 0%,var(--teal-deep) 70%);
}
.founding-strip .fs-text{font-size:1rem;font-weight:300;max-width:560px;}
.founding-strip .fs-text b{font-weight:500;color:var(--gold);}

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.price-card{background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:36px 30px;display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease;}
.price-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(1,63,73,0.10);}
.price-card.featured{border-color:var(--teal);box-shadow:0 14px 36px rgba(1,63,73,0.10);}
.price-name{font-family:'Cormorant Garamond',serif;font-size:1.75rem;font-weight:600;margin-bottom:4px;}
.price-tag{font-size:0.7rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--teal-deep);margin-bottom:22px;}
.price-amt{font-family:'Cormorant Garamond',serif;font-size:2.9rem;font-weight:600;line-height:1;margin-bottom:4px;}
.price-amt small{font-size:0.8rem;font-family:'Montserrat',sans-serif;font-weight:300;color:var(--ink-soft);letter-spacing:0.04em;}
.price-was{font-family:'Montserrat',sans-serif;font-size:0.9rem;font-weight:300;color:var(--ink-soft);text-decoration:line-through;margin-bottom:2px;}
.price-note{font-size:0.66rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold-deep);font-weight:600;margin-top:6px;}
.price-care{margin:20px 0 4px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.price-care .cl{font-size:0.64rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-bottom:6px;}
.price-care .cp{font-size:1.05rem;font-weight:500;color:var(--ink);}
.price-care .cp s{font-size:0.82rem;font-weight:300;color:var(--ink-soft);margin-left:8px;}
.price-scope{font-size:0.74rem;line-height:1.5;color:var(--ink-soft);font-weight:300;border-left:2px solid var(--line);padding-left:12px;margin-top:6px;}
.price-card ul{list-style:none;margin:24px 0 28px;flex:1;}
.price-card li{font-size:0.88rem;color:var(--ink-soft);font-weight:300;padding:8px 0;border-top:1px solid var(--line);}
.price-card .btn{text-align:center;}
.price-foot{margin-top:42px;display:flex;flex-wrap:wrap;gap:14px 48px;justify-content:space-between;align-items:baseline;padding-top:26px;border-top:1px solid var(--line);}
.price-foot .pf{font-size:0.92rem;color:var(--ink-soft);font-weight:300;}
.price-foot .pf b{font-weight:500;color:var(--ink);}
.fineprint{font-size:0.78rem;color:var(--ink-soft);opacity:0.78;margin-top:14px;font-weight:300;}

/* Question and answer blocks */
.qa{max-width:760px;}
.qa-item{padding:26px 0;border-top:1px solid var(--line);}
.qa-item:last-child{border-bottom:1px solid var(--line);}
.qa-item h3{font-size:1.4rem;margin-bottom:8px;}
.qa-item p{font-size:0.95rem;color:var(--ink-soft);font-weight:300;}

/* --------------------------------------------------------------------------
   Closing band
   -------------------------------------------------------------------------- */
.closing{background:linear-gradient(160deg,var(--teal-deep),var(--teal));color:var(--paper);text-align:center;}
.closing h2{font-size:clamp(2.6rem,7vw,5rem);margin-bottom:14px;color:var(--paper);}
.closing .sig-note{font-size:0.78rem;letter-spacing:0.24em;text-transform:uppercase;color:rgba(246,242,234,0.72);margin-bottom:40px;display:block;}
.closing .hero-cta{justify-content:center;}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact-wrap{max-width:680px;}
.contact-form{margin-top:8px;}
.field{margin-bottom:26px;}
.field label{
  display:block;font-family:'Montserrat',sans-serif;font-size:0.72rem;font-weight:600;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--teal-deep);margin-bottom:10px;
}
.field input,.field textarea{
  width:100%;font-family:'Montserrat',sans-serif;font-size:1rem;font-weight:300;
  color:var(--ink);background:transparent;border:none;border-bottom:1px solid var(--line);
  padding:10px 2px;border-radius:0;transition:border-color .3s ease;
}
.field input:focus,.field textarea:focus{outline:none;border-bottom:2px solid var(--teal);}
.field textarea{resize:vertical;min-height:110px;line-height:1.6;}
.field input::placeholder,.field textarea::placeholder{color:rgba(16,23,27,0.35);}
.form-note{font-size:0.86rem;color:var(--ink-soft);font-weight:300;margin-top:18px;}
.contact-form .btn{margin-top:6px;}


/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
footer{background:var(--ink);color:rgba(246,242,234,0.6);padding:54px 0 40px;}
.foot-grid{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px;}
.foot-brand{display:flex;align-items:center;gap:10px;}
.foot-left{display:flex;flex-direction:column;gap:20px;}
.foot-social{display:flex;gap:12px;}
.foot-social a{
  width:38px;height:38px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-dark);color:rgba(246,242,234,0.7);
  transition:color .3s ease,border-color .3s ease,transform .3s ease;
}
.foot-social a:hover{color:var(--gold);border-color:var(--gold);transform:translateY(-2px);}
.foot-social svg{width:17px;height:17px;}
.foot-meta{font-size:0.8rem;font-weight:300;text-align:right;line-height:1.9;}
.foot-meta a:hover{color:var(--teal-light);}
.foot-thread{color:var(--gold);}

/* Footer sitemap, new for the multi-page structure */
.foot-nav{display:flex;flex-wrap:wrap;gap:10px 26px;}
.foot-nav a{
  font-size:0.76rem;letter-spacing:0.1em;text-transform:uppercase;
  color:rgba(246,242,234,0.6);transition:color .25s ease;
}
.foot-nav a:hover{color:var(--gold);}

/* --------------------------------------------------------------------------
   Reveal on scroll
   -------------------------------------------------------------------------- */
html.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);}
html.js .reveal.in{opacity:1;transform:none;}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media(max-width:860px){
  /* The home hero puts a photograph directly beneath the fixed bar, so the
     header carries its own background at all times rather than only on
     scroll. Without it the lockup and the menu button sit on the image. */
  #nav{
    background:rgba(246,242,234,0.94);backdrop-filter:blur(12px);
    box-shadow:0 1px 0 var(--line);padding:14px 32px;
  }
  #nav.menu-open{background:transparent;backdrop-filter:none;box-shadow:none;}
  .nav-links{position:fixed;top:0;right:0;height:100vh;width:74%;max-width:320px;background:var(--ink);flex-direction:column;justify-content:center;gap:30px;transform:translateX(100%);transition:transform .4s ease;padding:40px;}
  .nav-links.open{transform:translateX(0);}
  .nav-links a.navlink{color:var(--paper);font-size:0.95rem;}
  .nav-links a.navlink.is-active{color:var(--gold);}
  .nav-links a.navlink.is-active::after{display:none;}
  .nav-toggle{display:flex;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;z-index:1100;}
  .nav-toggle span{width:24px;height:2px;background:var(--ink);transition:.3s;}
  #nav.menu-open .nav-toggle span{background:var(--paper);}
  .pillars{grid-template-columns:1fr;}
  .pillar,.pillar:not(:last-child){border-right:none;padding:32px 0;}
  .pillar:not(:first-child){padding-left:0;}
  .svc-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .price-grid{grid-template-columns:1fr;}
  .svc{padding:40px 30px;}
  .foot-grid{flex-direction:column;align-items:flex-start;gap:20px;}
  .foot-meta{text-align:left;}
}
@media(max-width:520px){
  .container{padding:0 22px;}
  #nav{padding:18px 22px;}
  .pad{padding:84px 0;}
  .page-hero{padding:128px 0 56px;}
  .hero-cta{flex-direction:column;align-items:stretch;}
  .hero-cta .btn{text-align:center;}
  .price-foot{flex-direction:column;gap:18px;}
  .contact-form .btn{width:100%;text-align:center;}
  .founding{padding:34px 26px;}
  .founding-side{text-align:left;}
  .seat{width:18px;height:18px;}
  .founding-strip{padding:26px 24px;}
  .step{padding:32px 26px;}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important;}.reveal{opacity:1;transform:none;}}

/* --------------------------------------------------------------------------
   Brand lockup
   Mark plus wordmark, gold rule, descriptor. Mirrors the logo artwork so the
   header stays vector and stays sharp at any size.
   -------------------------------------------------------------------------- */
.brand{align-items:center;gap:13px;}
.brand-lock{
  display:flex;flex-direction:column;align-items:stretch;
  line-height:1;text-align:center;
}
.brand-name{font-family:'Cormorant Garamond',serif;font-size:1.42rem;font-weight:600;color:var(--ink);letter-spacing:-0.005em;}
.brand-rule{
  display:block;align-self:stretch;height:1.5px;background:var(--gold);
  margin:4px 0 5px;
}
.brand-desc{
  font-family:'Montserrat',sans-serif;font-size:0.5rem;font-weight:500;
  letter-spacing:0.30em;text-transform:uppercase;color:var(--ink-soft);
}
.foot-brand .brand-name{color:var(--paper);font-size:1.24rem;}
.foot-brand .brand-desc{color:rgba(246,242,234,0.62);}

/* --------------------------------------------------------------------------
   Split home hero
   The photograph is full-bleed behind the whole hero, not just a panel on
   the right. A long cream fade sits over it (translucent, not a solid
   card) so the copy on the left stays readable while the image keeps
   showing through underneath, all the way across the section.
   -------------------------------------------------------------------------- */
.hero-split{
  position:relative;min-height:100vh;display:grid;
  grid-template-columns:1fr 1fr;align-items:center;overflow:hidden;background:var(--paper);
}
.hero-split .hero-copy{
  position:relative;z-index:2;padding:150px 0 90px 0;
  max-width:500px;margin-left:auto;padding-right:90px;
}
.hero-split h1{
  /* The 5.6vw preferred value stops governing below ~770px wide, at which
     point clamp just returns this floor flat -- a 320px phone and a 750px
     tablet would otherwise render the exact same size. Kept low enough to
     read comfortably in the narrow single-column mobile layout. */
  font-size:clamp(2.1rem,5.6vw,4.5rem);margin-bottom:26px;color:var(--ink);font-weight:700;
  text-shadow:0 2px 24px rgba(246,242,234,0.9),0 1px 3px rgba(246,242,234,0.8);
}
.hero-split p.lead{
  font-size:1.06rem;font-weight:400;color:var(--ink-soft);max-width:430px;margin-bottom:38px;
  text-shadow:0 1px 16px rgba(246,242,234,0.9),0 1px 2px rgba(246,242,234,0.85);
}
.hero-split .hero-cta{justify-content:flex-start;}
.hero-photo{
  position:absolute;inset:0;
  background:var(--teal-deep) url("/assets/img/skyline-tiny.webp") center/cover no-repeat;
  overflow:hidden;
}
/* The container's aspect ratio is now close to the source photo's own, so
   object-fit:cover barely needs to crop; this keeps the bridge centred
   rather than favouring either edge. */
.hero-photo img{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:54% 56%;
}
/* Translucent, not solid: the image is meant to show through everywhere,
   but it needs to stay strong across the whole width the copy actually
   occupies (out to ~44% of the hero) for the headline to read clearly,
   easing off only after that, toward the right. */
.hero-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(246,242,234,0.94) 0%,
    rgba(246,242,234,0.9) 24%,
    rgba(246,242,234,0.78) 38%,
    rgba(246,242,234,0.5) 52%,
    rgba(246,242,234,0.22) 66%,
    rgba(246,242,234,0.06) 80%,
    rgba(246,242,234,0) 92%);
}

/* --------------------------------------------------------------------------
   Expanded intake form
   -------------------------------------------------------------------------- */
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.field select{
  width:100%;font-family:'Montserrat',sans-serif;font-size:1rem;font-weight:300;
  color:var(--ink);background:transparent;border:none;border-bottom:1px solid var(--line);
  padding:10px 2px;border-radius:0;transition:border-color .3s ease;
  -webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%232C6576' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 3px center;
}
.field select:focus{outline:none;border-bottom:2px solid var(--teal);}
.field select:invalid{color:rgba(16,23,27,0.35);}
.field-hint{font-size:0.78rem;color:var(--ink-soft);font-weight:300;margin-top:7px;}
.form-legend{
  font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:600;color:var(--ink);
  margin:52px 0 26px;padding-top:30px;border-top:1px solid var(--line);
}
.form-legend:first-of-type{margin-top:8px;padding-top:0;border-top:none;}

/* --------------------------------------------------------------------------
   Social feeds
   Two column strip (Instagram, Facebook). LinkedIn has no live embed worth
   keeping here, so its card was dropped; the footer's LinkedIn icon still
   links out to the Page.
   -------------------------------------------------------------------------- */
.social-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:46px;max-width:760px;margin-left:auto;margin-right:auto;}
.social-card{
  background:var(--paper-soft);border:1px solid var(--line);border-radius:3px;
  overflow:hidden;display:flex;flex-direction:column;
}
.social-head{
  display:flex;align-items:center;gap:11px;padding:18px 20px;
  border-bottom:1px solid var(--line);background:var(--paper);
}
.social-head svg{width:17px;height:17px;color:var(--teal-deep);flex:none;}
.social-handle{
  font-family:'Montserrat',sans-serif;font-size:0.7rem;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--teal-deep);
}
.social-body{flex:1;min-height:500px;display:flex;align-items:stretch;justify-content:center;}
.social-body iframe{width:100%;border:none;overflow:hidden;}
.social-foot{padding:16px 20px;border-top:1px solid var(--line);background:var(--paper);}
.social-foot a{
  font-family:'Montserrat',sans-serif;font-size:0.72rem;font-weight:600;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--teal-deep);
}
.social-foot a:hover{color:var(--gold-deep);}

@media(max-width:900px){
  .social-grid{grid-template-columns:1fr;gap:20px;}
  .social-body{min-height:0;}
}
@media(max-width:860px){
  /* Clearance for the fixed bar lives on the container, so it holds
     regardless of which child renders first. */
  .hero-split{grid-template-columns:1fr;min-height:0;padding-top:68px;}
  .hero-split .hero-copy{
    /* The base rule above sets its own padding-left (0) and padding-right
       (90px) that a mobile override only touching top/bottom would not
       clear, since they don't sit inside a media query themselves. Set
       left/right explicitly here instead of relying on .container's. */
    order:2;max-width:none;margin:0;
    padding:52px 24px 68px;
    text-align:left;
  }
  .hero-photo{
    position:relative;order:1;width:100%;height:44vh;min-height:260px;
    clip-path:ellipse(150% 100% at 50% 0%);
  }
  .hero-photo img{object-position:18% 55%;}
  /* On mobile the photo is a banner stacked above the copy, not behind it,
     so the desktop fade (there to keep the headline readable over the
     image) has no job to do here -- it just dulls the photo. Off. */
  .hero-photo::after{display:none;}
  .field-row{grid-template-columns:1fr;gap:0;}
}