:root {
  --navy: #062f66;
  --navy-deep: #05234d;
  --blue-soft: #eef6fc;
  --blue-line: #c9dae9;
  --gold: #dec49b;
  --gold-soft: #f5ead8;
  --rose-soft: #fff4ef;
  --warm-line: #ead6bf;
  --ink: #092b5a;
  --muted: #5e7190;
  --white: #ffffff;
  --shadow: 0 18px 45px rgba(8, 48, 97, 0.13);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", Georgia, serif;
  line-height: 1.75;
  background:
    radial-gradient(circle at 8% 16%, rgba(214, 234, 248, 0.9) 0 14%, transparent 15%),
    radial-gradient(circle at 92% 30%, rgba(245, 234, 216, 0.72) 0 12%, transparent 13%),
    linear-gradient(180deg, #f8fbff 0%, #fffdf9 48%, #f3f8fc 100%);
}

.mobile-contact-button {
  display: none;
}

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

a {
  color: inherit;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 14px 0;
  background: rgba(248, 251, 255, 0.92);
  backdrop-filter: blur(12px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
}

.brand img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
}

.nav {
  display: flex;
  gap: 18px;
  font-size: 0.95rem;
  font-weight: 700;
}

.nav a {
  text-decoration: none;
}

.section {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto 18px;
}

.hero {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 28px;
  align-items: stretch;
  padding: 28px 0 4px;
}

.profile-panel,
.hero-copy,
.intro,
.panel,
.soft,
.tools-section,
.flow-section,
.reel-section,
.voice-section,
.story-section,
.contact-section {
  border: 1px solid var(--blue-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--shadow);
}

.profile-panel {
  display: grid;
  place-items: center;
  padding: 34px 24px 30px;
  text-align: center;
}

.profile-photo {
  width: 210px;
  height: 210px;
  overflow: hidden;
  border: 2px solid #9cb7d2;
  border-radius: 50%;
  background: var(--blue-soft);
}

.profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-panel h1,
.hero-copy h2,
.section-title h2,
.panel h2,
.info-card h2 {
  margin: 0;
  color: var(--navy-deep);
  line-height: 1.35;
}

.profile-panel h1 {
  font-size: clamp(1.8rem, 4vw, 2.25rem);
  letter-spacing: 0;
  margin-top: 24px;
}

.roman {
  margin: 4px 0 0;
  font-size: 1rem;
  letter-spacing: 0;
}

.hero-copy {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 5vw, 54px);
}

.hero-copy::before,
.hero-copy::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.hero-copy::before {
  top: 0;
  right: 0;
  width: 150px;
  height: 10px;
  background: var(--navy);
}

.hero-copy::after {
  right: -36px;
  bottom: -36px;
  width: 130px;
  height: 130px;
  background: linear-gradient(135deg, transparent 50%, var(--gold-soft) 51%);
}

.eyebrow {
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #9bb4cc;
  font-weight: 700;
}

.hero-copy h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  margin-bottom: 20px;
}

.hero-copy p {
  max-width: 720px;
  margin: 0 0 24px;
  font-size: 1.08rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 22px;
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
}

.button.primary {
  color: var(--white);
  background: var(--navy);
}

.button.secondary {
  border: 1px solid var(--navy);
  color: var(--navy);
  background: var(--white);
}

.intro {
  padding: 24px 32px;
}

.intro p {
  max-width: 760px;
  margin: 16px 0 0 76px;
  font-size: 1.08rem;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 14px;
}

.section-title::after {
  content: "";
  flex: 1;
  border-top: 1px dashed #9bb4cc;
}

.title-icon {
  display: inline-grid;
  place-items: center;
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--white);
  background: var(--navy);
  font-family: Arial, sans-serif;
  font-size: 0;
  font-weight: 700;
  text-transform: uppercase;
}

.title-icon::before,
.title-icon::after {
  position: absolute;
  content: "";
}

.title-icon::before {
  width: 2px;
  height: 22px;
  border-radius: 999px;
  background: rgba(64, 91, 69, 0.72);
  transform: rotate(22deg);
}

.title-icon::after {
  width: 22px;
  height: 16px;
  border: 2px solid rgba(64, 91, 69, 0.7);
  border-left: 0;
  border-bottom: 0;
  border-radius: 80% 0 80% 0;
  transform: translate(4px, -3px) rotate(-18deg);
}

