/* =========================================================================
   Pinecrest Group — single-page static site
   Palette: primary #003A98 · secondary #00C0ED · white. Font: Archivo.
   ========================================================================= */

:root{
  --primary:#003A98;
  --secondary:#00C0ED;
  --white:#fff;
  --nav-h:64px;
  --wrap:1180px;
  --ease:cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  font-family:'Archivo',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--primary);
  background:var(--primary);
  line-height:1.55;
  font-size:clamp(15px,1.05vw,17px);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---- scroll-snap deck -------------------------------------------------- */
/* Proximity by default (gentle on tall content e.g. founders/footer on
   mobile); crisp full-page snapping on roomy viewports. */
html{scroll-snap-type:y proximity}
@media (min-width:900px) and (min-height:680px){
  html{scroll-snap-type:y mandatory}
}
.section{scroll-snap-align:start}

img,svg{display:block}
a{color:inherit;text-decoration:none}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:clamp(20px,5vw,56px);
}

/* =========================================================================
   TOP NAV
   ========================================================================= */
.site-nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  height:var(--nav-h);
  display:flex;align-items:center;gap:24px;
  padding-inline:clamp(16px,4vw,48px);
  color:var(--white);
  transition:background .3s var(--ease),box-shadow .3s var(--ease);
}
.site-nav.scrolled{
  background:rgba(0,58,152,.94);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 6px 24px rgba(0,20,60,.28);
}
.brand{display:flex;align-items:center;height:100%;flex:0 0 auto}
.pc-logo{height:46px;width:auto}
.pc-logo .pc-word,.pc-logo .pc-group{fill:#fff}
.pc-logo .pc-icon{fill:var(--secondary)}

.nav-menu{
  margin-left:auto;
  display:flex;align-items:center;gap:clamp(14px,1.9vw,30px);
}
.nav-menu a{
  font-weight:500;font-size:.92rem;letter-spacing:.01em;
  color:var(--white);opacity:.92;
  padding:6px 0;position:relative;white-space:nowrap;
  transition:opacity .2s;
}
.nav-menu a:hover{opacity:1}
.nav-menu a:not(.nav-cta)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--secondary);transform:scaleX(0);transform-origin:left;
  transition:transform .25s var(--ease);
}
.nav-menu a:not(.nav-cta):hover::after,
.nav-menu a.is-active::after{transform:scaleX(1)}
.nav-cta{
  background:var(--secondary);color:var(--primary)!important;
  font-weight:600;border-radius:999px;padding:9px 20px!important;
  opacity:1!important;transition:transform .2s var(--ease),box-shadow .2s;
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,192,237,.4)}

/* hamburger */
.nav-toggle{
  display:none;margin-left:auto;width:42px;height:42px;
  background:none;border:0;cursor:pointer;flex-direction:column;
  justify-content:center;gap:5px;padding:9px;
}
.nav-toggle span{height:2px;width:100%;background:#fff;border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* =========================================================================
   SECTIONS — base
   ========================================================================= */
.section{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--nav-h) + 24px) 0 72px;
  overflow:hidden;
}
.section--dark{color:var(--white)}
.section--light{color:var(--primary)}

/* full-bleed background images */
.bg-section{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-color:var(--primary);
}
.bg-section[data-bg="home"]            {background-image:url(assets/bg/home.webp)}
.bg-section[data-bg="employee-benefits"]{background-image:url(assets/bg/employee-benefits.webp)}
.bg-section[data-bg="health-coverage"] {background-image:url(assets/bg/health-coverage.webp)}
.bg-section[data-bg="property-casualty"]{background-image:url(assets/bg/property-casualty.webp)}
.bg-section[data-bg="health-plans"]    {background-image:url(assets/bg/health-plans.webp)}
.bg-section[data-bg="amazon-dsp"]      {background-image:url(assets/bg/amazon-dsp.webp)}

/* gentle uniform scrim so the translucent cards stay legible in any corner */
.bg-section:has(.card)::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(0,18,52,.34);
}

