/* ==========================================================================
   EP Indonesia — company profile page
   Implementation of the design-system template `VenturePage.dc.html`.

   Everything here is expressed in EP design tokens (_ds/.../tokens/*.css).
   Raw hex values appear only where a token does not exist for the value.
   ========================================================================== */

/* --- Fluid type -----------------------------------------------------------
   The DS size ramp is fixed-px because the template was authored against a
   1440x900 preview. Overriding the size tokens (not the composed --type-*
   roles) keeps the desktop values exactly as specified while letting the
   ramp collapse gracefully on small screens.
   -------------------------------------------------------------------------- */
:root{
  /* Each ramp reaches its full DS value by ~1180px — the width at which the
     1280px container is fully open — and eases down from there. */
  --size-display-1:clamp(36px,1.4rem + 4.2vw,72px);
  --size-display-2:clamp(30px,1.25rem + 3.2vw,56px);
  --size-h1:clamp(27px,1.45rem + 1.9vw,40px);
  --size-body-lg:clamp(16px,.95rem + .3vw,18px);

  --gutter:var(--gutter-lg);
  --section-pad:var(--section-y);
}

@media (max-width:900px){
  :root{ --gutter:var(--gutter-md); --section-pad:var(--space-24) }
}
@media (max-width:600px){
  :root{ --gutter:var(--gutter-sm); --section-pad:var(--section-y-compact) }
}

html{ scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{ overflow-x:hidden }

/* The width/height attributes on <img> reserve layout space and stop the page
   shifting as art loads, but they also act as presentational hints. Release the
   height so the intrinsic aspect ratio drives it; rules that set an explicit
   height (the marks and lockup) out-specify this. */
img{ height:auto }

/* Anchored sections must clear the sticky header. */
[id]{ scroll-margin-top:calc(var(--header-height) + var(--space-6)) }

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

.skip-link{
  position:absolute;
  left:var(--space-4);
  top:calc(var(--space-4) * -6);
  z-index:var(--z-toast);
  padding:var(--space-3) var(--space-5);
  border-radius:var(--radius-md);
  background:var(--surface-accent);
  color:var(--text-on-accent);
  font:var(--type-label);
  transition:top var(--dur-fast) var(--ease-standard);
}
.skip-link:focus-visible{ top:var(--space-4); color:var(--text-on-accent) }

/* ==========================================================================
   Primitives
   ========================================================================== */

.eyebrow{
  font:var(--type-eyebrow);
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--text-accent);
}
.eyebrow--muted{ color:var(--text-muted) }

/* Eyebrow preceded by the short brand rule. */
.eyebrow--ruled{
  display:flex;
  align-items:center;
  gap:var(--space-3);
}
.eyebrow--ruled::before{
  content:"";
  width:24px;
  height:1px;
  background:currentColor;
  opacity:.5;
  flex:none;
}

/* The energy dash: a parallelogram on the brand's 58deg angle system. */
.dash{
  display:block;
  width:44px;
  height:10px;
  flex:none;
  background:var(--gradient-energy);
  transform:skewX(var(--skew-brand));
}
.dash--lg{ width:72px; height:12px }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-3);
  height:var(--control-height-lg);
  padding-inline:var(--space-6);
  border:var(--border-width-hairline) solid transparent;
  border-radius:var(--radius-md);
  font:var(--type-body);
  font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-wide);
  white-space:nowrap;
  cursor:pointer;
  transition:var(--transition-control);
}
.btn--sm{ height:var(--control-height-sm); padding-inline:var(--space-4); font:var(--type-body-sm); font-weight:var(--weight-medium) }
.btn--md{ height:44px; padding-inline:var(--space-6) }

.btn--primary{ background:var(--action-primary-bg); color:var(--text-on-accent) }
.btn--primary:hover{ background:var(--action-primary-bg-hover); color:var(--text-on-accent); box-shadow:var(--glow-soft) }
.btn--primary:active{ background:var(--action-primary-bg-press); transform:scale(var(--press-scale)); box-shadow:none }

