/*
Theme Name: Twenty Twenty-Five Child
Theme URI: https://bbr.haengjipsaveteran.com
Template: twentytwentyfive
Description: Roots 붙박이장리폼 전문 차일드 테마
Version: 2.0.0
Author: Roots
Author URI: https://bbr.haengjipsaveteran.com
Text Domain: twentytwentyfive-child
*/

/* ============================================================
   DESIGN TOKENS — BBR v2.3 (standard tier)
   Primary: #4A3728 (dark brown) / Accent: #C88B4A (warm gold)
   ============================================================ */
:root {
  /* — Color: Primary palette */
  --dp-primary:        #4A3728;
  --dp-primary-2:      #6B5040;
  --dp-primary-3:      #3A2B1E;
  --dp-primary-d:      #2C1F14;
  --dp-primary-d-rgb:  44, 31, 20;

  /* — Color: Accent */
  --dp-accent:         #C88B4A;
  --dp-accent-soft:    #E8C48A;

  /* — Color: Secondary / Backgrounds */
  --dp-secondary:      #6B5040;
  --dp-bg-soft:        #FAF7F2;
  --dp-bg-warm:        #F2ECE3;

  /* — Color: Borders */
  --dp-border:         #D1CCC1;
  --dp-border-soft:    #E5E0D8;

  /* — Color: Text */
  --dp-text:           #1A1A1A;
  --dp-text-sub:       #4A4540;
  --dp-text-muted:     #857D75;

  /* — Shape */
  --dp-radius:         0px;

  /* — Typography: Families */
  --dp-font-display:   "Noto Serif KR", Georgia, serif;
  --dp-font-heading:   "Noto Serif KR", Georgia, serif;
  --dp-font-body:      "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo", sans-serif;
  --dp-font-caps:      "Pretendard Variable", "Pretendard", sans-serif;

  /* — Typography: Scale */
  --dp-fs-display:     clamp(2.2rem,  5vw,   3.4rem);
  --dp-fs-h1:          clamp(1.75rem, 4vw,   2.6rem);
  --dp-fs-h2:          clamp(1.45rem, 3vw,   2rem);
  --dp-fs-h3:          clamp(1.1rem,  2vw,   1.35rem);
  --dp-fs-lede:        clamp(1rem,    1.5vw, 1.15rem);
  --dp-fs-body:        17px;
  --dp-lh-body:        1.9;

  /* — Layout */
  --dp-max-w:          1200px;
  --dp-max-w-wide:     1360px;
  --dp-max-w-text:     780px;
  --dp-gutter:         clamp(20px, 4vw, 40px);
  --dp-sec-pad:        clamp(56px, 8vw, 96px);

  /* — Shadows */
  --dp-shadow-sm:      0 2px 8px rgba(44, 31, 20, .06);
  --dp-shadow-md:      0 8px 24px rgba(44, 31, 20, .10);
  --dp-shadow-lg:      0 20px 48px rgba(44, 31, 20, .16);

  /* — Motion */
  --dp-ease:           cubic-bezier(.22, 1, .36, 1);
  --dp-ease-out:       cubic-bezier(.16, 1, .3, 1);

  /* — Legacy aliases (backward compat with existing rc- classes) */
  --color-primary:     #4A3728;
  --color-accent:      #C88B4A;
  --color-bg:          #FAF7F2;
  --color-text:        #1A1A1A;
  --font-heading:      "Noto Serif KR", Georgia, serif;
  --font-body:         "Pretendard Variable", "Pretendard", sans-serif;
  --base-font-size:    17px;
}


/* ============================================================
   RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 100%;
}

body {
  font-family: var(--dp-font-body);
  font-size: var(--dp-fs-body);
  line-height: var(--dp-lh-body);
  color: var(--dp-text);
  background-color: var(--dp-bg-soft);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol { padding-left: 1.4em; }
li { margin-bottom: .5em; }

p { margin-bottom: 1.2em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--dp-accent);
  text-decoration: none;
  transition: color .2s var(--dp-ease);
}
a:hover { color: var(--dp-primary); }


/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--dp-font-heading);
  color: var(--dp-primary);
  line-height: 1.35;
  letter-spacing: -.01em;
  font-weight: 700;
}

h1 { font-size: var(--dp-fs-h1); }
h2 { font-size: var(--dp-fs-h2); }
h3 { font-size: var(--dp-fs-h3); }

/* Eyebrow label */
.dp-eyebrow {
  display: block;
  font-family: var(--dp-font-caps);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dp-accent);
  margin-bottom: .75rem;
}

