/* =====================================================================
   HIRUBADHOO INTEGRATED PROJECT
   Faithful reproduction of the Novamind Group proposal (PDF),
   stacked as one continuous scroll — no page breaks.
   ===================================================================== */

:root{
  --bg:#f5f5e8;            /* page cream */
  --title:#1f4f13;         /* forest-green headings */
  --ink:#2c2c28;           /* body text */
  --muted:#5f5f57;
  --head:#a3a39b;          /* running-header gray */
  --rule:#cdcfc0;          /* thin separators */
  --teal:#12a2b4;          /* import-table header */
  --slate:#5e596a;         /* benefit-table header */
  --maxw:1180px;
  --sans:"Aileron","Arimo","Helvetica Neue",Arial,sans-serif;
  --alt:"Barlow","Aileron","Arimo",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
h1,h2,h3{margin:0;font-weight:700;}
p{margin:0 0 1rem;}
ul,ol{margin:0;}

/* ---------- the page "sheet" ---------- */
.sheet{
  position:relative;
  background:var(--bg) url("assets/corner-swoosh.png?v=3") no-repeat top left;
  background-size:28% auto;
  padding:2.6rem 1.6rem 2.4rem;
  min-height:94vh;
  display:flex;
  flex-direction:column;
}
.sheet__inner{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  flex:1;display:flex;flex-direction:column;
}

/* running header + rule */
.runtop{display:flex;justify-content:flex-end;}
.runhead{
  color:var(--head);font-weight:400;
  font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;margin:0;
}
.runrule{height:1px;background:var(--rule);width:72%;margin:.6rem 0 11% auto;}

/* titles */
.ptitle{
  font-family:var(--sans);color:var(--title);font-weight:700;
  font-size:2.1rem;line-height:1.06;
  letter-spacing:-.005em;margin:0 0 .7rem;
}
.subcaps{
  font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--ink);
  font-size:.95rem;margin:0 0 1.1rem;
}
.subcaps--green{color:var(--title);}

/* body text */
.ptext{font-size:1.06rem;line-height:1.62;text-align:justify;margin:0 0 1rem;}
.ptext:last-child{margin-bottom:0;}
.lede{margin-bottom:1.4rem;}

/* lists */
.numlist{padding-left:2.1rem;margin:0;}
.numlist li{margin-bottom:.45rem;text-align:justify;padding-left:.2rem;}
.bullist{list-style:none;padding:0;margin:0;}
.bullist li{position:relative;padding-left:1.45rem;margin-bottom:.55rem;text-align:justify;}
.bullist li::before{content:"";position:absolute;left:.2rem;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--ink);}
.bullist--spaced li{margin-bottom:.85rem;}

/* two-column layouts */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:start;}
.cols--center{align-items:center;}
.cols--textwide{grid-template-columns:1.08fr .92fr;}
.cols--imgwide{grid-template-columns:.9fr 1.1fr;}

/* figures */
.fig{margin:0;}
.fig img,.fig video{width:100%;height:auto;display:block;}
/* feather a video's edges so an opaque "paper glow" border dissolves into the page */
.fig__media--soft{
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:
    linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-composite:intersect;
}
.fig figcaption{margin-top:.6rem;color:var(--muted);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;}
.center-img{max-width:760px;margin-inline:auto;}

/* bottom rule pinned to base of sheet */
.botrule{margin-top:auto;}
.botrule__line{height:1px;background:var(--rule);width:72%;margin-top:clamp(1.6rem,4vw,3rem);}
.push{margin-top:auto;}

/* ---------- COVER (page 1) ---------- */
.cover .sheet__inner{justify-content:center;}
.cover__grid{display:grid;grid-template-columns:1fr 1px 1fr;gap:clamp(1.5rem,4vw,3.4rem);align-items:center;}
.cover__divider{background:var(--ink);opacity:.5;width:1px;height:62%;align-self:center;}
.cover__title{
  font-family:var(--sans);color:var(--title);font-weight:700;
  font-size:2.6rem;line-height:1.1;letter-spacing:.06em;margin:0 0 1.4rem;
}
.cover__sub{font-size:1.3rem;line-height:1.35;color:var(--ink);font-weight:400;margin:0;}
.cover__right{display:flex;flex-direction:column;align-items:center;gap:1.6rem;}
.cover__right img,.cover__right video{max-width:min(100%,400px);width:100%;height:auto;display:block;}
.cover__prepared{text-align:left;align-self:flex-start;font-size:clamp(.95rem,.8rem+.5vw,1.15rem);line-height:1.4;}
.cover__prepared strong{display:block;font-weight:700;letter-spacing:.02em;}