.btn--ghost{
  background:var(--action-secondary-bg);
  border-color:var(--border-default);
  color:var(--text-primary);
}
.btn--ghost:hover{ background:var(--action-secondary-bg-hover); color:var(--text-primary) }
.btn--ghost:active{ background:var(--action-secondary-bg-press); transform:scale(var(--press-scale)) }

.btn[disabled]{ opacity:.4; pointer-events:none }

/* Ambient blue bloom — the only thing that lights a page. */
.glow{
  position:absolute;
  border-radius:var(--radius-pill);
  background:var(--gradient-glow);
  pointer-events:none;
  transform:translate(-50%,-50%);
  will-change:opacity,transform;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header{
  position:sticky;
  top:0;
  z-index:var(--z-sticky);
  background:var(--surface-overlay);
  backdrop-filter:blur(var(--blur-md));
  -webkit-backdrop-filter:blur(var(--blur-md));
  border-bottom:var(--border-width-hairline) solid var(--border-subtle);
  transition:box-shadow var(--dur-base) var(--ease-standard);
}
.site-header[data-scrolled="true"]{ box-shadow:var(--shadow-md) }

.site-header__inner{
  display:flex;
  align-items:center;
  gap:var(--space-8);
  height:var(--header-height);
}

.brand{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  color:var(--text-primary);
  flex:none;
}
.brand:hover{ color:var(--text-primary) }
.brand__mark{ height:26px; width:auto }
.brand__label{
  font:var(--type-eyebrow);
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
}

.nav{
  display:flex;
  align-items:center;
  gap:var(--space-7);
  flex:1;
}
.nav__link{
  font:var(--type-eyebrow);
  letter-spacing:var(--tracking-micro);
  text-transform:uppercase;
  color:var(--text-muted);
  padding-block:var(--space-2);
  border-radius:var(--radius-xs);
}
.nav__link:hover{ color:var(--text-primary) }
.nav__link[aria-current="true"]{ color:var(--text-primary) }

.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:var(--control-height-sm);
  height:var(--control-height-sm);
  border:var(--border-width-hairline) solid var(--border-default);
  border-radius:var(--radius-md);
  background:var(--action-secondary-bg);
  cursor:pointer;
  transition:var(--transition-control);
}
.nav-toggle:hover{ background:var(--action-secondary-bg-hover) }
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after{
  display:block;
  width:14px;
  height:1.5px;
  background:var(--text-primary);
  transition:transform var(--dur-fast) var(--ease-standard),opacity var(--dur-fast) var(--ease-standard);
}
.nav-toggle__bars{ position:relative }
.nav-toggle__bars::before,
.nav-toggle__bars::after{ content:""; position:absolute; left:0 }
.nav-toggle__bars::before{ top:-5px }
.nav-toggle__bars::after{ top:5px }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{ background:transparent }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{ transform:translateY(5px) rotate(45deg) }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{ transform:translateY(-5px) rotate(-45deg) }

@media (max-width:820px){
  .site-header__inner{ gap:var(--space-4) }

  /* The toggle sits next to the panel it controls in the DOM, but reads last
     in the bar. The CTA takes the auto margin so the gap opens after the brand. */
  .nav-toggle{ display:inline-flex; order:3 }
  .site-header__cta{ order:2; margin-left:auto }

  .nav{
    position:absolute;
    inset-inline:0;
    top:var(--header-height);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:var(--space-2) var(--gutter) var(--space-5);
    background:var(--surface-canvas);
    border-bottom:var(--border-width-hairline) solid var(--border-subtle);
    box-shadow:var(--shadow-lg);
  }
  .nav[hidden]{ display:none }
  .nav__link{
    padding-block:var(--space-4);
    border-bottom:var(--border-width-hairline) solid var(--border-subtle);
  }
  .nav__link:last-child{ border-bottom:0 }
}