/* Section head group */
.dp-section-head {
  text-align: center;
  margin-bottom: clamp(32px, 5vw, 56px);
}
.dp-section-head h2 {
  margin-top: .4rem;
}
.dp-section-head p {
  max-width: var(--dp-max-w-text);
  margin: .8rem auto 0;
  color: var(--dp-text-sub);
  font-size: var(--dp-fs-lede);
}


/* ============================================================
   SITE HEADER
   ============================================================ */
.rc-site-header {
  background: #fff;
  border-bottom: 2px solid var(--dp-primary);
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 1px 0 rgba(44,31,20,.06);
}

.rc-header-inner {
  max-width: var(--dp-max-w);
  margin: 0 auto;
  padding: .85rem var(--dp-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .8rem;
}

/* Logo */
.rc-logo a {
  font-family: var(--dp-font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--dp-primary);
  text-decoration: none;
  letter-spacing: .02em;
}

/* Nav */
.rc-gnav {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .9rem;
}

.rc-gnav a {
  font-size: .9rem;
  font-weight: 500;
  color: var(--dp-text);
  text-decoration: none;
  padding-bottom: 2px;
  position: relative;
}

.rc-gnav a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--dp-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--dp-ease);
}

.rc-gnav a:hover::after { transform: scaleX(1); }
.rc-gnav a:hover { color: var(--dp-accent); }

/* Header CTA */
.rc-header-cta a {
  display: inline-block;
  background: var(--dp-accent);
  color: #fff;
  font-weight: 700;
  font-size: .88rem;
  padding: .5rem 1.1rem;
  border-radius: var(--dp-radius);
  white-space: nowrap;
  letter-spacing: .03em;
  transition: background .22s var(--dp-ease);
}
.rc-header-cta a:hover {
  background: var(--dp-primary);
  color: #fff;
}

/* Mobile nav */
.rc-mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: .4rem;
  color: var(--dp-primary);
  font-size: 1.4rem;
  line-height: 1;
}

@media (max-width: 640px) {
  .rc-gnav { display: none; }
  .rc-gnav.is-open {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border-top: 1px solid var(--dp-border-soft);
    padding: .8rem 0;
  }
  .rc-mobile-menu-toggle { display: block; }
}


/* ============================================================
   CTA BUTTONS
   ============================================================ */
.rc-btn-primary,
.dp-cta {
  display: inline-block;
  background: var(--dp-accent);
  color: #fff;
  font-family: var(--dp-font-caps);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .05em;
  padding: 14px 28px;
  min-height: 50px;
  border-radius: var(--dp-radius);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition: background .22s var(--dp-ease), transform .2s var(--dp-ease);
  vertical-align: middle;
}

.rc-btn-primary:hover,
.dp-cta:hover {
  background: var(--dp-primary);
  color: #fff;
}

.dp-cta--primary { background: var(--dp-accent); }
.dp-cta--primary:hover { background: var(--dp-primary); color: #fff; }

.dp-cta--outline {
  background: transparent;
  border: 1.5px solid var(--dp-accent);
  color: var(--dp-accent);
}
.dp-cta--outline:hover {
  background: var(--dp-accent);
  color: #fff;
}

.dp-cta--ghost {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.7);
  color: #fff;
}
.dp-cta--ghost:hover {
  background: rgba(255,255,255,.15);
  color: #fff;
}


/* ============================================================
   SECTION WRAPPERS
   ============================================================ */
.dp-section {
  padding: var(--dp-sec-pad) var(--dp-gutter);
}
.dp-section--soft { background: var(--dp-bg-soft); }
.dp-section--warm { background: var(--dp-bg-warm); }
.dp-section--dark {
  background: var(--dp-primary);
  color: #f5ede2;
}
.dp-section--dark h2,
.dp-section--dark h3 {
  color: #f5ede2;
}
.dp-section--tight {
  padding-top: clamp(32px, 4vw, 56px);
  padding-bottom: clamp(32px, 4vw, 56px);
}

.dp-container {
  max-width: var(--dp-max-w);
  margin-inline: auto;
}