/* serve lighter art to small screens */
@media (max-width:760px){
  .bg-section[data-bg="home"]            {background-image:url(assets/bg/home-sm.webp)}
  .bg-section[data-bg="employee-benefits"]{background-image:url(assets/bg/employee-benefits-sm.webp)}
  .bg-section[data-bg="health-coverage"] {background-image:url(assets/bg/health-coverage-sm.webp)}
  .bg-section[data-bg="property-casualty"]{background-image:url(assets/bg/property-casualty-sm.webp);background-position:80% center}
  .bg-section[data-bg="health-plans"]    {background-image:url(assets/bg/health-plans-sm.webp)}
  .bg-section[data-bg="amazon-dsp"]      {background-image:url(assets/bg/amazon-dsp-sm.webp);background-position:74% center}
}

/* =========================================================================
   1 — HERO
   ========================================================================= */
.hero{max-width:1040px;margin-inline:auto;text-align:center}
.hero h1{
  font-size:clamp(2.8rem,8vw,6.2rem);
  font-weight:600;line-height:1.03;letter-spacing:-.025em;
  margin-bottom:.5em;
}
.hero__sub{
  font-size:clamp(1.05rem,1.8vw,1.45rem);font-weight:500;
  color:var(--secondary);max-width:62ch;margin-inline:auto;
}

/* =========================================================================
   2 / 9 — STATEMENT sections (cyan)
   ========================================================================= */
.section--cyan{background:var(--secondary);color:var(--primary)}

/* The text block is centered horizontally in the viewport; the oversized P is
   a decorative mark pinned just to one side of it, bleeding off the viewport
   edge by however much its own width requires. */
.statement{
  --logo-zone:clamp(190px,38vw,600px);  /* visible width reserved for the P (~40%) */
  --gap:clamp(16px,2vw,40px);           /* space between the P and the text */
  --pad:clamp(16px,3vw,60px);           /* text inset from the far viewport edge */
  /* row + center => text fills horizontally and is vertically centered
     (overrides the column layout inherited from .section) */
  display:flex;flex-direction:row;align-items:center;justify-content:flex-start;
}
/* the text grows to fill ALL the space the logo doesn't use (override the
   .wrap max-width cap so the box can be wider than 1180px on big displays) */
.statement .statement__text{
  position:relative;z-index:2;flex:1 1 auto;min-width:0;max-width:none;
}
.statement:not(.statement--reverse) .statement__text{
  margin:0 var(--pad) 0 calc(var(--logo-zone) + var(--gap));
}
.statement--reverse .statement__text{
  margin:0 calc(var(--logo-zone) + var(--gap)) 0 var(--pad);text-align:right;
}
.statement .big-statement{
  /* scales with width but is also capped by height so it never overflows a
     short desktop viewport (the text column is now narrower, so cap a touch
     lower to keep the long statement within the viewport) */
  font-size:clamp(1.5rem,min(4.2vw,5.5vh),3.4rem);
  font-weight:400;line-height:1.18;letter-spacing:-.015em;
  color:var(--primary);
}
.statement .big-statement .hl{color:var(--white)}

/* P right edge sits at the logo-zone boundary; it bleeds off the left as far
   as its own width requires */
.pc-mark{
  position:absolute;top:50%;
  right:calc(100% - var(--logo-zone));
  height:clamp(360px,90svh,1040px);width:auto;
  transform:translateY(-50%);
  z-index:1;pointer-events:none;opacity:.92;
}
.pc-mark path{fill:var(--primary)}

/* reversed variant — P on the right, text ragged-right (set above) */
.statement--reverse .pc-mark{
  right:auto;left:calc(100% - var(--logo-zone));
}

/* large / high-resolution desktops: the px ceilings in the clamp()s above cap
   the mark small, leaving a sea of empty space. Scale the reserved zone and the
   mark up with viewport width; the copy is fit to the remaining area in JS
   (fitStatements) so it fills both width and height at any resolution. */