@media (max-width:380px){
  .brand__label{ display:none }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero{
  position:relative;
  overflow:hidden;
  border-bottom:var(--border-width-hairline) solid var(--border-subtle);
}
.hero__glow{
  width:1100px;
  height:1100px;
  left:64%;
  top:32%;
  animation:ep-glow-drift var(--dur-ambient) var(--ease-standard) infinite;
}
.hero__motif{
  position:absolute;
  left:-6%;
  bottom:-24%;
  width:620px;
  max-width:70%;
  opacity:.55;
  mix-blend-mode:screen;
  pointer-events:none;
}

.hero__grid{
  position:relative;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:var(--space-16);
  align-items:center;
  padding-block:calc(var(--section-pad)) var(--space-24);
}
.hero__copy{
  display:flex;
  flex-direction:column;
  gap:var(--space-6);
}
.hero__title{
  font:var(--type-display-1);
  letter-spacing:var(--tracking-display);
}
.hero__lead{
  font:var(--type-body-lg);
  color:var(--text-secondary);
  max-width:52ch;
}
.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3);
  margin-top:var(--space-2);
}
.hero__art{ display:flex; justify-content:center }
.hero__art img{
  width:76%;
  min-width:180px;
  filter:drop-shadow(0 24px 80px var(--blue-a40));
}

@media (max-width:900px){
  .hero__grid{ grid-template-columns:1fr; gap:var(--space-12) }
  .hero__art{ order:-1; justify-content:flex-start }
  .hero__art img{ width:min(280px,58%) }
  .hero__motif{ bottom:-14%; opacity:.4 }
}

/* --- Stats strip --- */
.stats{
  position:relative;
  border-top:var(--border-width-hairline) solid var(--border-subtle);
  background:var(--white-a04);
}
.stats__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding-block:var(--space-10);
}
.stat{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  padding-left:var(--space-8);
  border-left:var(--border-width-hairline) solid var(--border-subtle);
}
.stat__value{
  font:var(--type-h1);
  letter-spacing:var(--tracking-display);
  font-feature-settings:var(--feature-tabular);
}
.stat__label{
  font:var(--type-eyebrow);
  letter-spacing:var(--tracking-micro);
  text-transform:uppercase;
  color:var(--text-muted);
}

@media (max-width:820px){
  .stats__grid{ grid-template-columns:repeat(2,1fr); gap:var(--space-8) var(--space-4) }
  .stat{ padding-left:var(--space-5) }
}
@media (max-width:400px){
  .stats__grid{ grid-template-columns:1fr }
}

/* ==========================================================================
   Sections
   ========================================================================== */

.section{ padding-block:var(--section-pad) }
.section--raised{
  border-top:var(--border-width-hairline) solid var(--border-subtle);
  background:var(--surface-raised);
}

.section__head{
  max-width:820px;
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  margin-bottom:var(--space-16);
}
.section__title{
  font:var(--type-h1);
  letter-spacing:var(--tracking-tight);
}
.section__lead{
  font:var(--type-body-lg);
  color:var(--text-secondary);
  max-width:64ch;
}

@media (max-width:600px){
  .section__head{ margin-bottom:var(--space-10) }
}

/* --- Philosophy pillars --- */
.pillars{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--space-5);
}
.pillar{
  display:flex;
  flex-direction:column;
  gap:var(--space-5);
  min-height:200px;
  padding:var(--space-6);
  border:var(--border-width-hairline) solid var(--border-subtle);
  border-radius:var(--radius-xl);
  background-color:var(--surface-card);
  background-image:var(--gradient-card);
  box-shadow:var(--shadow-md),var(--inset-top-hairline);
  transition:var(--transition-surface);
}
.pillar:hover{
  transform:translateY(var(--lift-y));
  border-color:var(--border-default);
  box-shadow:var(--shadow-lg),var(--inset-top-hairline);
}
.pillar__title{
  font:var(--type-eyebrow);
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--text-primary);
}
.pillar__body{
  font:var(--type-body-sm);
  color:var(--text-secondary);
}

