/*
 * Design 03 - FINAL CLIENT MERGED COMPOSITION
 *
 * IMPORTANT:
 * This file intentionally uses ONLY the original /baru v18 class system.
 * Typography, spacing tokens, buttons, cards and responsive behavior remain
 * controlled by assets/css/v18/common.css.  No new global font system is
 * introduced here.
 *
 * Client references:
 * - sondang1: hero + bright header
 * - sondang2: about + Monas
 * - sondang3: practice areas
 * - sondang4: industries + approach direction
 * - sondang5: contact/footer
 * - sondang6: bright header + five process cards + insights
 */

.s18-template-3{
  --s18-brick:#A13A28;
  --s18-gold:#DFA64E;
}

/* HEADER — keep the original /baru typography and proportions */
.s18-template-3 .s18-header{
  background:#ffffff;
  color:var(--s18-ink);
  box-shadow:0 6px 22px rgba(80,44,24,.06);
  backdrop-filter:none;
}
.s18-template-3 .s18-brand,
.s18-template-3 .s18-menu a{
  text-decoration:none;
}
.s18-template-3 .s18-menu a{
  opacity:.82;
}
.s18-template-3 .s18-menu a:hover{
  opacity:1;
  color:var(--s18-brick);
}
.s18-template-3 .s18-logo{
  background:#fff7e8;
  color:var(--s18-brick);
}

/* HERO — sondang1: no oversized white card, original editorial typography */
.s18-template-3 .s18-hero-layout{
  grid-template-columns:1.05fr .9fr;
  min-height:700px;
}
.s18-template-3 .s18-hero-copy{
  background:transparent;
  padding:0;
  border-radius:0;
  box-shadow:none;
}
.s18-template-3 .s18-hero-copy h1{
  font-family:var(--s18-serif);
  font-weight:600;
  letter-spacing:normal;
}
.s18-template-3 .s18-tagline{
  display:flex;
}
.s18-template-3 .s18-visual{
  min-height:540px;
}
.s18-template-3 .s18-portrait{
  height:630px;
  width:min(96%,620px);
  right:0;
  background:transparent;
  border:0;
  box-shadow:none;
  border-radius:0;
  overflow:visible;
}
.s18-template-3 .s18-portrait img{
  object-fit:contain;
  object-position:center bottom;
}

/* RED PRACTICE STRIP — sondang2/6 */
.s18-template-3 .s18-strip{
  background:#A13A28;
}
.s18-template-3 .s18-strip a{
  color:#fff;
  text-decoration:none;
  font-size:12px;
  font-weight:900;
}
.s18-template-3 .s18-strip i{
  color:#E5BD72;
}

/* ABOUT — sondang2: 2-column image/text + three stats underneath */
.s18-template-3 .s18-about-layout{
  grid-template-columns:1fr 1fr;
  gap:32px;
  align-items:center;
}
.s18-template-3 .s18-stat-grid{
  grid-column:1/-1;
  grid-template-columns:repeat(3,1fr);
}

/* PRACTICE — sondang3: three cards per row and readable original sizing */
.s18-template-3 .s18-practice-grid{
  grid-template-columns:repeat(3,1fr);
}
.s18-template-3 .s18-card-body h3{
  font-family:var(--s18-serif);
  font-size:20px;
  line-height:1.18;
}
.s18-template-3 .s18-card-body a,
.s18-template-3 .s18-section-head>a,
.s18-template-3 .s18-insight-grid a,
.s18-template-3 .s18-footer-links a{
  text-decoration:none;
}

/* INDUSTRIES — sondang4: clean six-card grid */
.s18-template-3 .s18-industries-layout{
  grid-template-columns:.85fr 1.35fr;
  gap:44px;
}
.s18-template-3 .s18-industry-list{
  grid-template-columns:repeat(3,1fr);
}

/* APPROACH — sondang4/6: five cards in one row on desktop */
.s18-template-3 .s18-process{
  grid-template-columns:repeat(5,1fr);
}

/* INSIGHTS — sondang6: heading + two-column editorial cards */
.s18-template-3 .s18-insight-layout{
  grid-template-columns:.72fr 1.4fr;
}
.s18-template-3 .s18-insight-grid{
  grid-template-columns:repeat(2,1fr);
}

/* CONTACT — retain original /baru contact treatment; only client email changes */
.s18-template-3 .s18-contact a{
  text-decoration:none;
}

