/* =====================================================
   NURSEALLIA — DESIGN SYSTEM
   Symphony of Nurses — premium editorial frontend
===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  /* colour */
  --navy-deep:#102C4C;
  --navy:#173A63;
  --blue:#315B86;
  --gold:#D2A64F;
  --gold-light:#E5C77F;
  --champagne:#F2E5C5;
  --ivory:#FAF8F2;
  --white:#FFFFFF;
  --ink:#17212B;
  --muted:#687789;

  /* type */
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Manrope', system-ui, sans-serif;

  /* layout */
  --container: 1360px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(80px, 10vw, 160px);

  /* motion */
  --ease: cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:auto;}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--ivory);
  line-height:1.5;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font:inherit; background:none; border:none; cursor:pointer; color:inherit;}
input, select, textarea{font:inherit; color:inherit;}
svg{display:block;}

.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

section{position:relative;}

/* =====================================================
   TYPOGRAPHY
===================================================== */
.eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before{
  content:'';
  width:22px; height:1px;
  background:var(--gold);
  display:inline-block;
}

.display-xl{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.6rem, 6vw, 5.4rem);
  line-height:1.02;
  letter-spacing:-.01em;
  color:var(--navy-deep);
}
.display-lg{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.2rem, 4.4vw, 3.8rem);
  line-height:1.08;
  color:var(--navy-deep);
}
.display-md{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.8rem, 3vw, 2.6rem);
  line-height:1.15;
  color:var(--navy-deep);
}
.on-dark{color:var(--white);}
.on-dark .eyebrow{color:var(--gold-light);}

.body-lg{font-size:clamp(1.02rem,1.4vw,1.2rem); color:var(--muted); line-height:1.65; font-weight:400;}
.body-md{font-size:.98rem; color:var(--muted); line-height:1.65;}
.label-sm{font-size:.72rem; letter-spacing:.1em; font-weight:700; color:var(--muted);}

/* line-mask reveal wrapper (JS toggles .is-in on inner span) */
.line-mask{overflow:hidden; display:block;}
.line-mask > span{display:inline-block; transform:translateY(110%); will-change:transform;}
.line-mask.is-in > span{transform:translateY(0); transition:transform .9s var(--ease);}

/* =====================================================
   BUTTONS
===================================================== */
.btn{
  position:relative;
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--sans); font-weight:700; font-size:.82rem;
  letter-spacing:.04em; text-transform:uppercase;
  padding:1.05rem 1.9rem;
  border-radius:2px;
  overflow:hidden;
  isolation:isolate;
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.btn .arw{transition:transform .4s var(--ease);}
.btn:hover .arw{transform:translateX(5px);}

.btn-fill{ background:var(--navy-deep); color:var(--white); }
.btn-fill::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--gold);
  transform:translateY(101%);
  transition:transform .45s var(--ease);
}
.btn-fill:hover{color:var(--navy-deep);}
.btn-fill:hover::before{transform:translateY(0);}

.btn-line{ background:transparent; color:var(--navy-deep); border:1px solid var(--navy-deep); }
.btn-line:hover{ background:var(--navy-deep); color:var(--white); }

.btn-line-light{ background:transparent; color:var(--white); border:1px solid rgba(255,255,255,.35); }
.btn-line-light:hover{ border-color:var(--gold); color:var(--gold-light); }

.btn-text{
  font-weight:700; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--navy-deep); display:inline-flex; align-items:center; gap:.5rem;
  padding:0; border-bottom:1px solid currentColor;
}
.btn-text .arw{transition:transform .35s var(--ease);}
.btn-text:hover .arw{transform:translateX(5px);}
.btn-text.on-dark{color:var(--gold-light);}