@media (max-width:1000px){
  .pillars{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:560px){
  .pillars{ grid-template-columns:1fr }
  .pillar{ min-height:0 }
}

/* --- Ecosystem --- */
.ventures{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--space-5);
  max-width:820px;
}
.venture{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  min-height:140px;
  padding:var(--space-6);
  border:var(--border-width-hairline) solid var(--border-subtle);
  border-radius:var(--radius-xl);
  background:var(--ink-700);
  transition:var(--transition-surface);
}
/* Each venture's own accent is allowed in its own ecosystem card; EP
   Indonesia's chrome stays blue. --venture-accent is set per card. */
.venture:hover{
  transform:translateY(var(--lift-y));
  border-color:color-mix(in srgb,var(--venture-accent,var(--blue-400)) 40%,transparent);
  box-shadow:var(--shadow-lg);
}
/* A venture card is a link once that venture has a site of its own. */
.venture--link{ color:var(--text-primary); cursor:pointer }
.venture--link:hover{ color:var(--text-primary) }
.venture__go{
  margin-left:auto;
  font-size:var(--size-body-sm);
  color:var(--text-muted);
  transition:var(--transition-control);
}
.venture--link:hover .venture__go{
  color:var(--venture-accent,var(--text-accent));
  transform:translate(2px,-2px);
}

.venture__head{
  display:flex;
  align-items:center;
  gap:var(--space-3);
}
.venture__mark{ height:22px; width:auto }
/* Square app-tile marks (EP Symphony) need more height to carry the same
   visual weight as the wide EP monogram beside them. */
.venture__mark--tile{ height:30px }
.venture__name{
  font:var(--type-h4);
  font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-tight);
}
.venture__line{
  font:var(--type-body-sm);
  color:var(--text-secondary);
}

@media (max-width:600px){
  .ventures{ grid-template-columns:1fr }
  .venture{ min-height:0 }
}

/* --- Closer --- */
.closer{
  position:relative;
  overflow:hidden;
  border-top:var(--border-width-hairline) solid var(--border-subtle);
}
.closer__glow{
  width:800px;
  height:800px;
  left:50%;
  top:60%;
  opacity:.7;
}
.closer__inner{
  position:relative;
  max-width:820px;
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-6);
  text-align:center;
  padding-block:var(--section-pad);
}
.closer__title{
  font:var(--type-display-2);
  letter-spacing:var(--tracking-display);
}
.tagline{
  display:flex;
  align-items:center;
  gap:var(--space-4);
  margin-top:var(--space-2);
  font:var(--type-eyebrow);
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--text-muted);
}
.tagline::before,
.tagline::after{
  content:"";
  width:28px;
  height:1px;
  background:var(--white-a28);
  flex:none;
}

/* ==========================================================================
   Contact form
   ========================================================================== */

.form{
  max-width:560px;
  display:flex;
  flex-direction:column;
  gap:var(--space-5);
  padding:var(--space-8);
  border:var(--border-width-hairline) solid var(--border-subtle);
  border-radius:var(--radius-xl);
  background-color:var(--surface-card);
  background-image:var(--gradient-card);
  box-shadow:var(--shadow-md),var(--inset-top-hairline);
}
.form__row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-4);
}
@media (max-width:520px){
  .form{ padding:var(--space-6) }
  .form__row{ grid-template-columns:1fr }
}

/* Honeypot. Moved off-screen rather than display:none — some bots skip fields
   they can tell are hidden, and this still keeps it away from humans. */
.hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.field{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  min-width:0;
}
.field__label{
  font:var(--type-eyebrow);
  letter-spacing:var(--tracking-micro);
  text-transform:uppercase;
  color:var(--text-muted);
}
.field__control{
  width:100%;
  padding:0 var(--space-4);
  height:var(--control-height-md);
  background:var(--surface-inset);
  border:var(--border-width-hairline) solid var(--border-default);
  border-radius:var(--radius-md);
  color:var(--text-primary);
  font:var(--type-body-sm);
  transition:var(--transition-control);
}
textarea.field__control{
  height:auto;
  padding:var(--space-3) var(--space-4);
  resize:vertical;
  min-height:110px;
  line-height:var(--leading-body);
}
.field__control::placeholder{ color:var(--grey-600) }
.field__control:hover{ border-color:var(--border-strong) }
.field__control:focus{ border-color:var(--border-accent) }
.field__control[aria-invalid="true"]{ border-color:var(--signal-critical) }