/* ============================================================
   rc-section (legacy — keep for existing templates)
   ============================================================ */
.rc-section {
  max-width: var(--dp-max-w);
  margin: 0 auto;
  padding: clamp(48px, 7vw, 80px) var(--dp-gutter);
}
.rc-section-title {
  text-align: center;
  margin-bottom: clamp(24px, 4vw, 40px);
}


/* ============================================================
   TRUST BADGES (legacy rc- + new dp-)
   ============================================================ */
.rc-badges-wrap {
  background: var(--dp-primary);
  padding: 1.5rem var(--dp-gutter);
  text-align: center;
}
.rc-badges-wrap ul {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
  list-style: none;
  padding: 0;
}
.rc-badges-wrap li {
  background: rgba(255,255,255,.14);
  color: #fff;
  padding: .45rem 1.1rem;
  border-radius: 2px;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .02em;
}

/* Trust stats: large serif number + hairline + label */
.dp-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
}
.dp-trust__item {
  flex: 1 1 160px;
  text-align: center;
  padding: 2rem 1.5rem;
  border-right: 1px solid var(--dp-border);
}
.dp-trust__item:last-child { border-right: none; }
.dp-trust__hl {
  font-family: var(--dp-font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--dp-accent);
  line-height: 1;
  display: block;
  margin-bottom: .4rem;
}
.dp-trust__label {
  font-family: var(--dp-font-caps);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dp-text-muted);
}

@media (max-width: 480px) {
  .dp-trust__item { border-right: none; border-bottom: 1px solid var(--dp-border); }
  .dp-trust__item:last-child { border-bottom: none; }
}


/* ============================================================
   INTERNAL LINKS GRID
   ============================================================ */
.rc-link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .9rem;
  list-style: none;
  padding: 0;
}
.rc-link-grid a {
  display: block;
  padding: 1rem 1.2rem;
  background: #fff;
  border: 1px solid var(--dp-border);
  border-left: 3px solid var(--dp-accent);
  border-radius: var(--dp-radius);
  color: var(--dp-primary);
  font-weight: 600;
  font-size: .9rem;
  transition: box-shadow .2s var(--dp-ease), border-left-color .2s;
}
.rc-link-grid a:hover {
  box-shadow: var(--dp-shadow-md);
  border-left-color: var(--dp-primary);
}


/* ============================================================
   BENTO GRID HERO (.bbr-bento-grid + .rc-bento-*)
   ============================================================ */
.rc-hero {
  background: var(--dp-bg-soft);
  padding: clamp(48px, 7vw, 80px) var(--dp-gutter) clamp(40px, 5vw, 64px);
}

.rc-hero-inner {
  max-width: var(--dp-max-w);
  margin: 0 auto;
}

.rc-hero-text { margin-bottom: 2rem; }

.rc-hero-text h1 {
  font-size: var(--dp-fs-h1);
  margin-bottom: .75rem;
  line-height: 1.3;
}

.rc-hero-text p {
  font-size: var(--dp-fs-lede);
  color: var(--dp-text-sub);
  max-width: 560px;
  margin-bottom: 1.5rem;
  line-height: 1.8;
}

/* BBR Bento Grid — the spec layout */
.bbr-bento-grid,
.rc-bento-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  height: clamp(400px, 65vh, 680px);
  overflow: hidden;
}

.bbr-bento-main,
.rc-bento-main {
  grid-row: 1 / 3;
  overflow: hidden;
  position: relative;
  border-radius: var(--dp-radius);
}

.bbr-bento-top,
.rc-bento-sm1 {
  overflow: hidden;
  position: relative;
  border-radius: var(--dp-radius);
}

.bbr-bento-bottom,
.rc-bento-sm2 {
  overflow: hidden;
  position: relative;
  border-radius: var(--dp-radius);
}

.bbr-bento-grid figure,
.rc-bento-grid figure,
.rc-bento-item {
  overflow: hidden;
  position: relative;
  border-radius: var(--dp-radius);
  width: 100%;
  height: 100%;
  margin: 0;
}

.bbr-bento-grid img,
.rc-bento-grid img,
.rc-bento-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--dp-ease);
}

.bbr-bento-grid figure:hover img,
.rc-bento-item:hover img {
  transform: scale(1.04);
}