.section-title h2,
.panel h2 {
  font-size: clamp(1.45rem, 3vw, 1.9rem);
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.panel {
  padding: 0 22px 20px;
}

.panel > h2 {
  margin: 0 -22px 18px;
  padding: 12px 24px;
}

.dark-heading > h2 {
  color: var(--white);
  background: linear-gradient(90deg, var(--navy) 0%, var(--navy-deep) 82%, transparent 82%);
}

.strengths > h2 {
  background: linear-gradient(90deg, var(--gold-soft), #fff7eb);
}

.check-list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding-left: 24px;
  font-size: 1.05rem;
  font-weight: 700;
}

.check-list li::marker {
  color: var(--navy);
}

.strength-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px;
  border: 1px solid #dfe8f0;
  border-radius: 8px;
  background: var(--white);
}

.strength-card + .strength-card {
  margin-top: 10px;
}

.strength-card span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: var(--white);
  background: linear-gradient(135deg, #c8a06c, #ecd7b7);
  font-family: Georgia, serif;
  font-size: 1.3rem;
  font-weight: 700;
}

.strength-card h3,
.service-grid h3,
.flow h3,
.work-card h3 {
  margin: 0;
  color: var(--navy-deep);
  line-height: 1.45;
}

.strength-card p,
.service-grid p,
.flow p,
.work-card p {
  margin: 2px 0 0;
}

.soft,
.tools-section,
.flow-section,
.reel-section,
.voice-section,
.story-section {
  padding: 22px;
}

.soft {
  background: linear-gradient(180deg, #edf6fc 0%, #ffffff 42%);
}

.tools-section {
  background: rgba(255, 255, 255, 0.9);
}

.tools-lead {
  margin: 16px 0 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.tool-grid article {
  padding: 18px 16px;
  border: 1px solid #d8e4ee;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
}

.tool-grid h3 {
  margin: 0 0 8px;
  color: var(--navy-deep);
  font-size: 1.05rem;
  line-height: 1.45;
}

.tool-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.65;
}

.voice-section {
  background: linear-gradient(135deg, #ffffff 0%, var(--rose-soft) 100%);
}

.voice-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 20px;
  align-items: stretch;
  margin-top: 18px;
}

.voice-copy,
.review-image,
.story-card {
  border: 1px solid var(--warm-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
}

.voice-copy {
  padding: 24px;
}

.quote {
  margin: 0 0 12px;
  color: var(--navy-deep);
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.55;
}

.rating-box {
  margin: 18px 0;
  padding: 16px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--gold-soft), #ffffff);
}

.rating-score {
  display: inline-block;
  margin-bottom: 6px;
  color: var(--navy-deep);
  font-size: 1.2rem;
  font-weight: 700;
}

.note {
  color: var(--muted);
  font-size: 0.96rem;
}

.review-image {
  display: grid;
  place-items: center;
  min-height: 260px;
  padding: 18px;
}

.review-image img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(8, 48, 97, 0.1);
}

.story-section {
  background: linear-gradient(135deg, #fffdf9, #eef6fc);
}

.story-card {
  position: relative;
  margin-top: 18px;
  padding: clamp(22px, 4vw, 34px);
}

.story-card::before {
  position: absolute;
  top: 20px;
  right: 24px;
  content: "Kae Smart Works";
  color: rgba(222, 196, 155, 0.35);
  font-family: Georgia, serif;
  font-size: clamp(1.5rem, 4vw, 2.6rem);
  font-weight: 700;
}

.story-card p {
  position: relative;
  max-width: 880px;
  margin: 0;
  font-size: 1.06rem;
}

.story-card p + p {
  margin-top: 16px;
}

.story-closing {
  color: var(--navy-deep);
  font-size: 1.18rem;
  font-weight: 700;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.service-grid article {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  min-height: 112px;
  padding: 16px;
  border: 1px solid #d8e4ee;
  border-radius: 8px;
  background: var(--white);
}

.service-grid h3 {
  word-break: keep-all;
  overflow-wrap: normal;
}

.service-grid p {
  grid-column: 1 / -1;
  word-break: keep-all;
  overflow-wrap: normal;
}

.service-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  color: var(--navy);
  background: #edf4fb;
  font-family: Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
}

.flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.flow li {
  position: relative;
  padding: 8px 10px 12px;
  text-align: center;
  border-top: 2px solid #9fb9d0;
}

.flow span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: -30px auto 8px;
  border-radius: 50%;
  color: var(--white);
  background: var(--navy);
  font-family: Arial, sans-serif;
  font-weight: 700;
}