/* ---------- import table (page 10) ---------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:clamp(1.2rem,2vw,1.8rem);}
.itable{width:100%;border-collapse:collapse;min-width:760px;background:#fff;}
.itable th,.itable td{padding:.85rem 1rem;text-align:center;border:1px solid #e6e6da;font-size:.9rem;}
.itable thead th{background:var(--teal);color:#fff;font-weight:700;line-height:1.25;border-color:var(--teal);}
.itable tbody th{font-weight:700;color:var(--ink);}
.itable tbody td{color:#444;}

/* ---------- benefit tables (page 15) ---------- */
.btable{width:100%;border-collapse:collapse;background:#fff;}
.btable th,.btable td{padding:.8rem 1rem;text-align:center;border:1px solid #e6e6da;font-size:.88rem;}
.btable thead th{background:var(--slate);color:#fff;font-weight:700;}
.btable tbody td:first-child{color:var(--ink);}
.tbl-caption{font-weight:700;text-transform:uppercase;letter-spacing:.03em;text-align:center;margin-bottom:1rem;font-size:.95rem;}

/* ---------- island name list (page 14) ---------- */
.island-list{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;text-align:center;padding:1rem 0;}
.island-list__name{font-weight:700;font-size:1.25rem;color:var(--ink);}
.ornament{width:120px;height:auto;opacity:.85;}

/* ---------- timeline (page 17) ---------- */
.timeline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,2vw,1.6rem);margin-top:clamp(1.5rem,3vw,2.5rem);}
.tl-line{position:absolute;top:96px;left:11%;right:11%;height:3px;background:#3c8f57;border-radius:2px;z-index:0;}
.phase{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;}
.phase__pin{
  width:84px;height:84px;border:3px solid var(--title);border-radius:50% 50% 50% 8px;
  transform:rotate(45deg);display:grid;place-items:center;background:#fff;margin-bottom:.2rem;
}
.phase__pin span{transform:rotate(-45deg);font-size:1.9rem;line-height:1;}
.phase__dot{width:15px;height:15px;border-radius:50%;background:#fff;border:3px solid var(--title);margin:.2rem 0 .9rem;}
.phase__chev{
  width:100%;text-align:center;color:#fff;font-weight:700;letter-spacing:.04em;
  padding:.55rem .5rem;font-size:.92rem;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%,14px 50%);
}
.phase:first-child .phase__chev{clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%);}
.phase--1 .phase__chev{background:#2f8a4e;}
.phase--2 .phase__chev{background:#5f7d63;}
.phase--3 .phase__chev{background:#6f8a3c;}
.phase--4 .phase__chev{background:#2f8a4e;}
.phase__card{width:100%;padding:1rem .4rem 0;text-align:left;}
.phase__when{display:flex;align-items:center;gap:.4rem;font-weight:700;color:var(--ink);font-size:.95rem;margin-bottom:.7rem;}
.phase__when::before{content:"\1F4C5";font-size:1rem;}
.phase__desc{font-size:.86rem;color:#3a3a34;line-height:1.45;border-top:1px dashed #c7c8ba;padding-top:.7rem;min-height:5.2em;}
.phase__pct{display:flex;align-items:center;gap:.6rem;margin-top:.9rem;}
.phase__pie{width:42px;height:42px;border-radius:50%;flex:none;}
.phase__pct b{display:block;color:var(--title);font-size:1rem;}
.phase__pct span{font-size:.82rem;color:#3a3a34;}

/* ---------- reveal (subtle, optional) ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease;}
.reveal.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}

/* =====================================================================
   RESPONSIVE — scale type up on larger screens (no viewport-unit reliance)
   ===================================================================== */
@media (min-width:680px){
  .ptitle{font-size:2.9rem;}
  .cover__title{font-size:3.6rem;}
  .cover__sub{font-size:1.5rem;}
  .ptext{font-size:1.12rem;}
  .island-list__name{font-size:1.4rem;}
  .subcaps{font-size:1rem;}
}
@media (min-width:1080px){
  .ptitle{font-size:3.5rem;}
  .cover__title{font-size:4.4rem;}
}

@media (max-width:820px){
  body{font-size:17px;}
  .sheet{min-height:auto;padding-top:clamp(3.2rem,12vw,4.5rem);}
  .cols,.cols--textwide,.cols--imgwide{grid-template-columns:1fr;gap:1.6rem;}
  .cover__grid{grid-template-columns:1fr;gap:1.8rem;}
  .cover__divider{display:none;}
  .cover__right{order:-1;}
  .cover__prepared{align-self:center;text-align:center;}
  .runrule,.botrule__line{width:100%;}
  .timeline{grid-template-columns:1fr 1fr;gap:1.6rem 1rem;}
  .tl-line{display:none;}
  .phase__desc{min-height:0;}
}
@media (max-width:480px){
  .timeline{grid-template-columns:1fr;}
  .ptext,.numlist li,.bullist li{text-align:left;}
  .itable{min-width:560px;}
}