/*
Theme Name: Naru-Design
Description: 農業に特化したNaru-Designポートフォリオテーマ
Version: 0.1.5
Text Domain: naru-design
*/

/* 2. CSS Variables */
:root {
  --color-primary: #163f2b;
  --color-primary-dark: #1f5035;
  --color-secondary: #62a05c;
  --color-accent: #9a6b1d;
  --color-background: #fffdf8;
  --color-text: #25241f;
  --color-white: #ffffff;
  --color-blue: #2362a5;
  --color-line: rgba(32, 77, 49, 0.25);
  --font-serif: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --font-sans: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --content-width: 1240px;
  --header-height: 76px;
  --radius-small: 12px;
  --radius-medium: 22px;
  --radius-pill: 999px;
  --shadow-card: 0 14px 34px rgba(31, 65, 43, 0.12);
}

/* 3. Reset / Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--color-text);
  background: var(--color-background);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
body.is-menu-open { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-serif); }
ul { margin: 0; padding: 0; list-style: none; }

/* 4. Layout */
#main-content, .site-footer { width: 100%; max-width: none; margin-inline: 0; background: var(--color-background); }
.site-container { width: min(calc(100% - 48px), var(--content-width)); margin-inline: auto; }
.section { position: relative; padding: 90px 0 104px; background-color: var(--color-background); background-repeat: no-repeat; background-position: center; background-size: cover; scroll-margin-top: 100px; }
.section-heading { margin-bottom: 42px; }
.section-heading__en { margin-bottom: 8px; color: var(--color-accent); font-family: Georgia, serif; font-size: 14px; font-weight: 600; letter-spacing: .42em; }
.section-heading h2 { margin-bottom: 14px; color: var(--color-primary); font-size: clamp(38px, 3.3vw, 48px); line-height: 1.42; letter-spacing: .05em; }
.section-heading h2 span { color: var(--color-secondary); }
.section-heading > p:not(.section-heading__en) { margin-bottom: 0; font-family: var(--font-serif); font-size: 17px; font-weight: 600; line-height: 1.8; }
.button { display: inline-flex; min-height: 58px; align-items: center; justify-content: center; gap: 14px; border: 0; border-radius: var(--radius-pill); color: var(--color-white); background: linear-gradient(170deg, #76ad5e, #32814f); box-shadow: 0 12px 18px rgba(41, 107, 63, .25); font-weight: 700; letter-spacing: .08em; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; cursor: pointer; }
.button:hover { transform: translateY(-2px); filter: saturate(1.08); box-shadow: 0 15px 24px rgba(41, 107, 63, .3); }

/* 5. Header */
.site-header { position: absolute; z-index: 100; top: 20px; left: 50%; width: min(calc(100% - 80px), 1360px); transform: translateX(-50%); }
.site-header__inner { display: flex; min-height: var(--header-height); align-items: center; gap: 34px; padding: 10px 18px 10px 28px; border-radius: 38px; background: rgba(255, 255, 255, .94); box-shadow: var(--shadow-card); }
.site-brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 10px; color: var(--color-primary); }
.site-brand__mark { width: 42px; height: 42px; object-fit: contain; }
.site-brand__name { font-size: 25px; font-weight: 500; letter-spacing: .02em; white-space: nowrap; }
.site-nav { display: flex; min-width: 0; flex: 1; align-items: center; justify-content: flex-end; gap: 28px; }
.site-nav__list { display: flex; align-items: center; gap: clamp(24px, 3vw, 51px); }
.site-nav__list a { position: relative; color: var(--color-primary); font-size: 20px; line-height: 1.4; white-space: nowrap; }
.site-nav__list a::after { position: absolute; right: 50%; bottom: -5px; left: 50%; height: 1px; content: ""; background: var(--color-secondary); transition: right .2s, left .2s; }
.site-nav__list a:hover::after { right: 0; left: 0; }
.button--header { min-height: 52px; padding: 10px 22px; font-size: 15px; white-space: nowrap; }
.menu-toggle { display: none; width: 44px; height: 44px; padding: 8px; border: 0; background: transparent; }
.menu-toggle span { display: block; width: 28px; height: 2px; margin: 6px 0; background: var(--color-primary); transition: transform .2s, opacity .2s; }

/* 6. Hero */
.hero { position: relative; display: grid; min-height: 1080px; grid-template-columns: minmax(520px, 46.5%) 1fr; overflow: hidden; padding-top: 120px; background: #fefdf9 url("assets/images/hero-background.png") center/cover no-repeat; scroll-margin-top: 0; }
.hero::after { position: absolute; z-index: 0; right: -6%; bottom: -110px; width: 65%; height: 34%; content: ""; border-radius: 52% 48% 0 0; background: rgba(202, 232, 248, .28); transform: rotate(-3deg); }
.hero__content { position: relative; z-index: 3; align-self: center; width: min(92%, 622px); margin-left: max(48px, calc((100vw - 1440px) / 2 + 48px)); padding: 55px 55px 52px 29px; background: rgba(255, 255, 255, .91); }
.hero h1 { width: 627px; max-width: 100%; margin-bottom: 0; color: var(--color-primary); font-family: var(--font-sans); font-size: clamp(44px, 3.55vw, 51.2px); font-weight: 700; line-height: 1.42; letter-spacing: .12em; }
.hero__lead { margin: 24px 0 28px; padding-top: 24px; border-top: 2px dashed rgba(54, 123, 72, .45); font-family: var(--font-sans); font-size: 22px; font-weight: 700; line-height: 1.4; letter-spacing: .06em; }
.button--hero { width: 416px; min-height: 99px; padding-inline: 24px; font-size: 24px; }
.hero__visual { position: absolute; z-index: 2; top: 120px; right: max(-35px, calc((100vw - 1440px) / 2 - 35px)); width: min(56%, 805px); height: 784px; overflow: visible; }
.hero__visual img { width: 100%; max-width: 100%; height: auto; margin-top: 13%; object-fit: contain; object-position: center; }

/* 6.1 Subtle motion */
.site-header__inner { animation: header-enter .65s cubic-bezier(.22, 1, .36, 1) both; }
.hero__content { animation: hero-content-enter .8s .12s cubic-bezier(.22, 1, .36, 1) both; }
.hero__visual img { transform-origin: 60% 50%; animation: hero-visual-enter .95s .18s cubic-bezier(.22, 1, .36, 1) both; }

@keyframes header-enter {
  from { opacity: 0; transform: translateY(-14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hero-content-enter {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hero-visual-enter {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.reveal-enabled .reveal-item {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .7s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms),
    transform .7s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms);
}
.reveal-enabled .reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.work-card__image img { transition: transform .55s cubic-bezier(.22, 1, .36, 1); }
.work-card:hover .work-card__image img { transform: scale(1.025); }
.skill-card,
.price-card {
  transition: transform .25s ease, box-shadow .25s ease;
}
.skill-card:hover,
.price-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(31, 65, 43, .13);
}
.reveal-enabled .work-card.reveal-item.is-visible:hover,
.reveal-enabled .skill-card.reveal-item.is-visible:hover,
.reveal-enabled .price-card.reveal-item.is-visible:hover {
  transform: translateY(-4px);
}

/* 7. About */
.about { background-image: linear-gradient(rgba(255,254,249,.78), rgba(255,254,249,.78)), url("assets/images/about-background.png"); }
.about__grid { display: grid; grid-template-columns: minmax(360px, 499px) 1fr; gap: 66px; align-items: start; }
.about__portrait img { width: 100%; aspect-ratio: 499 / 703; border-radius: var(--radius-small); box-shadow: var(--shadow-card); object-fit: cover; object-position: center; }
.about__portrait figcaption { padding-top: 10px; color: var(--color-accent); font-family: var(--font-serif); font-size: 14px; text-align: center; letter-spacing: .14em; }
.about__body h3 { margin-bottom: 20px; padding-left: 28px; border-left: 4px solid var(--color-secondary); font-size: 24px; line-height: 1.7; }
.about__body > p { font-family: var(--font-serif); line-height: 1.9; }
.about__message { margin: 26px 0; padding: 20px 25px; border-radius: 16px; color: var(--color-primary-dark); background: rgba(231,242,222,.82); font-family: var(--font-serif); font-size: 19px; font-weight: 700; line-height: 1.8; }
.career-list { margin-top: 28px; }
.career-list > div { display: grid; grid-template-columns: 120px 1fr; gap: 14px; padding: 7px 0; border-bottom: 1px dashed rgba(154,107,29,.42); font-family: var(--font-serif); }
.career-list dt { color: var(--color-accent); font-weight: 700; }
.career-list dd { margin: 0; }

/* 8. Works */
.works { background-image: linear-gradient(rgba(255,253,248,.82), rgba(255,253,248,.82)), url("assets/images/works-background.png"); }
.works__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.work-card { overflow: hidden; border-radius: var(--radius-small); background: rgba(255,255,255,.92); box-shadow: 0 8px 24px rgba(31,65,43,.09); transition: transform .2s, box-shadow .2s; }
.work-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.work-card__image { position: relative; height: 225px; overflow: hidden; }
.work-card__image img { width: 100%; height: 100%; object-fit: cover; }
.work-card__image span { position: absolute; top: 16px; left: 16px; padding: 5px 14px; border-radius: 6px; color: #39764a; background: rgba(255,255,255,.9); font-size: 14px; font-weight: 700; }
.work-card__body { padding: 20px 24px 22px; }
.work-card__type { margin-bottom: 4px; color: var(--color-accent); font-family: var(--font-serif); font-weight: 700; }
.work-card h3 { margin-bottom: 12px; font-size: 22px; line-height: 1.45; }
.work-card h3 small { display: block; font: inherit; }
.work-card__body > p:not(.work-card__type) { min-height: 58px; margin-bottom: 12px; font-family: var(--font-serif); line-height: 1.65; }
.tag-list { display: flex; flex-wrap: wrap; gap: 7px; }
.tag-list li { padding: 4px 12px; border-radius: var(--radius-pill); color: var(--color-primary-dark); background: #edf4e8; font-size: 14px; font-weight: 600; }

/* 9. Skills */
.skills { background-image: linear-gradient(rgba(255,253,248,.75), rgba(255,253,248,.75)), url("assets/images/skills-background.png"); }
.skills__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.skill-card { padding: 25px 21px 28px; border: 1px solid var(--color-line); border-radius: var(--radius-small); background: rgba(255,255,255,.84); box-shadow: 0 8px 24px rgba(31,65,43,.09); }
.skill-card img { width: 118px; height: 118px; margin: 0 auto 16px; object-fit: contain; }
.skill-card h3 { margin-bottom: 15px; padding-bottom: 14px; border-bottom: 1px dashed rgba(58,119,75,.42); color: var(--color-primary); font-size: 20px; line-height: 1.8; text-align: center; }
.check-list li { position: relative; padding: 5px 0 5px 23px; line-height: 1.55; }
.check-list li::before { position: absolute; top: 5px; left: 0; content: "✓"; color: var(--color-secondary); font-weight: 900; }
.tools { margin-top: 38px; text-align: center; }
.tools h3 { display: flex; align-items: center; gap: 20px; justify-content: center; color: var(--color-primary); font-size: 23px; }
.tools h3::before, .tools h3::after { width: min(28%, 350px); height: 1px; content: ""; background: rgba(32,77,49,.35); }
.tools ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px; }
.tools li { min-width: 145px; padding: 8px 23px; border: 1px solid rgba(32,77,49,.28); border-radius: var(--radius-pill); background: rgba(255,255,255,.82); box-shadow: 0 4px 10px rgba(31,65,43,.07); }

/* 10. Price */
.price { overflow: hidden; background: var(--color-background); }
.price::after { position: absolute; right: -5%; bottom: -95px; left: -5%; height: 230px; content: ""; border-radius: 50% 50% 0 0; background: rgba(202,232,248,.45); }
.price .site-container { position: relative; z-index: 1; }
.price__notice { margin: -8px 15px 44px; padding: 17px 30px; border-radius: var(--radius-pill); color: var(--color-primary-dark); background: rgba(255,255,255,.92); box-shadow: 0 8px 24px rgba(31,65,43,.09); font-weight: 700; text-align: center; }
.price__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; }
.price-card { position: relative; display: flex; min-height: 640px; flex-direction: column; overflow: visible; padding: 0 33px 31px; border: 1px solid rgba(32,77,49,.15); border-radius: 18px; background: rgba(255,255,255,.94); box-shadow: var(--shadow-card); }
.price-card__head { display: flex; height: 170px; flex-direction: column; align-items: center; justify-content: center; margin: 0 -33px 8px; overflow: hidden; border-radius: 18px 18px 0 0; background-position: center; background-size: cover; }
.price-card--banner .price-card__head { background-image: url("assets/images/price-banner.png"); }
.price-card--lp .price-card__head { background-image: url("assets/images/price-lp.png"); }
.price-card--site .price-card__head { background-image: url("assets/images/price-site.png"); }
.price-card__head { background-size: 104% auto; }
.price-card__head p { margin: 0 0 7px; color: inherit; font-size: 13px; letter-spacing: .25em; }
.price-card__head h3 { margin: 0; color: inherit; font-family: var(--font-sans); font-size: 22px; text-align: center; }
.price-card--banner { color: #39764a; }
.price-card--lp { color: var(--color-blue); border-color: rgba(36,98,165,.34); }
.price-card--site { color: var(--color-accent); }
.price-card__amount { display: flex; align-items: baseline; justify-content: center; gap: 4px; margin: 0; white-space: nowrap; }
.price-card__amount strong { font-size: 41px; line-height: 1.2; }
.price-card__amount small { font-size: 13px; font-weight: 700; }
.price-card__amount small:first-child { font-size: 24px; }
.price-card__delivery { margin: 12px 0 14px; font-weight: 700; text-align: center; }
.price-card .check-list { color: var(--color-text); }
.price-card .button--plan { width: 100%; min-height: 56px; margin-top: auto; padding: 8px 12px; box-shadow: none; font-size: 16px; }
.price-card--banner .button--plan { background: #39764a; }
.price-card--lp .button--plan { background: var(--color-blue); }
.price-card--site .button--plan { background: #ad7411; }
.price-card__icon { position: absolute; z-index: 2; top: -38px; left: 50%; display: grid; width: 76px; height: 76px; padding: 8px; place-items: center; overflow: hidden; border-radius: 50%; background: white; box-shadow: 0 8px 24px rgba(31,65,43,.09); transform: translateX(-50%); }
.price-card__icon img { width: 60px; height: 60px; object-fit: contain; }
.price-card__recommended { position: absolute; z-index: 3; top: -53px; left: 50%; padding: 4px 16px; border-radius: var(--radius-pill); color: white; background: #5b9fda; font-size: 12px; font-weight: 700; transform: translateX(-50%); }
.price__note { position: relative; z-index: 2; margin: 24px 0 0; font-size: 13px; }

/* 11. Contact */
.contact { background-image: linear-gradient(rgba(255,254,249,.78), rgba(255,254,249,.78)), url("assets/images/contact-background.png"); }
.contact__grid { display: grid; grid-template-columns: minmax(360px, 527px) 1fr; gap: 70px; align-items: start; }
.contact__lead { font-family: var(--font-serif); font-size: 18px; font-weight: 600; line-height: 1.8; }
.contact address { display: grid; gap: 18px; margin-top: 32px; font-style: normal; }
.contact address p { display: grid; grid-template-columns: 54px 1fr; grid-template-rows: auto auto; column-gap: 18px; margin: 0; align-items: center; }
.contact address p > span:first-child { display: grid; width: 54px; height: 54px; grid-row: 1 / 3; place-items: center; border-radius: 50%; color: #39764a; background: #edf4e8; }
.contact address strong { color: var(--color-accent); font-size: 13px; letter-spacing: .08em; }
.contact address a, .contact address p > span:last-child { font-weight: 700; }
.contact__assurance { margin-top: 32px; padding: 24px 28px; border-radius: var(--radius-medium); background: rgba(245,247,235,.84); box-shadow: 0 8px 24px rgba(31,65,43,.09); }
.contact__assurance h3 { color: var(--color-primary-dark); font-size: 18px; }
.contact-form { display: grid; gap: 18px; padding: 38px 42px; border-radius: 23px; background: rgba(255,255,255,.94); box-shadow: var(--shadow-card); }
.contact-form h3 { margin-bottom: 0; color: var(--color-primary); font-size: 24px; text-align: center; }
.contact-form label { color: var(--color-primary); font-size: 16px; font-weight: 700; }
.contact-form input, .contact-form textarea { display: block; width: 100%; margin-top: 7px; padding: 14px 16px; border: 1px solid rgba(37,36,31,.18); border-radius: 5px; color: var(--color-text); background: white; font-weight: 400; }
.contact-form textarea { min-height: 140px; resize: vertical; }
.required { margin-left: 7px; padding: 2px 7px; border-radius: 4px; color: white; background: #85bd4c; font-size: 12px; }
.button--submit { width: 100%; }
.form-status { margin: 0; color: #8b401f; font-weight: 700; line-height: 1.5; }

/* 12. Footer */
.site-footer { padding: 34px 20px 39px; background: rgba(221,241,252,.72); text-align: center; }
.site-footer__identity { display: flex; justify-content: center; gap: 18px; align-items: center; }
.site-footer__identity span { padding-left: 19px; border-left: 1px solid rgba(37,36,31,.45); }
.site-footer small { display: block; margin-top: 8px; }
.default-content { min-height: 60vh; padding: 140px 0 80px; }

/* 13. Responsive */
@media (max-width: 1200px) {
  .site-header { width: calc(100% - 40px); }
  .site-nav__list { gap: 20px; }
  .site-nav__list a { font-size: 17px; }
  .button--header { padding-inline: 16px; }
  .hero__content { margin-left: 30px; padding: 42px; }
  .hero h1 { font-size: 43px; }
  .hero__lead { font-size: 19px; }
  .about__grid { gap: 42px; }
  .skills__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  :root { --header-height: 72px; }
  .site-header__inner { gap: 16px; padding-left: 20px; }
  .site-brand__mark { width: 38px; height: 38px; }
  .site-brand__name { font-size: 22px; }
  .site-nav__list { gap: 14px; }
  .site-nav__list a { font-size: 15px; }
  .button--header { font-size: 13px; }
  .hero { min-height: 900px; grid-template-columns: 52% 48%; }
  .hero__content { width: calc(100% - 40px); margin-left: 20px; padding: 34px; }
  .hero h1 { font-size: 36px; }
  .hero__lead { font-size: 17px; }
  .hero__visual { width: 52%; }
  .about__grid, .contact__grid { gap: 36px; }
  .works__grid, .price__grid { grid-template-columns: repeat(2, 1fr); }
  .price-card--site { grid-column: 1 / -1; width: calc(50% - 13px); justify-self: center; }
}

@media (max-width: 767px) {
  :root { --header-height: 78px; }
  body { background: var(--color-background); }
  .site-container { width: min(calc(100% - 40px), 520px); }
  .section { padding: 68px 0 72px; scroll-margin-top: 86px; }
  .section-heading { margin-bottom: 28px; text-align: center; }
  .section-heading__en { font-size: 12px; }
  .section-heading h2 { font-size: 29px; line-height: 1.55; }
  .section-heading > p:not(.section-heading__en) { font-size: 16px; line-height: 1.75; }
  .site-header { position: absolute; top: 0; width: 100%; }
  .site-header__inner { min-height: 78px; padding: 12px 20px; border-radius: 0; box-shadow: none; }
  .site-brand { gap: 10px; }
  .site-brand__mark { width: 42px; height: 42px; }
  .site-brand__name { font-size: 24px; }
  .menu-toggle { display: block; margin-left: auto; cursor: pointer; }
  .site-nav { position: absolute; top: 78px; right: 0; left: 0; display: none; max-height: calc(100vh - 78px); overflow-y: auto; padding: 24px 20px 30px; background: rgba(255,253,248,.98); box-shadow: 0 16px 28px rgba(31,65,43,.14); }
  .is-menu-open .site-nav { display: flex; flex-direction: column; }
  .site-nav__list { width: 100%; flex-direction: column; gap: 0; }
  .site-nav__list li { width: 100%; border-bottom: 1px dashed var(--color-line); }
  .site-nav__list a { display: block; padding: 13px 5px; font-size: 18px; }
  .site-nav__list a::after { display: none; }
  .button--header { width: 100%; margin-top: 18px; font-size: 15px; }
  .is-menu-open .menu-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .is-menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
  .is-menu-open .menu-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .hero { display: flex; min-height: 0; flex-direction: column; padding-top: 78px; background-position: 44% center; }
  .hero::after { display: none; }
  .hero__visual { position: relative; top: auto; right: auto; width: min(100%, 520px); height: auto; margin-inline: auto; overflow: visible; order: 1; }
  .hero__visual img { display: block; width: 100%; max-width: 100%; height: auto; margin-top: 0; object-fit: contain; object-position: center; }
  .hero__content { width: calc(100% - 40px); margin: -25px auto 52px; padding: 52px 15px 10px; order: 2; border-radius: 0 0 25px 25px; }
  .hero h1 { font-size: 31px; line-height: 1.54; letter-spacing: .095em; }
  .hero__lead { margin: 22px 0 25px; padding-top: 22px; font-size: 16px; line-height: 1.75; letter-spacing: .05em; }
  .button--hero { width: 100%; min-height: 62px; font-size: 16px; }
  .about__grid, .works__grid, .skills__grid, .price__grid, .contact__grid { grid-template-columns: 1fr; }
  .about__grid { gap: 34px; }
  .about__portrait img { aspect-ratio: 350 / 376; object-position: center 35%; }
  .about__body h3 { padding-left: 20px; font-size: 19px; }
  .about__message { font-size: 17px; }
  .career-list > div { grid-template-columns: 92px 1fr; gap: 10px; }
  .works__grid { gap: 22px; }
  .work-card__body > p:not(.work-card__type) { min-height: 0; }
  .skills__grid { gap: 12px; }
  .skill-card { display: grid; grid-template-columns: 84px 1fr; column-gap: 14px; padding: 20px 16px; }
  .skill-card img { width: 78px; height: 78px; grid-row: 1 / 3; margin: 0; align-self: center; }
  .skill-card h3 { margin: 0 0 8px; padding: 0 0 8px; font-size: 18px; text-align: left; }
  .skill-card .check-list { grid-column: 2; font-size: 14px; }
  .tools h3::before, .tools h3::after { width: 20%; }
  .tools li { min-width: 135px; }
  .price__notice { margin: 0 0 58px; padding: 15px 18px; border-radius: 18px; font-size: 14px; }
  .price__grid { gap: 58px; }
  .price-card, .price-card--site { width: 100%; min-height: 640px; grid-column: auto; }
  .price-card__amount strong { font-size: clamp(36px, 11vw, 44px); }
  .price-card__amount small { font-size: 12px; }
  .contact__grid { gap: 34px; }
  .contact__lead { font-size: 17px; }
  .contact address a { overflow-wrap: anywhere; }
  .contact-form { padding: 28px 20px; }
  .site-footer__identity { flex-direction: column; gap: 4px; }
  .site-footer__identity span { padding-left: 0; border-left: 0; }
}

@media (max-width: 390px) {
  .site-brand__mark { width: 38px; height: 38px; }
  .site-brand__name { font-size: 22px; }
  .hero h1 { font-size: 31px; }
  .career-list > div { grid-template-columns: 80px 1fr; }
  .skill-card { grid-template-columns: 72px 1fr; }
  .skill-card img { width: 66px; height: 66px; }
}

/* 14. Accessibility / Reduced Motion */
:focus-visible { outline: 3px solid #f2a93b; outline-offset: 4px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.screen-reader-text:focus { z-index: 1000; top: 8px; left: 8px; width: auto; height: auto; margin: 0; padding: 12px 18px; clip: auto; color: var(--color-primary); background: white; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .reveal-enabled .reveal-item { opacity: 1; transform: none; }
}