/* ============================================================
   Penteli Capital — site.css
   Palette and geometry measured from the investor deck
   (202609_Penteli introduction_vShared.pdf). Do not substitute
   approximate greys: --surface is cool-tinted by design.
   ============================================================ */

:root{
  /* Brand ------------------------------------------------- */
  --navy:        #051640;  /* primary: headings, title bars   */
  --card-navy:   #1F4E79;  /* Yannis block / bar 2            */
  --card-blue:   #2F5597;  /* Stavros block / bar 3           */
  --surface:     #F5F6FA;  /* the real "light grey" (cool)    */
  --hairline:    #D1D5DB;  /* deck's most-used rule colour    */

  /* Text -------------------------------------------------- */
  --body:        #555555;  /* body copy            7.5:1  AAA */
  --slate:       #8B95A5;  /* large/decorative     3.0:1  !!  */
  --slate-ink:   #6B7688;  /* small caption text   4.6:1  AA  */
  --white:       #FFFFFF;

  /* Hero -------------------------------------------------- */
  --hero-lqip:   #343749;  /* tinted dominant colour, prevents flash */

  /* Type scale — FIVE sizes, nothing else. Every font-size in this
     file must reference one of these tokens.
       hero   headline
       title  section titles, the About statement, page h1s
       item   card and item titles, names
       body   running text, form fields
       small  labels, captions, legal, nav, buttons              */
  --fs-hero:  clamp(32px, 5.6vw, 62px);
  --fs-title: clamp(26px, 3.2vw, 40px);
  --fs-item:  20px;
  --fs-body:  clamp(17px, 1.05vw, 18px);
  --fs-small: 14px;

  --measure:  60ch;          /* one reading measure, used everywhere */

  /* Measure ----------------------------------------------- */
  --gutter:      clamp(20px, 5.2vw, 88px);   /* deck margin   */
  --maxw:        1240px;
  --rule-w:      clamp(28px, 3vw, 44px);     /* 29/960 = 3.0% */
  --bar-w:       5px;                        /* 4.7/960       */
  --section-y:   clamp(72px, 11vw, 148px);

  --ease:        cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font:400 var(--fs-body)/1.6 Arial,Helvetica,sans-serif;
  color:var(--body);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,figure,blockquote{margin:0}
a{color:inherit}
:where(a,button,input,textarea,summary):focus-visible{
  outline:2px solid var(--card-blue);
  outline-offset:3px;
  border-radius:1px;
}

/* ---------- helpers ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
/* <hr> takes a grey colour from the UA stylesheet, so currentColor never
   inherits from the parent. color:inherit is what makes the hero rule white. */
.rule{width:var(--rule-w);height:1px;border:0;color:inherit;background:currentColor;margin:0 0 22px}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--navy);color:#fff;padding:14px 20px}
.skip:focus{left:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.h2{
  font-size:var(--fs-title);
  font-weight:700;color:var(--navy);
  letter-spacing:-.015em;line-height:1.18;
  margin:0 0 clamp(28px,3.6vw,52px);
}

/* ---------- logo ---------- */
.logo{display:inline-flex;align-items:center;color:inherit;text-decoration:none}
.logo svg{height:17px;width:auto}
@media (min-width:700px){.logo svg{height:19px}}

/* ============================================================
   HEADER — white over hero, solid white + navy once scrolled.
   Logo stays LEFT in both states so it never jumps on scroll.
   ============================================================ */
.hdr{
  position:fixed;inset:0 0 auto;z-index:50;
  color:var(--white);
  transition:background-color .32s var(--ease),color .32s var(--ease),box-shadow .32s var(--ease);
}
.hdr__in{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;min-height:76px;
}
.hdr.is-solid{
  background:var(--white);color:var(--navy);
  box-shadow:0 1px 0 var(--hairline);
}
.nav{display:none;gap:clamp(22px,2.6vw,40px)}
@media (min-width:860px){.nav{display:flex}}
.nav a{
  font-size:var(--fs-small);font-weight:700;text-decoration:none;
  letter-spacing:.01em;padding:6px 0;position:relative;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease);
}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
.nav a[aria-current="true"]::after{transform:scaleX(1);opacity:.45}

