/* =============================================================
   Waverley Private Asset Partners
   A multi-family office, London
   Design system + layout
   ============================================================= */

:root{
  /* Palette */
  --ink:      #171b22;   /* near-black text */
  --navy:     #1d2b40;   /* deep accent */
  --navy-2:   #24374f;
  --slate:    #59616e;   /* muted body text */
  --stone:    #f4f1ea;   /* warm off-white background */
  --paper:    #fbfaf6;   /* card / panel */
  --line:     #e3ded3;   /* hairlines */
  --line-2:   #d3ccbe;
  --gold:     #a2854e;   /* restrained warm accent */
  --gold-2:   #b89a63;
  --white:    #ffffff;

  /* Type */
  --serif: "Cormorant Garamond", "Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Metrics */
  --wrap: 1200px;
  --wrap-narrow: 880px;
  --gutter: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--stone);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:400; letter-spacing:.01em; }

/* Type scale: serif display */
.display{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.04;
  letter-spacing:-.01em;
}
h1.display{ font-size:clamp(2.6rem, 6vw, 5rem); }
h2.display{ font-size:clamp(2rem, 4.2vw, 3.35rem); }
h3.display{ font-size:clamp(1.5rem, 2.6vw, 2.1rem); }

.eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 1.25rem;
}
.eyebrow--muted{ color:var(--slate); }

.lede{
  font-size:clamp(1.15rem, 1.8vw, 1.4rem);
  line-height:1.6;
  color:var(--navy);
}

p{ margin:0 0 1.2rem; color:var(--slate); }
p.tight{ margin-bottom:0; }
strong{ color:var(--ink); font-weight:600; }