/* =====================================================
   HEADER / NAV
===================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  padding:22px 0;
  transition:background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.solid{
  background:rgba(250,248,242,.88);
  backdrop-filter:blur(14px);
  padding:14px 0;
  border-color:rgba(23,58,99,.08);
}
.site-header .container{display:flex; align-items:center; justify-content:space-between;}
.brand img{height:44px; width:auto; transition:height .4s var(--ease);}
.site-header.solid .brand img{height:36px;}

.main-nav{display:flex; align-items:center; gap:2.4rem;}
.main-nav a{
  position:relative; font-size:.86rem; font-weight:600; color:var(--white);
  padding-bottom:6px;
  transition:color .3s var(--ease);
}
.site-header.solid .main-nav a, .site-header.solid .header-actions a.ghost{color:var(--navy-deep);}
.main-nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
}
.main-nav a:hover::after{transform:scaleX(1);}

.header-actions{display:flex; align-items:center; gap:1.4rem;}
.header-actions a.ghost{font-size:.86rem; font-weight:600; color:var(--white);}
.header-actions .btn{padding:.8rem 1.5rem; font-size:.74rem;}

.menu-toggle{
  display:none; flex-direction:column; gap:5px; width:26px; z-index:210;
}
.menu-toggle span{height:1.5px; background:currentColor; width:100%; transition:all .3s var(--ease);}
.site-header.solid .menu-toggle{color:var(--navy-deep);}
.menu-toggle:not(.solid-color){color:var(--white);}

/* fullscreen mobile nav */
.mobile-nav{
  position:fixed; inset:0; background:var(--navy-deep); z-index:190;
  display:flex; flex-direction:column; justify-content:center; padding:0 8vw;
  transform:translateY(-100%); transition:transform .55s var(--ease);
}
.mobile-nav.open{transform:translateY(0);}
.mobile-nav a{
  font-family:var(--serif); font-size:2.6rem; color:var(--white); padding:.4rem 0; display:block;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.mobile-nav .mobile-actions{margin-top:2rem; display:flex; gap:1rem;}

/* =====================================================
   CARDS
===================================================== */

/* 01 image-first tutor card */
.card-tutor{
  position:relative; border-radius:2px; overflow:hidden; background:var(--navy-deep);
  aspect-ratio:3/4.1;
  flex:0 0 auto;
}
.card-tutor img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease);}
.card-tutor .tag{
  position:absolute; top:18px; left:18px; z-index:2;
  font-size:.65rem; font-weight:700; letter-spacing:.1em; color:var(--navy-deep);
  background:rgba(255,255,255,.92); padding:.4em .8em;
}
.card-tutor .overlay{
  position:absolute; inset:0; background:linear-gradient(0deg, rgba(16,44,76,.92) 0%, rgba(16,44,76,.15) 55%, rgba(16,44,76,0) 75%);
}
.card-tutor .info{
  position:absolute; left:0; right:0; bottom:0; padding:22px; color:#fff;
  transform:translateY(38px); transition:transform .5s var(--ease);
}
.card-tutor:hover img{transform:scale(1.06);}
.card-tutor:hover .info{transform:translateY(0);}
.card-tutor .info .name{font-family:var(--serif); font-size:1.5rem;}
.card-tutor .info .spec{font-size:.76rem; color:var(--gold-light); margin-top:.3em; letter-spacing:.03em;}
.card-tutor .info .meta{display:flex; align-items:center; gap:.9em; font-size:.78rem; margin-top:.9em; color:rgba(255,255,255,.75);}
.card-tutor .info .cta{
  display:flex; align-items:center; gap:.5em; font-size:.72rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--gold-light); margin-top:1.1em; opacity:0; transition:opacity .4s var(--ease) .1s;
}
.card-tutor:hover .info .cta{opacity:1;}

/* 02 floating card (hero) */
.float-card{
  background:var(--white); padding:26px 28px; width:290px;
  box-shadow:0 40px 80px -30px rgba(16,44,76,.4);
}
.float-card .badge{
  display:inline-flex; align-items:center; gap:.4em; font-size:.62rem; font-weight:700; letter-spacing:.1em;
  color:var(--blue); background:rgba(49,91,134,.08); padding:.35em .7em;
}
.float-card h3{font-family:var(--serif); font-size:1.5rem; color:var(--navy-deep); margin-top:.6em;}
.float-card .role{font-size:.76rem; color:var(--muted); margin-top:.15em;}
.float-card .subj{font-size:.78rem; color:var(--ink); margin-top:.9em; line-height:1.5;}
.float-card .divider{height:1px; background:rgba(23,58,99,.1); margin:1em 0;}
.float-card .row{display:flex; align-items:center; justify-content:space-between; font-size:.8rem;}
.float-card .rate{font-family:var(--serif); font-size:1.3rem; color:var(--navy-deep);}

/* 03 editorial card (subjects, blog) */
.card-editorial{
  border-top:1px solid rgba(23,58,99,.14);
  padding-top:1.6rem;
}
.card-editorial .num{font-family:var(--serif); color:var(--gold); font-size:1.2rem;}
.card-editorial h3{font-family:var(--serif); font-size:1.7rem; color:var(--navy-deep); margin-top:.5rem;}
.card-editorial p{margin-top:.7rem;}

/* 04 dark card */
.card-dark{
  background:var(--navy); color:var(--white); padding:2.2rem;
}
.card-dark .label-sm{color:rgba(255,255,255,.5);}

/* 05 overlapping stat card cluster handled via layout, not a single class */

/* 06 borderless (blog list rows) */
.row-article{
  display:grid; grid-template-columns:120px 1fr auto; gap:2rem; align-items:center;
  padding:1.6rem 0; border-bottom:1px solid rgba(23,58,99,.1);
}
.row-article time{font-size:.72rem; color:var(--muted); letter-spacing:.04em;}

/* =====================================================
   CUSTOM CURSOR (desktop only)
===================================================== */
.cursor-dot{
  position:fixed; top:0; left:0; width:9px; height:9px; border-radius:50%;
  background:var(--gold); pointer-events:none; z-index:999; mix-blend-mode:normal;
  transform:translate(-50%,-50%); transition:opacity .2s ease;
}
.cursor-ring{
  position:fixed; top:0; left:0; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--gold); pointer-events:none; z-index:998;
  transform:translate(-50%,-50%); transition:width .3s var(--ease), height .3s var(--ease), border-color .3s var(--ease), opacity .2s ease;
  display:flex; align-items:center; justify-content:center;
  font-size:.6rem; font-weight:700; letter-spacing:.08em; color:var(--gold); text-transform:uppercase; text-align:center;
}
.cursor-ring span{opacity:0; transition:opacity .25s ease;}
.cursor-ring.grown{width:96px; height:96px; background:rgba(210,166,79,.08);}
.cursor-ring.grown span{opacity:1;}
@media (hover:none), (pointer:coarse){
  .cursor-dot, .cursor-ring{display:none;}
}