.flow h3 {
  font-size: 1rem;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 18px;
}

.work-card {
  overflow: hidden;
  border: 1px solid #d8e4ee;
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 10px 28px rgba(8, 48, 97, 0.08);
}

.work-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--blue-soft);
}

.work-ec img {
  padding: 12px;
  object-fit: contain;
  object-position: center;
}

.work-card:nth-child(3) img,
.work-card:nth-child(4) img {
  padding: 14px;
  object-fit: contain;
  object-position: center;
}

.work-square img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.work-video img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.work-card h3,
.work-card p {
  padding-inline: 14px;
}

.work-card h3 {
  padding-top: 12px;
  font-size: 1.04rem;
}

.work-card p {
  padding-bottom: 14px;
  color: var(--muted);
  font-size: 0.95rem;
}

.wide {
  grid-column: span 2;
}

.reel-section {
  background: linear-gradient(135deg, rgba(255, 253, 249, 0.94), rgba(237, 247, 248, 0.9));
}

.reel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.reel-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(237, 216, 200, 0.9);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 26px rgba(139, 107, 82, 0.08);
  color: inherit;
  text-decoration: none;
}

.reel-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(139, 107, 82, 0.14);
}

.reel-thumb {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(135deg, #fff7f0, #edf7f8);
}

.reel-thumb img {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
}

.play-mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, transparent, rgba(47, 70, 48, 0.16));
}

.play-mark::before {
  content: "";
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 10px 24px rgba(47, 70, 48, 0.18);
}

.play-mark::after {
  position: absolute;
  content: "";
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 19px solid var(--coral);
  transform: translateX(3px);
}

.reel-card h3 {
  margin: 14px 0 4px;
  color: var(--navy-deep);
  line-height: 1.45;
}

.reel-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
}

.reel-grid {
  grid-template-columns: repeat(2, minmax(0, 230px));
  justify-content: center;
  gap: 24px;
  max-width: 560px;
  margin-right: auto;
  margin-left: auto;
}

.reel-card {
  padding: 14px;
}

.reel-card h3 {
  margin-top: 12px;
  font-size: 1rem;
  text-align: center;
}