.rc-bento-item figcaption,
.bbr-bento-grid figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(var(--dp-primary-d-rgb), .72));
  color: #f5ede2;
  font-size: .82rem;
  padding: .6rem .9rem;
  font-weight: 500;
}

@media (max-width: 640px) {
  .bbr-bento-grid,
  .rc-bento-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
  }
  .bbr-bento-main,
  .rc-bento-main {
    grid-row: auto;
    aspect-ratio: 4/3;
  }
  .bbr-bento-top,
  .rc-bento-sm1,
  .bbr-bento-bottom,
  .rc-bento-sm2 {
    aspect-ratio: 16/9;
  }
}


/* ============================================================
   SERVICE SECTION
   ============================================================ */
.rc-service-intro {
  background: #fff;
  border-top: 3px solid var(--dp-accent);
}

.rc-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.4rem;
}

/* Service card: no background colour, mono number, no emoji */
.rc-service-card {
  padding: 1.6rem 1.4rem;
  background: var(--dp-bg-soft);
  border-top: 3px solid var(--dp-accent);
  border-radius: var(--dp-radius);
  position: relative;
  transition: box-shadow .25s var(--dp-ease), transform .25s var(--dp-ease);
}

.rc-service-card:hover {
  box-shadow: var(--dp-shadow-md);
  transform: translateY(-4px);
}

.rc-service-card__num {
  font-family: var(--dp-font-caps);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--dp-accent);
  display: block;
  margin-bottom: .6rem;
}

.rc-service-card h3 {
  font-size: 1.05rem;
  margin-bottom: .5rem;
  line-height: 1.4;
}

.rc-service-card p {
  font-size: .9rem;
  color: var(--dp-text-sub);
  margin: 0;
  line-height: 1.7;
}

/* dp- service cards (for page-service.php etc.) */
.dp-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.4rem;
}

.dp-service-card {
  background: #fff;
  border-top: 3px solid var(--dp-accent);
  border-radius: var(--dp-radius);
  overflow: hidden;
  transition: box-shadow .25s var(--dp-ease), transform .25s var(--dp-ease);
}

.dp-service-card:hover {
  box-shadow: var(--dp-shadow-md);
  transform: translateY(-4px);
}

.dp-service-card__img {
  aspect-ratio: 16/11;
  overflow: hidden;
  background: var(--dp-bg-warm);
}

.dp-service-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--dp-ease);
}

.dp-service-card:hover .dp-service-card__img img {
  transform: scale(1.05);
}

.dp-service-card__body {
  padding: 1.2rem 1.4rem 1.4rem;
}

.dp-service-card__num {
  font-family: var(--dp-font-caps);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--dp-accent);
  display: block;
  margin-bottom: .5rem;
}

.dp-service-card h3 { font-size: 1.05rem; margin-bottom: .4rem; }

.dp-service-card p {
  font-size: .88rem;
  color: var(--dp-text-sub);
  margin: 0;
  line-height: 1.7;
}

/* dp-more link */
.dp-more {
  display: inline-block;
  margin-top: .8rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--dp-accent);
  letter-spacing: .04em;
  text-decoration: none;
  position: relative;
  padding-bottom: 1px;
}
.dp-more::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--dp-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--dp-ease);
}
.dp-more:hover::after { transform: scaleX(1); }


/* ============================================================
   MARQUEE SECTION (.jgo-marquee + .rc-marquee-*)
   ============================================================ */
.rc-marquee-wrap,
.jgo-marquee {
  overflow: hidden;
  background: var(--dp-bg-warm);
  padding: clamp(24px, 3vw, 40px) 0;
  border-top: 1px solid var(--dp-border);
  border-bottom: 1px solid var(--dp-border);
}

.rc-marquee-title {
  text-align: center;
  font-family: var(--dp-font-caps);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dp-primary);
  margin-bottom: 1rem;
}

.jgo-marquee__label {
  text-align: center;
  font-family: var(--dp-font-caps);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dp-primary);
  margin-bottom: 1rem;
}

.rc-marquee-track,
.jgo-marquee__track {
  display: flex;
  gap: 1rem;
  animation: dp-marquee-scroll 32s linear infinite;
  width: max-content;
}

.rc-marquee-track:hover,
.jgo-marquee__track:hover {
  animation-play-state: paused;
}

