/*
Theme Name: Puzzle Theme 2026
Theme URI: https://puzzle-web.jp/
Author: Puzzle
Description: 完成済みPuzzle静的サイトを再利用したクラシックテーマ。
Version: 1.0.0
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: puzzle-thme2026
*/
@charset "UTF-8";

/* Layout follows the combined Desktop / iPhone Figma frames. */
:root {
  --ink:#222;
  --surface:#f4f4f4;
  --hero-fade:2000ms;
  --news-fade:250ms;
  --menu-duration:300ms;
  --scroll-duration:1800ms;
  --indicator-progress:0
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  color:#000;
  background:#fff;
  font-family:'Noto Sans JP',sans-serif
}
h1,h2,h3,p {
  margin:0
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit
}
img {
  display:block;
  max-width:100%;
  height:auto
}
a,button {
  -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible {
  outline:3px solid #237cbb;
  outline-offset:4px
}
a:hover {
  color:#555
}
[hidden] {
  display:none!important
}
.mobile-copy {
  display:none
}
.section-width {
  width:calc(100% - 80px);
  max-width:1200px;
  margin-inline:auto
}
.skip-link {
  position:fixed;
  top:8px;
  left:8px;
  z-index:100;
  background:#fff;
  padding:12px;
  transform:translateY(-150%)
}
.skip-link:focus {
  transform:none
}
/* Decorative glyphs use the locally installed Font Awesome 5 Free fonts.
   Dedicated aria-hidden containers keep glyphs out of accessible names. */
.decor-icon, .arrow-box::before, .scroll-arrow-clip::before,
.desktop-nav a::after, #mobile-menu a::after, .site-footer-nav a::after, .header-contact .contact-arrow::before {
  font-family:"Font Awesome 5 Free";
  font-weight:900;
  font-style:normal;
  font-variant:normal;
  text-rendering:auto;
  line-height:1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.icon-right::before, .arrow-box::before {content:"\f061"}
/* Empty alternative text keeps decorative glyphs out of link names. */
.desktop-nav a::after, #mobile-menu a::after, .site-footer-nav a::after, .header-contact .contact-arrow::before {
  content:"\f061" / "";
  pointer-events:none;
}
.icon-home::before {content:"\f015"}
.icon-mail {font-weight:400}
.icon-mail::before {content:"\f0e0"}
.icon-phone::before {content:"\f3cd"}
.icon-right, .arrow-box::before,
.desktop-nav a::after, #mobile-menu a::after, .site-footer-nav a::after, .header-contact .contact-arrow::before {
  display:block;
  width:12px;
  height:12px;
  font-size:12px;
  line-height:1;
  text-align:center;
}
.arrow-box {
  display:grid;
  place-items:center;
  background:#1e1e1e;
  color:white;
  border-radius:3px;
  width:30px;
  height:30px
}
.hero {
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  min-height:789px;
  padding-top:535px
}
.hero-images {
  z-index:0;
  position:absolute;
  inset:5px 4px 5px;
  overflow:hidden;
  border-radius:8px;
  background:#e4e1db
}
.hero-slide {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity var(--hero-fade) linear
}
.hero-slide.is-active {
  opacity:1;
  z-index:2
}
.hero-slide.is-previous {
  opacity:1;
  z-index:1
}
.site-header {
  position:absolute;
  inset:0 0 auto;
  z-index:5;
  display:grid;
  grid-template-columns:224px 1fr 201px;
  column-gap:33px;
  align-items:start
}
.header-logo {
  display:grid;
  place-items:center;
  height:104px;
  background:white;
  border-radius:0 0 22px 0
}
.header-logo img {
  width:180px
}
.desktop-nav {
  display:grid;
  grid-auto-flow:column;
  justify-content:start;
  gap:22px;
  padding-top:35px;
  font-weight:700;
  font-size:13px;
  line-height:20px;
  color:#222
}
.desktop-nav a::after {
  display:none
}
.header-contact {
  background:#fff;
  padding:5px 4px 6px 6px;
  border-radius:0 0 0 8px
}
.contact-inner {
  display:grid;
  grid-template-columns:1fr 28px;
  gap:12px 8px;
  background:#1e1e1e;
  padding:11px 8px 8px;
  border-radius:4px;
  color:white;
  min-height:135px
}
.contact-copy {
  display:grid;
  gap:4px;
  align-content:start;
  font-size:13px;
  line-height:19.5px;
  font-weight:700
}
.contact-copy small {
  font-size:10px;
  line-height:15px;
  color:#9a9a9a;
  white-space:nowrap
}
.header-contact .contact-arrow {
  grid-column:2;
  grid-row:1;
  display:grid;
  place-items:center;
  border-radius:3px;
  font-size:12px;
  text-align:center;
  background:#fff;
  color:#222;
  width:28px;
  height:28px
}
.contact-photo {
  grid-column:1/-1;
  width:100%;
  height:64px;
  object-fit:cover;
  border-radius:3px
}
.menu-toggle {
  display:none
}
.hero-message {
  position:relative;
  z-index:1;
  justify-self:end;
  width:550px;
  background:#fff;
  border-radius:34px 0 0 0;
  padding:31px 24px 28px 44px;
  display:grid;
  gap:22px;
  align-content:start
}
.hero-message h1 {
  font-size:52px;
  line-height:66px;
  font-weight:900;
  letter-spacing:0
}
.hero-message p {
  font:700 11px/19px Inter,sans-serif;
  color:#8b8b8b
}
.slide-indicators {
  position:absolute;
  z-index:2;
  bottom:14px;
  right:calc(550px + 11px);
  display:grid;
  grid-auto-flow:column;
  gap:6px
}
.slide-indicators>span {
  width:16px;
  height:3px
}
.slide-indicators i {
  display:block;
  width:3px;
  height:3px;
  border-radius:999px;
  background:#d2d2d2
}
.slide-indicators .active i {
  width:calc(3px + 13px * var(--indicator-progress));
  background:white
}
.scroll-cue {
  position:absolute;
  z-index:2;
  left:30px;
  bottom:36px;
  display:grid;
  grid-template-columns:10px auto;
  gap:7px;
  align-items:center;
  color:white;
  font:700 10px/16px Inter,sans-serif;
  min-height:20px
}
.scroll-arrow-clip {
  display:block;
  width:10px;
  height:12px;
  overflow:hidden
}
.scroll-arrow-clip::before {
  content:"\f063";
  display:inline-block;
  width:10px;
  height:12px;
  font-size:10px;
  line-height:12px;
  text-align:center;
  animation:scroll-arrow var(--scroll-duration) linear infinite
}
@keyframes scroll-arrow {
  0% {
    transform:translateY(-13px)
  }
  20%,50% {
    transform:translateY(0)
  }
  100% {
    transform:translateY(14px)
  }
}
.news {
  padding-block:40px 37px;
  scroll-margin-top:60px
}
.news-strip {
  display:grid;
  grid-template-columns:204px 1fr;
  border:1px solid #d7d7d7;
  border-radius:3px;
  min-height:60px
}
.news h2 {
  display:grid;
  place-items:center;
  background:#2f2f2f;
  color:#fff;
  font-size:14px;
  line-height:24px
}
/* Overlapping Grid items reserve the tallest article's natural height. */
.news-items {display:grid;position:relative;min-width:0}
.news-items>.icon-right {position:absolute;right:26px;top:calc(50% - 6px);pointer-events:none}
.news-empty {align-self:center;padding:17px 26px 17px 28px;font-size:15px;line-height:24px;font-weight:700;overflow-wrap:anywhere}
.news-link {
  display:grid;
  grid-area:1 / 1;
  visibility:hidden;
  grid-template-columns:minmax(0,1fr) 12px;
  gap:24px;
  align-items:center;
  padding:17px 26px 17px 28px;
  font-size:15px;
  line-height:24px;
  font-weight:700
}
.news-link.is-active {visibility:visible}
.news-copy {
  display:grid;
  grid-template-columns:max-content minmax(0,1fr);
  gap:24px;
  transition:opacity var(--news-fade) linear
}
.news-link:not(.is-active) .news-copy {opacity:0;transition:none}
.news-copy.is-fading {
  opacity:0
}
.news time {
  font-family:Inter,sans-serif;
  color:#6e6e6e
}
.news-title {
  overflow-wrap:anywhere
}
.works {
  padding-block:40px
}
.works-panel {
  display:grid;
  gap:34px;
  background:#f4f4f4;
  border-radius:10px;
  padding:64px 44px 36px
}
.section-heading {
  display:grid;
  justify-items:center;
  gap:16px;
  margin-bottom:26px
}
.section-heading p {
  display:grid;
  grid-template-columns:8px auto;
  gap:8px;
  align-items:center;
  font-size:14px;
  line-height:21px;
  font-weight:700
}
.decorative-mark {
  font-size:10px;
  line-height:8px
}
.section-heading h2 {
  font:700 48px/62px Inter,sans-serif
}
.works-list {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:32px
}
.works-card {
  display:grid;
  align-content:start;
  gap:20px;
  background:white;
  border-radius:5px;
  padding:16px 16px 24px
}
.works-card img {
  height:165px;
  width:100%;
  object-fit:cover;
  border-radius:3px
}
.works-card h3 {
  font-size:18px;
  line-height:28px;
  padding-inline:8px
}
.works-link,.detail-link {
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  background:white;
  font-weight:700;
  font-size:15px;
  line-height:22.5px;
  border-radius:5px
}
.works-link {
  width:232px;
  min-height:56px;
  padding:10px 12px 10px 20px;
  justify-self:end
}
.works-link .arrow-box {
  width:32px;
  height:32px
}
#top ~ main :is(.works-link,.detail-link) .arrow-box {overflow:hidden}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  #top ~ main :is(.works-link,.detail-link):hover .arrow-box::before,
  .header-contact:hover .contact-arrow::before,
  #top ~ main .news-items:has(.news-link:hover) > .icon-right::before {
    animation:top-button-arrow .5s ease-in-out;
  }
}
/* Keep clipping frames still; only their image or glyph moves. */
.header-contact .contact-arrow {overflow:hidden}
#top ~ main .news-items > .icon-right {overflow:hidden}
#top ~ main .news-items > .icon-right::before {display:block}
.contact-photo-frame {display:block;grid-column:1/-1;height:64px;overflow:hidden;border-radius:3px;min-width:0}
.works-card-link {display:grid;gap:inherit;min-width:0;color:inherit}
.works-card-link:hover {color:inherit}
:is(.works-card,.works-listing-card,.post-card) .card-image-frame {display:block;overflow:hidden;border-radius:4px;min-width:0}
.works-card .card-image-frame {border-radius:3px}
@media(max-width:1099px) {
  .contact-photo-frame {display:none}
}
:is(#top,.subpage-hero) .is-scroll-header .contact-photo-frame {display:none}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  :is(.works-card,.works-listing-card,.post-card) .card-image-frame img,
  #top .contact-photo-frame img {transition:transform .4s ease;transform-origin:center}
  :is(.works-card,.works-listing-card,.post-card) .card-image-frame:hover img,
  #top .header-contact:hover .contact-photo-frame img {transform:scale(1.05)}
}
@keyframes top-button-arrow {
  0% {transform:translateX(0);opacity:1}
  49% {transform:translateX(20px);opacity:0}
  50% {transform:translateX(-20px);opacity:0}
  100% {transform:translateX(0);opacity:1}
}
.services {
  background:#2f2f2f;
  padding-block:40px
}
.service-list {
  display:grid;
  gap:36px
}
.service {
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:10px;
  min-height:350px
}
.service:last-child {
  min-height:396px
}
.service-photo {
  grid-column:2;
  grid-row:1;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:4px
}
.service-content {
  grid-column:1;
  grid-row:1;
  position:relative;
  background:white;
  border-radius:4px;
  padding:50px 28px 28px 88px;
  display:grid;
  grid-template-rows:auto 1fr;
  gap:18px;
  min-width:0
}
.service-heading {
  display:grid;
  align-content:start;
  gap:18px
}
.service h2 {
  font-size:36px;
  line-height:50px
}
.subtitle {
  font-size:18px;
  line-height:26px;
  font-weight:700;
  color:#141414
}
.number {
  display:grid;
  place-items:center;
  background:black;
  color:white;
  border-radius:4px;
  width:36px;
  height:36px;
  font:700 14px/21px Inter,sans-serif
}
.service-meta .number {
  position:absolute;
  top:18px;
  left:18px
}
.service-meta .category {
  position:absolute;
  top:24px;
  right:24px;
  writing-mode:vertical-rl;
  font:700 16px/20px Inter,sans-serif;
  color:#414141
}
.description-and-link {
  display:grid;
  grid-template-columns:minmax(0,1fr) 250px;
  gap:94px;
  align-items:end
}
.description {
  font-size:16px;
  line-height:27px;
  color:#8b8b8b;
  overflow-wrap:anywhere
}
.detail-link {
  min-height:62px;
  padding:13px 14px 13px 18px;
  border:1px solid #d7d7d7;
  border-radius:4px
}
/* Shared footer: footer_new02 / footer_new02_phone. */
.site-footer {
  padding:20px 20px 0;
  background:#fff;
}
.site-footer-panel {
  /* 20px outer gutter + 20px panel inset = the main content\'s 40px gutter. */
  padding:30px 20px 20px;
  border-radius:30px;
  background:var(--surface);
}
.site-footer-main {
  display:grid;
  grid-template-columns:minmax(0,360px) minmax(0,1fr);
  grid-template-areas:"brand nav" "contact nav";
  gap:20px clamp(32px,calc(28.125vw - 265px),140px);
  max-width:1200px;
  margin-inline:auto;
}
.site-footer-brand {grid-area:brand;justify-self:start}
.site-footer-brand img {width:126px;height:auto;object-fit:contain}
.site-footer-contact {
  grid-area:contact;
  display:grid;
  gap:10px;
  min-width:0;
  font-style:normal;
  font-size:16px;
  line-height:25px;
  color:#232323;
  overflow-wrap:anywhere;
}
.site-footer-contact>div {display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;align-items:center}
.site-footer-contact .decor-icon {display:grid;place-items:center;width:18px;height:18px;border-radius:2px;background:#2f2f2f;color:#fff;font-size:14px}
.site-footer-contact a {font-family:Inter,sans-serif}
.site-footer-nav {
  grid-area:nav;
  padding-top:38px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:24px;
  align-content:start;
  min-width:0;
}
.site-footer-nav a {
  display:grid;
  grid-template-columns:minmax(0,1fr) 16px;
  align-items:center;
  min-height:50px;
  border-bottom:1px solid #d5d5d5;
  font:400 18px/27px Inter,sans-serif;
  letter-spacing:.8px;
  color:#1e1e1e;
}
.site-footer-nav a::after {width:16px;height:16px;font-size:16px;color:#555}
.site-footer-secondary {
  display:grid;
  grid-auto-flow:column;
  justify-content:end;
  align-items:center;
  gap:32px;
  max-width:1200px;
  margin:21px auto 0;
  min-height:22px;
  font:400 12px/18px Inter,sans-serif;
  letter-spacing:.6px;
  color:#4b4b4b;
}
.site-footer-copyright {
  padding-block:15px;
  text-align:center;
  font-size:15px;
  font-weight:700;
  line-height:22.5px;
}
@media(max-width:899px) {
  .site-footer {padding-inline:8px}
  /* Keep the 40px content gutter while the footer uses its stacked layout. */
  .site-footer-panel {padding:28px 32px 20px}
  .site-footer-main {grid-template-columns:minmax(0,1fr);grid-template-areas:"brand" "contact" "nav"}
  .site-footer-nav {padding-top:0;margin-top:8px;column-gap:clamp(12px,calc(44.445vw - 154.667px),24px)}
  .site-footer-secondary {justify-content:start;gap:24px}
}
@media(max-width:767px) {
  .site-footer-panel {padding-inline:24px}
}

.menu-overlay {
  display:none
}
/* Navigation needs its compact form below 1100px; content changes at 767px. */
@media (min-width:768px) and (max-width:1250px) {
  .service {
    grid-template-columns:minmax(0,1fr) 28%
  }
  .service-content {
    padding:60px 24px 24px
  }
  .service-meta .category {
    font-size:12px
  }
  .service h2 {
    font-size:30px
  }
  .description-and-link {
    grid-template-columns:minmax(0,1fr);
    gap:20px
  }
  .detail-link {
    width:230px;
    justify-self:end
  }
  .works-panel {
    padding-inline:24px
  }
  .works-list {
    gap:20px
  }
  .works-card h3 {
    font-size:16px
  }
}
@media(min-width:1100px) {
  #top .site-header {grid-template-columns:162px minmax(0,1fr) 201px;column-gap:39px}
  #top .header-logo {padding:32px 18px 37.7px;place-items:start}
  #top .header-logo img {width:126px;height:auto;object-fit:contain}
  #top .desktop-nav {width:min(940px,100%);height:32px;margin-top:33px;padding-top:0;align-items:center}
  #top ~ main .services .detail-link {width:190px;min-height:45px;height:45px;padding-block:0;justify-self:end}
}
@media(min-width:1100px) and (max-width:1250px) {
  #top ~ main .services .detail-link {margin-top:17px}
}
@media(max-width:1099px) {
  .hero {
    padding-top:450px;
    min-height:704px
  }
  .site-header {
    grid-template-columns:126px minmax(0,1fr) 120px 34px;
    gap:4px;
    align-items:center;
    height:50px;
    background:white;
    padding:0 10px 0 3px;
    border-radius:0 0 7px 7px
  }
  .header-logo {
    height:auto;
    border-radius:0
  }
  .header-logo img {
    width:126px
  }
  .desktop-nav {
    display:none
  }
  .header-contact {
    grid-column:3;
    padding:0;
    background:none
  }
  .contact-inner {
    min-height:34px;
    height:34px;
    grid-template-columns:1fr 18px;
    align-items:center;
    padding:0 8px 0 10px;
    gap:0
  }
  .contact-copy {
    font-size:10px;
    line-height:15px
  }
  .contact-copy small,.contact-photo {
    display:none
  }
  .header-contact .contact-arrow {
    width:18px;
    height:18px;
    border-radius:2px
  }
  .menu-toggle {
    grid-column:4;
    display:grid;
    place-items:center;
    position:relative;
    padding:0;
    border:0;
    border-radius:4px;
    background:#1e1e1e;
    width:34px;
    height:34px;
    cursor:pointer
  }
  .menu-toggle span {
    position:absolute;
    width:14px;
    height:1px;
    background:white;
    transition:transform var(--menu-duration),translate var(--menu-duration);
    translate:0 -3px
  }
  .menu-toggle span+span {
    translate:0 3px
  }
  .menu-toggle[aria-expanded=true] span {
    translate:0 0;
    transform:rotate(45deg)
  }
  .menu-toggle[aria-expanded=true] span+span {
    transform:rotate(-45deg)
  }
  .hero-images {
    top:50px
  }
  .menu-open .site-header {
    position:fixed;
    inset:0 0 auto;
    z-index:30
  }
  .menu-overlay {
    display:block;
    position:fixed;
    inset:50px 0 0;
    z-index:25
  }
  .menu-outside {
    position:absolute;
    inset:0
  }
  #mobile-menu {
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    width:85%;
    max-width:360px;
    background:#f4f4f4;
    padding:24px;
    overflow-y:auto;
    overscroll-behavior:contain;
    transform:translateX(100%);
    transition:transform var(--menu-duration);
    visibility:visible
  }
  #mobile-menu.is-open {
    transform:translateX(0);
    visibility:visible
  }
  #mobile-menu a {
    display:grid;
    grid-template-columns:1fr 16px;
    align-items:center;
    padding-block:15px;
    border-bottom:1px solid #ccc;
    color:#222;
    font:400 18px/26px Inter,sans-serif;
    letter-spacing:.4px
  }
  #mobile-menu a::after {
    width:16px;
    height:16px;
    font-size:16px
  }
}
@media(max-width:767px) {
  .desktop-copy {
    display:none
  }
  .mobile-copy {
    display:initial
  }
  .section-width {
    width:calc(100% - 32px)
  }
  .hero {
    display:grid;
    min-height:620px;
    padding:396px 20px 51px
  }
  .hero-images {
    inset:50px 6px auto;
    height:365px;
    border-radius:0
  }
  .hero-images:after {
    z-index:3;
    content:'';
    position:absolute;
    left:-6px;
    bottom:-6px;
    width:204px;
    height:48px;
    background:white;
    border-radius:0 16px 0 0
  }
  .hero-message {
    justify-self:start;
    width:100%;
    padding:0;
    background:none;
    border-radius:0;
    gap:18px
  }
  .hero-message h1 {
    font-size:28px;
    line-height:39px
  }
  .hero-message p {
    font-size:10px;
    line-height:16px
  }
  .slide-indicators {
    top:396px;
    bottom:auto;
    right:21px;
    gap:5px
  }
  .slide-indicators>span {
    width:12px;
    height:2px
  }
  .slide-indicators i {
    width:2px;
    height:2px;
    background:#c3c3c3
  }
  .slide-indicators .active i {
    width:calc(2px + 10px * var(--indicator-progress))
  }
  .scroll-cue {
    left:20px;
    bottom:5px;
    min-height:40px;
    color:black;
    line-height:15px
  }
  .news {
    padding-block:30px 27px
  }
  .news-strip {
    border:0;
    grid-template-columns:1fr;
    border-radius:0
  }
  .news h2 {
    justify-self:start;
    font-size:13px;
    line-height:20px;
    border-radius:4px 4px 0 0;
    padding:6px 12px
  }
  .news-items>.icon-right {right:0}
  .news-empty {border-block:1px solid #d7d7d7;padding:18px 0 20px;font-size:14px;line-height:23px}
  .news-link {
    border-block:1px solid #d7d7d7;
    gap:16px;
    padding:18px 0 20px;
    font-size:14px;
    line-height:23px
  }
  .news-copy {
    grid-template-columns:1fr;
    gap:4px
  }
  .news time {
    line-height:21px;
    color:#696969
  }
  .works {
    width:100%;
    padding:0;
    background:#f4f4f4
  }
  .works-panel {
    padding:40px 16px 32px;
    gap:24px;
    border-radius:0
  }
  .section-heading {
    gap:10px;
    margin-bottom:8px
  }
  .section-heading p {
    font-size:12px;
    line-height:18px
  }
  .section-heading h2 {
    font-size:32px;
    line-height:42px
  }
  .works-list {
    grid-template-columns:1fr;
    gap:20px
  }
  .works-card {
    gap:16px;
    padding:16px 16px 20px
  }
  .works-card img {
    height:176px
  }
  .works-card h3 {
    font-size:16px;
    line-height:24px
  }
  .works-link {
    justify-self:center
  }
  .services {
    padding-block:18px 20px
  }
  .service-list {
    gap:24px
  }
  .service,.service:last-child {
    grid-template-columns:1fr;
    gap:20px;
    min-height:0;
    padding:6px 6px 20px;
    background:white;
    border-radius:4px
  }
  .service-photo {
    grid-column:1;
    grid-row:1;
    height:185px;
    border-radius:3px
  }
  .service-content {
    grid-column:1;
    grid-row:2;
    padding:0 14px;
    display:grid;
    gap:26px
  }
  .service-heading {
    gap:10px
  }
  .service-meta {
    display:grid;
    grid-template-columns:26px 1fr;
    gap:12px;
    align-items:center;
    margin-bottom:4px
  }
  .service-meta .number {
    position:static;
    width:26px;
    height:26px;
    border-radius:3px;
    font-size:11px;
    line-height:16px
  }
  .service-meta .category {
    position:static;
    writing-mode:horizontal-tb;
    font-size:11px;
    line-height:16px;
    color:black
  }
  .service h2 {
    font-size:24px;
    line-height:34px
  }
  .subtitle {
    font-size:12px;
    line-height:19px;
    color:black
  }
  .description-and-link {
    grid-template-columns:1fr;
    gap:26px
  }
  .detail-link {
    justify-self:start;
    width:184px;
    min-height:42px;
    padding:7px 8px 7px 12px;
    font-size:12px;
    line-height:18px;
    border-radius:3px
  }
  .detail-link .arrow-box {
    width:26px;
    height:26px;
    border-radius:2px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
  .slide-indicators .active i {
    width:100%
  }
}

/* About: static subpage masthead, shared navigation and footer. */
.subpage-hero {
  position:relative;
  isolation:isolate;
  display:grid;
  gap:76px;
  padding:16px 16px 60px;
  min-height:300px;
  color:#333;
}
.subpage-hero-photo {
  position:absolute;
  z-index:-1;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.subpage-heading {
  display:grid;
  align-content:start;
  gap:5px;
}
.subpage-heading h1 {font:700 40px/60px Inter,sans-serif}
.breadcrumb {
  display:grid;
  grid-auto-flow:column;
  justify-content:start;
  gap:10px;
  min-height:25px;
  font:400 14px/21px Inter,sans-serif;
  color:#555;
}
.breadcrumb a {text-decoration:underline}
.breadcrumb span {text-decoration:none}
.about-content {
  width:calc(100% - 80px);
  max-width:1200px;
  margin-inline:auto;
  padding-block:80px 60px;
  display:grid;
  gap:80px;
  color:#333;
}
.about-message {
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,55fr) minmax(0,45fr);
  grid-template-rows:min-content auto;
  row-gap:30px;
}
.about-message::before {
  content:'';
  position:absolute;
  z-index:-1;
  inset:118px 0 0 40%;
  background:#f4f4f4;
}
.about-message h2 {
  grid-column:2;
  grid-row:1;
  padding-inline:40px;
  font:400 36px/48px Inter,sans-serif;
}
.about-message-photo {
  grid-column:1;
  grid-row:1 / 3;
  width:100%;
  height:auto;
  aspect-ratio:660 / 430;
  object-fit:cover;
  object-position:50% 35%;
}
.about-message-copy {
  grid-column:2;
  grid-row:2;
  display:grid;
  align-content:start;
  gap:30px;
  padding:0 40px 48px;
  min-width:0;
}
.about-catch {font-size:24px;font-weight:700;line-height:40px}
.about-prose {display:grid;gap:30px;font-size:15px;line-height:30px;overflow-wrap:anywhere}
.about-details {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:start}
.about-origin,.about-skills {display:grid;gap:24px;min-width:0}
.about-detail-title {display:grid;gap:24px;font-size:24px;line-height:36px;font-weight:700}
.about-detail-title::after {content:'';display:block;width:50px;height:3px;background:#333}
.about-skill-list {display:flex;flex-wrap:wrap;gap:12px;list-style:none;margin:0;padding:0}
.about-skill-list li {background:#f4f4f4;border:1px solid #ccc;border-radius:6px;padding:11px 19px;color:#333;font-size:16px;line-height:24px;white-space:nowrap}
@media(min-width:1100px) {
  .subpage-hero .site-header {
    position:relative;
    inset:auto;
    isolation:isolate;
    grid-template-columns:126px minmax(0,1fr) 204px;
    gap:24px;
    align-items:center;
    min-height:58px;
    padding-left:18px;
  }
  .subpage-hero .site-header::before {content:'';position:absolute;inset:0 212px 0 0;background:#f4f5f6;border-radius:4px;z-index:-1}
  .subpage-hero .header-logo {height:auto;background:none;border-radius:0}
  .subpage-hero .header-logo img {width:126px;object-fit:contain}
  .subpage-hero .desktop-nav {padding:0;gap:20px;line-height:19.5px}
  .subpage-hero .header-contact {padding:0;background:none;border-radius:4px}
  .subpage-hero .contact-inner {min-height:58px;grid-template-columns:minmax(0,1fr) 30px;gap:8px;align-items:center;padding:0 12px}
  .subpage-hero .contact-copy {gap:3px}
  .subpage-hero .header-contact .contact-arrow {width:30px;height:30px}
}
@media(max-width:1099px) {
  .subpage-hero {gap:44px;min-height:240px;padding:0 0 50px}
  /* Keep the header row and the Grid gap when the header becomes fixed. */
  .subpage-header-slot {min-height:56px}
  .subpage-hero .site-header {position:relative;inset:auto;height:56px}
  .subpage-heading {width:100%;padding-inline:16px}
  :is(.about-page, .price-page) .menu-overlay {top:56px}
  .menu-open .subpage-hero .site-header {position:fixed;inset:0 0 auto}
  .about-message {grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .about-message h2 {padding-inline:24px}
  .about-message-copy {padding-inline:24px}
  .about-catch {font-size:22px;line-height:36px}
}
@media(max-width:899px) {
  .about-content {gap:60px}
  .about-message {grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;gap:0}
  .about-message::before {display:none}
  .about-message h2 {grid-column:1;grid-row:1;padding:0;margin-bottom:24px;font-size:32px;line-height:44px}
  .about-message-photo {grid-column:1;grid-row:2;aspect-ratio:16 / 9;object-position:50% 20%}
  .about-message-copy {grid-column:1;grid-row:3;background:#f4f4f4;padding:32px 20px;gap:28px}
  .about-catch {font-size:20px;line-height:34px}
  .about-details {grid-template-columns:minmax(0,1fr);gap:60px}
}
@media(max-width:767px) {
  .about-content {width:calc(100% - 16px)}
}

/* Price: the 32px Figma inset includes the 3px inside stroke. */
.price-content {
  width:calc(100% - 80px);
  max-width:1200px;
  margin-inline:auto;
  padding-block:80px;
  display:grid;
  gap:24px;
  color:#333;
}
.price-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
.price-card {
  min-width:0;
  min-height:360px;
  display:grid;
  align-content:start;
  gap:32px;
  padding:29px;
  background:#f4f4f4;
  border:3px solid #2f2f2f;
  border-radius:8px;
  overflow-wrap:anywhere;
}
.price-card-heading {display:grid;gap:16px}
.price-card h2 {font:700 20px/28px Inter,sans-serif}
.price-amount {font-size:40px;font-weight:700;line-height:56px}
.price-card ul {list-style:none;padding:0;margin:0;font-size:16px;line-height:32px}
.price-card li {display:grid;grid-template-columns:8px minmax(0,1fr)}
.price-card li::before {content:'•'}
.price-note {text-align:right;font-size:14px;line-height:24px;color:#555}
@media(max-width:1199px) {
  .price-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px) {
  .price-content {width:calc(100% - 16px);padding-block:60px}
  .price-grid {grid-template-columns:minmax(0,1fr)}
}

/* Works listing: shared article markup for static content and a future loop. */
.works-content {
  width:calc(100% - 80px);
  max-width:1200px;
  margin-inline:auto;
  padding-block:80px 60px;
  display:grid;
  gap:48px;
  color:#333;
}
.works-listing {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:32px 24px;
}
.works-listing-card {
  min-width:0;
  background:#f4f4f4;
  border-radius:8px;
}
.works-listing-card>a {
  display:grid;
  align-content:start;
  gap:16px;
  height:100%;
  padding:20px;
  border-radius:inherit;
}
.works-listing-card img {
  width:100%;
  height:auto;
  aspect-ratio:4 / 3;
  object-fit:cover;
  border-radius:4px;
}
.works-listing-card h2 {
  font-size:18px;
  font-weight:700;
  line-height:28px;
  overflow-wrap:anywhere;
}
.works-pagination {
  display:grid;
  grid-template-columns:repeat(3,48px) 112px;
  justify-content:center;
  align-items:center;
  gap:12px;
  font:400 16px/24px Inter,sans-serif;
}
.works-page-number {
  display:grid;
  place-items:center;
  min-height:48px;
  border:1px solid #d1d1d1;
  background:#fff;
}
.works-page-number[aria-current="page"] {
  border-color:#2f2f2f;
  background:#2f2f2f;
  color:#fff;
}
.works-page-next {
  display:grid;
  grid-auto-flow:column;
  justify-content:center;
  align-items:center;
  gap:4px;
  min-height:48px;
  font-weight:700;
}
.works-pagination a {color:inherit;text-decoration:none}

/* Explicit opt-in; without successful JavaScript initialization content stays visible. */
[data-reveal].reveal-ready {opacity:.5;transform:translateY(20px)}
[data-reveal].reveal-ready.is-revealed {
  opacity:1;
  transform:translateY(0);
  transition:opacity .7s ease-out var(--reveal-delay,0s),transform .7s ease-out var(--reveal-delay,0s);
}
@media(min-width:768px) {
  :is(.works-list,.works-listing,.post-listing,.price-grid) > [data-reveal]:nth-child(3n + 2) {--reveal-delay:.1s}
  :is(.works-list,.works-listing,.post-listing,.price-grid) > [data-reveal]:nth-child(3n) {--reveal-delay:.2s}
}
@media(min-width:768px) and (max-width:1199px) {
  :is(.works-listing,.post-listing,.price-grid) > [data-reveal]:nth-child(n) {--reveal-delay:0s}
  :is(.works-listing,.post-listing,.price-grid) > [data-reveal]:nth-child(2n) {--reveal-delay:.1s}
}
[data-reveal].reveal-ready.reveal-immediate {opacity:1;transform:none;transition:none;--reveal-delay:0s}
@media(prefers-reduced-motion:reduce) {
  [data-reveal].reveal-ready,
  [data-reveal].reveal-ready.is-revealed {opacity:1;transform:none;transition:none;--reveal-delay:0s}
}
@media(max-width:1199px) {
  .works-listing {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1099px) {
  .works-page .menu-overlay {top:56px}
}
@media(max-width:767px) {
  .works-content {width:calc(100% - 16px)}
  .works-listing {grid-template-columns:minmax(0,1fr);gap:24px}
  .works-listing-card img {aspect-ratio:346 / 258}
}

/* Reuse the original header; reserve its normal slot while it is fixed. */
.subpage-header-slot.has-scroll-header {height:var(--scroll-header-slot-height)}
.scroll-header-host {z-index:20}
:is(#top,.subpage-hero) .site-header.is-scroll-header {
  position:fixed;
  inset:0 0 auto;
  z-index:50;
  transform:translateY(calc(-100% - 32px));
  transition:none;
  pointer-events:none;
}
:is(#top,.subpage-hero) .site-header.is-scroll-header.scroll-header-animated {transition:transform .3s ease-out}
:is(#top,.subpage-hero) .site-header.is-scroll-header.is-scroll-header-visible {transform:translateY(0);pointer-events:auto}
@media(min-width:1100px) {
  :is(#top,.subpage-hero) .site-header.is-scroll-header {
    inset:16px 16px auto;
    isolation:isolate;
    grid-template-columns:126px minmax(0,1fr) 204px;
    gap:24px;
    align-items:center;
    height:58px;
    min-height:58px;
    padding:0 0 0 18px;
    background:none;
    border-radius:0;
  }
  :is(#top,.subpage-hero) .site-header.is-scroll-header::before {content:'';position:absolute;inset:0 212px 0 0;background:#f4f5f6;border-radius:4px;z-index:-1}
  :is(#top,.subpage-hero) .is-scroll-header .header-logo {height:auto;padding:0;background:none;border-radius:0;place-items:center}
  :is(#top,.subpage-hero) .is-scroll-header .header-logo img {width:126px;height:auto;object-fit:contain}
  :is(#top,.subpage-hero) .is-scroll-header .desktop-nav {width:auto;height:auto;margin:0;padding:0;gap:20px;line-height:19.5px}
  :is(#top,.subpage-hero) .is-scroll-header .header-contact {padding:0;background:none;border-radius:4px}
  :is(#top,.subpage-hero) .is-scroll-header .contact-inner {min-height:58px;height:58px;grid-template-columns:minmax(0,1fr) 30px;gap:8px;align-items:center;padding:0 12px}
  :is(#top,.subpage-hero) .is-scroll-header .contact-copy {gap:3px}
  :is(#top,.subpage-hero) .is-scroll-header .contact-arrow {width:30px;height:30px}
  :is(#top,.subpage-hero) .is-scroll-header .contact-photo {display:none}
}
@media(prefers-reduced-motion:reduce) {
  :is(#top,.subpage-hero) .site-header.is-scroll-header.scroll-header-animated {transition:none}
}