/* =========================================================
   ARA ARANYA — BRAND PORTFOLIO DECK
   Theme: BUBBLEGUM — glossy Y2K, sticker sheet meets
   lip-gloss compact. High energy, still systematic.

   deck.html says what the slides say.
   This file says how they look.

   Rules this file keeps to:
     · pale bubblegum ground, pure white content panels
     · hot pink is the only colour allowed behind white text
     · candy quartet always in order: pink, cyan, lime, purple
     · no shadows anywhere
     · one motif leads each slide, never scattered
   No JavaScript. HTML and CSS only.
   ========================================================= */

:root{
  /* ground and panels */
  --gum:#FBEAF4;          /* every slide sits on this            */
  --white:#FFFFFF;        /* content panels                      */
  --hair:#F6CFE6;         /* the hairline around every panel     */

  /* the pink system */
  --hot:#E5388E;          /* primary — the only colour under white text */
  --soft:#FBD9EC;         /* quiet pills and fills               */

  /* the plum system */
  --plum:#5B1D52;         /* headings and big numbers            */
  --body:#7A4A6E;         /* running copy                        */
  --faint:#B98AAC;        /* small labels only                   */

  /* the candy quartet — always used in this order */
  --c1:#E5388E;  --c2:#3CC8D6;  --c3:#A6E22E;  --c4:#9B6BE0;

  --candy:linear-gradient(100deg,#E5388E 0%,#3CC8D6 34%,#A6E22E 67%,#9B6BE0 100%);
  --chrome:linear-gradient(100deg,#D9D9E4 0%,#FFFFFF 26%,#EFE3F5 52%,#FFFFFF 74%,#C9BEDA 100%);

  --display:"Baloo 2",system-ui,"Segoe UI",sans-serif;
  --sans:"Nunito","Segoe UI",-apple-system,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:#F3DCEB; }
body{
  font-family:var(--sans); color:var(--body);
  font-size:11pt; line-height:1.55; font-weight:400;
}

/* ── the slide ─────────────────────────────────────────── */
.page{
  position:relative; overflow:hidden;
  width:297mm; height:210mm; margin:0 auto 8mm; padding:14mm 16mm;
  background:var(--gum);
  page-break-after:always; break-after:page;
  display:flex; flex-direction:column;
}
.page:last-of-type{ page-break-after:auto; break-after:auto; margin-bottom:0; }

/* a candy bar down the left edge — the only chrome on the ground */
.page::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:6mm;
  background:var(--candy);
}

/* ── type ──────────────────────────────────────────────── */
h1,h2,h3{ font-family:var(--display); color:var(--plum); margin:0; font-weight:700; }
h1{ font-size:62px; line-height:1.02; letter-spacing:-.5px; }
h2{ font-size:40px; line-height:1.08; margin-bottom:3mm; letter-spacing:-.3px; }
h3{ font-size:19px; line-height:1.2; margin:0 0 1.5mm; }
p{ margin:0 0 3mm; }

.eyebrow{
  display:inline-block; align-self:flex-start; font-family:var(--sans);
  font-size:9.5px; font-weight:800; letter-spacing:.24em; text-transform:uppercase;
  color:var(--hot); background:var(--soft);
  padding:2mm 4mm; border-radius:999px; margin:0 0 4mm;
}

/* one word per slide gets the candy gradient — never body copy */
.grad{
  background:var(--candy); -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

.lede{ font-size:15px; line-height:1.6; color:var(--body); max-width:62ch; }

/* the divider is a solid chrome bar, not a hairline */
.rule{
  height:6px; border-radius:999px; margin:3mm 0 5mm;
  background:var(--chrome); border:1px solid var(--hair);
}

/* ── the four-point sparkle, drawn not typed ───────────── */
.spark{ width:20px; height:20px; flex:0 0 auto; }
.spark path{ fill:var(--c1); }
.spark--2 path{ fill:var(--c2); }
.spark--3 path{ fill:var(--c3); }
.spark--4 path{ fill:var(--c4); }
.title-row{ display:flex; align-items:center; gap:3mm; align-self:flex-start; }

/* ── footer ────────────────────────────────────────────── */
.foot{
  margin-top:auto; padding-top:3.5mm; border-top:2px solid var(--hair);
  display:flex; justify-content:space-between; align-items:center;
  font-size:9px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--faint);
}
.foot .mk{
  display:inline-grid; place-items:center; width:7mm; height:7mm; border-radius:50%;
  background:var(--hot); color:#fff; font-family:var(--display);
  font-size:7px; font-weight:800; margin-right:2.5mm; vertical-align:middle;
  letter-spacing:0;
}

/* ── cover ─────────────────────────────────────────────── */
.cover{ justify-content:center; align-items:flex-start; }
.mark{
  display:inline-grid; place-items:center; width:26mm; height:26mm; border-radius:50%;
  background:var(--hot); color:#fff;
  font-family:var(--display); font-weight:800; font-size:26px;
}
.cover h1{ font-size:72px; margin:7mm 0 0; }
.cover__tag{
  font-family:var(--display); font-weight:600; font-size:30px;
  color:var(--hot); margin:4mm 0 0;
}
.cover__motto{ font-size:16px; color:var(--body); margin:2mm 0 0; font-style:italic; }
.cover__meta{
  display:inline-block; align-self:flex-start; margin-top:8mm; padding:2.5mm 5mm; border-radius:999px;
  background:var(--chrome); border:1px solid var(--hair);
  font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--plum);
}
.script{ font-family:var(--display); font-weight:500; font-size:20px; color:var(--c4);
  margin:0 0 2mm; }

/* the butterfly leads the cover, and appears nowhere else */
.fly{ position:absolute; right:14mm; top:30mm; width:88mm; height:auto; }

/* ── panels ────────────────────────────────────────────── */
.svc,.note,.stat{
  background:var(--white); border:1px solid var(--hair); border-radius:20px;
}

/* ── layout ────────────────────────────────────────────── */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:10mm; align-items:center; flex:1; }
.split--wide{ grid-template-columns:1.25fr 1fr; }
.split--narrow{ grid-template-columns:.85fr 1fr; }

