/* Service pages and selected projects, using Hangula's existing palette. */
[id] { scroll-margin-top: 110px; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid #bcb6f2;
  outline-offset: 5px;
}
.service-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--nav-h) + 85px) 0 115px;
  background: radial-gradient(ellipse at 82% 28%, #8277b4 0, transparent 55%), linear-gradient(120deg, #25203e, #49416e 60%, #8884c0);
}
.service-hero-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: center; }
.service-hero-copy { position: relative; z-index: 1; min-width: 0; }
.service-hero .section-eye { color: #dedaf9; font-size: 14px; }
.service-hero h1 { font: 800 clamp(36px, 4.4vw, 62px)/1.1 'Nunito Sans', sans-serif; letter-spacing: -.035em; margin: 0 0 26px; }
.service-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 13px; color: #c9c4dd; }
.service-breadcrumb a { color: #eeeafa; }
.service-breadcrumb a:hover { text-decoration: underline; }
.service-hero-description { color: #e0dced; line-height: 1.8; font-size: 17px; margin: 30px 0; max-width: 570px; }
.service-hero .btn-primary { background: #e0dbff; box-shadow: 0 8px 25px #1a132626; color: #302647; }
.service-hero-art { position: relative; }
.service-hero-art > img { width: 100%; height: auto; }
.service-art-icon { position: absolute; right: 2%; bottom: 16%; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 22px; background: #eee9ff; color: #665b8c; box-shadow: 0 12px 30px #2720393b; transform: rotate(8deg); }
.service-art-icon svg { width: 40px; height: 40px; }
.service-hero-wave { position: absolute; bottom: -1px; left: 0; width: 100%; height: 90px; color: #14102a; }
.service-detail-title { font-size: clamp(25px, 3vw, 36px); line-height: 1.25; margin-bottom: 24px; }
.all-services-link { display: block; border-top: 1px solid var(--hg-border); padding-top: 18px; margin-top: 20px; font-weight: 800; }

/* The project gallery follows the reference's rounded image cards and arrows. */
.projects-page { background: #14121d; }
.projects-hero { padding: calc(var(--nav-h) + 60px) 0 72px; position: relative; overflow: hidden; background: radial-gradient(ellipse at 95% 10%, #67577a55, transparent 60%), #1b1728; border-bottom: 1px solid #e1d3ff15; }
.projects-hero .container { position: relative; z-index: 1; }
.projects-hero .service-breadcrumb { margin-bottom: 64px; }
.projects-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.projects-hero h1 { font-size: clamp(44px, 7.5vw, 100px); line-height: 1.05; letter-spacing: -.055em; font-weight: 800; margin-bottom: 8px; }
.projects-hero h1 span { color: #b5a6d1; }
.projects-intro > p { max-width: 350px; color: #c7c0d4; font-size: 17px; line-height: 1.8; padding-bottom: 8px; }
.projects-jump { display: inline-flex; align-items: center; gap: 28px; margin-top: 44px; color: #e8dff8; font-size: 14px; }
.projects-jump span { border: 1px solid #9c90b450; border-radius: 50%; width: 38px; height: 38px; display: grid; place-items: center; }
.projects-orbit { width: 590px; height: 590px; position: absolute; border: 1px solid #a99ac217; border-radius: 50%; right: -110px; top: -200px; pointer-events: none; }
.projects-orbit::before { content: ''; position: absolute; inset: 50px; border: 1px solid #a99ac217; border-radius: 50%; }
.projects-gallery { padding-top: 62px; }
.projects-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
.projects-section-head h2 { font-size: 22px; font-weight: 700; }
.projects-section-head > span { font-size: 13px; color: var(--hg-text-muted); }
.projects-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 26px; }
.project-card { min-width: 0; }
.project-visual { display: flex; flex-direction: column; position: relative; aspect-ratio: 4 / 4.6; border-radius: 32px; padding: 25px; overflow: hidden; isolation: isolate; color: #fff; }
.project-tone-0, .project-tone-0:hover { background: #dae3ef; color: #273849; }
.project-tone-1, .project-tone-1:hover { background: #e5d9ed; color: #432752; }
.project-tone-2, .project-tone-2:hover { background: #e3e6dc; color: #344734; }
.project-tone-3, .project-tone-3:hover { background: #c2b4d2; color: #342242; }
.project-visual::before { content: ''; position: absolute; width: 300px; height: 300px; border: 1px solid currentColor; opacity: .09; border-radius: 50%; left: -160px; bottom: -60px; z-index: -1; }
.project-visual::after { content: ''; position: absolute; width: 170px; height: 170px; border: 1px solid currentColor; opacity: .12; border-radius: 50%; right: -100px; top: 80px; z-index: -1; }
.project-visual-top { display: flex; justify-content: space-between; gap: 12px; font-size: 8px; letter-spacing: .07em; font-weight: 900; }
.project-visual > img { object-fit: contain; width: 100%; height: 100%; min-height: 0; flex: 1; padding: 40px 18px; mix-blend-mode: multiply; transition: transform .4s; }
.project-visual:hover > img { transform: scale(1.05); }
.project-visual-label { max-width: calc(100% - 66px); font-size: 12px; font-weight: 800; min-height: 40px; display: flex; align-items: center; }
.project-open { position: absolute; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; right: 22px; bottom: 22px; background: #ffffffbd; color: #292032; font-size: 28px; transition: transform .25s, background .25s; }
.project-visual:hover .project-open { transform: rotate(45deg); background: #fff; }
.project-card-copy { padding: 22px 4px 0; }
.project-category { color: var(--hg-text-muted); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; }
.project-card h3 { font-size: 23px; line-height: 1.25; letter-spacing: -.02em; margin-bottom: 12px; }
.project-card h3 a { color: var(--hg-text); }
.project-card h3 a:hover { color: #cbb9e5; }
.project-card-copy > p:not(.project-category) { font-size: 14px; line-height: 1.8; color: var(--hg-text-soft); }
.project-detail-link { display: inline-flex; gap: 18px; font-size: 13px; font-weight: 800; color: var(--hg-text); margin-top: 18px; }
.project-card-links { display: flex; flex-wrap: wrap; gap: 0 22px; }
.project-website-link { color: var(--hg-text); }
.project-card-links a:hover { text-decoration: underline; }
.project-story-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.project-monogram { flex: 1; display: grid; place-items: center; min-height: 0; font-family: 'Inter', sans-serif; font-size: clamp(55px, 7vw, 100px); font-weight: 700; letter-spacing: -.06em; }
.project-inquiry { padding: 64px 0; background: #252031; border-top: 1px solid #b7a5cb18; }
.project-inquiry-inner { display: flex; justify-content: space-between; gap: 36px; align-items: center; }
.project-inquiry h2 { font-size: clamp(26px, 3.3vw, 42px); line-height: 1.2; font-weight: 800; letter-spacing: -.03em; }
.project-inquiry .btn { flex-shrink: 0; }
.project-detail-hero h1 { font-size: clamp(36px, 6vw, 72px); max-width: 980px; }
.project-detail-hero .service-breadcrumb { margin-bottom: 44px; }
.project-lead { color: #bcb0ce; font-size: 20px; margin-top: 22px; }
.project-story { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.project-detail-art { border-radius: 34px; padding: 40px; min-height: 400px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.project-detail-art img { width: 100%; height: 300px; object-fit: contain; mix-blend-mode: multiply; }
.project-detail-art > span:last-child { font-size: 14px; font-weight: 800; margin-top: 20px; }
.project-story-copy h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.2; margin-bottom: 22px; }
.project-story-copy > p:not(.section-eye) { color: var(--hg-text-soft); line-height: 1.9; }
.project-story-copy h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; margin-top: 32px; color: var(--hg-text); }
.project-service-links { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 30px; }
.project-service-links a { display: flex; justify-content: space-between; gap: 18px; padding-bottom: 10px; border-bottom: 1px solid #b8a4d329; font-size: 15px; }
.project-testimonial { padding: 64px 0; background: #211b2d; text-align: center; }
.project-testimonial blockquote { font-size: clamp(28px, 4vw, 44px); max-width: 870px; margin: 18px auto 30px; line-height: 1.4; font-weight: 700; letter-spacing: -.02em; }
.project-testimonial figcaption { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.project-testimonial figcaption span { color: var(--hg-text-muted); }
.project-next { display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.project-next-link { text-align: right; }
.project-next-link span { display: block; color: var(--hg-text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px; }
.project-next-link strong { font-size: clamp(18px, 3vw, 30px); }

/* Six navigation links move into the drawer before they crowd the logo. */
@media (max-width: 1024px) {
  .nav-toggle { display: flex; }
  .nav-links { position: fixed; top: var(--nav-h); left: 0; right: 0; max-height: calc(100vh - var(--nav-h)); max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; background: #14102afa; border-bottom: 1px solid var(--hg-border); flex-direction: column; align-items: stretch; padding: 20px 24px 30px; gap: 4px; transform: translateY(-110%); visibility: hidden; transition: transform .3s; }
  .nav-links.open { transform: translateY(0); visibility: visible; }
  .nav-links li a { font-size: 17px; padding: 12px 20px; }
  .home-page .site-header, .home-page .site-header.scrolled { --nav-h: 86px; top: 0; height: var(--nav-h); }
  .home-page .nav-logo img, .home-page .scrolled .nav-logo img { height: 70px; }
  .home-page .nav-links { background: #000; }
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .site-header { position: relative; height: auto; }
  html:not(.js) .nav-inner { flex-wrap: wrap; padding-top: 16px; }
  html:not(.js) .nav-links { position: static; width: 100%; max-height: none; transform: none; visibility: visible; }
  .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-story { gap: 36px; }
  .service-hero-layout { gap: 12px; }
  .service-hero-art { margin-right: -25px; }
}
@media (max-width: 767px) {
  .service-hero { padding: calc(var(--nav-h) + 55px) 0 90px; }
  .service-hero-layout { grid-template-columns: 1fr; gap: 0; }
  .service-hero-art { max-width: 430px; width: 100%; margin: 15px auto -15px; }
  .service-hero h1 { font-size: 38px; }
  .service-hero-description { font-size: 16px; }
  .projects-hero { padding: calc(var(--nav-h) + 36px) 0 50px; }
  .projects-hero .service-breadcrumb { margin-bottom: 40px; }
  .projects-intro { flex-direction: column; align-items: flex-start; gap: 24px; }
  .projects-intro > p { max-width: 100%; }
  .projects-grid { grid-template-columns: 1fr; gap: 40px; }
  .project-visual { aspect-ratio: 1.05; }
  .projects-gallery { padding: 40px 0 64px; }
  .project-inquiry-inner { align-items: flex-start; flex-direction: column; }
  .project-story { grid-template-columns: 1fr; }
  .project-detail-art { min-height: 300px; padding: 30px; }
  .project-detail-art img { height: 220px; }
  .project-monogram { font-size: 90px; }
  .project-next { flex-direction: column; align-items: flex-start; }
  .project-next-link { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .project-visual:hover > img, .project-visual:hover .project-open { transform: none; }
}