/* ==========================================================================
   PT. INDOKORES SAHABAT — Concept 3: Editorial / Photography-led
   Reference mood: full-bleed imagery, quiet type, generous negative space
   ========================================================================== */

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

:root{
  --paper: #FFFFFF;
  --ink: #0A0A0A;
  --ink-soft: #5A5A5A;
  --bronze: #C81E2C;
  --line: #E3E3E3;
  --overlay: rgba(10,10,10,.5);

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', -apple-system, sans-serif;

  --max: 1320px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body::before{ content:""; display:block; height:5px; background:var(--bronze); position:relative; z-index:60; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 48px; }
@media (max-width:820px){ .wrap{ padding:0 24px; } }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

.eyebrow{
  font-family:var(--sans); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--bronze); font-weight:600;
}
h1,h2,h3{ font-family:var(--serif); font-weight:400; letter-spacing:0; }

/* ---------- nav: transparent-over-photo ---------- */
header.site{
  position:absolute; top:0; left:0; right:0; z-index:50;
  padding:32px 0;
}
header.site.solid{ position:sticky; background:var(--paper); border-bottom:1px solid var(--line); padding:20px 0; }
.nav{ display:flex; align-items:center; justify-content:space-between; max-width:var(--max); margin:0 auto; padding:0 48px; }
.logo{
  font-family:var(--serif); font-size:20px; letter-spacing:.08em; text-transform:uppercase;
  color:#fff;
}
header.site.solid .logo{ color:var(--ink); }
.navlinks{ display:flex; gap:40px; }
.navlinks a{
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.88);
}
header.site.solid .navlinks a{ color:var(--ink-soft); }
.navlinks a:hover{ color:var(--bronze); }
.navtoggle{ display:none; background:none; border:0; font-size:20px; cursor:pointer; color:#fff; }
header.site.solid .navtoggle{ color:var(--ink); }
@media (max-width:820px){ .navlinks{ display:none; } .navtoggle{ display:block; } }

/* ---------- full-bleed hero image ---------- */
.hero-photo{
  position:relative; height:92vh; min-height:560px;
  background:
    linear-gradient(var(--overlay), var(--overlay)),
    linear-gradient(135deg, #0A0A0A, #2A2A2A 55%, #3C3C3C);
  display:flex; align-items:flex-end;
}
.hero-photo .caption{
  position:absolute; bottom:24px; right:48px;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.7);
}
.hero-copy{ padding:0 48px 88px; max-width:900px; }
.hero-copy .eyebrow{ color:var(--bronze); }
.hero-copy h1{
  font-size:clamp(38px, 6vw, 78px); color:#fff; line-height:1.06; margin:20px 0 26px;
  font-weight:300;
}
.hero-copy h1 em{ font-style:italic; font-weight:400; }
.hero-copy p{ font-size:16px; color:rgba(255,255,255,.85); max-width:52ch; margin-bottom:32px; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  padding:15px 30px; border:1.5px solid var(--bronze);
  transition:all .25s ease;
}
.btn.on-photo{ color:#fff; }
.btn.on-photo:hover{ background:var(--bronze); color:#fff; }
.btn.dark{ color:var(--ink); }
.btn.dark:hover{ background:var(--bronze); color:#fff; }

/* ---------- alternating image/text panels ---------- */
.panel{ display:grid; grid-template-columns:1fr 1fr; }
.panel .photo{
  aspect-ratio:4/5; background:linear-gradient(135deg,#EDEDED,#C9C9C9);
  display:flex; align-items:center; justify-content:center;
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
}
.panel .copy{ display:flex; flex-direction:column; justify-content:center; padding:64px 72px; }
.panel .copy h2{ font-size:clamp(28px,3vw,42px); margin:14px 0 20px; font-weight:400; }
.panel .copy p{ font-size:15px; color:var(--ink-soft); max-width:44ch; margin-bottom:8px; }
.panel.reverse{ direction:rtl; }
.panel.reverse .copy, .panel.reverse .photo{ direction:ltr; }
@media (max-width:900px){
  .panel, .panel.reverse{ grid-template-columns:1fr; direction:ltr; }
  .panel .copy{ padding:48px 24px; }
}

/* ---------- quiet stat row ---------- */
.statrow{
  display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.statrow div{ padding:40px 24px; text-align:center; border-left:1px solid var(--line); }
.statrow div:first-child{ border-left:0; }
.statrow .num{ font-family:var(--serif); font-size:40px; font-weight:400; }
.statrow .label{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-top:8px; }
@media (max-width:760px){ .statrow{ grid-template-columns:1fr 1fr; } .statrow div:nth-child(2n+1){ border-left:0; } }

/* ---------- product gallery ---------- */
section{ padding:96px 0; }
section.tight{ padding:0; }
.section-head{ max-width:640px; margin:0 auto 56px; text-align:center; }
.section-head h2{ font-size:clamp(28px,3.4vw,44px); margin-top:14px; font-weight:400; }
.section-head p{ color:var(--ink-soft); margin-top:14px; font-size:15px; }

.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); }
.gallery a{ background:var(--paper); }
.gallery .photo{
  aspect-ratio:3/4; background:linear-gradient(160deg,#EFEFEF,#CFCFCF);
  display:flex; align-items:center; justify-content:center;
  font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
}
.gallery .cap{ padding:18px 4px; text-align:center; }
.gallery .cap .eyebrow{ font-size:10px; }
.gallery .cap h3{ font-size:19px; margin-top:6px; font-weight:400; }
@media (max-width:820px){ .gallery{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .gallery{ grid-template-columns:1fr; } }

/* ---------- cta band ---------- */
.cta-band{
  position:relative; padding:120px 0; text-align:center; color:#fff;
  background:
    linear-gradient(var(--overlay), var(--overlay)),
    linear-gradient(135deg, #0A0A0A, #1E1E1E);
}
.cta-band .eyebrow{ color:var(--bronze); }
.cta-band h2{ font-size:clamp(28px,3.6vw,46px); margin:18px 0 30px; font-weight:300; color:#fff; }

/* ---------- footer ---------- */
footer{ padding:64px 0 32px; border-top:1px solid var(--line); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:40px; }
footer h4{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); margin-bottom:16px; }
footer a, footer li{ font-size:13.5px; margin-bottom:10px; display:block; color:var(--ink-soft); }
footer a:hover{ color:var(--bronze); }
.footer-bottom{ border-top:1px solid var(--line); display:flex; justify-content:space-between; padding-top:22px; font-size:11.5px; color:var(--ink-soft); flex-wrap:wrap; gap:10px; }
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }

.imgnote{
  font-size:12px; color:var(--ink-soft); text-align:center; padding:14px 24px; background:#F5F5F5; border-top:1px solid var(--line);
}