@media (min-width:1600px){
  .statement{--logo-zone:min(40vw,1000px)}
  .pc-mark{height:min(94svh,1640px)}
}

/* =========================================================================
   3-7 — PHOTO sections with overlapping text cards
   ========================================================================= */
/* Text cards are anchored flush into a viewport corner (two of the box's edges
   line up with two viewport edges) and sized to be prominent. The light-blue
   (secondary) box is the corner-flush element; the primary box is inset top &
   bottom inside it, so the secondary shows above AND below the text box.
   Only the interior corner is rounded; overflow:hidden squares the flush edges. */
.bg-section:has(.card) .wrap{display:contents}
.card{
  position:absolute;z-index:2;
  width:clamp(360px,54vw,860px);max-width:100%;
  --r:34px;                          /* corner radius (both boxes, all corners) */
  --peek:clamp(24px,3.2vh,42px);     /* how far the secondary shows past the primary */
  --edge:clamp(14px,1.8vw,32px);     /* breathing room from the viewport edges */
  border-radius:var(--r);
  box-shadow:0 26px 64px rgba(0,16,46,.34);
}
.card--br{right:var(--edge);bottom:var(--edge)}
.card--bl{left:var(--edge);bottom:var(--edge)}
/* top cards sit just BELOW the nav (viewport-minus-nav) so nothing tucks under it */
.card--tl{left:var(--edge);top:calc(var(--nav-h) + var(--edge))}

.card::before{                 /* secondary box, fully rounded, peeks top & bottom */
  content:"";position:absolute;inset:0;z-index:0;
  background:rgba(0,192,237,.5);border-radius:var(--r);
}
.card__inner{                  /* primary box: full width, inset top & bottom only,
                                  so the secondary peeks above/below but not the sides */
  position:relative;z-index:1;margin:var(--peek) 0;
  border-radius:var(--r);      /* rounded on ALL corners */
  background:rgba(0,58,152,.72);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  /* height follows the content, with generous top/bottom padding so the box
     still reads as significant even when the copy is short */
  padding:clamp(64px,11vh,150px) clamp(36px,4vw,64px);
  color:var(--white);
}
.eyebrow{
  letter-spacing:.01em;font-size:.98rem;
  font-weight:600;color:var(--secondary);margin-bottom:1em;
}
.card__inner h2{
  font-size:clamp(1.8rem,3vw,2.9rem);font-weight:600;line-height:1.1;
  letter-spacing:-.015em;margin-bottom:.55em;
}
.card__inner p:not(.eyebrow){
  font-size:clamp(1.02rem,1.2vw,1.22rem);line-height:1.55;color:rgba(255,255,255,.95);
}

/* =========================================================================
   8 — FOUNDERS  (scroll-pan at every size)
   A pinned background pans from Lior to Eli while each bio gets its own full
   screen. --pan (0..1) is driven by app.js from scroll progress. The bio card
   sits on the side OPPOSITE the featured founder so it never covers them.
   overflow:visible so the sticky background pins to the viewport.
   ========================================================================= */