@keyframes dp-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* keep legacy keyframe name too */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.rc-marquee-item,
.jgo-marquee__item {
  flex-shrink: 0;
  width: clamp(160px, 18vw, 240px);
  height: clamp(180px, 22vw, 260px);
  overflow: hidden;
  border-radius: var(--dp-radius);
}

.rc-marquee-item img,
.jgo-marquee__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4/3;
  display: block;
}


/* ============================================================
   PORTFOLIO BENTO GRID (.portfolio-bento)
   ============================================================ */
.portfolio-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: clamp(32px, 4vw, 48px);
}

/* Span helper classes */
.portfolio-bento__item--tall { grid-row: span 2; }
.portfolio-bento__item--wide { grid-column: span 2; }

.portfolio-bento__item {
  overflow: hidden;
  position: relative;
  border-radius: var(--dp-radius);
  background: var(--dp-bg-warm);
  cursor: pointer;
  /* accent top border animated on hover */
  border-top: 3px solid transparent;
  transition: transform .3s var(--dp-ease), box-shadow .3s var(--dp-ease), border-top-color .3s;
}

.portfolio-bento__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--dp-shadow-lg);
  border-top-color: var(--dp-accent);
}

.portfolio-bento__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--dp-ease);
}

.portfolio-bento__item:hover img {
  transform: scale(1.04);
}

.portfolio-bento__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(var(--dp-primary-d-rgb), .75));
  color: #f5ede2;
  font-size: .82rem;
  padding: 1.2rem .9rem .7rem;
  opacity: 0;
  transition: opacity .3s var(--dp-ease);
}

.portfolio-bento__item:hover .portfolio-bento__caption {
  opacity: 1;
}

@media (max-width: 768px) {
  .portfolio-bento { grid-template-columns: repeat(2, 1fr); }
  .portfolio-bento__item--tall { grid-row: span 1; }
  .portfolio-bento__item--wide { grid-column: span 1; }
}

@media (max-width: 480px) {
  .portfolio-bento { grid-template-columns: 1fr; }
}


/* ============================================================
   BEFORE / AFTER CARDS
   ============================================================ */
.rc-ba-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.8rem;
  list-style: none;
  padding: 0;
}

.rc-ba-card {
  background: #fff;
  border-radius: var(--dp-radius);
  overflow: hidden;
  box-shadow: var(--dp-shadow-sm);
  border: 1px solid var(--dp-border-soft);
  transition: box-shadow .25s var(--dp-ease), transform .25s var(--dp-ease);
}

.rc-ba-card:hover {
  box-shadow: var(--dp-shadow-md);
  transform: translateY(-3px);
}

.rc-ba-imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.rc-ba-img-wrap {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--dp-bg-warm);
}

.rc-ba-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s var(--dp-ease);
}

.rc-ba-card:hover .rc-ba-img-wrap img { transform: scale(1.04); }

.rc-ba-label {
  position: absolute;
  top: .4rem;
  left: .5rem;
  background: var(--dp-primary);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .18rem .5rem;
  border-radius: var(--dp-radius);
}

.rc-ba-label.after { background: var(--dp-accent); }

.rc-ba-body { padding: 1rem 1.2rem 1.3rem; }
.rc-ba-body h3 { font-size: 1rem; margin-bottom: .35rem; color: var(--dp-primary); }
.rc-ba-body p  { font-size: .88rem; color: var(--dp-text-sub); margin: 0; }


/* ============================================================
   PORT HERO (legacy page-portfolio.php)
   ============================================================ */
.rc-port-hero {
  background: var(--dp-primary);
  color: #f5ede2;
  padding: clamp(48px, 7vw, 80px) var(--dp-gutter) clamp(32px, 4vw, 48px);
}

.rc-port-hero h1 {
  color: #f5ede2;
  margin-bottom: .75rem;
  font-size: var(--dp-fs-h1);
}

.rc-port-hero p {
  color: #d5c4b0;
  max-width: 600px;
  margin-bottom: 1.5rem;
}

.rc-port-bento {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: auto auto;
  gap: 8px;
  max-width: var(--dp-max-w);
  margin: 0 auto;
}

.rc-port-bento-item {
  overflow: hidden;
  border-radius: var(--dp-radius);
  position: relative;
  background: var(--dp-primary-d);
}