.contact-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.info-card {
  min-height: 170px;
  padding: 22px 24px;
  border: 1px solid var(--blue-line);
  border-radius: 8px;
  background: linear-gradient(135deg, #eef6fc, #ffffff);
  box-shadow: var(--shadow);
}

.info-card.accent {
  background: linear-gradient(135deg, var(--gold-soft), #ffffff);
}

.info-card h2 {
  padding-bottom: 8px;
  border-bottom: 1px solid #b8cbe0;
  font-size: 1.45rem;
}

.info-card p {
  margin: 10px 0 0;
  font-weight: 700;
}

.info-card a {
  overflow-wrap: anywhere;
  color: var(--navy);
}

@media (max-width: 900px) {
  .hero,
  .split,
  .contact-section {
    grid-template-columns: 1fr;
  }

  .profile-panel {
    min-height: auto;
  }

  .tool-grid,
  .work-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .voice-layout {
    grid-template-columns: 1fr;
  }

  .reel-grid {
    grid-template-columns: repeat(2, minmax(0, 210px));
  }

  .flow {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 640px) {
  body {
    line-height: 1.8;
  }

  .section {
    width: min(100% - 24px, 1120px);
    margin-bottom: 22px;
  }

  .site-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    width: min(100% - 24px, 1120px);
    padding: 10px 0;
  }

  .brand img {
    width: 44px;
    height: 44px;
  }

  .nav {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.9rem;
  }

  .nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 6px 8px;
  }

  .mobile-contact-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100% - 24px, 1120px);
    min-height: 50px;
    margin: 0 auto 14px;
    padding: 10px 18px;
    border-radius: 6px;
    color: var(--white);
    background: var(--navy);
    box-shadow: 0 10px 24px rgba(6, 47, 102, 0.18);
    font-weight: 700;
    text-decoration: none;
  }

  .hero {
    padding-top: 16px;
    gap: 18px;
  }

  .hero-copy,
  .intro,
  .soft,
  .tools-section,
  .flow-section {
    padding: 20px;
  }

  .reel-section {
    padding: 20px;
  }

  .reel-card {
    padding: 14px;
  }

  .voice-section,
  .story-section {
    padding: 20px;
  }

  .voice-copy {
    padding: 20px;
  }

  .quote {
    font-size: 1.35rem;
  }

  .review-placeholder {
    min-height: 180px;
  }

  .story-card::before {
    display: none;
  }

  .story-card p {
    font-size: 1rem;
  }

  .profile-panel {
    padding: 28px 20px;
  }

  .profile-photo {
    width: 170px;
    height: 170px;
  }

  .profile-panel h1 {
    margin-top: 20px;
    font-size: 1.8rem;
  }

  .hero-copy h2 {
    font-size: 1.9rem;
    line-height: 1.48;
  }

  .hero-copy p,
  .intro p {
    font-size: 1rem;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .button {
    width: 100%;
    min-height: 52px;
  }

  .intro p {
    margin-left: 0;
  }

  .service-grid,
  .tool-grid,
  .work-grid {
    grid-template-columns: 1fr;
  }

  .tools-lead {
    font-size: 1rem;
  }

  .service-grid article {
    grid-template-columns: 56px minmax(0, 1fr);
    min-height: auto;
    padding: 18px;
  }

  .service-grid h3 {
    word-break: normal;
    overflow-wrap: anywhere;
  }

  .service-grid p {
    margin-top: 6px;
    font-size: 1rem;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  .flow li {
    padding: 10px 8px 16px;
  }

  .work-card img {
    aspect-ratio: 3 / 2;
  }

  .work-ec img {
    aspect-ratio: 4 / 3;
    padding: 14px;
  }

  .work-card:nth-child(3) img,
  .work-card:nth-child(4) img {
    aspect-ratio: 4 / 3;
    padding: 18px;
  }

  .work-square img {
    aspect-ratio: 1 / 1;
  }

  .work-video img {
    aspect-ratio: 16 / 9;
  }

  .work-card h3 {
    padding-top: 14px;
    font-size: 1.08rem;
  }

  .work-card p {
    font-size: 1rem;
  }

  .info-card {
    min-height: auto;
    padding: 22px 20px;
  }

  .wide {
    grid-column: auto;
  }
}

/* Warm portfolio theme */
:root {
  --navy: #2f6fa8;
  --navy-deep: #2f4630;
  --blue-soft: #edf7f8;
  --blue-line: #d6e8e8;
  --gold: #d9b69a;
  --gold-soft: #fff1e6;
  --rose-soft: #fff7f2;
  --warm-line: #edd8c8;
  --ink: #343434;
  --muted: #6c6b60;
  --leaf: #7e956f;
  --coral: #e97552;
  --shadow: 0 16px 38px rgba(139, 107, 82, 0.14);
}

body {
  color: var(--ink);
  font-family: "Yu Gothic", "Hiragino Sans", "Noto Sans JP", Arial, sans-serif;
  background:
    linear-gradient(145deg, rgba(222, 238, 239, 0.78) 0 12%, transparent 12% 100%),
    linear-gradient(210deg, rgba(255, 211, 190, 0.82) 0 10%, transparent 10% 100%),
    linear-gradient(180deg, #fff8f1 0%, #fffdf8 35%, #eef8fa 66%, #fff5ed 100%);
}

body::before,
body::after {
  position: fixed;
  z-index: -1;
  content: "";
  pointer-events: none;
}

body::before {
  top: 86px;
  left: 0;
  width: 100%;
  height: 320px;
  background:
    linear-gradient(155deg, transparent 0 58%, rgba(222, 238, 239, 0.72) 59% 100%),
    linear-gradient(20deg, rgba(255, 236, 225, 0.72) 0 46%, transparent 47% 100%);
}

body::after {
  right: 24px;
  bottom: 40px;
  width: 150px;
  height: 210px;
  border-right: 2px solid rgba(126, 149, 111, 0.28);
  border-bottom: 2px solid rgba(126, 149, 111, 0.2);
  border-radius: 0 0 80px 0;
  transform: rotate(-12deg);
}

.site-header {
  width: min(1180px, calc(100% - 36px));
  padding: 16px 18px;
  border: 1px solid rgba(237, 216, 200, 0.72);
  border-radius: 0 0 8px 8px;
  background: rgba(255, 250, 244, 0.9);
  box-shadow: 0 10px 28px rgba(139, 107, 82, 0.08);
}

.brand {
  color: var(--leaf);
}

.brand img {
  border: 1px solid rgba(126, 149, 111, 0.22);
  box-shadow: 0 8px 20px rgba(139, 107, 82, 0.12);
}

.nav a {
  color: #405b45;
}

.section {
  width: min(1120px, calc(100% - 36px));
  margin-bottom: 24px;
}

.profile-panel,
.hero-copy,
.intro,
.panel,
.soft,
.tools-section,
.flow-section,
.voice-section,
.story-section,
.contact-section {
  border: 1px solid rgba(237, 216, 200, 0.9);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
}

.hero {
  gap: 24px;
  padding-top: 34px;
}

.profile-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 246, 238, 0.84)),
    linear-gradient(135deg, rgba(237, 247, 248, 0.68), transparent 50%);
}