/* Layout helpers */
.wrap{ max-width:var(--wrap); margin:0 auto; padding-inline:var(--gutter); }
.narrow{ max-width:var(--wrap-narrow); }
.section{ padding-block:clamp(72px, 10vw, 140px); }
.section--tight{ padding-block:clamp(56px, 7vw, 96px); }
.bg-paper{ background:var(--paper); }
.bg-navy{ background:var(--navy); color:#e9e6df; }
.bg-navy p{ color:#b9c1cd; }
.bg-navy .eyebrow{ color:var(--gold-2); }
.divider{ height:1px; background:var(--line); border:0; margin:0; }

.grid{ display:grid; gap:clamp(28px,4vw,64px); }
.cols-2{ grid-template-columns:repeat(2,1fr); }
.cols-3{ grid-template-columns:repeat(3,1fr); }
.cols-4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:900px){
  .cols-2,.cols-3,.cols-4{ grid-template-columns:1fr; }
  .cols-3.keep-2,.cols-4.keep-2{ grid-template-columns:1fr 1fr; }
}
@media(max-width:560px){ .cols-3.keep-2,.cols-4.keep-2{ grid-template-columns:1fr; } }

/* Buttons / links */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--sans); font-size:.8rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  padding:1.05em 1.9em; border:1px solid var(--ink);
  color:var(--ink); background:transparent;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
  cursor:pointer;
}
.btn:hover{ background:var(--ink); color:var(--stone); }
.btn--light{ border-color:rgba(255,255,255,.5); color:#fff; }
.btn--light:hover{ background:#fff; color:var(--navy); border-color:#fff; }
.btn--solid{ background:var(--ink); color:var(--stone); }
.btn--solid:hover{ background:transparent; color:var(--ink); }

.link-arrow{
  display:inline-flex; align-items:center; gap:.55em;
  font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); padding-bottom:.35em; border-bottom:1px solid var(--line-2);
  transition:gap .3s var(--ease), border-color .3s var(--ease);
}
.link-arrow .ar{ transition:transform .3s var(--ease); color:var(--gold); }
.link-arrow:hover{ gap:.9em; border-color:var(--gold); }
.link-arrow:hover .ar{ transform:translateX(4px); }

/* =========================  HEADER  ========================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(244,241,234,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.site-header.scrolled{ border-color:var(--line); }
.nav{ display:flex; align-items:center; justify-content:space-between; height:82px; }
.brand{ display:flex; flex-direction:row; align-items:center; gap:.7rem; line-height:1; }
.brand__logo{ width:34px; height:34px; flex:0 0 auto; display:block; }
.brand__text{ display:flex; flex-direction:column; line-height:1; }
.brand__mark{
  font-family:var(--serif); font-size:1.5rem; font-weight:600;
  letter-spacing:.02em; color:var(--ink);
}
.brand__sub{
  font-family:var(--sans); font-size:.58rem; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase; color:var(--slate);
  margin-top:.42em;
}
.nav__links{ display:flex; align-items:center; gap:2.4rem; list-style:none; margin:0; padding:0; }
.nav__links a{
  font-size:.8rem; font-weight:500; letter-spacing:.06em; color:var(--navy);
  position:relative; padding:.4em 0;
  transition:color .3s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px;
  background:var(--gold); transition:width .32s var(--ease);
}
.nav__links a:hover,.nav__links a[aria-current="page"]{ color:var(--ink); }
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{ width:100%; }
.nav__cta{ display:flex; align-items:center; gap:1.4rem; }
.nav__login{
  font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--navy); padding:.7em 1.3em; border:1px solid var(--line-2);
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.nav__login:hover{ border-color:var(--ink); color:var(--ink); }
.nav__burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.nav__burger span{ width:24px; height:1.5px; background:var(--ink); transition:.3s var(--ease); }

@media(max-width:1024px){
  .nav__links, .nav__login{ display:none; }
  .nav__burger{ display:flex; }
  .nav__links.open{
    display:flex; position:absolute; top:82px; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:1rem var(--gutter) 1.5rem;
  }
  .nav__links.open li{ width:100%; border-bottom:1px solid var(--line); }
  .nav__links.open a{ display:block; padding:1.1em 0; font-size:.95rem; }
  .nav__links.open a::after{ display:none; }
}

/* =========================  HERO  ========================= */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1200px 600px at 72% -10%, rgba(60,86,120,.28), transparent 60%),
    linear-gradient(160deg, #16202f 0%, #1d2b40 42%, #223650 100%);
  color:#eef0f3;
  min-height:clamp(560px, 88vh, 860px);
  display:flex; align-items:center;
}
.hero__slides{ position:absolute; inset:0; }
.hero__slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity 2.4s var(--ease);
}
.hero__slide.on{ opacity:1; }
.hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(22,32,47,.93) 0%, rgba(29,43,64,.85) 45%, rgba(30,48,72,.70) 100%);
}
.hero::after{ /* subtle grain */
  content:""; position:absolute; inset:0; opacity:.05; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__grid-lines{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:calc(100% / 6) 100%;
}
.hero .wrap{ position:relative; z-index:2; width:100%; padding-block:120px; }
.hero__eyebrow{ color:var(--gold-2); }
.hero h1{ max-width:16ch; color:#f5f6f8; }
.hero__lede{ max-width:52ch; margin-top:1.8rem; color:#c3ccd8; font-size:clamp(1.1rem,1.7vw,1.35rem); line-height:1.6; }
.hero__actions{ margin-top:2.6rem; display:flex; gap:1rem; flex-wrap:wrap; }
.hero__meta{
  position:absolute; left:var(--gutter); right:var(--gutter); bottom:38px; z-index:2;
  display:flex; justify-content:space-between; gap:1rem;
  border-top:1px solid rgba(255,255,255,.14); padding-top:20px;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:#8f9bab;
}
.hero__meta span{ color:#c3ccd8; }
@media(max-width:700px){ .hero__meta{ display:none; } }

/* =========================  Photo bands  ========================= */
.photo-band{ margin:0; position:relative; }
.photo-band img{
  width:100%; height:clamp(300px, 44vw, 540px);
  object-fit:cover; display:block;
  filter:saturate(.78) contrast(1.02);
}
.photo-band figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:80px var(--gutter) 22px;
  background:linear-gradient(to top, rgba(23,27,34,.55), transparent);
  color:#e9e6df; font-size:.7rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
}

/* =========================  Content blocks  ========================= */
.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-block:1px solid var(--line); }
.stat{ background:var(--stone); padding:clamp(28px,4vw,48px) clamp(20px,3vw,36px); }
.stat__num{ font-family:var(--serif); font-size:clamp(2.4rem,4vw,3.4rem); font-weight:500; color:var(--navy); line-height:1; }
.stat__label{ margin-top:.9rem; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); }
@media(max-width:820px){ .stat-row{ grid-template-columns:1fr 1fr; } }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,88px); align-items:center; }
.split--wide-text{ grid-template-columns:1.05fr .95fr; }
@media(max-width:860px){ .split,.split--wide-text{ grid-template-columns:1fr; gap:36px; } }

