/*
Theme Name: Apricot Studio
Theme URI: https://example.com/apricot-studio
Author: Asaki Seino
Author URI: https://example.com
Description: Classic WordPress theme for the Apricot Studio portfolio — a bilingual (EN/JA) freelance web designer portfolio with a custom "Work" case-study post type, a News blog, and a Contact page. Converted from a static HTML/CSS build.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: apricot-studio
Tags: portfolio, blog, custom-menu, featured-images, translation-ready, two-languages
*/

/* ==========================================================================
   Apricot Studio — Portfolio 2026 LP
   ========================================================================== */

:root {
  --color-navy: #17314c;
  --color-navy-text: #1f4b78;
  --color-orange: #c54812;
  --color-gray: #6b7280;
  --color-font: #505050;
  --color-border: #e2e6ea;
  --color-border-soft: #e5e5eb;
  --color-bg-light: #f4f6f8;
  --color-bg-tan: #f4e3c9;
  --white: #ffffff;

  --font-main: "Inter", "Noto Sans JP", sans-serif;
  --font-jp: "Noto Sans JP", "Inter", sans-serif;
  --font-hand: "Caveat", cursive;
  --font-numeral: "Roboto", "Inter", sans-serif;

  --side-pad: 150px;
  --max-width: 1440px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-main);
  color: var(--color-font);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