/* FOOTER — sondang5: dark, restrained, original v18 typography */
.s18-template-3 .s18-footer{
  background:#15110d;
  color:#fff;
}
.s18-template-3 .s18-footer a,
.s18-template-3 .s18-footer p,
.s18-template-3 .s18-footer-contact{
  color:#d9c8ae;
  text-decoration:none;
}
.s18-template-3 .s18-footer-brand strong{
  color:#fff;
}

/* Desktop viewport target: keep the selected composition comfortably inside
   a normal 1366/1440px page without making typography smaller. */
@media (min-width:1051px){
  .s18-template-3 .s18-hero-layout{padding-top:58px;padding-bottom:58px}
  .s18-template-3 .s18-section{padding-top:72px;padding-bottom:72px}
}

@media(max-width:1050px){
  .s18-template-3 .s18-hero-layout,
  .s18-template-3 .s18-about-layout,
  .s18-template-3 .s18-industries-layout,
  .s18-template-3 .s18-insight-layout{
    grid-template-columns:1fr !important;
  }
  .s18-template-3 .s18-stat-grid{
    grid-template-columns:repeat(3,1fr) !important;
  }
  .s18-template-3 .s18-practice-grid,
  .s18-template-3 .s18-industry-list,
  .s18-template-3 .s18-process,
  .s18-template-3 .s18-insight-grid{
    grid-template-columns:repeat(2,1fr) !important;
  }
}

@media(max-width:680px){
  .s18-template-3 .s18-hero-layout{padding-top:42px;padding-bottom:42px}
  .s18-template-3 .s18-hero-copy h1{font-size:34px;line-height:1.1}
  .s18-template-3 .s18-tagline strong{font-size:21px}
  .s18-template-3 .s18-portrait{
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    width:100%;
    height:380px;
    margin:22px auto 0;
  }
  .s18-template-3 .s18-stat-grid,
  .s18-template-3 .s18-practice-grid,
  .s18-template-3 .s18-industry-list,
  .s18-template-3 .s18-process,
  .s18-template-3 .s18-insight-grid{
    grid-template-columns:1fr !important;
  }
}

/* =========================================================
   FINAL HERO LANDSCAPE PHOTO POSITION — 20 Aug 2026
   Selected client photo is 1672x941 (16:9). Keep the complete
   office scene visible and align it as an editorial image panel.
   ========================================================= */
@media (min-width:1051px){
  .s18-template-3 .s18-hero-layout{
    grid-template-columns:minmax(0,1.06fr) minmax(520px,.94fr);
    gap:56px;
    align-items:center;
  }

  .s18-template-3 .s18-visual{
    min-height:520px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding:18px 0 34px;
  }

  .s18-template-3 .s18-portrait{
    position:relative !important;
    inset:auto !important;
    transform:none !important;
    width:min(100%,620px) !important;
    height:auto !important;
    aspect-ratio:16 / 9;
    margin:0 0 0 auto;
    overflow:hidden !important;
    border-radius:24px !important;
    border:1px solid rgba(180,138,72,.48) !important;
    background:#fff !important;
    box-shadow:0 24px 58px rgba(61,36,19,.18) !important;
  }

  .s18-template-3 .s18-portrait:after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);
    pointer-events:none;
  }

  .s18-template-3 .s18-portrait img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    filter:none !important;
    display:block;
  }
}

@media (min-width:681px) and (max-width:1050px){
  .s18-template-3 .s18-visual{
    min-height:auto !important;
    padding-top:26px;
    justify-content:center;
  }
  .s18-template-3 .s18-portrait{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;
    width:min(100%,760px) !important;
    height:auto !important;
    aspect-ratio:16 / 9;
    margin:0 auto !important;
    overflow:hidden !important;
    border-radius:22px !important;
    border:1px solid rgba(180,138,72,.42) !important;
    background:#fff !important;
    box-shadow:0 20px 46px rgba(61,36,19,.15) !important;
  }
  .s18-template-3 .s18-portrait img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    filter:none !important;
  }
}

@media (max-width:680px){
  .s18-template-3 .s18-visual{
    min-height:auto !important;
    padding-top:20px;
  }
  .s18-template-3 .s18-portrait{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;
    width:100% !important;
    height:auto !important;
    aspect-ratio:16 / 9;
    margin:18px auto 0 !important;
    overflow:hidden !important;
    border-radius:18px !important;
    border:1px solid rgba(180,138,72,.36) !important;
    background:#fff !important;
    box-shadow:0 15px 34px rgba(61,36,19,.13) !important;
  }
  .s18-template-3 .s18-portrait img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    filter:none !important;
  }
}
.s18-article-title{display:block;margin:8px 22px 18px;font-size:14px;line-height:1.65;opacity:.82;word-break:break-word}