.rule-list{ list-style:none; margin:1.5rem 0 0; padding:0; }
.rule-list li{ padding:1.15rem 0; border-top:1px solid var(--line); color:var(--ink); display:flex; gap:1rem; align-items:baseline; }
.rule-list li:last-child{ border-bottom:1px solid var(--line); }
.rule-list .idx{ font-family:var(--serif); font-size:1.1rem; color:var(--gold); min-width:2.2em; }

/* Service cards */
.svc{ background:var(--paper); border:1px solid var(--line); padding:clamp(28px,3vw,42px); display:flex; flex-direction:column; min-height:100%; transition:border-color .4s var(--ease), transform .4s var(--ease); }
.svc:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.svc__num{ font-family:var(--serif); font-size:1.05rem; color:var(--gold); letter-spacing:.05em; }
.svc h3{ margin:1.4rem 0 1rem; font-family:var(--serif); font-size:1.55rem; font-weight:500; }
.svc p{ font-size:.98rem; margin-bottom:1.6rem; }
.svc .link-arrow{ margin-top:auto; }

/* Team: grouped, Wren-style member rows */
.team-list{ max-width:1040px; margin-inline:auto; }
.team-group + .team-group{ margin-top:clamp(52px,7vw,96px); }
.team-group__label{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding-bottom:1.1rem; border-bottom:1px solid var(--ink); margin-bottom:.5rem; }
.team-group__label .eyebrow{ margin:0; }
.team-group__label .count{ font-family:var(--serif); font-size:1.1rem; color:var(--slate); }
.member{ display:grid; grid-template-columns:300px 1fr; gap:clamp(28px,4vw,56px); align-items:start; padding:clamp(32px,4vw,48px) 0; border-top:1px solid var(--line); }
.team-group .member:first-of-type{ border-top:0; }
.member__photo{ overflow:hidden; background:var(--line); aspect-ratio:1/1; }
.member__photo img{ width:100%; height:100%; object-fit:cover; object-position:center top; filter:grayscale(1) contrast(1.02); transition:filter .6s var(--ease), transform 1.2s var(--ease); }
.member:hover .member__photo img{ filter:grayscale(0); transform:scale(1.03); }
.member__name{ font-family:var(--serif); font-size:1.75rem; font-weight:500; }
.member__role{ margin-top:.4rem; font-style:italic; color:var(--gold); font-size:1.02rem; }
.member__bio{ margin-top:1.25rem; }
.member__bio p{ font-size:.98rem; }
.member__email{ display:inline-flex; align-items:center; gap:.5em; margin-top:.4rem; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); border-bottom:1px solid var(--line-2); padding-bottom:.3em; }
.member__email:hover{ border-color:var(--gold); }
@media(max-width:680px){ .member{ grid-template-columns:1fr; gap:18px; } .member__photo{ max-width:240px; } }

/* Team (legacy card grid, still used elsewhere) */
.person{ }
.person__photo{ position:relative; overflow:hidden; background:var(--line); aspect-ratio:1/1; }
.person__photo img{ width:100%; height:100%; object-fit:cover; object-position:center top; filter:grayscale(1) contrast(1.02); transition:filter .6s var(--ease), transform 1.2s var(--ease); }
.person:hover .person__photo img{ filter:grayscale(0); transform:scale(1.03); }
.person__name{ margin-top:1.35rem; font-family:var(--serif); font-size:1.4rem; font-weight:500; }
.person__role{ margin-top:.35rem; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); }
.person__bio{ margin-top:1rem; font-size:.94rem; color:var(--slate); }

/* Insights */
.article{ display:block; border-top:1px solid var(--line); padding:2.2rem 0; transition:padding-left .4s var(--ease); }
.article:hover{ padding-left:12px; }
.article:last-child{ border-bottom:1px solid var(--line); }
.article__meta{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--slate); display:flex; gap:1.2rem; }
.article__meta .cat{ color:var(--gold); }
.article h3{ margin:1rem 0 .8rem; font-family:var(--serif); font-size:clamp(1.5rem,2.4vw,2rem); font-weight:500; max-width:26ch; }
.article p{ max-width:60ch; margin-bottom:1.1rem; }