/* burger */
.burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 9px;margin-right:-9px;
  background:none;border:0;cursor:pointer;color:inherit;
  /* Buttons default to 13.3333px in Chrome. Without this the visually-hidden
     label inside introduced a sixth size on phone and tablet. */
  font:700 var(--fs-small)/1 Arial,Helvetica,sans-serif;
}
@media (min-width:860px){.burger{display:none}}
.burger span{height:2px;background:currentColor;transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.drawer{
  position:fixed;inset:76px 0 auto;z-index:49;
  background:var(--white);border-top:1px solid var(--hairline);
  display:grid;overflow:hidden;
  grid-template-rows:0fr;transition:grid-template-rows .34s var(--ease);
}
.drawer[data-open="true"]{grid-template-rows:1fr}
body.is-locked{overflow:hidden}
.drawer__in{min-height:0}
.drawer a{
  display:block;padding:17px var(--gutter);
  color:var(--navy);font-weight:700;text-decoration:none;
  border-bottom:1px solid var(--hairline);
}
@media (min-width:860px){.drawer{display:none}}

/* ============================================================
   HERO
   The photograph is supplied untreated (warm, golden hour). The navy of the
   deck cover is reproduced here in CSS, not baked into the file.

   Measured, not guessed: aligning the deck's cover image against this original
   gives a correlation of 0.991, and solving  deck = photo*(1-a) + #051640*a
   across 3,072 sample points gives a = 0.659 (p25 0.615, p75 0.676). So a flat
   66% #051640 reproduces the deck's shade. A slight extra deepening toward the
   bottom-left carries the headline, as the brief asks.
   ============================================================ */
.hero{position:relative;isolation:isolate;background:var(--hero-lqip);min-height:100svh;display:flex}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to top right,
      rgba(5,22,64,.16) 0%, rgba(5,22,64,.06) 38%, rgba(5,22,64,0) 72%),
    rgba(5,22,64,.66);
}
.hero__in{
  align-self:flex-end;width:100%;
  padding-block:clamp(96px,16vh,190px) clamp(64px,11vh,120px);
  color:var(--white);
}
.hero h1{
  font-size:var(--fs-hero);font-weight:700;
  line-height:1.1;letter-spacing:-.02em;
  max-width:20ch;margin:0 0 clamp(16px,2vw,22px);
}
/* One sentence per line, as on the deck cover. Explicit beats text-wrap:balance,
   which split this into three ragged lines at desktop widths. */
.hero h1 span{display:block}
.hero__sub{
  font-size:var(--fs-body);line-height:1.55;
  max-width:var(--measure);margin:0 0 clamp(30px,4vw,44px);
  color:rgba(255,255,255,.94);
}
.btn{
  display:inline-block;padding:15px 34px;
  font:700 var(--fs-small)/1 Arial,Helvetica,sans-serif;letter-spacing:.02em;
  color:var(--white);text-decoration:none;
  border:1px solid rgba(255,255,255,.85);background:transparent;
  cursor:pointer;
  transition:background-color .26s var(--ease),color .26s var(--ease),border-color .26s var(--ease);
}
.btn:hover,.btn:focus-visible{background:var(--white);color:var(--navy);border-color:var(--white)}

/* ============================================================
   ABOUT — one statement, no title, wide margins
   ============================================================ */
.about{padding-block:var(--section-y)}
.about p{
  font-size:var(--fs-title);line-height:1.45;
  font-weight:400;color:var(--navy);letter-spacing:-.012em;
  max-width:var(--measure);text-wrap:pretty;
}
.about .rule{color:var(--card-blue);margin-bottom:30px}

/* ============================================================
   WHAT WE DO — cards on --surface, 5px left bar.
   Bars run navy -> card-navy -> card-blue (tonal progression).
   ============================================================ */