.rc-port-bento-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--dp-ease);
}

.rc-port-bento-item:hover img { transform: scale(1.04); }
.rc-port-bento-main { grid-row: 1/3; aspect-ratio: 2/3; }
.rc-port-bento-sm1  { aspect-ratio: 4/3; }
.rc-port-bento-sm2  { aspect-ratio: 1/1; }

.rc-port-bento-item figcaption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(var(--dp-primary-d-rgb), .8));
  color: #f5ede2;
  font-size: .82rem;
  padding: .6rem .9rem;
}

@media (max-width: 640px) {
  .rc-port-bento { grid-template-columns: 1fr; grid-template-rows: auto; }
  .rc-port-bento-main { aspect-ratio: 4/3; grid-row: auto; }
}


/* ============================================================
   CTA BANNER (split layout)
   ============================================================ */
.rc-cta-band,
.dp-cta-banner {
  background: linear-gradient(135deg, var(--dp-primary) 0%, var(--dp-primary-d) 100%);
  color: #f5ede2;
  text-align: center;
  padding: clamp(48px, 7vw, 80px) var(--dp-gutter);
}

.rc-cta-band h2,
.dp-cta-banner h2 {
  color: #f5ede2;
  margin-bottom: .9rem;
  font-size: var(--dp-fs-h2);
}

.rc-cta-band p,
.dp-cta-banner p {
  margin-bottom: 1.8rem;
  font-size: var(--dp-fs-lede);
  color: #d5c4b0;
}

/* Split layout variant */
.dp-cta-banner--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: left;
  padding: 0;
  background: none;
  overflow: hidden;
}

.dp-cta-banner__media {
  overflow: hidden;
  min-height: 320px;
}

.dp-cta-banner__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dp-cta-banner__body {
  background: var(--dp-primary);
  padding: clamp(40px, 6vw, 72px) clamp(28px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .8rem;
}

.dp-cta-banner__body h2 {
  color: #f5ede2;
  margin-bottom: .6rem;
}

.dp-cta-banner__body p {
  color: #d5c4b0;
  margin-bottom: 1.4rem;
}

@media (max-width: 768px) {
  .dp-cta-banner--split {
    grid-template-columns: 1fr;
  }
  .dp-cta-banner__media { min-height: 220px; }
}


/* ============================================================
   PROCESS STEPS
   ============================================================ */
.dp-steps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.6rem;
  counter-reset: step;
}

.dp-step {
  padding: 1.6rem 1.4rem;
  background: #fff;
  border-top: 3px solid var(--dp-accent);
  border-radius: var(--dp-radius);
  position: relative;
}

.dp-step__num {
  font-family: var(--dp-font-display);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--dp-accent);
  line-height: 1;
  display: block;
  margin-bottom: .8rem;
  letter-spacing: -.02em;
}

.dp-step h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.dp-step p  { font-size: .88rem; color: var(--dp-text-sub); margin: 0; }


/* ============================================================
   FAQ (details / summary)
   ============================================================ */
.dp-faq-list { list-style: none; padding: 0; }

.dp-faq-list details {
  border-top: 1px solid var(--dp-border);
  border-bottom: 1px solid transparent;
}
.dp-faq-list details:last-child {
  border-bottom: 1px solid var(--dp-border);
}
.dp-faq-list details[open] {
  border-bottom-color: var(--dp-border);
}

.dp-faq-list summary {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: var(--dp-primary);
  font-size: .97rem;
}
.dp-faq-list summary::-webkit-details-marker { display: none; }

.dp-faq-list summary::after {
  content: "+";
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--dp-accent);
  flex-shrink: 0;
  margin-left: 1rem;
  transition: transform .25s var(--dp-ease);
}
.dp-faq-list details[open] summary::after {
  content: "\00D7";
  transform: rotate(0deg);
}

.dp-faq-list details > div {
  padding: 0 0 1.2rem;
  color: var(--dp-text-sub);
  font-size: .92rem;
  line-height: 1.75;
}


/* ============================================================
   TABLE
   ============================================================ */
.dp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}

.dp-table thead th {
  font-family: var(--dp-font-caps);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dp-text-muted);
  border-bottom: 1px solid var(--dp-border);
  padding: .75rem .8rem;
  text-align: left;
  font-weight: 700;
}