/* Pull quote */
.quote{ text-align:center; max-width:24ch; margin:0 auto; }
.quote blockquote{ margin:0; font-family:var(--serif); font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.2; font-weight:500; color:#f2efe8; }
.bg-navy .quote blockquote{ color:#f2efe8; }
.quote cite{ display:block; margin-top:2rem; font-style:normal; font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-2); }

/* Page header (interior pages) */
.pagehead{ padding-top:clamp(80px,10vw,150px); padding-bottom:clamp(40px,5vw,70px); }
.pagehead h1{ max-width:18ch; }
.pagehead .lede{ max-width:56ch; margin-top:1.6rem; }
.breadcrumb{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--slate); margin-bottom:1.6rem; }
.breadcrumb a{ color:var(--slate); }
.breadcrumb a:hover{ color:var(--ink); }

/* Definition rows (about/approach) */
.defrow{ display:grid; grid-template-columns:.4fr 1fr; gap:clamp(24px,4vw,72px); padding:clamp(32px,4vw,52px) 0; border-top:1px solid var(--line); }
.defrow:last-child{ border-bottom:1px solid var(--line); }
.defrow__k{ font-family:var(--serif); font-size:1.4rem; color:var(--navy); }
.defrow__k small{ display:block; font-family:var(--sans); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:.6rem; }
@media(max-width:760px){ .defrow{ grid-template-columns:1fr; gap:14px; } }

/* Contact */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,80px); }
@media(max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }
.field{ margin-bottom:1.4rem; }
.field label{ display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--slate); margin-bottom:.6rem; }
.field input,.field textarea,.field select{
  width:100%; font-family:var(--sans); font-size:1rem; color:var(--ink);
  padding:.95em 1.1em; background:var(--white); border:1px solid var(--line-2);
  transition:border-color .3s var(--ease);
}
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--navy); }
.contact-detail{ padding:1.4rem 0; border-top:1px solid var(--line); }
.contact-detail:first-of-type{ border-top:0; }
.contact-detail .k{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--slate); margin-bottom:.5rem; }
.contact-detail .v{ font-size:1.05rem; color:var(--ink); }

/* Login page */
.login-wrap{ min-height:calc(100vh - 82px); display:grid; grid-template-columns:1fr 1fr; }
.login-aside{ background:linear-gradient(160deg,#16202f,#223650); color:#dfe4ea; padding:clamp(40px,6vw,90px); display:flex; flex-direction:column; justify-content:space-between; }
.login-main{ display:flex; align-items:center; justify-content:center; padding:clamp(32px,6vw,80px); }
.login-card{ width:100%; max-width:400px; }
.login-note{ margin-top:1.6rem; font-size:.8rem; color:var(--slate); border-top:1px solid var(--line); padding-top:1.2rem; }
@media(max-width:820px){ .login-wrap{ grid-template-columns:1fr; } .login-aside{ display:none; } }

/* =========================  FOOTER  ========================= */
.site-footer{ background:var(--ink); color:#aab2be; padding-block:clamp(56px,7vw,88px) 40px; font-size:.9rem; }
.footer-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:clamp(28px,4vw,48px); padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.1); }
@media(max-width:860px){ .footer-top{ grid-template-columns:1fr 1fr; gap:36px; } }
@media(max-width:520px){ .footer-top{ grid-template-columns:1fr; } }
.footer-brand__lockup{ display:flex; align-items:center; gap:.65rem; }
.footer-brand__logo{ width:30px; height:30px; flex:0 0 auto; display:block; }
.footer-brand__mark{ font-family:var(--serif); font-size:1.6rem; color:#f2efe8; }
.footer-brand p{ color:#8b93a1; font-size:.92rem; max-width:34ch; margin-top:1.2rem; }
.footer-col h4{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:#6f7885; margin-bottom:1.2rem; font-weight:600; }
.footer-col ul{ list-style:none; margin:0; padding:0; }
.footer-col li{ margin-bottom:.75rem; }
.footer-col a{ color:#aab2be; transition:color .3s var(--ease); }
.footer-col a:hover{ color:#f2efe8; }
.footer-bottom{ display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; padding-top:32px; color:#6f7885; font-size:.78rem; }
.footer-bottom a{ color:#6f7885; }
.footer-bottom a:hover{ color:#aab2be; }
.footer-legal{ margin-top:28px; color:#5c6470; font-size:.74rem; line-height:1.7; max-width:80ch; }

/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
@media(prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero__slide{ transition:none; }
  *{ scroll-behavior:auto; }
}