/* ==========================================================================
   Nexan holding page
   Palette: white | deep teal #1e5a5c | teal #309e8b | aqua #6acff6
   Bar grey: #6D6E71 
   ========================================================================== */

:root{
  --white:#ffffff;
  --teal-deep:#1e5a5c;
  --teal:#309e8b;
  --aqua:#6acff6;
  --bar-grey:#6d6e71;      

  --teal-text:#22806d;
  --ink:#173d3e;
  --ink-soft:#4a6b6b;
  --line:#e0e7e7;
  --page:#e9edee;

  --sheet:1180px;
  --radius:12px;
  --font:"Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--page);
  line-height:1.55;font-size:clamp(1rem,.96rem + .2vw,1.06rem)}
img{max-width:100%;display:block}
a{color:var(--teal-deep);text-underline-offset:3px}
a:hover{color:var(--teal-text)}
:focus-visible{outline:3px solid var(--aqua);outline-offset:3px;border-radius:4px}

.skip{position:absolute;left:-9999px;top:0;background:var(--teal-deep);color:#fff;padding:.7rem 1rem;z-index:10;border-radius:0 0 8px 0}
.skip:focus{left:0}

.sheet{max-width:var(--sheet);margin:clamp(0px,3vw,2.5rem) auto;background:var(--white);
  box-shadow:0 30px 70px -40px rgba(23,61,62,.5);overflow:hidden}
.reps{padding-inline:clamp(1.5rem,5vw,4rem)}

/* ---------- Header / footer bars ---------- */
.site-header{background:var(--bar-grey);display:flex;justify-content:center;
  padding:clamp(1.4rem,4vw,2.25rem) clamp(1.5rem,5vw,4rem)}
.logo-lockup{display:inline-flex;line-height:0}
.logo{height:clamp(40px,4.6vw,54px);width:auto;}  /* grey logo -> white on grey bar */

/* ---------- Hero: 50:50 copy + photo ---------- */
.hero{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:clamp(320px,38vw,480px)}
.hero-copy{background:var(--white);display:flex;flex-direction:column;justify-content:center;padding:clamp(2rem,4.5vw,4rem)}
.hero-copy h1{margin:0 0 1rem;color:var(--teal);font-weight:600;font-size:clamp(1.9rem,1.4rem + 2.2vw,2.9rem);line-height:1.06;letter-spacing:-.01em}
.hero-copy p{margin:0;color:var(--bar-grey);font-size:clamp(1.02rem,.98rem + .4vw,1.18rem);max-width:34rem}
.hero-media{display:flex;min-height:0}
.hero-img{width:100%;height:100%;object-fit:cover;object-position:center}
@media (max-width:760px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-media{order:-1}
  .hero-img{height:auto;aspect-ratio:4/3}
}

/* ---------- Reps ---------- */
.reps{padding-block:clamp(2.25rem,4.5vw,3.5rem)}
.section-intro{margin:0 0 clamp(1.5rem,3vw,2rem);text-align:center;
  font-size:clamp(1.05rem,1rem + .5vw,1.35rem);font-weight:500;color:var(--bar-grey);
  padding-bottom:1.1rem;border-bottom:1px solid var(--line)}   /* full-width rule */

.rep-grid{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1rem,2vw,1.6rem);grid-template-columns:repeat(3,1fr)}
@media (max-width:800px){ .rep-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px){ .rep-grid{grid-template-columns:1fr} }

.rep-card{display:flex;flex-direction:column;border-radius:6px;overflow:hidden;background:var(--teal);
  box-shadow:0 14px 34px -22px rgba(23,61,62,.45)}
.avatar{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:center 20%;background:var(--page)}

.rep-body{background:var(--teal);color:#fff;text-align:center;padding:1.05rem 1rem 1.3rem}
.rep-name{margin:0 0 .35rem;font-size:1.08rem;font-weight:700;color:#fff;letter-spacing:.01em}
.rep-role{margin:0 0 .8rem;font-size:.9rem;font-weight:500;color:#eafaf5;line-height:1.35}
.rep-contact{margin:0;display:flex;flex-direction:column;align-items:center;gap:.4rem}
.rep-contact a{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  font-weight:500;color:#fff;text-decoration:none;font-size:.9rem;max-width:100%;word-break:break-word}
.rep-contact a:hover{color:#fff;text-decoration:underline}
.rep-contact a::before{content:"";width:1.05em;height:1.05em;flex:0 0 auto;background:#fff;
  -webkit-mask:center/contain no-repeat;mask:center/contain no-repeat}
.rep-contact a[href^="tel:"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.6 10.8a15.6 15.6 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.24 11.4 11.4 0 0 0 3.6.58 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.4 11.4 0 0 0 .58 3.6 1 1 0 0 1-.24 1z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.6 10.8a15.6 15.6 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.24 11.4 11.4 0 0 0 3.6.58 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.4 11.4 0 0 0 .58 3.6 1 1 0 0 1-.24 1z'/%3E%3C/svg%3E")}
.rep-contact a[href^="mailto:"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1m1.4 2L12 12l7.6-5z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1m1.4 2L12 12l7.6-5z'/%3E%3C/svg%3E")}

/* ---------- Footer (same grey bar) ---------- */
.site-footer{background:var(--bar-grey)}
.footer-inner{padding:clamp(1.6rem,3.5vw,2.4rem) clamp(1.5rem,5vw,4rem);text-align:center}
.footer-logo{height:50px;width:auto;margin:0 auto .7rem;)}
.footer-legal{margin:0;font-size:.875rem;color:#fff;font-weight:bold}
.footer-policy a{font-size:0.875rem;color:#fff;text-decoration:none;}
.footer-policy a:hover{color:#fff;text-decoration:underline;}

/* ---------- Entrance animation ---------- */
@media (prefers-reduced-motion:no-preference){
  .hero-copy h1,.hero-copy p{opacity:0;animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
  .hero-copy p{animation-delay:.08s}
  .rep-card{opacity:0;animation:rise .6s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.05s * var(--i))}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}