.shot{ margin:0; border-radius:28px; overflow:hidden;
  border:4px solid var(--white); outline:1px solid var(--hair); }
.shot img{ display:block; width:100%; height:100%; object-fit:cover; }
.shot--arch{ border-radius:60mm 60mm 28px 28px; aspect-ratio:3/4; }

.strip{ display:grid; gap:4mm; flex:1; align-content:center; }
.strip--5{ grid-template-columns:repeat(5,1fr); }
.strip--4{ grid-template-columns:repeat(4,1fr); }
.strip figure{ margin:0; border-radius:18px; overflow:hidden; aspect-ratio:3/4;
  border:4px solid var(--white); outline:1px solid var(--hair); }
.strip img{ display:block; width:100%; height:100%; object-fit:cover; }
.strip figcaption{ display:none; }

/* ── services: four white panels, candy bullet pills ───── */
.cols3{ display:grid; grid-template-columns:repeat(3,1fr); gap:6mm; flex:1; align-content:start; }
.cols4{ display:grid; grid-template-columns:repeat(4,1fr); gap:5mm; flex:1; align-content:stretch; }
.svc{ padding:6mm; position:relative; }
.cols4 .svc{ padding:7mm 5.5mm 6mm; display:flex; flex-direction:column; }
.cols4 .svc h3{ font-size:17px; margin-bottom:3.5mm; padding-bottom:2.5mm; }
.cols4 .svc ul{ flex:1; display:flex; flex-direction:column; justify-content:space-evenly; }

/* each panel is headed by one quartet colour, in order */
.cols4 .svc:nth-child(1) h3{ border-bottom:3px solid var(--c1); }
.cols4 .svc:nth-child(2) h3{ border-bottom:3px solid var(--c2); }
.cols4 .svc:nth-child(3) h3{ border-bottom:3px solid var(--c3); }
.cols4 .svc:nth-child(4) h3{ border-bottom:3px solid var(--c4); }

.svc ul{ margin:2mm 0 0; padding:0; list-style:none; }
.svc li{
  position:relative; padding-left:6.5mm; margin-bottom:1.6mm;
  font-size:12.5px; line-height:1.35; color:var(--body); font-weight:600;
}
.svc li::before{
  content:""; position:absolute; left:0; top:.42em;
  width:3.4mm; height:3.4mm; border-radius:999px; background:var(--soft);
}
.cols4 .svc:nth-child(1) li::before{ background:var(--c1); }
.cols4 .svc:nth-child(2) li::before{ background:var(--c2); }
.cols4 .svc:nth-child(3) li::before{ background:var(--c3); }
.cols4 .svc:nth-child(4) li::before{ background:var(--c4); }

/* ── glossy stat blocks ────────────────────────────────── */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:4mm; margin-top:5mm; }
.stat{ padding:5mm 5mm 4mm; position:relative; overflow:hidden; }
.stat::before{ content:""; position:absolute; left:0; right:0; top:0; height:6px; }
.stats .stat:nth-child(1)::before{ background:var(--c1); }
.stats .stat:nth-child(2)::before{ background:var(--c2); }
.stats .stat:nth-child(3)::before{ background:var(--c3); }
.stats .stat:nth-child(4)::before{ background:var(--c4); }
.stat b{ display:block; font-family:var(--display); font-weight:800;
  font-size:34px; color:var(--plum); line-height:1; }
.stat span{ display:block; margin-top:1mm; font-size:9.5px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }

/* ── numbered bubble steps ─────────────────────────────── */
.steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:5mm; flex:1; align-content:center; }
.step{
  position:relative; background:var(--white); border:1px solid var(--hair);
  border-radius:20px; padding:14mm 5mm 6mm;
}
.step b{
  position:absolute; top:-6mm; left:5mm;
  display:grid; place-items:center; width:13mm; height:13mm; border-radius:50%;
  font-family:var(--display); font-weight:800; font-size:20px;
  color:#fff; background:var(--hot);
}
.steps .step:nth-child(1) b{ background:var(--c1); }
.steps .step:nth-child(2) b{ background:var(--c2); }
.steps .step:nth-child(3) b{ background:var(--c3); }
.steps .step:nth-child(4) b{ background:var(--c4); }
.steps .step:nth-child(5) b{ background:var(--c1); }
.step h3{ font-size:16px; margin-bottom:1.5mm; }
.step p{ font-size:12px; color:var(--body); margin:0; }

/* ── tables ────────────────────────────────────────────── */
table{
  width:100%; border-collapse:separate; border-spacing:0; font-size:12.5px;
  background:var(--white); border:1px solid var(--hair); border-radius:20px;
  overflow:hidden;
}
thead th{
  text-align:left; padding:3mm 5mm; background:var(--hot); color:#fff;
  font-size:9.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
}
thead th:not(:first-child){ text-align:right; }
tbody td{
  padding:2.8mm 5mm; border-top:1px solid var(--hair); color:var(--body);
  font-weight:600;
}
tbody tr:first-child td{ border-top:none; }
tbody td:not(:first-child){ text-align:right; white-space:nowrap;
  font-variant-numeric:tabular-nums; }
tbody td:first-child{ color:var(--plum); }
.myr{ font-family:var(--display); font-weight:800; color:var(--hot) !important; }

/* ── note ──────────────────────────────────────────────── */
.note{ padding:4mm 5mm; font-size:12.5px; color:var(--body); }
.note strong{ color:var(--plum); font-weight:800; }
.note p{ margin:0; }

/* ── contact ───────────────────────────────────────────── */
.contact{ display:grid; grid-template-columns:repeat(2,1fr); gap:4mm 8mm; margin-top:5mm; }
.contact > div{ background:var(--white); border:1px solid var(--hair);
  border-radius:18px; padding:3.5mm 5mm; }
.contact dt{ font-size:9.5px; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:var(--faint); margin-bottom:.8mm; }
.contact dd{ margin:0; color:var(--plum); font-size:15px; font-weight:700; }

/* ── work grids: the actual frames ─────────────────────── */
.vgrid{ display:grid; grid-template-columns:repeat(8,1fr); gap:2.6mm;
  flex:1; align-content:center; }
.vgrid figure{ margin:0; }
.vgrid img{ width:100%; aspect-ratio:9/16; object-fit:cover; border-radius:14px;
  border:3px solid var(--white); outline:1px solid var(--hair); display:block; }
.vgrid figcaption{ margin-top:1.6mm; font-size:8px; line-height:1.25;
  color:var(--plum); font-weight:700; }
.vgrid figcaption span{ display:block; font-size:6.6px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-top:.4mm; }

.pgrid{ display:grid; grid-template-columns:repeat(8,1fr); gap:3mm; }
.pgrid figure{ margin:0; }
.pgrid img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:14px;
  border:3px solid var(--white); outline:1px solid var(--hair); display:block; }

/* ── on-screen hint, never printed ─────────────────────── */
.printhint{
  max-width:297mm; margin:8mm auto 4mm; padding:4mm 6mm; border-radius:20px;
  background:var(--white); border:1px solid var(--hair); color:var(--body);
  font-size:13px; text-align:center;
}
.printhint kbd{
  font-family:var(--sans); font-weight:800; background:var(--soft);
  border:1px solid var(--hair); border-radius:8px; padding:.5mm 2.5mm; color:var(--plum);
}
.printhint strong{ color:var(--plum); }

@media print{
  @page{ size:A4 landscape; margin:0; }
  *,*::before,*::after{
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important; color-adjust:exact !important;
  }
  html,body{ background:#fff; }
  .printhint{ display:none !important; }
  .page{ margin:0; }
}


/* ── playable media, Bubblegum ─────────────────────────── */
/* The work grids hold real <video>. The poster keeps the slide
   printing as a still while the same file plays on screen. */
.vgrid .vplay{
  width:100%; aspect-ratio:9/16; object-fit:cover; border-radius:14px;
  border:3px solid var(--white); outline:1px solid var(--hair);
  display:block; background:var(--soft);
}
.introvid{ margin:0; border-radius:28px; overflow:hidden;
  border:4px solid var(--white); outline:1px solid var(--hair); }
.introvid video{ display:block; width:100%; aspect-ratio:9/16; object-fit:cover;
  background:var(--soft); }

.vogrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:4mm;
  flex:1; align-content:center; }
.vo{ margin:0; background:var(--white); border:1px solid var(--hair);
  border-radius:18px; padding:3.5mm 4mm; }
.vo figcaption{ font-family:var(--display); font-weight:700; font-size:13px;
  color:var(--plum); line-height:1.15; margin-bottom:2mm; }
.vo figcaption span{ display:block; font-family:var(--sans); font-size:8.5px;
  font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); margin-top:.6mm; }
.vo audio{ width:100%; height:9mm; }