.do{background:var(--surface);padding-block:var(--section-y)}
.cards{display:grid;gap:clamp(16px,2vw,26px);grid-template-columns:1fr}
@media (min-width:820px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{
  background:var(--white);
  border-left:var(--bar-w) solid var(--bar,var(--navy));
  box-shadow:0 1px 2px rgba(5,22,64,.045), 0 8px 22px rgba(5,22,64,.055);
  padding:clamp(26px,2.8vw,36px) clamp(22px,2.4vw,34px);
}
.card:nth-child(1){--bar:var(--navy)}
.card:nth-child(2){--bar:var(--card-navy)}
.card:nth-child(3){--bar:var(--card-blue)}
.card h3{font-size:var(--fs-item);font-weight:700;color:var(--navy);margin:0 0 12px;letter-spacing:-.005em}
.card p{margin:0;font-size:var(--fs-body);line-height:1.62}

/* ============================================================
   OUR EDGE — three items on white, hairline separated
   ============================================================ */
.edge{padding-block:var(--section-y)}
.edge__list{display:grid;gap:0;grid-template-columns:1fr}
@media (min-width:820px){
  .edge__list{grid-template-columns:repeat(3,1fr);gap:clamp(28px,3.4vw,56px)}
}
.edge__item{padding:28px 0;border-top:1px solid var(--hairline)}
@media (min-width:820px){.edge__item{padding:30px 0 0}}
.edge__item h3{font-size:var(--fs-item);font-weight:700;color:var(--navy);margin:0 0 10px}
.edge__item p{margin:0;font-size:var(--fs-body);line-height:1.62}

/* ============================================================
   TEAM — deck geometry:
   block 267x146 (1.83:1) · frame 117x114 = 78% of block height,
   vertically centred · photo overlaps block's left edge by 35%
   of its own width (65% protrudes outside).
   The frame is a separate element BEHIND the image, so dropping
   in a transparent cut-out PNG makes the sitter break the frame
   with no CSS change.
   ============================================================ */
.team{background:var(--surface);padding-block:var(--section-y)}
.team__grid{display:grid;gap:clamp(44px,5vw,64px);grid-template-columns:1fr}
@media (min-width:880px){.team__grid{grid-template-columns:repeat(2,1fr)}}

.person{--photo-w:clamp(104px,11.5vw,136px);--protrude:calc(var(--photo-w)*.65)}
.person__block{
  position:relative;
  margin-left:var(--protrude);
  background:var(--block,var(--card-navy));
  /* The deck's 267x146 block is a MINIMUM, not a cap: the email line can push
     the card taller at some widths, and clipping it would be worse than a
     slightly deeper block. */
  aspect-ratio:267/146;
  height:auto;
  min-height:fit-content;
  display:flex;flex-direction:column;justify-content:center;gap:clamp(10px,1.1vw,15px);
  padding:clamp(20px,2.2vw,28px) clamp(20px,2.2vw,30px)
          clamp(20px,2.2vw,28px) calc(var(--photo-w)*.35 + clamp(18px,2vw,30px));
  color:var(--white);
}
.person:nth-child(1) .person__block{--block:var(--card-navy)}
.person:nth-child(2) .person__block{--block:var(--card-blue)}
@media (max-width:519px){
  .person__block{aspect-ratio:auto;min-height:calc(var(--photo-w)*1.18 + 36px)}
}
/* The frame is the deck's thin white square. The cut-out sits IN FRONT of it and
   is deliberately taller, so the sitter breaks the frame's top edge — the
   "steps out of the frame" effect in the brief. Both portraits use the same
   box and the same source framing, so their crop ratio matches exactly. */
.person__media{
  position:absolute;left:calc(-1 * var(--protrude));top:50%;
  transform:translateY(-50%);
  width:var(--photo-w);aspect-ratio:117/114;
}
.person__frame{position:absolute;inset:0;border:1px solid rgba(255,255,255,.9)}
.person__media picture{display:contents}
.person__media img{
  position:absolute;left:50%;bottom:0;
  width:118%;height:auto;
  transform:translateX(-50%);
  object-fit:contain;              /* never crop a cut-out */
}
.person__name{font-size:var(--fs-item);font-weight:700;line-height:1.2;margin:0}
.person__role,.person__where{font-size:var(--fs-small);font-weight:700;line-height:1.25;margin:0}
.person__where{color:rgba(255,255,255,.88)}
.person__bio{
  margin:22px 0 0;font-size:var(--fs-body);line-height:1.62;color:var(--body);
  max-width:var(--measure);
}
.person__li{
  display:inline-flex;align-items:center;gap:7px;margin-top:4px;
  font-size:var(--fs-small);font-weight:700;color:rgba(255,255,255,.9);text-decoration:none;
}
.person__li:hover{color:#fff}
.person__li svg{width:14px;height:14px;fill:currentColor}
.person__mail{
  display:block;margin-top:6px;
  font-size:var(--fs-small);font-weight:700;line-height:1.3;
  color:rgba(255,255,255,.9);text-decoration:none;
  overflow-wrap:anywhere;
}
.person__mail:hover,.person__mail:focus-visible{color:#fff;text-decoration:underline}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{padding-block:var(--section-y)}
.contact__grid{display:grid;gap:clamp(40px,5vw,72px);grid-template-columns:1fr}
@media (min-width:880px){.contact__grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}}
.contact__lead{font-size:var(--fs-body);margin:0 0 clamp(26px,3vw,38px);color:var(--body)}

.field{margin-bottom:20px}
.field label{
  display:block;font-size:var(--fs-small);font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--slate-ink);margin-bottom:8px;
}
.field .opt{font-weight:400;text-transform:none;letter-spacing:0}
.field input,.field textarea{
  width:100%;font:400 var(--fs-body)/1.5 Arial,Helvetica,sans-serif;color:var(--navy);
  padding:13px 15px;background:var(--white);
  border:1px solid var(--hairline);border-radius:0;
  transition:border-color .2s var(--ease);
}
.field input:hover,.field textarea:hover{border-color:var(--slate)}
.field input:focus,.field textarea:focus{border-color:var(--card-blue)}
.field textarea{min-height:132px;resize:vertical}

/* honeypot — hidden from people, still in the DOM for bots */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.consent{display:flex;gap:12px;align-items:flex-start;margin:26px 0 24px}
.consent input{flex:0 0 auto;width:18px;height:18px;margin-top:2px;accent-color:var(--navy)}
.consent label{font-size:var(--fs-small);line-height:1.55;color:var(--slate-ink)}
.consent a{color:var(--navy)}

.btn--solid{
  background:var(--navy);color:var(--white);border-color:var(--navy);
  padding:15px 40px;
}
.btn--solid:hover,.btn--solid:focus-visible{background:var(--card-navy);border-color:var(--card-navy);color:#fff}
.btn--solid[disabled]{opacity:.55;cursor:not-allowed}

.formnote{margin-top:18px;font-size:var(--fs-small);line-height:1.55;display:none}
.formnote[data-state="ok"]{display:block;color:var(--navy);font-weight:700}
.formnote[data-state="err"]{display:block;color:#9B2C2C;font-weight:700}

.details{border-top:1px solid var(--hairline);padding-top:26px}
.details h3{font-size:var(--fs-small);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--slate-ink);margin:0 0 10px}
.details p{margin:0 0 26px;font-size:var(--fs-body);line-height:1.62}
.details a{color:var(--navy);font-weight:700;text-decoration:none;border-bottom:1px solid var(--hairline)}
.details a:hover{border-color:var(--navy)}

/* ============================================================
   FOOTER
   ============================================================ */
.ftr{background:var(--navy);color:var(--white);padding-block:clamp(48px,6vw,76px)}
.ftr__top{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.ftr__links{display:flex;gap:26px;font-size:var(--fs-small)}
.ftr__links a{color:rgba(255,255,255,.9);text-decoration:none}
.ftr__links a:hover{color:#fff;text-decoration:underline}
.ftr hr{border:0;border-top:1px solid rgba(255,255,255,.18);margin:clamp(28px,3.4vw,44px) 0}
.ftr__legal{display:flex;flex-wrap:wrap;gap:14px 32px;justify-content:space-between;align-items:baseline}
.ftr__disc{font-size:var(--fs-small);line-height:1.6;color:rgba(255,255,255,.72);max-width:var(--measure);margin:0}
.ftr__copy{font-size:var(--fs-small);color:rgba(255,255,255,.72);margin:0;white-space:nowrap}

/* ============================================================
   MOTION — one fade/rise on entry, nothing else
   ============================================================ */
/* Only hide when JS is running. Without it, everything renders as normal
   static content rather than an empty white page. */
.js .rise{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .rise.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .rise{opacity:1;transform:none;transition:none}
  .hdr,.btn,.nav a::after,.drawer{transition:none}
}

/* ============================================================
   LEGAL PAGE
   ============================================================ */
.legal{padding-block:clamp(120px,14vw,180px) var(--section-y)}
.legal h1{font-size:var(--fs-title);font-weight:700;color:var(--navy);margin:0 0 8px;letter-spacing:-.018em}
.legal .updated{color:var(--slate-ink);font-size:var(--fs-small);margin:0 0 clamp(34px,4vw,52px)}
.legal__body{max-width:var(--measure)}
.legal__body h2{font-size:var(--fs-item);font-weight:700;color:var(--navy);margin:clamp(34px,3.8vw,50px) 0 12px}
.legal__body h3{
  font-size:var(--fs-item);font-weight:700;color:var(--navy);
  margin:clamp(24px,2.6vw,34px) 0 10px;letter-spacing:-.005em;
}
.legal__body h2 + h3{margin-top:clamp(18px,2vw,24px)}
.legal__body p,.legal__body li{font-size:var(--fs-body);line-height:1.65;margin:0 0 14px}
.legal__body ul{padding-left:22px;margin:0 0 14px}
.mailto{color:var(--navy);font-weight:700;overflow-wrap:anywhere}
a.mailto{text-decoration:none;border-bottom:1px solid var(--hairline)}
a.mailto:hover,a.mailto:focus-visible{border-color:var(--navy)}
.nowrap{white-space:nowrap}
.legal__back{margin-top:44px}
.legal__back a{color:var(--navy);font-weight:700}

@media print{.hdr,.drawer,.burger{display:none}}

/* Stacked below 820px. A wrapping row would draw a separator in the left margin
   at the start of every wrapped line — CSS cannot tell which item begins a line,
   so the row is only used at widths where the list is known to fit on one. */
@media (min-width:820px){
      }

/* ============================================================
   404 — kept here rather than inline: the CSP is `style-src 'self'`,
   which blocks inline <style> blocks outright.
   ============================================================ */
.nf{min-height:100svh;display:flex;align-items:center;background:var(--navy);color:#fff}
  .nf .rule{margin-bottom:26px}
  .nf h1{font-size:var(--fs-title);font-weight:700;letter-spacing:-.02em;margin:0 0 16px}
  .nf p{font-size:var(--fs-body);color:rgba(255,255,255,.88);max-width:var(--measure);margin:0 0 34px}
  .nf .logo{position:absolute;top:34px}