.field__error{
  font:var(--type-caption);
  color:var(--signal-critical);
  min-height:0;
}
.field__error:empty{ display:none }

.form__status{
  font:var(--type-body-sm);
  border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-4);
}
.form__status:empty{ display:none }
.form__status[data-state="success"]{
  background:var(--signal-positive-dim);
  color:var(--signal-positive);
}
.form__status[data-state="error"]{
  background:var(--signal-critical-dim);
  color:var(--signal-critical);
}

/* ==========================================================================
   Long-form pages (privacy, and anything legal that follows)
   ========================================================================== */

.prose{
  max-width:68ch;
  display:flex;
  flex-direction:column;
}
.prose__title{
  font:var(--type-h1);
  letter-spacing:var(--tracking-tight);
  margin-block:var(--space-4) var(--space-4);
}
.prose__lead{
  font:var(--type-body-lg);
  color:var(--text-secondary);
}
.prose__meta{
  font:var(--type-caption);
  color:var(--text-muted);
  margin-top:var(--space-3);
  padding-bottom:var(--space-8);
  border-bottom:var(--border-width-hairline) solid var(--border-subtle);
}
.prose h2{
  font:var(--type-h3);
  letter-spacing:var(--tracking-tight);
  margin-top:var(--space-10);
  margin-bottom:var(--space-3);
}
.prose h3{
  font:var(--type-h4);
  color:var(--text-secondary);
  margin-top:var(--space-6);
  margin-bottom:var(--space-2);
}
.prose p,
.prose li{
  font:var(--type-body);
  color:var(--text-secondary);
}
.prose p + p{ margin-top:var(--space-4) }
.prose ul{
  margin:var(--space-3) 0 0;
  padding-left:var(--space-5);
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
.prose li::marker{ color:var(--text-accent) }
.prose strong{ color:var(--text-primary);font-weight:var(--weight-medium) }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer{
  border-top:var(--border-width-hairline) solid var(--border-subtle);
  background:var(--surface-inset);
}
.site-footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--space-8);
  padding-block:var(--space-12);
}

/* The lockup is set as live text rather than a raster so the wordmark stays
   crisp at any size: mark + "EP" in brand blue + name in white, per the
   design system's wordmark rule (uppercase, --tracking-wordmark). */
.lockup{
  display:flex;
  align-items:center;
  gap:var(--space-4);
  color:var(--text-primary);
}
.lockup:hover{ color:var(--text-primary) }
.lockup__mark{ height:38px; width:auto }
.lockup__text{ display:flex; flex-direction:column; gap:var(--space-2) }
.lockup__wordmark{
  font-family:var(--font-display);
  font-size:var(--size-body-sm);
  font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-wordmark);
  text-transform:uppercase;
  line-height:var(--leading-none);
  white-space:nowrap;
}
.lockup__wordmark b{ color:var(--text-accent); font-weight:inherit }
.lockup__tagline{
  font-size:var(--size-micro);
  font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-micro);
  text-transform:uppercase;
  color:var(--text-muted);
  line-height:var(--leading-none);
  white-space:nowrap;
}
.site-footer__meta{
  font:var(--type-caption);
  color:var(--text-muted);
}

@media (max-width:560px){
  .lockup__wordmark{ letter-spacing:var(--tracking-eyebrow) }
}

/* ==========================================================================
   Entrance motion — a 12px rise plus fade, per the DS motion rules.
   Only applied once JS confirms IntersectionObserver support, so content is
   never hidden from a no-JS or reduced-motion visitor.
   ========================================================================== */

.js-reveal [data-reveal]{
  opacity:0;
  transform:translateY(12px);
  transition:opacity var(--dur-slow) var(--ease-entrance),transform var(--dur-slow) var(--ease-entrance);
}
.js-reveal [data-reveal].is-visible{ opacity:1; transform:none }

@media (prefers-reduced-motion:reduce){
  .js-reveal [data-reveal]{ opacity:1; transform:none }
  .hero__glow{ animation:none }
}