ul { list-style: none; margin: 0; padding: 0; }
a { text-decoration: none; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
button { font-family: inherit; border: none; background: none; cursor: pointer; }

/* ---- Shared ---- */
.section-eyebrow { display: flex; flex-direction: column; gap: 4px; }
.section-eyebrow__label {
  font-weight: 600;
  font-size: 16px;
  color: var(--color-gray);
  letter-spacing: 0.02em;
}
.section-eyebrow__title {
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  color: var(--color-navy-text);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 24px;
  border-radius: 32px;
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.btn:hover { opacity: 0.85; transform: translateY(-1px); }
.btn--white { background: var(--white); color: var(--color-navy-text); }
.btn--orange { background: var(--color-orange); color: var(--white); }
.btn--wide { padding-right: 18px; }
.btn--lg {
  width: 180px;
  height: 56px;
  padding: 0 18px 0 24px;
  justify-content: center;
  font-size: 16px;
}
.btn img { width: 24px; height: 24px; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  background: var(--color-navy);
  padding: 20px 56px;
}
.site-header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.site-header__eyebrow {
  font-weight: 500;
  font-size: 14px;
  color: var(--white);
}
.brand-logo-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand-logo-group__name {
  font-weight: 700;
  font-size: 32px;
  letter-spacing: 0.05em;
  color: var(--white);
}
.brand-logo-group__mark { width: 42px; height: 33px; }

.lang-toggle__btn {
  padding: 6px 12px;
  border-radius: 13px;
  font-weight: 600;
  font-size: 12px;
  color: #6b7280;
}
.lang-toggle {
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 3px;
  gap: 2px;
  display: inline-flex;
  justify-self: end;
}
.lang-toggle__btn.is-active {
  background: var(--color-font);
  color: var(--white);
}

/* ==========================================================================
   Nav bar
   ========================================================================== */
.nav-menu {
  background: var(--white);
  padding: 16px 80px;
  display: flex;
  justify-content: center;
  position: relative;
}
.nav-menu--bordered { border-bottom: 2px solid var(--color-border); }
.nav-menu__links {
  display: flex;
  gap: 40px;
  justify-content: center;
  flex-wrap: wrap;
}
.nav-menu__links a {
  font-weight: 500;
  font-size: 14px;
  color: var(--color-navy-text);
  transition: opacity 0.2s ease;
}
.nav-menu__links a:hover { opacity: 0.6; }
.nav-menu__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
}
.nav-menu__toggle span {
  width: 24px;
  height: 2px;
  background: var(--color-navy-text);
  border-radius: 2px;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 692px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 60px 150px 100px;
  text-align: center;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: 0;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(23,49,76,0.05) 0%, rgba(23,49,76,0.18) 100%);
}
.hero__stars {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.hero__star-cluster {
  position: absolute;
  height: auto;
}
.hero__star-cluster--right {
  top: 28.5%;
  left: 77.1%;
  width: 190px;
  transform: translate(-50%, -50%) rotate(35.65deg);
}
.hero__star-cluster--left {
  top: 57.1%;
  left: 22.7%;
  width: 166px;
  transform: translate(-50%, -50%) rotate(180deg) rotate(10deg) scaleY(-1) rotate(-98.46deg);
}
.hero__title {
  position: relative;
  z-index: 2;
}
.hero__title-mask {
  display: block;
  width: clamp(420px, 60vw, 860px);
  aspect-ratio: 1760 / 339;
  background: var(--white);
  -webkit-mask-image: url("assets/images/hero-title-mask.png");
  mask-image: url("assets/images/hero-title-mask.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.num { font-family: var(--font-numeral); }
.hero__text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19px;
  max-width: none;
}
.hero__tagline {
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

/* ==========================================================================
   About
   ========================================================================== */
.about {
  background: var(--white);
  padding: 64px 150px;
  overflow: hidden;
}
.about__content {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 60px;
}
.about__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
}
.about__title { margin-top: 4px; }
.about__desc {
  color: var(--color-gray);
  font-size: 15px;
  line-height: 1.6;
}
.about__desc p { margin: 0 0 16px; }
.about__desc p:last-child { margin-bottom: 0; }
.about__media {
  position: relative;
  width: 360px;
  flex-shrink: 0;
}
.about__photo {
  width: 360px;
  height: 482px;
  border-radius: 4px;
  overflow: hidden;
}
.about__photo img { width: 100%; height: 100%; object-fit: cover; }
.about__accent {
  position: absolute;
  z-index: 1;
  background: rgba(9,52,164,0.5);
  width: 375px;
  height: 128px;
  opacity: 0;
  transition: transform 0.9s cubic-bezier(.16,.84,.44,1), opacity 0.9s ease;
}
.about__accent--1 { left: 279px; top: 101px; transform: translateX(90px); }
.about__accent--2 { left: -288px; top: 386px; transform: translateX(-90px); }
.about__media.is-visible .about__accent {
  opacity: 1;
  transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
  .about__accent { transition: none; opacity: 1; transform: none; }
}

/* ==========================================================================
   Selected works
   ========================================================================== */
.works {
  background: var(--white);
  padding: 64px 150px 128px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.works__grid {
  max-width: var(--max-width);
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}
.work-card__image {
  width: 100%;
  aspect-ratio: 550 / 332;
  border-radius: 2px;
  overflow: hidden;
}
.work-card__image img { width: 100%; height: 100%; object-fit: cover; }
.work-card__body {
  margin-top: 16px;
  color: var(--color-font);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.work-card__title {
  font-weight: 600;
  font-size: 16px;
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.work-card__tag {
  font-size: 13px;
  font-weight: 400;
  color: var(--color-gray);
}
.works__more {
  max-width: var(--max-width);
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
}

/* ==========================================================================
   Works — full listing page
   ========================================================================== */
.works-intro {
  background: var(--white);
  padding: 80px 150px 32px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.breadcrumb a { color: var(--color-gray); }
.breadcrumb a:hover { opacity: 0.7; }
.breadcrumb__sep { color: #b2b5bd; }
.breadcrumb__current { font-weight: 600; color: var(--color-font); }
.works-intro__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.works-intro__heading-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.works-intro__eyebrow-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.works-intro__eyebrow {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-gray);
}
.works-intro__title {
  font-weight: 700;
  font-size: 40px;
  color: var(--color-navy-text);
}
.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.filter-tab {
  padding: 8px 18px;
  border-radius: 20px;
  border: 1px solid var(--color-border);
  font-weight: 500;
  font-size: 14px;
  color: var(--color-font);
  transition: opacity 0.2s ease;
}
.filter-tab:hover { opacity: 0.7; }
.filter-tab.is-active {
  background: var(--color-font);
  border-color: var(--color-font);
  color: var(--white);
}

.works-grid-section {
  background: var(--white);
  padding: 0 150px 128px;
}
.work-grid-row {
  max-width: var(--max-width);
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
  align-items: stretch;
}
.work-grid-card.is-hidden { display: none; }
.work-grid-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.work-grid-card__image {
  height: 340px;
  overflow: hidden;
  background: #d7e0e7;
}
.work-grid-card__image img { width: 100%; height: 100%; object-fit: cover; }
.work-grid-card__image--contain img { object-fit: contain; }

/* Simple variant: no border/frame, rounded image corners, tighter spacing — matches a subset of cards in the current Figma grid */
.work-grid-card--simple {
  border: none;
  border-radius: 4px;
}
.work-grid-card--simple .work-grid-card__image {
  border-radius: 2px;
  background: transparent;
}
.work-grid-card--simple .work-grid-card__tag-row {
  flex: none;
  padding: 0;
  gap: 4px;
}
.work-grid-card__tag-row {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding: 0;
}
.work-grid-card__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.work-grid-card__title-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.work-grid-card__index { font-family: var(--font-numeral); font-weight: 600; font-size: 16px; color: var(--color-font); }
.work-grid-card__name { font-weight: 600; font-size: 16px; color: var(--color-font); }
.work-grid-card__year { font-family: var(--font-numeral); font-weight: 600; font-size: 16px; color: var(--color-font); }
.work-grid-card__badge {
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 12px;
  white-space: nowrap;
  background: #ab4d19;
  color: var(--white);
}
.work-grid-card__badge--outline {
  background: var(--white);
  border: 1px solid var(--color-border);
  color: var(--color-font);
}
.work-grid-card__tag { font-size: 14px; color: var(--color-gray); white-space: nowrap; }
.work-grid-card__tag--compact { font-size: 12px; }
.work-grid-card__arrow {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 1px solid #2b2f36;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--color-font);
}

/* ==========================================================================
   Case study — work detail page
   ========================================================================== */
.case-study-hero {
  background: var(--white);
  padding: 20px 150px 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.case-study-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.case-study-head__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.case-study-head__title-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.case-study-head__title-badge {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.case-study-head__title {
  font-weight: 700;
  font-size: 32px;
  color: var(--color-navy-text);
  white-space: nowrap;
}
.case-study-badge {
  border: 1px solid #9ca3af;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-gray);
  background: var(--white);
  white-space: nowrap;
}
.case-study-head__tag { font-size: 15px; color: var(--color-gray); }
.case-study-head__url {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--color-gray);
  border-bottom: 1px solid var(--color-gray);
  padding-bottom: 4px;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}
.case-study-head__url:hover { opacity: 0.7; }
.case-study-mockup {
  position: relative;
  width: 100%;
  max-width: 1280px;
  aspect-ratio: 1280 / 620;
  background: #98b3d1;
  overflow: hidden;
}
.case-study-mockup__mac,
.case-study-mockup__phone {
  position: absolute;
  overflow: hidden;
}
.case-study-mockup__mac {
  left: -4.77%;
  top: 0;
  width: 109.45%;
  height: 100%;
}
.case-study-mockup__phone {
  left: 51.88%;
  top: 35.16%;
  width: 45.39%;
  height: 70.32%;
}
/* Matches the Figma crop exactly: the laptop PNG has wide transparent margins,
   so a plain object-fit leaves empty space above/below it inside the frame. */
.case-study-mockup__mac img {
  position: absolute;
  left: 0;
  top: -30.38%;
  width: 100%;
  height: 169.48%;
}
/* Used when the mockup PNG should be shown in full (letterboxed) rather than cropped. */
.case-study-mockup__mac--contain img {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.case-study-mockup__phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-study-info {
  background: var(--white);
  padding: 64px 150px 128px;
}
.case-study-info__row {
  display: flex;
  gap: 40px;
  padding: 28px 80px;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-jp);
}
.case-study-info__label {
  width: 160px;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 14px;
  color: var(--color-gray);
}
.case-study-info__desc {
  max-width: 800px;
  font-size: 14px;
  line-height: 1.57;
  color: var(--color-font);
  white-space: pre-wrap;
}

.case-study-preview {
  background: #e8e8e8;
  padding: 64px 150px 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.case-study-preview__row {
  display: flex;
  gap: 64px;
  justify-content: center;
  align-items: flex-start;
  max-width: 100%;
  overflow-x: auto;
}
.case-study-preview__col {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.case-study-preview__col--pc { width: 668px; }
/* A single image spanning the full preview-section width, instead of a fixed-width column. */
.case-study-preview__full-image {
  width: 100%;
}
.case-study-preview__full-image img {
  display: block;
  width: 100%;
  height: auto;
}
.case-study-preview__col--sp { width: 200px; }
.case-study-preview__col img { display: block; width: 100%; height: auto; }
/* A row of fixed-size cropped photo cards (e.g. a phone-screen gallery), rather than stacked full-width screenshots. */
.case-study-preview__gallery {
  display: flex;
  gap: 32px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 100%;
}
.case-study-preview__gallery-item {
  width: 256px;
  height: 554px;
  flex-shrink: 0;
  overflow: hidden;
}
.case-study-preview__gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* A single fixed-size cropped image, centered (e.g. one banner creative shown again at a set size). */
.case-study-preview__box {
  width: 600px;
  max-width: 100%;
  height: 500px;
  overflow: hidden;
}
.case-study-preview__box img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.case-study-back-link { border: none; }

/* ==========================================================================
   Blog / News
   ========================================================================== */
.news-teaser {
  background: var(--white);
  padding: 64px 150px 128px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.news-teaser__head, .news-teaser__grid, .news-teaser__more {
  max-width: var(--max-width);
  width: 100%;
  margin: 0 auto;
}
.news-teaser__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.blog-card {
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.blog-card__image {
  aspect-ratio: 365 / 242;
  background: #e5e7e9;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
}
.blog-card__image img { width: 100%; height: 100%; object-fit: cover; }
.blog-card__image--stretch img { object-fit: fill; }
.blog-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid #b2b2bd;
  border-top: none;
  border-radius: 0 0 4px 4px;
}
.blog-card__tag-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.blog-card__tag-row h3 {
  font-weight: 700;
  font-size: 16px;
  color: var(--color-font);
  flex: 1;
}
.blog-card__desc {
  margin-top: 4px;
  font-size: 13px;
  color: var(--color-gray);
  line-height: 1.5;
}
.blog-card__date { font-family: var(--font-numeral); font-size: 12px; color: var(--color-gray); }
.tag {
  flex-shrink: 0;
  padding: 5px 10px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.tag--navy { background: var(--color-navy); color: var(--white); }
.tag--orange { background: #f38224; color: var(--white); }
.tag--outline { background: var(--white); color: var(--color-gray); border: 1px solid var(--color-navy); }
.news-teaser__more { display: flex; justify-content: flex-end; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact {
  background: var(--color-bg-light);
  padding: 64px 150px;
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.contact__col--connect {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 280px;
  flex-shrink: 0;
}
.contact__heading {
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 40px);
  color: var(--color-navy-text);
  line-height: 1.2;
}
.contact__underline {
  width: 28px;
  height: 2px;
  background: var(--color-navy);
  border-radius: 4px;
}
.contact__note {
  font-size: 14px;
  color: var(--color-navy);
  max-width: 220px;
}
.contact__divider {
  width: 1px;
  align-self: stretch;
  background: var(--color-font);
  flex-shrink: 0;
}
.contact__col--info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 320px;
  flex-shrink: 0;
}
.info-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--color-font);
  border-radius: 4px;
  transition: background 0.2s ease;
}
a.info-row:hover { background: rgba(80,80,80,0.05); }
.info-row__icon { width: 24px; height: 24px; flex-shrink: 0; }
.info-row__icon--wide { width: 24px; height: 17px; }
.info-row__title { font-weight: 600; font-size: 14px; color: var(--color-font); }
.info-row__sub { margin-top: 4px; font-weight: 500; font-size: 12px; color: var(--color-font); }
.contact__cta {
  width: 260px;
  flex-shrink: 0;
  border: 1px solid var(--color-font);
  border-radius: 4px;
  padding: 24px;
  min-height: 162px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: background 0.2s ease;
}
.contact__cta:hover { background: rgba(80,80,80,0.05); }
.contact__cta span:first-child {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  line-height: 1.5;
  color: var(--color-font);
}
.contact__cta-arrow {
  align-self: flex-end;
  font-size: 18px;
  color: var(--color-font);
}

/* ==========================================================================
   Contact form page
   ========================================================================== */
.contact-form {
  background: var(--white);
  padding: 80px 150px 96px;
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.contact-form__title {
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  color: var(--color-navy-text);
}
.contact-form__subtitle {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-font);
  margin-top: 4px;
}
.contact-form__divider {
  border: none;
  border-top: 2px dotted #d9c7a1;
  margin: 0;
}
.contact-form__intro {
  font-size: 16px;
  color: var(--color-font);
}
.contact-form__card {
  background: var(--color-bg-light);
  border-radius: 20px;
  padding: 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
}
.contact-form__field {
  width: 100%;
  background: #eff1f3;
  border: none;
  border-radius: 10px;
  padding: 16px 20px;
  font-family: inherit;
  font-size: 15px;
  color: var(--color-font);
}
.contact-form__field::placeholder { color: #999ea6; }
textarea.contact-form__field {
  height: 160px;
  resize: vertical;
}
.contact-form__footer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.contact-form__note {
  font-size: 13px;
  color: #8c9199;
}
.contact-form__submit {
  width: 180px;
  height: 56px;
  background: var(--color-orange);
  color: var(--white);
  border-radius: 60px;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.05em;
  transition: opacity 0.2s ease;
}
.contact-form__submit:hover { opacity: 0.85; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--color-navy);
  padding: 40px 80px 60px;
}
.site-footer__card {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px;
}
.site-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.site-footer__brand {
  font-weight: 700;
  font-size: 32px;
  color: var(--white);
}
.site-footer__links {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
.site-footer__links a {
  font-weight: 500;
  font-size: 14px;
  color: var(--white);
}
.site-footer__links a:hover { opacity: 0.7; }
.site-footer__divider {
  border: none;
  border-top: 1px solid var(--white);
  margin: 0;
}
.site-footer__copy {
  font-size: 13px;
  color: var(--white);
}

/* ==========================================================================
   About page — full page
   ========================================================================== */
.about-intro {
  background: var(--white);
  padding: 80px 150px 32px;
  overflow: hidden;
}
.about-intro__content {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 60px;
}

.skills-preview {
  background: var(--white);
  padding: 48px 150px 128px;
}
.skills-preview__title {
  font-weight: 700;
  font-size: 32px;
  color: var(--color-font);
  margin-bottom: 24px;
}
.skills-preview__body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.skills-preview__award {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.skills-preview__award-icon { width: 16px; height: 21px; flex-shrink: 0; margin-top: 2px; }
.skills-preview__award-text { font-weight: 500; font-size: 20px; color: var(--color-gray); }
.skills-preview__tools {
  display: flex;
  gap: 32px;
}
.skills-preview__tools-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.skills-preview__tool {
  display: flex;
  align-items: center;
  gap: 8px;
}
.skills-preview__tool-icon { width: 24px; height: 24px; flex-shrink: 0; }
.skills-preview__tool-icon img { width: 100%; height: 100%; display: block; }
.skills-preview__tool-name { font-weight: 700; font-size: 17px; color: var(--color-font); white-space: nowrap; }

.skills-section {
  background: var(--white);
  padding: 64px 150px;
}
.skills-section__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
}
.skills-section__heading { text-align: left; width: 100%; }
.skills-section__heading-title { font-weight: 700; font-size: 40px; color: var(--color-navy-text); }
.skills-section__heading-sub { font-weight: 400; font-size: 14px; color: var(--color-gray); margin-top: 4px; }
.skills-groups {
  display: flex;
  gap: 20px;
  width: 100%;
  align-items: stretch;
}
.skill-group {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
}
.skill-group__title { font-weight: 600; font-size: 16px; color: var(--color-font); text-align: center; }
.skill-bars {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
}
.skill-bars--compact { gap: 10px; }
.skill-bar { display: flex; align-items: center; gap: 16px; width: 100%; }
.skill-bar__icon { width: 32px; height: 32px; flex-shrink: 0; }
.skill-bar__icon img { width: 100%; height: 100%; display: block; }
.skill-bar__content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.skill-bar__label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.skill-bar__name-group { display: flex; align-items: center; min-width: 0; }
.skill-bar__flag { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-size: 24px; flex-shrink: 0; }
.skill-bar__name { font-weight: 600; font-size: 14px; color: var(--color-font); white-space: nowrap; }
.skill-bar__percent { font-family: var(--font-numeral); font-weight: 700; font-size: 15px; color: var(--color-font); white-space: nowrap; }
.skill-bar__track-wrap { position: relative; height: 20px; width: 100%; }
.skill-bar__track { position: absolute; inset: 0; background: var(--color-border); border-radius: 10px; }
.skill-bar__fill { position: absolute; left: 0; top: 0; height: 20px; background: var(--color-navy-text); border-radius: 10px 0 0 10px; }
.skills-preview__cta-row { display: flex; justify-content: flex-end; width: 100%; margin-top: 64px; }

.cake-photos {
  background: var(--white);
  padding: 64px 150px 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.cake-photos__heading { text-align: left; width: 100%; }
.cake-photos__title { font-weight: 700; font-size: 40px; color: var(--color-navy-text); }
.cake-photos__subtitle { font-weight: 400; font-size: 14px; color: var(--color-gray); margin-top: 4px; }
.cake-photos__row { display: flex; gap: 24px; width: 100%; }
.cake-photos__photo { flex: 1; min-width: 0; aspect-ratio: 1 / 1; border-radius: 4px; overflow: hidden; }
.cake-photos__photo img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   News page — full page
   ========================================================================== */
.news-hero {
  background: var(--white);
  padding: 80px 150px 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.news-hero__content {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 100%;
}
.news-hero__heading {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.news-hero__label { font-weight: 600; font-size: 16px; color: var(--color-gray); letter-spacing: 0.02em; }
.news-hero__title { font-weight: 700; font-size: clamp(28px, 4vw, 40px); color: var(--color-navy-text); }
.news-hero__subtitle { font-size: 15px; color: var(--color-gray); max-width: 560px; }
.news-grid { display: flex; gap: 20px; width: 100%; align-items: stretch; }
.news-grid .blog-card { flex: 1; min-width: 0; }
.news-more { display: flex; justify-content: flex-end; width: 100%; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1200px) {
  :root { --side-pad: 64px; }
  .site-header { padding: 20px 32px; }
  .nav-menu { padding: 16px 32px; }
  .hero { padding: 60px 64px 100px; }
  .about,
  .works,
  .news-teaser { padding-left: 64px; padding-right: 64px; }
  .news-hero { padding-left: 64px; padding-right: 64px; }
  .contact { padding: 64px; }
  .site-footer { padding: 40px 32px 60px; }
  .works-intro,
  .works-grid-section { padding-left: 64px; padding-right: 64px; }
  .case-study-hero { padding-left: 32px; padding-right: 32px; }
  .case-study-info { padding-left: 64px; padding-right: 64px; }
  .case-study-info__row { padding-left: 32px; padding-right: 32px; }
  .case-study-preview { padding-left: 64px; padding-right: 64px; }
  .about-intro,
  .skills-preview,
  .skills-section,
  .cake-photos { padding-left: 64px; padding-right: 64px; }
  .contact-form { padding-left: 64px; padding-right: 64px; }
}

@media (max-width: 1024px) {
  .about__content { flex-direction: column; }
  .about__text { width: 100%; }
  .about__media { width: 100%; max-width: 360px; }
  .about__accent--1 { left: auto; right: -16px; top: -16px; }
  .about__accent--2 { left: -16px; top: auto; bottom: -16px; }
  .works__grid { grid-template-columns: 1fr; max-width: 550px; }
  .work-grid-row { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .news-teaser__grid { grid-template-columns: 1fr; }
  .news-grid { flex-direction: column; }
  .contact { justify-content: center; }
  .contact__divider { display: none; }
  .contact__col--connect,
  .contact__col--info,
  .contact__cta { width: 100%; max-width: 420px; }
  .about-intro__content { flex-direction: column; }
  .skills-groups { flex-direction: column; }
  .skills-preview__body { flex-direction: column; gap: 32px; }
  .cake-photos__row { flex-wrap: wrap; }
  .cake-photos__photo { flex: 1 1 calc(50% - 12px); }
}

@media (max-width: 768px) {
  .site-header { padding: 16px 20px; }
  .site-header__inner { grid-template-columns: auto 1fr; }
  .site-header__eyebrow { display: none; }
  .brand-logo-group__name { font-size: 24px; }

  .nav-menu { padding: 12px 20px; justify-content: flex-start; }
  .nav-menu__toggle { display: flex; }
  .nav-menu__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    flex-direction: column;
    gap: 0;
    padding: 8px 20px 16px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.08);
    z-index: 20;
  }
  .nav-menu__links.is-open { display: flex; }
  .nav-menu__links li { width: 100%; }
  .nav-menu__links a { display: block; padding: 10px 0; }

  .hero { padding: 48px 24px 72px; min-height: 480px; }
  .hero__title-mask { width: clamp(300px, 92vw, 560px); }
  .hero__tagline { white-space: normal; max-width: 420px; }
  .hero__star-cluster--right { width: 122px; top: 24%; left: 84%; right: auto; }
  .hero__star-cluster--left { width: 106px; top: 64%; left: 20%; }

  .about,
  .works,
  .news-teaser { padding-left: 24px; padding-right: 24px; padding-top: 48px; padding-bottom: 64px; }
  .news-hero { padding: 16px 20px 64px; }
  .works-intro { padding: 24px 24px 32px; gap: 32px; }
  .works-intro__title { font-size: 32px; }
  .works-grid-section { padding: 0 24px 64px; gap: 32px; }
  .work-grid-row { gap: 24px; }

  .about-intro { padding: 16px 20px 32px; }
  .skills-preview,
  .skills-section,
  .cake-photos { padding-left: 20px; padding-right: 20px; }
  .skills-section__heading-title,
  .cake-photos__title { font-size: 32px; }
  .cake-photos__row { flex-direction: column; }
  .cake-photos__photo { width: 100%; }
  .skills-preview__cta-row { justify-content: center; }

  .case-study-hero { padding: 16px 20px 32px; gap: 20px; }
  .case-study-head__title { font-size: 28px; white-space: normal; }
  .case-study-head__row { align-items: flex-start; }
  .case-study-info { padding: 40px 20px 64px; }
  .case-study-info__row { flex-direction: column; gap: 8px; padding: 20px; }
  .case-study-info__label { width: auto; }
  .case-study-preview { padding: 40px 20px 64px; gap: 24px; }
  .case-study-preview__row { gap: 24px; width: 100%; justify-content: flex-start; }
  .about__content { gap: 32px; }
  .about__media { max-width: 280px; }
  .about__photo { width: 100%; height: auto; aspect-ratio: 360/482; }
  .about__accent { width: 140px; height: 60px; }

  .works__grid { gap: 24px; }

  .contact { padding: 48px 24px; gap: 32px; }

  .contact-form { padding: 48px 20px 64px; }
  .contact-form__card { padding: 24px; }

  .site-footer { padding: 32px 20px 40px; }
  .site-footer__card { padding: 24px; }
  .site-footer__top { flex-direction: column; align-items: flex-start; }
  .site-footer__links { gap: 16px 24px; }
}