.founders{position:relative;overflow:visible;background:#DCDEDF}
.founders__head{
  position:absolute;top:calc(var(--nav-h) + 18px);left:0;right:0;z-index:5;
  text-align:center;pointer-events:none;
}
.founders__head h2{
  font-size:clamp(1.9rem,4vw,3rem);font-weight:600;letter-spacing:-.02em;
  color:var(--primary);
}
.founders__scene{position:relative}
.founders__bg{
  position:sticky;top:0;height:100svh;margin-bottom:-100svh;z-index:0;
  background-image:url(assets/bg/founders.webp);
  background-repeat:no-repeat;background-color:#DCDEDF;
  /* NOT zoomed (image at natural width); the photo slides horizontally and the
     solid grey extends on whichever side it leaves uncovered. A small pan keeps
     BOTH founders on screen — it shifts them right (with Lior's text on the
     left) toward left (with Eli's text on the right). */
  background-size:100% auto;
  background-position:calc(14vw - var(--pan,0) * 28vw) 20%;
}
.founder{
  position:relative;z-index:1;min-height:100svh;scroll-snap-align:start;
  display:flex;align-items:center;
  padding:calc(var(--nav-h) + 40px) clamp(24px,5vw,80px) 72px;
}
.founder--left{justify-content:flex-start}  /* Lior: text LEFT, Lior shown on the right */
.founder--right{justify-content:flex-end}   /* Eli: text RIGHT, Eli shown on the left */
.founder__card{
  width:min(46%,560px);
  background:rgba(243,244,246,.9);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  border-radius:26px;
  padding:clamp(30px,2.6vw,48px);
  box-shadow:0 24px 60px rgba(0,16,46,.22);
}
.founder__name h3{font-size:clamp(1.3rem,1.9vw,1.9rem);font-weight:600;
  line-height:1.1;color:var(--primary)}
.founder .role{font-weight:600;color:#0089b3;margin-bottom:1em}
.founder .bio p{color:#2a3340;margin-bottom:.7em;
  font-size:clamp(.9rem,.98vw,1.02rem);line-height:1.5}
.founder .bio p:last-child{margin-bottom:0}

/* phones: one full-width bio panel that fades up to reveal the panning photo */
@media (max-width:760px){
  /* drop the section's padding so the last bio meets the next section cleanly */
  .founders{padding:0}
  .founders__bg{
    background-image:url(assets/bg/founders-sm.webp);
    background-size:cover;       /* narrow viewport already frames one founder */
    --lior:34%;--eli:60%;
    background-position:calc(var(--lior) + (var(--eli) - var(--lior)) * var(--pan,0)) 20%;
  }
  .founder{display:block;padding:0}
  .founder__card{
    --reveal:50svh;              /* how much photo shows before the veil starts */
    width:100%;max-width:none;min-height:100svh;
    border-radius:0;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    padding-top:calc(var(--reveal) + 10svh);
    padding-inline:clamp(20px,6vw,40px);
  }
  /* Lior: veil fades IN at the top and OUT at the bottom, so it hands off softly
     to the photo before Eli's panel */
  .founder--left .founder__card{
    padding-bottom:34svh;
    background:linear-gradient(180deg,
      rgba(220,222,223,0) 0,
      rgba(220,222,223,0) var(--reveal),
      rgba(220,222,223,.96) calc(var(--reveal) + 9svh),
      rgba(220,222,223,.96) calc(100% - 26svh),
      rgba(220,222,223,0) 100%);
  }
  /* Eli: veil fades in at the top, then stays solid all the way to the bottom
     for a clean hard edge into the next section */
  .founder--right .founder__card{
    text-align:left;padding-bottom:84px;
    background:linear-gradient(180deg,
      rgba(220,222,223,0) 0,
      rgba(220,222,223,0) var(--reveal),
      rgba(220,222,223,.96) calc(var(--reveal) + 9svh),
      rgba(220,222,223,.99) 100%);
  }
  .founder .bio p{font-size:.95rem;line-height:1.55}
  .founder .role{font-size:1rem}
}

/* =========================================================================
   SCROLL HINT (animated chevron)
   ========================================================================= */
.scroll-hint{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  z-index:5;width:46px;height:46px;display:grid;place-items:center;
  border-radius:50%;color:currentColor;
  animation:bob 1.9s var(--ease) infinite;
}
.scroll-hint svg{width:30px;height:30px}
.section--cyan .scroll-hint,
.section--light .scroll-hint{color:var(--primary)}
.section--dark .scroll-hint,
.bg-section:has(.card) .scroll-hint{color:var(--white)}
@keyframes bob{
  0%,100%{transform:translate(-50%,0)}
  50%{transform:translate(-50%,9px)}
}

/* =========================================================================
   10 — FOOTER
   ========================================================================= */
.footer{
  background:var(--primary);color:var(--white);
  min-height:auto;justify-content:flex-start;align-items:center;text-align:center;
  padding:clamp(48px,7vh,96px) clamp(24px,6vw,72px) clamp(40px,5vh,64px);
  gap:clamp(36px,5vh,64px);
}
.footer__logo .pc-logo{height:clamp(64px,10vw,128px)}
.pc-logo--foot .pc-word{fill:#fff}
.pc-logo--foot .pc-group{fill:#9aa3b2}
.pc-logo--foot .pc-icon{fill:var(--secondary)}
.footer__grid{
  display:grid;gap:clamp(28px,4vw,48px);
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  max-width:1280px;width:100%;margin-inline:auto;
}
.footer__cta{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:600;
  line-height:1.15;letter-spacing:-.01em;margin:0 auto 1.1em;max-width:18ch}
.footer__col h4{font-size:1rem;font-weight:600;margin-bottom:.7em;color:#fff}
.footer__col p{color:var(--secondary);font-size:.95rem;line-height:1.6}
.footer__col a{color:var(--secondary);transition:opacity .2s}
.footer__col a:hover{opacity:.75;text-decoration:underline}
.socials{display:flex;gap:10px;margin:0 auto 18px;justify-content:center}
.social{width:32px;height:32px;border-radius:50%;background:var(--secondary);
  display:grid;place-items:center;transition:transform .2s var(--ease),background .2s}
.social svg{width:16px;height:16px;fill:var(--primary)}
.social:hover{transform:translateY(-2px);background:#fff}
.copyright{font-size:.78rem;color:rgba(255,255,255,.55)}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:900px){
  .nav-toggle{display:flex}
  .nav-menu{
    position:fixed;inset:var(--nav-h) 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(0,58,152,.98);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    padding:8px 0 16px;
    box-shadow:0 18px 40px rgba(0,12,40,.4);
    transform:translateY(-12px);opacity:0;visibility:hidden;
    transition:transform .28s var(--ease),opacity .24s,visibility .24s;
  }
  .nav-menu.open{transform:none;opacity:1;visibility:visible}
  .nav-menu a{padding:14px clamp(20px,6vw,40px)!important;font-size:1.05rem}
  .nav-menu a:not(.nav-cta)::after{display:none}
  .nav-cta{margin:10px clamp(20px,6vw,40px) 4px;text-align:center}
}

/* statement sections on small screens: full-width text, P as a faint watermark */
@media (max-width:760px){
  .statement,.statement--reverse{justify-content:center}
  .statement:not(.statement--reverse) .statement__text,
  .statement--reverse .statement__text{
    width:auto;max-width:100%;margin:0;text-align:left;
    padding-inline:clamp(20px,6vw,40px);
  }
  .pc-mark,.statement--reverse .pc-mark{
    right:auto;left:50%;top:50%;height:72%;opacity:.14;
    transform:translate(-50%,-50%);
  }
  /* mobile: a single bottom-aligned primary box that fades up to transparent
     (no second box, no corner anchoring) */
  .card,.card--br,.card--bl,.card--tl{
    left:0;right:0;top:auto;bottom:0;width:100%;min-height:0;display:block;
    border-radius:0;overflow:visible;box-shadow:none;
  }
  .card::before{display:none}
  .card__inner{
    display:block;flex:none;margin-block:0;border-radius:0;
    padding:clamp(80px,17vh,160px) clamp(20px,6vw,40px) 86px;
    background:linear-gradient(0deg,
      rgba(0,58,152,.93) 0%,rgba(0,58,152,.86) 42%,
      rgba(0,58,152,.42) 76%,rgba(0,58,152,0) 100%);
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
}

/* footer columns collapse */
@media (max-width:820px){
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .footer__grid{grid-template-columns:1fr}
  .hero h1{font-size:clamp(2.3rem,9.5vw,3.4rem)}
}

/* =========================================================================
   MOTION / ACCESSIBILITY
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .scroll-hint{animation:none}
  *{transition-duration:.001ms!important}
}
:focus-visible{outline:3px solid var(--secondary);outline-offset:3px;border-radius:4px}