/* =====================================================
   HORIZONTAL SCROLL TRACKS
===================================================== */
.hscroll-viewport{overflow:hidden; position:relative;}
.hscroll-track{display:flex; gap:1.6rem; will-change:transform;}

.tutor-track{gap:1.4rem;}
.tutor-track .card-tutor{width:min(320px, 78vw);}

.subject-panel{
  flex:0 0 auto; width:min(560px, 82vw); height:70vh; min-height:460px;
  position:relative; overflow:hidden; background:var(--navy-deep);
}
.subject-panel img{width:100%; height:100%; object-fit:cover; opacity:.55; transition:transform .8s var(--ease), opacity .5s ease;}
.subject-panel:hover img{transform:scale(1.05); opacity:.7;}
.subject-panel .content{position:absolute; inset:0; padding:2.4rem; display:flex; flex-direction:column; justify-content:flex-end; color:#fff;}
.subject-panel .num{font-family:var(--serif); font-size:1rem; color:var(--gold-light);}
.subject-panel h3{font-family:var(--serif); font-size:2.2rem; margin-top:.5rem;}
.subject-panel p{color:rgba(255,255,255,.65); margin-top:.8rem; max-width:34ch; font-size:.9rem;}

/* =====================================================
   SECTION UTILITIES
===================================================== */
.section-pad{padding-block:var(--section-y);}
.bg-navy{background:var(--navy-deep); color:var(--white);}
.bg-white{background:var(--white);}
.bg-ivory{background:var(--ivory);}

.reveal-up{opacity:0; transform:translateY(40px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal-up.is-in{opacity:1; transform:translateY(0);}
.reveal-up.d1{transition-delay:.08s;} .reveal-up.d2{transition-delay:.16s;} .reveal-up.d3{transition-delay:.24s;} .reveal-up.d4{transition-delay:.32s;}

.hairline{height:1px; background:rgba(23,58,99,.12);}
.hairline.on-dark{background:rgba(255,255,255,.14);}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem);}
.grid-12{display:grid; grid-template-columns:repeat(12,1fr); gap:1.5rem;}

/* symphony line svg decoration */
.symphony-svg{position:absolute; inset:0; pointer-events:none;}
.symphony-svg path{stroke-dasharray:1400; stroke-dashoffset:1400; transition:stroke-dashoffset 2.2s var(--ease);}
.symphony-svg.is-in path{stroke-dashoffset:0;}

/* count-up numbers */
.stat-num{font-family:var(--serif); font-size:clamp(2.6rem,5vw,4rem); color:var(--navy-deep); line-height:1;}
.on-dark .stat-num{color:var(--white);}

/* =====================================================
   FOOTER
===================================================== */
.site-footer{background:var(--navy-deep); color:rgba(255,255,255,.62);}
.site-footer .top{padding-block:5rem; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:3rem;}
.site-footer .brand-col img{height:38px; filter:brightness(0) invert(1); opacity:.95; margin-bottom:1.2rem;}
.site-footer h4{color:var(--white); font-size:.78rem; letter-spacing:.06em; margin-bottom:1.1rem; font-weight:700;}
.site-footer ul li{margin-bottom:.7rem;}
.site-footer a:hover{color:var(--gold-light);}
.site-footer .bottom{
  border-top:1px solid rgba(255,255,255,.1); padding:1.6rem 0; display:flex; justify-content:space-between;
  font-size:.76rem; color:rgba(255,255,255,.42); flex-wrap:wrap; gap:.8rem;
}
.social-row{display:flex; gap:.7rem;}
.social-row a{
  width:36px; height:36px; border:1px solid rgba(255,255,255,.16); border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:border-color .3s, color .3s;
}
.social-row a:hover{border-color:var(--gold); color:var(--gold-light);}

/* =====================================================
   PAGE TRANSITION OVERLAY
===================================================== */
.transition-veil{
  position:fixed; inset:0; background:var(--navy-deep); z-index:500;
  transform:translateY(100%); pointer-events:none;
}

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width:1024px){
  .main-nav, .header-actions .btn, .header-actions a.ghost{display:none;}
  .menu-toggle{display:flex;}
  .grid-2{grid-template-columns:1fr;}
  .site-footer .top{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .site-footer .top{grid-template-columns:1fr;}
  .row-article{grid-template-columns:80px 1fr; row-gap:.4rem;}
  .row-article .btn-text{grid-column:1/-1;}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
  .line-mask > span{transform:none;}
  .reveal-up{opacity:1; transform:none;}
}