.profile-photo {
  border: 2px solid rgba(233, 117, 82, 0.28);
  background: #fff4ec;
  box-shadow: 0 12px 28px rgba(139, 107, 82, 0.14);
}

.profile-panel h1 {
  color: #333333;
  font-weight: 800;
}

.roman {
  color: var(--leaf);
  font-weight: 700;
}

.hero-copy {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 246, 238, 0.9)),
    linear-gradient(25deg, rgba(237, 247, 248, 0.92) 0 30%, transparent 31% 100%);
}

.hero-copy::before {
  width: 120px;
  height: 8px;
  background: var(--coral);
}

.hero-copy::after {
  background: linear-gradient(135deg, transparent 50%, rgba(255, 219, 202, 0.92) 51%);
}

.eyebrow {
  color: #405b45;
  border-bottom-color: rgba(217, 182, 154, 0.85);
}

.hero-copy h2 {
  color: var(--coral);
  font-weight: 800;
}

.button {
  border-radius: 8px;
}

.button.primary,
.mobile-contact-button {
  background: linear-gradient(135deg, #e97552, #d99a7a);
  box-shadow: 0 10px 24px rgba(233, 117, 82, 0.22);
}

.button.secondary {
  border-color: rgba(126, 149, 111, 0.64);
  color: #405b45;
  background: #fffdf9;
}

.section-title h2,
.panel h2,
.info-card h2 {
  color: #405b45;
}

.section-title::after {
  border-top-color: rgba(217, 182, 154, 0.92);
}

.title-icon {
  background: linear-gradient(135deg, #e99d7f, #f4c7b0);
  box-shadow: 0 8px 18px rgba(233, 117, 82, 0.18);
}

.dark-heading > h2 {
  color: #405b45;
  background: linear-gradient(90deg, #eaf5f5 0%, #fff7f0 100%);
  border-bottom: 1px solid rgba(237, 216, 200, 0.86);
}

.strengths > h2 {
  background: linear-gradient(90deg, #fff0e7, #edf7f8);
}

.check-list li::marker {
  color: var(--coral);
}

.strength-card,
.service-grid article,
.tool-grid article,
.work-card,
.voice-copy,
.review-image,
.story-card,
.info-card {
  border-color: rgba(237, 216, 200, 0.9);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 10px 26px rgba(139, 107, 82, 0.08);
}

.strength-card span {
  background: linear-gradient(135deg, #e99d7f, #f6ceb8);
}

.soft {
  background:
    linear-gradient(180deg, rgba(237, 247, 248, 0.92) 0%, rgba(255, 255, 255, 0.92) 54%),
    linear-gradient(135deg, rgba(255, 241, 230, 0.8), transparent 58%);
}

.service-icon {
  color: #405b45;
  background: linear-gradient(135deg, #edf7f8, #fff1e6);
}

.tools-section,
.flow-section {
  background: rgba(255, 253, 249, 0.88);
}

.tool-grid p,
.work-card p,
.note {
  color: var(--muted);
}

.flow li {
  border-top-color: rgba(217, 182, 154, 0.98);
}

.flow span {
  background: linear-gradient(135deg, #7e956f, #b4c2a4);
}

.work-card {
  overflow: hidden;
}

.work-card img {
  background: linear-gradient(135deg, #fff7f0, #edf7f8);
}

.voice-section {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 244, 239, 0.94) 100%);
}

.quote,
.rating-score,
.story-closing {
  color: var(--coral);
}

.rating-box {
  background: linear-gradient(135deg, #fff1e6, #edf7f8);
}

.story-section {
  background: linear-gradient(135deg, rgba(255, 253, 249, 0.94), rgba(237, 247, 248, 0.9));
}

.story-card::before {
  color: rgba(126, 149, 111, 0.2);
}

.contact-section {
  background: transparent;
}

.info-card {
  background: linear-gradient(135deg, rgba(237, 247, 248, 0.92), rgba(255, 255, 255, 0.9));
}

.info-card.accent {
  background: linear-gradient(135deg, #fff1e6, rgba(255, 255, 255, 0.9));
}

.info-card h2 {
  border-bottom-color: rgba(217, 182, 154, 0.85);
}

.info-card a {
  color: #d86242;
}

@media (max-width: 640px) {
  .site-header {
    width: min(100% - 24px, 1120px);
    padding: 10px 12px;
  }

  .section {
    width: min(100% - 24px, 1120px);
  }

  .hero {
    padding-top: 14px;
  }

  .hero-copy h2 {
    font-size: 1.8rem;
  }
}

main {
  position: relative;
  isolation: isolate;
}

main::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  opacity: 0.78;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 210'%3E%3Cpath d='M20 190 C38 145 48 88 96 22' fill='none' stroke='%237e956f' stroke-width='2.2' stroke-linecap='round' opacity='.62'/%3E%3Cellipse cx='47' cy='133' rx='10' ry='22' fill='%237e956f' opacity='.32' transform='rotate(-43 47 133)'/%3E%3Cellipse cx='63' cy='99' rx='9' ry='20' fill='%237e956f' opacity='.34' transform='rotate(-39 63 99)'/%3E%3Cellipse cx='82' cy='66' rx='8' ry='18' fill='%237e956f' opacity='.32' transform='rotate(-32 82 66)'/%3E%3Cellipse cx='32' cy='156' rx='8' ry='18' fill='%23a7b798' opacity='.42' transform='rotate(45 32 156)'/%3E%3Cellipse cx='54' cy='118' rx='7' ry='17' fill='%23a7b798' opacity='.4' transform='rotate(42 54 118)'/%3E%3Ccircle cx='95' cy='52' r='5' fill='%23e99d7f' opacity='.62'/%3E%3Ccircle cx='105' cy='38' r='4' fill='%23e99d7f' opacity='.52'/%3E%3C/svg%3E") left 520px / 128px 207px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 210'%3E%3Cpath d='M125 188 C110 140 95 82 48 24' fill='none' stroke='%238fb7d5' stroke-width='2.2' stroke-linecap='round' opacity='.58'/%3E%3Cellipse cx='93' cy='124' rx='9' ry='23' fill='none' stroke='%238fb7d5' stroke-width='2' opacity='.72' transform='rotate(42 93 124)'/%3E%3Cellipse cx='75' cy='96' rx='8' ry='21' fill='none' stroke='%238fb7d5' stroke-width='2' opacity='.68' transform='rotate(44 75 96)'/%3E%3Cellipse cx='58' cy='68' rx='8' ry='19' fill='none' stroke='%238fb7d5' stroke-width='2' opacity='.64' transform='rotate(48 58 68)'/%3E%3Cellipse cx='112' cy='151' rx='8' ry='20' fill='none' stroke='%238fb7d5' stroke-width='2' opacity='.66' transform='rotate(-48 112 151)'/%3E%3C/svg%3E") right 980px / 150px 210px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90'%3E%3Ccircle cx='18' cy='18' r='4' fill='%23e99d7f' opacity='.52'/%3E%3Ccircle cx='38' cy='14' r='3' fill='%23e99d7f' opacity='.45'/%3E%3Ccircle cx='58' cy='22' r='4' fill='%23e99d7f' opacity='.48'/%3E%3Ccircle cx='24' cy='45' r='3' fill='%23a7b798' opacity='.45'/%3E%3Ccircle cx='50' cy='48' r='4' fill='%23a7b798' opacity='.42'/%3E%3Ccircle cx='70' cy='58' r='3' fill='%238fb7d5' opacity='.45'/%3E%3C/svg%3E") left 1520px / 86px 86px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 210'%3E%3Cpath d='M24 188 C36 132 54 74 100 18' fill='none' stroke='%237e956f' stroke-width='2.1' stroke-linecap='round' opacity='.54'/%3E%3Cellipse cx='45' cy='136' rx='8' ry='20' fill='%237e956f' opacity='.26' transform='rotate(-38 45 136)'/%3E%3Cellipse cx='66' cy='101' rx='8' ry='19' fill='%23a7b798' opacity='.36' transform='rotate(-34 66 101)'/%3E%3Cellipse cx='88' cy='67' rx='7' ry='18' fill='%237e956f' opacity='.28' transform='rotate(-30 88 67)'/%3E%3Ccircle cx='30' cy='162' r='4' fill='%23e99d7f' opacity='.55'/%3E%3Ccircle cx='38' cy='151' r='3' fill='%23e99d7f' opacity='.48'/%3E%3C/svg%3E") left 2780px / 120px 194px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 210'%3E%3Cpath d='M125 188 C108 132 92 82 45 24' fill='none' stroke='%237e956f' stroke-width='2.2' stroke-linecap='round' opacity='.55'/%3E%3Cellipse cx='94' cy='128' rx='9' ry='21' fill='%237e956f' opacity='.3' transform='rotate(42 94 128)'/%3E%3Cellipse cx='75' cy='95' rx='8' ry='19' fill='%23a7b798' opacity='.36' transform='rotate(44 75 95)'/%3E%3Cellipse cx='57' cy='65' rx='8' ry='18' fill='%237e956f' opacity='.28' transform='rotate(48 57 65)'/%3E%3Ccircle cx='112' cy='153' r='4' fill='%23e99d7f' opacity='.5'/%3E%3C/svg%3E") right 3750px / 142px 199px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90'%3E%3Ccircle cx='20' cy='22' r='3' fill='%238fb7d5' opacity='.5'/%3E%3Ccircle cx='42' cy='18' r='4' fill='%238fb7d5' opacity='.42'/%3E%3Ccircle cx='62' cy='30' r='3' fill='%238fb7d5' opacity='.48'/%3E%3Ccircle cx='28' cy='54' r='4' fill='%23e99d7f' opacity='.42'/%3E%3Ccircle cx='55' cy='58' r='3' fill='%23a7b798' opacity='.42'/%3E%3C/svg%3E") right 5000px / 84px 84px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 210'%3E%3Cpath d='M20 190 C38 145 48 88 96 22' fill='none' stroke='%237e956f' stroke-width='2.2' stroke-linecap='round' opacity='.52'/%3E%3Cellipse cx='47' cy='133' rx='10' ry='22' fill='%237e956f' opacity='.28' transform='rotate(-43 47 133)'/%3E%3Cellipse cx='63' cy='99' rx='9' ry='20' fill='%23a7b798' opacity='.34' transform='rotate(-39 63 99)'/%3E%3Cellipse cx='82' cy='66' rx='8' ry='18' fill='%237e956f' opacity='.28' transform='rotate(-32 82 66)'/%3E%3Ccircle cx='95' cy='52' r='5' fill='%23e99d7f' opacity='.48'/%3E%3C/svg%3E") left 6400px / 124px 200px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 210'%3E%3Cpath d='M125 188 C110 140 95 82 48 24' fill='none' stroke='%238fb7d5' stroke-width='2.2' stroke-linecap='round' opacity='.5'/%3E%3Cellipse cx='93' cy='124' rx='9' ry='23' fill='none' stroke='%238fb7d5' stroke-width='2' opacity='.64' transform='rotate(42 93 124)'/%3E%3Cellipse cx='75' cy='96' rx='8' ry='21' fill='none' stroke='%238fb7d5' stroke-width='2' opacity='.58' transform='rotate(44 75 96)'/%3E%3Cellipse cx='112' cy='151' rx='8' ry='20' fill='none' stroke='%238fb7d5' stroke-width='2' opacity='.6' transform='rotate(-48 112 151)'/%3E%3C/svg%3E") right 7600px / 150px 210px no-repeat;
}

main > .section {
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  main::before {
    opacity: 0.38;
    background-size:
      88px 142px,
      96px 134px,
      70px 70px,
      82px 132px,
      92px 129px,
      68px 68px,
      84px 136px,
      94px 132px;
  }
}

/* Prevent service cards from overflowing on phones and small tablets */
.service-grid {
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.service-grid article,
.service-grid h3,
.service-grid p {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 900px) {
  .service-grid {
    grid-template-columns: 1fr !important;
  }

  .service-grid article {
    width: 100%;
    grid-template-columns: 52px minmax(0, 1fr);
    overflow: hidden;
  }

  .service-grid h3,
  .service-grid p {
    max-width: 100%;
    word-break: normal;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 520px) {
  .service-grid {
    grid-template-columns: 1fr;
  }

  .service-grid article {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 14px;
    width: 100%;
  }

  .reel-grid {
    grid-template-columns: minmax(0, 230px);
    justify-content: center;
  }
}

/* Compact two-up layout for short video cards */
.reel-section .reel-grid {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: 28px;
  width: 100%;
  max-width: 540px;
  margin: 18px auto 0;
}

.reel-section .reel-card {
  flex: 0 0 230px;
  width: 230px;
}

@media (max-width: 559px) {
  .reel-section .reel-grid {
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    gap: 18px;
  }

  .reel-section .reel-card {
    flex-basis: auto;
    width: min(230px, 100%);
  }
}

/* Botanical section icons */
body::after {
  display: none;
}

.title-icon {
  overflow: hidden;
  color: transparent;
  background: linear-gradient(135deg, #f3b093, #f8d7c5);
}

.title-icon::before,
.title-icon::after {
  background: none;
  border: 0;
  border-radius: 0;
}

.title-icon::before {
  left: 20px;
  top: 10px;
  width: 2px;
  height: 25px;
  border-radius: 999px;
  background: rgba(64, 91, 69, 0.7);
  transform: rotate(24deg);
}

.title-icon::after {
  left: 18px;
  top: 13px;
  width: 11px;
  height: 15px;
  border-radius: 100% 0 100% 0;
  background: rgba(255, 255, 255, 0.72);
  box-shadow:
    -9px 8px 0 rgba(126, 149, 111, 0.72),
    8px 9px 0 rgba(255, 255, 255, 0.68);
  transform: rotate(24deg);
}

.intro .title-icon,
.tools-section .title-icon,
.story-section .title-icon {
  background: linear-gradient(135deg, #a7b798, #d4ddc8);
}

.intro .title-icon::after,
.story-section .title-icon::after {
  left: 16px;
  top: 11px;
  width: 10px;
  height: 14px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow:
    -8px 9px 0 rgba(255, 255, 255, 0.54),
    9px 10px 0 rgba(64, 91, 69, 0.42),
    -5px 19px 0 rgba(126, 149, 111, 0.54);
  transform: rotate(32deg);
}

.soft .title-icon,
.voice-section .title-icon {
  background: linear-gradient(135deg, #f2a184, #f8cdb8);
}

.soft .title-icon::before,
.voice-section .title-icon::before {
  left: 21px;
  top: 21px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(64, 91, 69, 0.55);
  box-shadow:
    0 -10px 0 rgba(255, 255, 255, 0.72),
    8px -5px 0 rgba(255, 255, 255, 0.62),
    8px 5px 0 rgba(255, 255, 255, 0.62),
    0 10px 0 rgba(255, 255, 255, 0.72),
    -8px 5px 0 rgba(255, 255, 255, 0.62),
    -8px -5px 0 rgba(255, 255, 255, 0.62);
  transform: none;
}

.soft .title-icon::after,
.voice-section .title-icon::after {
  left: 21px;
  top: 28px;
  width: 2px;
  height: 12px;
  border-radius: 999px;
  background: rgba(64, 91, 69, 0.58);
  box-shadow: 5px 4px 0 rgba(126, 149, 111, 0.38);
  transform: rotate(-18deg);
}

.flow-section .title-icon {
  background: linear-gradient(135deg, #8fb7d5, #c9e1ec);
}

.flow-section .title-icon::before {
  left: 13px;
  top: 25px;
  width: 24px;
  height: 2px;
  border-radius: 999px;
  background: rgba(64, 91, 69, 0.62);
  transform: rotate(-32deg);
}

.flow-section .title-icon::after {
  left: 15px;
  top: 13px;
  width: 9px;
  height: 13px;
  border-radius: 100% 0 100% 0;
  background: rgba(255, 255, 255, 0.72);
  box-shadow:
    10px 5px 0 rgba(255, 255, 255, 0.6),
    15px 14px 0 rgba(126, 149, 111, 0.5);
  transform: rotate(-16deg);
}

#works .title-icon {
  background: linear-gradient(135deg, #d8c3a4, #f3dfc3);
}

#works .title-icon::before {
  left: 14px;
  top: 30px;
  width: 24px;
  height: 2px;
  border-radius: 999px;
  background: rgba(64, 91, 69, 0.58);
  transform: rotate(-48deg);
}

#works .title-icon::after {
  left: 15px;
  top: 11px;
  width: 10px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.76);
  border-left: 0;
  border-bottom: 0;
  border-radius: 100% 0 100% 0;
  box-shadow:
    8px 8px 0 -1px rgba(126, 149, 111, 0.48),
    13px 16px 0 -1px rgba(255, 255, 255, 0.52);
  transform: rotate(-24deg);
}