.dp-table tbody td {
  padding: .75rem .8rem;
  border-bottom: 1px solid var(--dp-border-soft);
  color: var(--dp-text);
  vertical-align: top;
}

.dp-table tbody tr:last-child td { border-bottom: none; }

.dp-table tbody tr:hover td { background: var(--dp-bg-soft); }


/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.dp-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--dp-ease-out), transform .6s var(--dp-ease-out);
}

.dp-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger siblings */
.dp-reveal:nth-child(2) { transition-delay: .1s; }
.dp-reveal:nth-child(3) { transition-delay: .18s; }
.dp-reveal:nth-child(4) { transition-delay: .26s; }
.dp-reveal:nth-child(5) { transition-delay: .34s; }

@media (prefers-reduced-motion: reduce) {
  .dp-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ============================================================
   NSEO CARD GRID
   ============================================================ */
.nseo-card-grid { padding: clamp(32px, 5vw, 56px) var(--dp-gutter); }

.nseo-grid-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .8rem;
  list-style: none;
  padding: 0;
  max-width: var(--dp-max-w);
  margin: 0 auto;
}

.nseo-card a {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .9rem 1rem;
  background: #fff;
  border: 1px solid var(--dp-border-soft);
  border-left: 3px solid var(--dp-accent);
  border-radius: var(--dp-radius);
  text-decoration: none;
  transition: box-shadow .2s var(--dp-ease);
}

.nseo-card a:hover { box-shadow: var(--dp-shadow-md); }

.nseo-card strong {
  font-size: .92rem;
  font-weight: 700;
  color: var(--dp-primary);
}

.nseo-card span {
  font-size: .78rem;
  color: var(--dp-text-muted);
}


/* ============================================================
   FOOTER
   ============================================================ */
.rc-site-footer {
  background: var(--dp-primary);
  color: #f5ede2;
  padding: 2.5rem var(--dp-gutter);
  margin-top: 4rem;
}

.rc-footer-inner {
  max-width: var(--dp-max-w);
  margin: 0 auto;
}

.rc-footer-nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.1rem;
  margin-bottom: 1.5rem;
}

.rc-footer-nav a {
  color: #f5ede2;
  font-size: .88rem;
  text-decoration: none;
  transition: color .2s;
}
.rc-footer-nav a:hover { color: var(--dp-accent); }

.rc-footer-biz {
  font-size: .82rem;
  line-height: 1.8;
  color: #d5c4b0;
  margin-bottom: .8rem;
}

.rc-footer-copy {
  font-size: .78rem;
  color: #b0997e;
}


/* ============================================================
   PAGE-SPECIFIC — Sub page hero
   ============================================================ */
.dp-page-hero {
  background: var(--dp-primary);
  color: #f5ede2;
  padding: clamp(48px, 7vw, 80px) var(--dp-gutter) clamp(40px, 5vw, 64px);
}

.dp-page-hero h1 {
  color: #f5ede2;
  font-size: var(--dp-fs-h1);
  margin-bottom: .75rem;
}

.dp-page-hero p {
  color: #d5c4b0;
  max-width: 600px;
  font-size: var(--dp-fs-lede);
}

.dp-page-hero__inner {
  max-width: var(--dp-max-w);
  margin: 0 auto;
}


/* ============================================================
   CONSULT PAGE
   ============================================================ */
.dp-consult-wrap {
  max-width: 640px;
  margin: 0 auto;
}

.dp-contact-box {
  background: #fff;
  border: 1px solid var(--dp-border-soft);
  border-top: 3px solid var(--dp-accent);
  border-radius: var(--dp-radius);
  padding: clamp(24px, 4vw, 40px);
  box-shadow: var(--dp-shadow-sm);
}

.dp-contact-box h2 { margin-bottom: 1rem; }
.dp-contact-box p  { color: var(--dp-text-sub); }

.dp-tel-link {
  display: inline-block;
  font-family: var(--dp-font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--dp-primary);
  text-decoration: none;
  margin: .5rem 0;
}
.dp-tel-link:hover { color: var(--dp-accent); }


/* ============================================================
   UTILITY
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

.text-center { text-align: center; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }


/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .rc-site-header,
  .rc-site-footer,
  .rc-cta-band,
  .dp-cta-banner { display: none; }
}