/* ==========================================================
   Website Designer 共通リセット v1（2026-08-10）
   使い方: 新案件の style.css の【先頭】にこの内容を貼り込む。
   <link>で別ファイル読み込みにはしない（納品物は1CSSにまとめる）。
   変更したくなったら、このファイルを直してバージョンを上げること。
   案件側だけ直して満足しない（次の案件に伝わらない）。
   ========================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%; /* iPhone横向きで文字が勝手に拡大されるのを防ぐ */
}

body {
  margin: 0;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0; /* 余白はブラウザ任せにせず、必ず自分のクラスで指定する */
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none; /* 点付きリストが必要な箇所だけ個別に戻す */
}

img, picture, video {
  display: block;
  max-width: 100%;
  height: auto; /* width/height属性を書いても比率が崩れないように */
}

a {
  color: inherit;
  text-decoration: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

th {
  text-align: left;
  font-weight: inherit;
}

/* フォーム部品はフォント・色を継承しない初期値なので必ず揃える */
input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

textarea {
  resize: vertical;
}

/* アニメーション酔いしやすい人への配慮（アクセシビリティ） */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========== リセットここまで。以下に案件のスタイルを書く ========== */

:root {
  --paper: #f8f7f5;
  --ink: #4a4a4a;
  --rose: #e59b99;
  --rose-deep: #d98c8d;
  --rose-ink: #8b4549;
  --rose-wash: #f2e8e4;
  --gold: #cfa15b;
  --gold-light: #e6c48a;
  --line: #ded5cf;
  --header-height: 88px;
  --serif: "FOT-TsukuAOldMin Pr6N", "游明朝体", "游明朝", YuMincho, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "Zen Old Mincho", serif;
  --sans: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --latin: "Outfit", sans-serif;
  --hand: "Zen Kurenaido", sans-serif;
}
html { scroll-padding-top: 110px; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.95; font-weight: 400; font-synthesis: none; }
h1,h2,h3,h4 { font-family: var(--serif); font-weight: 400; font-feature-settings: "palt"; }
h2 { font-size: clamp(30px,3.1vw,44px); line-height: 1.65; letter-spacing: .055em; }
h3 { font-size: 23px; line-height: 1.65; letter-spacing: .035em; }
strong { font-weight: 500; }
a { text-underline-offset: 6px; }
a,button { -webkit-tap-highlight-color: transparent; }
a:focus-visible,button:focus-visible { outline: 2px solid var(--rose-ink); outline-offset: 6px; }
svg { width: 23px; height: 23px; flex-shrink: 0; }
.wrap { width: min(1260px,88%); margin-inline: auto; }
.section { padding-block: 104px; }
.nb { display: inline-block; white-space: nowrap; }
.eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 17px; font-family: var(--latin); font-size: 12px; line-height: 1.5; letter-spacing: .15em; margin-bottom: 23px; }
.eyebrow span { font-family: var(--sans); font-size: 12px; letter-spacing: .04em; border-left: 1px solid #b99789; padding-left: 17px; }
.caption,.case-note { margin-top: 25px; font-size: 13px; color: #6c625f; }
.text-link { display: inline-flex; align-items: center; gap: 34px; min-height: 46px; font-size: 15px; border-bottom: 1px solid #b79385; }
.text-link svg,.button svg,.nav-contact svg { transition: transform .2s ease; }
.text-link:hover svg,.button:hover svg,.nav-contact:hover svg { transform: translateX(4px); }
.button { min-height: 64px; display: inline-flex; justify-content: space-between; align-items: center; gap: 40px; padding: 15px 25px; font-size: 18px; background: var(--rose-wash); border: 1px solid transparent; border-radius: 3px; }
.button:hover { border-color: var(--rose-ink); }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 45px; margin-bottom: 47px; }
.section-heading > p { max-width: 470px; padding-bottom: 8px; line-height: 2; }
.essay { max-width: 650px; }
.essay p { text-wrap: pretty; }
.essay p + p { margin-top: 24px; }
.essay .lead { font-size: 22px; margin-bottom: 34px; line-height: 1.9; }
.essay-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: 10%; }
.skip-link { position: fixed; top: -100px; left: 12px; background: #fff; color: var(--ink); padding: 12px 20px; z-index: 100; }
.skip-link:focus { top: 8px; }

/* A quiet header leaves the visual as the first focal point. */
.header { position: sticky; top: 0; z-index: 30; background: rgba(248,247,245,.98); border-bottom: 1px solid #e7e0d9; }
.header-inner { min-height: var(--header-height); display: flex; justify-content: space-between; align-items: center; padding: 12px 4%; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 22px; flex-shrink: 0; }
.brand img { width: 110px; height: 59px; object-fit: contain; }
.brand span { font-size: 12px; letter-spacing: .045em; }
.main-nav { display: flex; align-items: center; gap: clamp(16px,2.2vw,33px); font-size: 13px; }
.main-nav > a { min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
.main-nav > a[aria-current] { color: var(--rose-ink); }
.nav-contact { padding-inline: 20px; border: 1px solid #d7b7ad; border-radius: 3px; gap: 23px; }
.main-nav .mobile-home,.menu-toggle { display: none; }

/* The selected 16:9 visual stays full width, at its original proportions. */
.hero-art { position: relative; }
.hero-art picture { width: 100%; }
.hero-art img { display: block; width: 100%; height: auto; aspect-ratio: 1672 / 941; object-fit: cover; }
.hero-copy { position: absolute; top: 9%; left: 8%; color: #3f3733; text-shadow: 0 1px 12px #f7efe0; }
.hero-eyebrow { font-size: 12px; letter-spacing: .14em; margin-bottom: 21px; }
.hero h1 { font-size: clamp(38px,4.3vw,66px); line-height: 1.55; letter-spacing: .09em; }
.hero h1 > span { display: block; white-space: nowrap; }
.hero-bottom { padding-block: 32px; display: flex; gap: 35px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.hero-bottom > p { display: flex; flex-wrap: wrap; column-gap: 1em; font-size: 19px; letter-spacing: .02em; }
.hero-bottom .text-link { font-size: 14px; flex-shrink: 0; }
.hero-bottom > a:not(.text-link) { font-size: 14px; }

/* The team keeps the generous portrait sizes that Yuka selected. */
.team-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 36px; }
.team-member { min-width: 0; }
.team-member figure { overflow: hidden; background: #eee5e0; }
.team-member img { width: 100%; aspect-ratio: 1.06; object-fit: cover; object-position: center 27%; }
.team-copy { padding-top: 23px; }
.team-role { font-size: 13px; color: var(--rose-ink); margin-bottom: 8px; }
.team-copy h3 { font-size: 24px; margin-bottom: 15px; }
.team-copy > p:not(.team-role) { font-size: 16px; }
.team-copy .text-link { margin-top: 20px; font-size: 13px; min-height: 42px; }

/* Real work explained with clearly labelled illustrative examples. */
.case-section { background: var(--rose-wash); }
.case-tabs { display: grid; grid-template-columns: repeat(3,1fr); border-bottom: 1px solid #cbb4a9; }
.case-tab { min-height: 68px; text-align: center; font-size: 18px; border-bottom: 2px solid transparent; color: #665c58; }
.case-tab > span { font-family: var(--latin); font-size: 13px; margin-right: 16px; }
.case-tab[aria-selected="true"] { border-bottom-color: var(--rose-ink); color: var(--rose-ink); }
.case-tab:hover { background: rgba(255,255,255,.4); }
.case-panel { display: grid; grid-template-columns: .92fr 1.15fr; gap: 7%; padding-top: 44px; align-items: center; min-height: 560px; }
.case-panel[hidden] { display: none; }
.case-story { padding-block: 20px; }
.case-number { display: block; font-family: var(--latin); font-size: 45px; line-height: 1; color: #a77065; margin-bottom: 25px; }
.case-story h3 { font-size: 29px; line-height: 1.75; margin-bottom: 22px; }
.case-story > p { margin-bottom: 24px; }
.case-stage { min-width: 0; background: #e6d4cb; padding: 30px; border-radius: 6px; }
.sample-window { background: #fffdfb; border: 1px solid #d2b9a9; border-radius: 5px; padding: 23px; color: var(--ink); }
.sample-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 15px; border-bottom: 1px solid #dfd4c9; font-size: 16px; }
.sample-top small { display: inline-block; font-size: 12px; color: #73655d; background: #f2ebe5; padding: 2px 8px; border-radius: 2px; }
.sample-lead { font-size: 19px; font-weight: 500; margin: 25px 0 14px; }
.priority-row { display: flex; gap: 17px; padding: 17px 0; border-bottom: 1px solid #e6ddd4; align-items: center; }
.priority-row > span { width: 32px; height: 32px; background: #f1e1d9; border-radius: 50%; text-align: center; font-family: var(--latin); font-size: 13px; line-height: 32px; flex-shrink: 0; }
.priority-row strong { display: block; font-size: 17px; }
.priority-row small { display: block; font-size: 13px; color: #71645b; }
.sample-foot { margin-top: 20px; color: #78675e; font-size: 12px; }
.post-item { padding-top: 20px; }
.post-item strong { font-family: var(--latin); font-size: 19px; }
.post-item p { font-size: 15px; margin-top: 7px; line-height: 1.9; }
.slide-sample { background: #f0e0d7; padding: 25px; margin-top: 20px; min-height: 204px; }
.slide-sample small { font-size: 13px; }
.slide-sample strong { display: block; font-size: 27px; line-height: 1.6; margin-block: 15px 20px; }
.slide-sample > span { font-size: 10px; letter-spacing: .15em; }
.outline-row { margin-top: 20px; font-size: 14px; }
.outline-row span { display: block; padding-block: 5px; }
.sample-notes,.before-list { padding-top: 18px; }
.sample-notes p,.before-list p { margin-top: 15px; }
.before-item { padding: 16px 0; border-bottom: 1px solid var(--line); }
.before-item strong { font-size: 14px; color: var(--rose-ink); }
.before-item p,.before-item li { font-size: 16px; }
.work-dialog { width: min(1120px,calc(100% - 48px)); max-height: calc(100dvh - 60px); margin: auto; border: 0; padding: 32px; background: var(--paper); color: var(--ink); border-radius: 5px; overflow: auto; overscroll-behavior: contain; }
.work-dialog::backdrop { background: rgba(43,31,29,.54); }
.dialog-head,.dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); padding-bottom: 22px; margin-bottom: 20px; }
.dialog-head h2,.dialog-header h2 { font-size: 24px; }
.dialog-close { display: inline-flex; gap: 10px; align-items: center; flex-shrink: 0; padding: 8px 12px; min-height: 44px; background: #ece0da; border-radius: 2px; font-size: 14px; }
.dialog-close span { font-size: 21px; }
.dialog-note { font-size: 13px; margin-bottom: 25px; }
.before-after,.comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.before-after > div,.comparison-grid > div { min-width: 0; }
.before-after h3,.comparison-grid h3 { font-size: 21px; margin-bottom: 18px; }
.before-after .eyebrow,.comparison-grid .eyebrow { margin-bottom: 8px; color: var(--rose-ink); }
.dialog-summary { margin-top: 25px; }
.dialog-footer,.dialog-bottom { margin-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.dialog-footer p,.dialog-bottom p { font-size: 16px; }
.dialog-top { position: sticky; top: -32px; display: flex; justify-content: space-between; align-items: center; gap: 20px; background: var(--paper); padding: 15px 0 20px; border-bottom: 1px solid var(--line); z-index: 2; }
.dialog-top h2 { font-size: 25px; }
.case-dialog-body { padding-top: 22px; }
.demo-disclosure { font-size: 13px; color: #6c625f; margin-bottom: 24px; }
.before-after-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.before-after-grid > section { min-width: 0; }
.before-after-grid h3 { font-size: 21px; margin-bottom: 16px; }
.stage-label { font-family: var(--latin); font-size: 12px; color: var(--rose-ink); margin-bottom: 8px; letter-spacing: .13em; }
.source-item { padding: 17px 0; border-bottom: 1px solid var(--line); }
.source-item strong { display: block; font-size: 13px; color: var(--rose-ink); margin-bottom: 7px; }
.source-item p,.source-item li { font-size: 16px; }
.note-sheet { padding: 22px 0 4px; }
.note-sheet p { margin-bottom: 15px; font-size: 16px; }
.case-benefit { margin-top: 28px; font-size: 17px; }
.case-dialog-body > .text-link { margin-top: 20px; }
.scroll-locked { overflow: hidden; }

/* A second visual leads naturally to the independent philosophy page. */
.purpose-teaser { display: grid; grid-template-columns: 1.1fr 1fr; background: #ede3da; }
.purpose-teaser > figure { min-width: 0; }
.purpose-teaser img { width: 100%; height: 100%; min-height: 660px; object-fit: cover; object-position: 55% center; }
.purpose-teaser-copy { padding: 76px 12% 76px 13%; align-self: center; }
.purpose-teaser h2 { font-size: clamp(30px,2.9vw,42px); margin-bottom: 25px; }
.purpose-teaser-copy > p:not(.eyebrow) { font-size: 16px; }
.purpose-teaser .text-link { margin-top: 26px; }
.service-list { border-top: 1px solid var(--line); }
.service-row { display: grid; grid-template-columns: 52px .9fr 1fr; gap: 28px; padding-block: 35px; border-bottom: 1px solid var(--line); align-items: start; }
.service-number { font-family: var(--latin); font-size: 25px; color: #9c7063; }
.service-row h3 { font-size: 24px; }
.service-tags { font-size: 12px; color: #76635c; margin-top: 10px; }
.service-row > p { font-size: 16px; }
.works { padding: 0 0 100px; }
.works-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 30px; }
.works-heading .eyebrow { margin-bottom: 12px; }
.works h2 { font-size: 28px; }
.works-heading > p { font-size: 14px; }
.works-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 45px; border-block: 1px solid var(--line); padding-block: 27px; }
.work-item { display: flex; gap: 26px; align-items: center; min-width: 0; }
.work-item img { width: 156px; height: 107px; object-fit: cover; object-position: top; border: 1px solid #e4dfd8; flex-shrink: 0; }
.work-item div > span { font-size: 12px; color: #756a63; }
.work-item h3 { font-size: 19px; margin-top: 5px; }
.work-item p { font-size: 12px; margin-top: 9px; }
.work-item:hover h3 { color: var(--rose-ink); }

/* Founder and company content stays readable and secondary to the work. */
.profile { background: #efe9e2; }
.profile-grid { display: grid; grid-template-columns: .85fr 1.2fr; gap: 11%; align-items: start; }
.portrait figure { max-width: 418px; }
.portrait img { width: 100%; max-width: 418px; height: auto; aspect-ratio: 1; object-fit: cover; }
.portrait figcaption { font-family: var(--latin); font-size: 11px; letter-spacing: .11em; padding-top: 15px; margin-bottom: 22px; }
.portrait > p { font-size: 13px; margin-bottom: 4px; }
.portrait h3 { font-size: 26px; margin-bottom: 7px; }
.portrait > span { font-size: 14px; }
.profile-grid h2 { margin-bottom: 26px; }
.profile-grid .text-link { margin-top: 25px; }
.experience { display: flex; gap: 36px; margin-top: 38px; padding-top: 26px; border-top: 1px solid #d4c6b9; }
.experience p { display: flex; align-items: center; gap: 14px; flex: 1; }
.experience strong { font-family: var(--latin); font-size: 70px; letter-spacing: -.035em; line-height: 1; font-weight: 400; }
.experience span { font-size: 13px; line-height: 1.7; }
.social { margin-top: 62px; }
.social h3 { font-size: 20px; margin-bottom: 24px; }
.social-links { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 27px; }
.social-links > a { position: relative; border-top: 1px solid #bc9a86; padding-top: 18px; padding-right: 28px; }
.social-links strong { font-family: var(--latin); font-size: 22px; display: block; margin-bottom: 7px; }
.social-links .social-description { font-size: 14px; line-height: 1.7; display: block; }
.social-links > a > svg { position: absolute; right: 0; top: 30px; width: 18px; transform: rotate(-40deg); }
.social-links .social-icon { display: block; width: 40px; height: 40px; object-fit: contain; margin-bottom: 20px; }
.social-links > a:hover strong { text-decoration: underline; text-underline-offset: 6px; }
.company-grid { display: grid; grid-template-columns: .9fr 1.2fr; gap: 9%; }
.company h2 { font-size: 35px; }
.company-origin { font-size: 23px; margin: 28px 0 14px; color: var(--rose-ink); }
.company-grid > div > p:last-child { font-size: 16px; }
.company-data > div { display: grid; grid-template-columns: 118px 1fr; gap: 25px; padding: 21px 0; border-top: 1px solid var(--line); font-size: 15px; }
.company-data > div:last-child { border-bottom: 1px solid var(--line); }
.company-data dt { color: #78665f; font-size: 13px; }
.contact { padding-block: 85px; background: #ecd0c9; }
.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10%; align-items: center; }
.contact-copy > p { margin-bottom: 24px; }
.button-white { background: #fffdfa; width: min(380px,100%); }
.footer { padding: 56px 0 32px; }
.footer-main { display: flex; justify-content: space-between; gap: 70px; }
.footer .brand { gap: 25px; }
.footer .brand img { width: 112px; height: 64px; }
.footer address { margin-top: 24px; font-size: 13px; font-style: normal; line-height: 2.1; }
.footer address a { display: inline-block; margin-top: 9px; }
.footer-main nav { display: grid; grid-template-columns: 1fr 1fr; gap: 17px 42px; font-size: 14px; align-content: center; }
.footer-bottom { border-top: 1px solid var(--line); margin-top: 45px; padding-top: 25px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 12px; }
.footer-bottom small { font-size: 11px; }

/* Philosophy shares the visual language, with more room for the story. */
.purpose-hero .hero-copy { top: 9%; }
.purpose-hero h1 { font-size: clamp(34px,3.75vw,58px); line-height: 1.65; letter-spacing: .07em; }
.purpose-hero .hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(248,243,231,.6),rgba(248,243,231,.05) 51%,transparent 68%); pointer-events: none; }
.purpose-hero .hero-copy { z-index: 1; text-shadow: 0 1px 16px #f8efde; }
.values { background: #f0e4de; }
.values-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 38px 64px; }
.value { border-top: 1px solid #d2b6a5; padding-top: 27px; display: grid; grid-template-columns: 42px 1fr; gap: 22px; }
.value > span { font-size: 26px; font-family: var(--latin); color: #9e7063; }
.value h3 { margin-bottom: 15px; }
.value p { font-size: 16px; }
.story .profile-grid { align-items: start; }
.vision { display: grid; grid-template-columns: 1fr 1fr; background: #ebe1d6; }
.vision > figure { min-width: 0; }
.vision img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; min-height: 700px; }
.vision-copy { padding: 70px 12%; }
.vision h2 { font-size: 34px; margin-bottom: 29px; }
.vision .essay { font-size: 16px; }
.vision .text-link { margin-top: 26px; }

/* Everything remains reachable without JavaScript. */
html:not(.js) .case-tabs,html:not(.js) [data-preview] { display: none; }
html:not(.js) .case-panel[hidden] { display: grid; }

@media (min-width:1600px) {
  .hero-art img { max-height: 880px; object-fit: cover; }
}
@media (max-width:1100px) {
  .header .brand span { display: none; }
  .main-nav { gap: 20px; font-size: 12px; }
  .nav-contact { padding-inline: 15px; gap: 15px; }
  .section { padding-block: 80px; }
  .section-heading { gap: 35px; }
  .section-heading > p { max-width: 44%; font-size: 16px; }
  .team-grid { gap: 25px; }
  .team-copy h3 { font-size: 20px; }
  .case-panel { gap: 5%; grid-template-columns: 1fr 1.1fr; min-height: 550px; }
  .case-stage { padding: 20px; }
  .case-story h3 { font-size: 25px; }
  .sample-window { padding: 20px; }
  .sample-lead { font-size: 17px; }
  .sample-top { font-size: 14px; }
  .priority-row { gap: 12px; }
  .priority-row strong { font-size: 16px; }
  .purpose-teaser-copy { padding: 52px 10%; }
  .purpose-teaser img { min-height: 610px; }
  .purpose-teaser h2 { font-size: 31px; }
  .service-row { grid-template-columns: 35px .95fr 1fr; gap: 25px; }
  .service-row h3 { font-size: 21px; }
  .works-grid { gap: 25px; }
  .work-item { gap: 18px; }
  .work-item img { width: 116px; height: 87px; }
  .work-item h3 { font-size: 16px; }
  .profile-grid { gap: 8%; }
  .experience { gap: 20px; }
  .experience strong { font-size: 58px; }
  .experience p { gap: 10px; }
  .experience span { font-size: 11px; }
  .company-data > div { grid-template-columns: 90px 1fr; gap: 18px; }
  .vision-copy { padding: 55px 10%; }
  .vision h2 { font-size: 28px; }
}
@media (max-width:860px) {
  :root { --header-height: 78px; }
  .header-inner { padding-inline: 5%; gap: 16px; }
  .brand img { width: 99px; height: 53px; }
  .header .brand span { display: inline; }
  .js .menu-toggle { position: relative; display: flex; align-items: center; gap: 14px; min-height: 46px; padding: 6px 0 6px 12px; z-index: 42; font-size: 12px; }
  .menu-icon { position: relative; display: block; width: 27px; height: 20px; }
  .menu-icon::before,.menu-icon::after { content: ""; position: absolute; left: 0; width: 27px; height: 1px; background: currentColor; transition: transform .2s ease,top .2s ease; }
  .menu-icon::before { top: 6px; }
  .menu-icon::after { top: 15px; }
  .menu-toggle[aria-expanded="true"] .menu-icon::before { top: 10px; transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-icon::after { top: 10px; transform: rotate(-45deg); }
  .js .main-nav { display: none; position: fixed; top: var(--header-height); left: 0; width: 100%; height: calc(100dvh - var(--header-height)); overflow: auto; overscroll-behavior: contain; background: var(--paper); padding: 20px 7% 40px; border-top: 1px solid var(--line); align-items: stretch; justify-content: flex-start; gap: 0; font-size: 20px; }
  .js .main-nav.is-open { display: flex; flex-direction: column; }
  .main-nav .mobile-home { display: flex; }
  .js .main-nav > a { padding: 17px 5px; min-height: 62px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
  .js .main-nav .nav-contact { margin-top: 23px; padding: 15px 20px; border: 1px solid #d7b7ad; min-height: 58px; justify-content: space-between; }
  html:not(.js) .header-inner { display: block; }
  html:not(.js) .main-nav { display: flex; flex-wrap: wrap; gap: 5px 16px; margin-block: 8px; }
  .hero-bottom { display: block; }
  .hero-bottom .text-link { margin-top: 12px; }
  .hero-bottom > a:not(.text-link) { margin-top: 12px; display: inline-block; }
  .section-heading { display: block; }
  .section-heading > p { max-width: 620px; margin-top: 25px; padding: 0; }
  .team-grid { grid-template-columns: 1fr; gap: 42px; }
  .team-member { width: min(100%,440px); margin-inline: auto; }
  .team-copy > p:not(.team-role) { font-size: 16px; }
  .team-copy h3 { font-size: 24px; }
  .team-copy .text-link { font-size: 14px; gap: 30px; }
  .case-panel { grid-template-columns: 1fr; min-height: 0; padding-top: 28px; gap: 26px; }
  .case-story { max-width: 600px; }
  .case-story h3 { font-size: 28px; }
  .case-number { font-size: 32px; margin-bottom: 18px; }
  .case-stage { padding: 32px; }
  .sample-window { padding: 25px; }
  .sample-lead { font-size: 22px; }
  .priority-row strong { font-size: 18px; }
  .priority-row small { font-size: 14px; }
  .sample-foot { font-size: 13px; }
  .purpose-teaser { grid-template-columns: 1fr; }
  .purpose-teaser img { min-height: 0; height: auto; aspect-ratio: 1.75; }
  .purpose-teaser-copy { padding: 50px 6% 60px; }
  .purpose-teaser h2 { font-size: 36px; }
  .purpose-teaser-copy > p:not(.eyebrow) { max-width: 580px; }
  .service-row { grid-template-columns: 35px 1fr; gap: 10px 22px; }
  .service-row > p { grid-column: 2; }
  .service-row h3 { font-size: 24px; }
  .service-tags { margin-top: 7px; }
  .works-heading { display: block; }
  .works-heading > p { margin-top: 15px; }
  .work-item { display: block; }
  .work-item img { width: 100%; height: auto; aspect-ratio: 1.7; margin-bottom: 15px; }
  .work-item h3 { font-size: 19px; }
  .profile-grid { grid-template-columns: .85fr 1.2fr; gap: 7%; }
  .profile-grid h2 { font-size: 29px; }
  .profile-grid .essay { font-size: 16px; }
  .experience { flex-wrap: wrap; gap: 26px; }
  .experience p { flex: 1 1 100%; }
  .experience strong { font-size: 57px; }
  .experience span { font-size: 13px; }
  .social-links { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px; }
  .social-links strong { font-size: 23px; }
  .company-grid,.contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .company-data > div { grid-template-columns: 118px 1fr; }
  .contact h2 { font-size: 36px; }
  .essay-grid { grid-template-columns: 1fr; gap: 38px; }
  .values-grid { gap: 30px; }
  .value { gap: 17px; grid-template-columns: 35px 1fr; }
  .value h3 { font-size: 20px; }
  .vision { grid-template-columns: 1fr; }
  .vision img { height: auto; min-height: 0; aspect-ratio: 1.65; }
  .vision-copy { padding: 55px 6%; }
  .vision h2 { font-size: 35px; }
}
@media (max-width:600px) {
  :root { --header-height: 76px; }
  html { scroll-padding-top: 98px; }
  body { font-size: 16px; }
  .wrap { width: 88%; }
  .section { padding-block: 65px; }
  h2 { font-size: 30px; line-height: 1.7; letter-spacing: .045em; }
  h3 { font-size: 22px; }
  .eyebrow { font-size: 11px; gap: 12px; margin-bottom: 21px; }
  .eyebrow span { font-size: 11px; padding-left: 12px; }
  .header .brand span { font-size: 10px; }
  .brand { gap: 14px; }
  .brand img { width: 92px; height: 50px; }
  .hero-art { display: flex; flex-direction: column; }
  .hero-copy { position: static; order: -1; padding: 25px 6% 29px; text-shadow: none; background: #efe4da; }
  .hero-eyebrow { margin-bottom: 12px; font-size: 11px; }
  .hero h1 { font-size: 39px; line-height: 1.55; letter-spacing: .07em; }
  .hero-art img { width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; object-position: 72% center; }
  .hero-bottom { padding-block: 26px; }
  .hero-bottom > p { font-size: 16px; display: block; line-height: 1.85; }
  .hero-bottom > p .nb { display: block; }
  .hero-bottom .text-link { margin-top: 18px; font-size: 13px; }
  .section-heading { margin-bottom: 35px; }
  .section-heading > p { margin-top: 22px; font-size: 16px; }
  .section-heading > p br { display: none; }
  .team-grid { display: flex; flex-direction: column; gap: 40px; }
  .team-member { width: 100%; }
  .team-member img { aspect-ratio: 1; object-position: center 27%; }
  .team-copy { padding-top: 20px; }
  .team-role { font-size: 13px; }
  .team-copy h3 { font-size: 24px; margin-bottom: 12px; }
  .team-copy > p:not(.team-role) { font-size: 16px; }
  .team-copy .text-link { font-size: 14px; gap: 30px; margin-top: 16px; }
  .caption,.case-note { font-size: 12px; margin-top: 26px; }
  .case-tabs { margin-inline: -1%; }
  .case-tab { min-height: 64px; font-size: 14px; line-height: 1.5; }
  .case-tab > span { display: block; margin: 0 0 5px; font-size: 11px; }
  .case-panel { padding-top: 22px; gap: 16px; }
  .case-story { padding-top: 10px; }
  .case-story h3 { font-size: 23px; line-height: 1.8; margin-bottom: 19px; }
  .case-story > p { font-size: 16px; margin-bottom: 19px; }
  .case-number { font-size: 31px; }
  .case-stage { padding: 16px; }
  .sample-window { padding: 18px; }
  .sample-top { font-size: 14px; }
  .sample-top small { font-size: 11px; }
  .sample-lead { font-size: 16px; margin-top: 20px; }
  .priority-row { gap: 10px; padding-block: 15px; }
  .priority-row > span { width: 27px; height: 27px; line-height: 27px; font-size: 11px; }
  .priority-row strong { font-size: 15px; }
  .priority-row small { font-size: 12px; }
  .sample-foot { font-size: 11px; line-height: 1.8; margin-top: 16px; }
  .post-item p { font-size: 14px; }
  .slide-sample { padding: 18px; }
  .slide-sample strong { font-size: 22px; }
  .outline-row { font-size: 13px; }
  .purpose-teaser img { aspect-ratio: 1; object-position: 53% center; }
  .purpose-teaser-copy { padding: 42px 6% 56px; }
  .purpose-teaser h2 { font-size: 30px; line-height: 1.7; }
  .purpose-teaser-copy > p:not(.eyebrow) { font-size: 16px; }
  .purpose-teaser-copy > p:not(.eyebrow) br { display: none; }
  .service-row { grid-template-columns: 25px 1fr; gap: 10px 15px; padding-block: 29px; }
  .service-number { font-size: 20px; line-height: 1.8; }
  .service-row h3 { font-size: 21px; letter-spacing: .025em; }
  .service-tags { font-size: 11px; }
  .service-row > p { font-size: 15px; margin-top: 5px; }
  .works { padding-bottom: 62px; }
  .works h2 { font-size: 26px; }
  .works-heading > p { font-size: 13px; }
  .works-grid { display: flex; flex-direction: column; gap: 22px; padding-block: 24px; }
  .work-item { display: flex; gap: 20px; }
  .work-item img { width: 106px; height: 83px; margin: 0; }
  .work-item h3 { font-size: 15px; }
  .work-item div > span { font-size: 11px; }
  .work-item p { font-size: 11px; margin-top: 5px; }
  .profile-grid { grid-template-columns: 1fr; gap: 42px; }
  .portrait figure { max-width: 340px; }
  .portrait img { max-width: 340px; }
  .portrait h3 { font-size: 25px; }
  .profile-grid h2 { font-size: 30px; }
  .experience { flex-wrap: nowrap; gap: 20px; margin-top: 28px; }
  .experience p { display: block; flex: 1 1 0; }
  .experience strong { font-size: 60px; display: block; margin-bottom: 12px; }
  .experience span { font-size: 13px; }
  .social { margin-top: 45px; }
  .social-links { gap: 25px 22px; }
  .social-links strong { font-size: 21px; }
  .company h2 { font-size: 29px; }
  .company-data > div { display: block; font-size: 15px; padding-block: 18px; }
  .company-data dt { margin-bottom: 9px; font-size: 12px; }
  .contact { padding-block: 62px; }
  .contact h2 { font-size: 29px; }
  .contact-grid { gap: 28px; }
  .contact-copy > p { font-size: 15px; }
  .button { font-size: 16px; min-height: 61px; padding: 15px 21px; gap: 25px; }
  .footer { padding-block: 45px 27px; }
  .footer-main { display: block; }
  .footer-main nav { margin-top: 32px; gap: 13px 25px; font-size: 13px; }
  .footer-bottom { flex-wrap: wrap; gap: 12px 20px; margin-top: 30px; font-size: 11px; }
  .footer-bottom > span { flex-basis: 100%; }
  .purpose-hero .hero-copy { padding-top: 25px; padding-bottom: 28px; }
  .purpose-hero h1 { font-size: 32px; line-height: 1.7; }
  .purpose-hero .hero-art::after { display: none; }
  .purpose-hero .hero-art img { aspect-ratio: 4 / 4.5; object-position: 52% center; }
  .essay .lead { font-size: 19px; margin-bottom: 25px; }
  .essay .lead br { display: none; }
  .values-grid { grid-template-columns: 1fr; gap: 29px; }
  .value { grid-template-columns: 30px 1fr; gap: 17px; padding-top: 24px; }
  .value > span { font-size: 23px; }
  .value h3 { font-size: 22px; margin-bottom: 13px; }
  .value p { font-size: 16px; }
  .vision img { aspect-ratio: 1.1; object-position: 64% center; }
  .vision-copy { padding: 45px 6% 56px; }
  .vision h2 { font-size: 28px; }
  .work-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); padding: 20px; }
  .dialog-head,.dialog-header { gap: 14px; padding-bottom: 15px; align-items: start; }
  .dialog-head h2,.dialog-header h2 { font-size: 20px; }
  .dialog-close { font-size: 12px; gap: 6px; padding: 7px 10px; }
  .dialog-note { font-size: 12px; }
  .before-after,.comparison-grid { grid-template-columns: 1fr; gap: 30px; }
  .before-after h3,.comparison-grid h3 { font-size: 21px; }
  .dialog-footer,.dialog-bottom { display: block; }
  .dialog-footer .button,.dialog-bottom .button { margin-top: 20px; }
  .dialog-top { top: -20px; gap: 12px; align-items: start; padding: 12px 0 15px; }
  .dialog-top h2 { font-size: 19px; }
  .before-after-grid { grid-template-columns: 1fr; gap: 28px; }
  .before-after-grid h3 { font-size: 20px; }
  .demo-disclosure { font-size: 12px; }
  .source-item p,.source-item li,.note-sheet p { font-size: 15px; }
  .case-benefit { font-size: 16px; }
}
@media (max-width:375px) {
  .header .brand span { display: none; }
  .hero h1 { font-size: 37px; }
  .purpose-hero h1 { font-size: 30px; }
  .case-story h3 { font-size: 21px; }
  .team-copy h3 { font-size: 22px; }
  .service-row h3 { font-size: 20px; }
  .vision h2 { font-size: 26px; }
  .work-item { gap: 15px; }
  .work-item img { width: 94px; }
}
@media (max-width:860px) and (max-height:650px) {
  .js .main-nav { padding-top: 10px; padding-bottom: 25px; }
  .js .main-nav > a { padding-block: 10px; min-height: 51px; font-size: 18px; }
  .js .main-nav .nav-contact { margin-top: 16px; min-height: 54px; }
}

/* 2026-09-10: visible work, a founder story and a complete contact route. */
.page-home .hero h1 { font-size: clamp(32px,4vw,58px); letter-spacing: .07em; }
.works { padding-block: 20px 110px; }
.works h2 { font-size: clamp(30px,3.1vw,44px); }
.works-heading > p { font-size: 16px; }
.works-grid { gap: 42px; padding: 12px 0 0; border: 0; align-items: stretch; }
.work-item { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.work-image { display: block; position: relative; width: 100%; text-align: left; padding: 0; background: #e8e2dc; overflow: hidden; }
.work-item img { width: 100%; height: auto; aspect-ratio: 1200 / 833; object-fit: contain; border: 1px solid #dfd8d0; margin: 0; }
.work-image-hint { position: absolute; bottom: 18px; right: 18px; display: inline-flex; align-items: center; gap: 28px; padding: 10px 15px; background: #fffdf9; color: var(--ink); font-size: 12px; box-shadow: 0 2px 12px #4a342818; }
.work-image-hint > span { font-size: 18px; }
.work-image:hover .work-image-hint { color: var(--rose-ink); background: #f8efea; }
.work-info { padding-top: 22px; display: flex; flex: 1; flex-direction: column; }
.work-item .work-type,.website-detail .work-type { display: flex; justify-content: space-between; font-size: 12px; color: #74605a; letter-spacing: .055em; margin: 0 0 11px; }
.work-item h3 { font-size: 26px; margin: 0; }
.work-item .work-description { font-size: 16px; line-height: 1.95; margin: 15px 0 22px; }
.work-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px; padding-top: 5px; margin-top: auto; }
.work-actions .text-link { font-size: 14px; gap: 22px; }
.work-actions > a { font-size: 13px; text-decoration: underline; }
.website-dialog { width: min(1050px,94vw); }
.website-dialog .dialog-top h2 { font-size: 23px; }
.website-detail > img { display: block; width: 100%; height: auto; margin: 25px 0; }
.website-detail > h3 { font-size: 25px; margin: 14px 0; }
.website-detail > p { font-size: 16px; }
.website-detail .work-scope { padding: 20px 0; margin-top: 18px; border-block: 1px solid var(--line); font-size: 13px; }
.website-detail .text-link { margin-top: 22px; }
.social-compact { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 22px; max-width: 418px; }
.social-compact a { font-family: var(--latin); font-size: 14px; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 12px; border: 1px solid #bea397; background: #f8f3ee; border-radius: 2px; }
.social-compact .social-icon { width: 22px; height: 22px; flex: 0 0 22px; object-fit: contain; }
.social-compact .external-mark { margin-left: auto; font-size: 12px; }
.social-compact a:hover { background: #eeded5; }
.social h2 { font-size: 35px; margin-bottom: 15px; }
.social-intro { margin-bottom: 30px; font-size: 16px; }
.social-links > a { padding-top: 22px; padding-bottom: 15px; }
.footer-social { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 30px; padding-top: 28px; margin-top: 30px; border-top: 1px solid var(--line); font-family: var(--latin); font-size: 14px; }
.footer-social > span { letter-spacing: .12em; font-size: 12px; color: #78665f; }
.footer-social a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; }
.footer-social .social-icon { width: 24px; height: 24px; flex: 0 0 24px; object-fit: contain; }
.footer-social .external-mark { font-size: 12px; }
.footer-social a:hover .social-name { text-decoration: underline; text-underline-offset: 5px; }
.footer-bottom { margin-top: 22px; }

/* Corporate profile: experience, approach and a representative message. */
.founder-hero { background: #f6eeeb; padding-block: 65px 78px; }
.founder-page-heading { margin-bottom: 48px; }
.founder-page-heading .eyebrow { margin-bottom: 14px; }
.founder-page-heading h1 { font-size: clamp(38px,3.8vw,54px); line-height: 1.5; letter-spacing: .06em; }
.founder-hero-grid { display: grid; grid-template-columns: 418px minmax(0,1fr); gap: 24px 8%; align-items: start; }
.founder-name { grid-column: 2; grid-row: 1; }
.founder-photo { grid-column: 1; grid-row: 1 / span 2; }
.founder-intro { grid-column: 2; grid-row: 2; }
.founder-photo > img { width: 100%; max-width: 418px; height: auto; display: block; }
.founder-name p { font-size: 13px; color: var(--rose-ink); }
.founder-name h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px 22px; font-size: 35px; margin-top: 12px; letter-spacing: .1em; }
.founder-name h2 span { font-family: var(--latin); font-weight: 300; font-size: 13px; letter-spacing: .12em; color: #81663f; }
.founder-summary { font-size: 30px; line-height: 1.7; margin-block: 0 24px; }
.founder-intro .essay { font-size: 17px; line-height: 2.1; }
.founder-intro .text-link { margin-top: 26px; }
.founder-photo .social-compact { margin-top: 20px; }
.message-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 8%; }
.message-heading h2 { font-size: clamp(28px,2.65vw,38px); }
.message-copy { font-size: 17px; line-height: 2.15; }
.message-copy .message-quote { margin-top: 37px; font-family: var(--hand); font-size: 23px; line-height: 1.8; color: var(--rose-ink); }
.message-copy .message-sign { margin-top: 27px; font-size: 12px; text-align: right; }
.message-sign span { display: inline-block; font-family: var(--serif); font-size: 30px; margin-top: 8px; letter-spacing: .12em; }
.founder-image img { width: 100%; height: auto; aspect-ratio: 3.3; object-fit: cover; object-position: center 56%; }
.professional-history { background: #f3ede8; }
.profile-facts { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 34px; }
.profile-facts > div { padding-block: 23px 28px; border-block: 1px solid #cdb6a7; }
.profile-facts p { display: flex; align-items: baseline; gap: 12px; }
.profile-facts strong { font-family: var(--latin); font-weight: 300; font-size: clamp(52px,5.2vw,74px); line-height: 1.3; color: var(--rose-ink); letter-spacing: -.025em; }
.profile-facts p > span { font-size: 16px; }
.profile-facts h3 { font-family: var(--sans); font-size: 15px; margin-top: 10px; letter-spacing: .015em; }
.facts-note { font-size: 12px; color: #72645d; margin-top: 16px; }
.career-list { margin-top: 44px; }
.career-list > div { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 30px; padding-block: 28px; border-bottom: 1px solid var(--line); }
.career-list dt { font-family: var(--latin); font-size: 25px; font-weight: 300; color: var(--rose-ink); }
.career-list > div:last-child dt { font-family: var(--sans); font-size: 17px; padding-top: 6px; }
.career-list strong { font-family: var(--serif); font-size: 23px; font-weight: 400; }
.career-list p { margin-top: 9px; font-size: 16px; }
.history-actions { display: flex; flex-wrap: wrap; gap: 20px 45px; margin-top: 36px; }
.founder-social .social { margin-top: 0; }

/* Contact methods first, then one spacious form in a single column. */
.contact-hero { background: #eee5dd; padding-block: 68px; }
.contact-hero-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 8%; }
.contact-hero h1 { font-size: clamp(29px,3.1vw,43px); line-height: 1.75; letter-spacing: .04em; }
.contact-hero-grid > div > p:not(.eyebrow) { font-size: 16px; margin-top: 25px; }
.contact-hero .text-link { margin-top: 24px; }
.contact-hero img { width: 100%; height: auto; aspect-ratio: 1.38; object-fit: cover; object-position: 80% bottom; }
.contact-methods { padding-block: 48px; }
.contact-methods h2 { font-size: 17px; letter-spacing: .03em; margin-bottom: 25px; }
.method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 45px; }
.method-grid > a { position: relative; border-block: 1px solid var(--line); padding: 22px 45px 22px 0; }
.method-label { font-size: 12px; color: #7a6057; display: block; margin-bottom: 6px; }
.method-grid strong { font-size: 27px; letter-spacing: .03em; font-weight: 400; }
.method-name { display: flex; align-items: center; gap: 16px; }
.method-icon { width: 32px; height: 32px; flex: 0 0 32px; object-fit: contain; }
.method-arrow { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 25px; }
.method-grid a:hover { color: var(--rose-ink); }
.inquiry { background: #f1e9e4; }
.form-wrap { width: min(760px,88%); margin-inline: auto; }
.inquiry h2 { font-size: 34px; }
.form-intro { font-size: 16px; margin-top: 22px; }
.form-steps { display: grid; grid-template-columns: repeat(3,1fr); margin-block: 34px 24px; border-bottom: 1px solid #cdb8ad; list-style: none; }
.form-steps li { text-align: center; padding: 14px 0; border-bottom: 2px solid transparent; font-size: 16px; }
.form-steps li[aria-current] { color: var(--rose-ink); border-bottom-color: var(--rose-ink); }
.form-steps li > span { font-family: var(--latin); font-size: 11px; margin-right: 13px; }
.preview-note { padding: 12px 16px; border-left: 2px solid #a9776d; color: #70534b; background: #f7f1ec; font-size: 13px; line-height: 1.8; }
.preview-note[hidden],.form-error[hidden] { display: none; }
.inquiry-form { margin-top: 28px; background: #fffdfa; padding: 40px; }
.field + .field { margin-top: 30px; }
.field label { display: flex; align-items: center; gap: 16px; font-size: 16px; font-weight: 500; margin-bottom: 12px; }
.required,.optional { font-size: 11px; font-weight: 400; letter-spacing: .04em; }
.required { background: #eee0d9; color: #804940; padding: 1px 7px; }
.optional { color: #80716b; }
.field input,.field select,.field textarea { width: 100%; font: inherit; font-size: 16px; color: var(--ink); border: 1px solid #dcd0c6; border-radius: 2px; background: #f6f2ee; padding: 15px 17px; min-height: 58px; }
.field select { appearance: auto; padding-right: 10px; }
.field textarea { min-height: 200px; resize: vertical; line-height: 1.9; }
.field input::placeholder,.field textarea::placeholder { color: #83766e; opacity: 1; }
.field input:focus,.field select:focus,.field textarea:focus { outline: 2px solid #a66861; outline-offset: 2px; background: #fff; }
.field-hint { margin-top: 10px; font-size: 12px; color: #77675f; }
.form-data-note { font-size: 13px; margin-block: 30px 22px; }
.form-next,.form-send { width: 100%; border: 1px solid #b9847c; background: #eac5bf; min-height: 70px; font-size: 17px; }
.form-next:hover,.form-send:hover { background: #e2b3ac; }
.form-send:disabled { background: #ece5df; border-color: #d5c7bc; color: #807069; cursor: not-allowed; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { font-size: 15px; color: #822f35; border: 1px solid #d6a59d; padding: 18px; margin-top: 25px; }
.form-assurance { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 36px; }
.form-assurance img { width: 92px; height: 92px; object-fit: cover; border-radius: 50%; }
.form-assurance p { font-size: 14px; line-height: 1.9; }
.form-assurance p > span { display: block; margin-top: 10px; font-size: 12px; }
.confirm-dialog { margin: auto; width: min(850px,94vw); max-width: 94vw; max-height: 90dvh; overflow: auto; padding: 32px; border: 1px solid #dfd3c7; background: var(--paper); color: var(--ink); border-radius: 4px; }
.confirm-dialog::backdrop { background: #2b211fb8; }
.confirm-top { position: sticky; top: -32px; background: var(--paper); display: flex; justify-content: space-between; gap: 20px; align-items: center; padding-block: 15px 22px; border-bottom: 1px solid var(--line); z-index: 1; }
.confirm-top .eyebrow { font-size: 11px; margin-bottom: 12px; }
.confirm-top h2 { font-size: 25px; letter-spacing: .025em; }
.confirm-details > div { padding-block: 20px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 130px 1fr; gap: 25px; }
.confirm-details dt { font-size: 13px; color: #7b6056; }
.confirm-details dd { font-size: 16px; overflow-wrap: anywhere; white-space: pre-wrap; }
.confirm-dialog .preview-note { margin-top: 25px; }
.confirm-actions { margin-top: 30px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.confirm-actions .form-send { width: auto; flex-basis: 56%; font-size: 16px; gap: 20px; }
.thanks-page { text-align: center; min-height: 66vh; background: #eee4dc; }
.thanks-page .eyebrow { justify-content: center; }
.thanks-page h1 { font-size: 42px; line-height: 1.75; margin-bottom: 30px; }
.thanks-page p:not(.eyebrow) { font-size: 16px; margin-bottom: 24px; }
.thanks-page .preview-note { max-width: 540px; margin-inline: auto; text-align: left; text-wrap: pretty; }
.thanks-page .text-link { margin-top: 15px; }
html:not(.js) .work-image { display: block; pointer-events: none; }
html:not(.js) .work-image-hint { display: none; }
@media (max-width:1100px) {
  .main-nav { gap: 15px; }
  .nav-contact { padding-inline: 12px; gap: 12px; }
  .founder-hero-grid { grid-template-columns: 350px minmax(0,1fr); gap: 24px 6%; }
  .founder-name p { font-size: 12px; }
  .social-links { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .contact-hero-grid { gap: 6%; }
  .contact-hero h1 { font-size: 31px; }
}
@media (max-width:860px) {
  .works h2 { font-size: 34px; }
  .works-grid { gap: 32px; }
  .work-item h3 { font-size: 23px; }
  .work-item .work-description { font-size: 15px; }
  .founder-hero { padding-block: 45px 60px; }
  .founder-hero-grid { grid-template-columns: 1fr; gap: 42px; }
  .founder-intro { max-width: 650px; }
  .founder-photo { width: min(418px,100%); margin-inline: auto; }
  .founder-name p { font-size: 12px; }
  .contact-hero-grid { grid-template-columns: 1fr; gap: 35px; }
  .contact-hero h1 { font-size: 38px; }
  .contact-hero img { max-height: 440px; aspect-ratio: 1.8; }
  .contact-methods h2 { font-size: 16px; }
  .method-grid { gap: 28px; }
  .method-grid strong { font-size: 24px; }
  .form-wrap { width: min(760px,88%); }
  .inquiry h2 { font-size: 31px; }
}
@media (max-width:600px) {
  .page-home .hero h1 { font-size: clamp(27px,7.7vw,39px); letter-spacing: .05em; line-height: 1.7; }
  .works { padding-block: 0 65px; }
  .works h2 { font-size: 30px; }
  .works-heading > p { font-size: 15px; }
  .works-grid { display: grid; grid-template-columns: 1fr; gap: 42px; padding-top: 0; }
  .work-image-hint { right: 10px; bottom: 10px; font-size: 11px; padding: 7px 12px; gap: 20px; }
  .work-info { padding-top: 18px; }
  .work-item h3 { font-size: 23px; }
  .work-item .work-description { font-size: 15px; margin: 13px 0 15px; }
  .work-item .work-type { font-size: 11px; }
  .work-actions { gap: 12px 22px; }
  .work-actions > a { font-size: 12px; }
  .website-dialog .dialog-top h2 { font-size: 18px; }
  .website-dialog .dialog-close { padding-inline: 8px; }
  .website-detail > h3 { font-size: 21px; }
  .website-detail > p { font-size: 15px; }
  .social h2 { font-size: 30px; }
  .social-intro { font-size: 15px; }
  .social-links .social-description { font-size: 13px; }
  .social-links .social-icon { width: 36px; height: 36px; margin-bottom: 16px; }
  .social-links > a { padding-right: 0; }
  .social-compact a { gap: 8px; padding-inline: 10px; font-size: 13px; }
  .footer-social { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 23px; font-size: 14px; }
  .footer-social > span { grid-column: 1 / -1; }
  .founder-hero { padding-top: 32px; }
  .founder-intro .eyebrow { font-size: 10px; gap: 12px; }
  .founder-intro .eyebrow span { font-size: 11px; padding-left: 12px; }
  .founder-intro .text-link { font-size: 14px; margin-top: 20px; }
  .founder-photo { max-width: 340px; }
  .founder-name h2 { font-size: 30px; }
  .founder-name h2 span { font-size: 13px; }
  .founder-name p { font-size: 12px; }
  .contact-hero { padding-block: 33px 35px; }
  .contact-hero h1 { font-size: clamp(25px,7.15vw,34px); }
  .contact-hero-grid > div > p:not(.eyebrow) { font-size: 15px; }
  .contact-hero-grid > div > p:not(.eyebrow) br { display: none; }
  .contact-hero img { aspect-ratio: 1.38; }
  .contact-methods { padding-block: 35px; }
  .contact-methods h2 { font-size: 15px; }
  .method-grid { grid-template-columns: 1fr; gap: 20px; }
  .method-grid > a { padding-block: 18px; }
  .method-grid strong { font-size: 25px; }
  .method-name { gap: 12px; }
  .method-icon { width: 28px; height: 28px; flex-basis: 28px; }
  .inquiry h2 { font-size: 28px; }
  .form-intro { font-size: 15px; }
  .form-steps { margin-top: 25px; }
  .form-steps li { font-size: 14px; }
  .form-steps li > span { margin-right: 9px; }
  .inquiry-form { padding: 25px 20px; margin-inline: -6px; }
  .field + .field { margin-top: 25px; }
  .field label { font-size: 15px; gap: 12px; }
  .field input,.field select,.field textarea { padding: 14px 12px; }
  .field-hint { font-size: 12px; }
  .form-data-note { font-size: 12px; }
  .form-next { padding-inline: 18px; gap: 15px; font-size: 16px; }
  .form-assurance { align-items: flex-start; gap: 16px; }
  .form-assurance img { width: 66px; height: 66px; }
  .form-assurance p { font-size: 13px; }
  .form-assurance p > span { font-size: 11px; }
  .confirm-dialog { padding: 20px; }
  .confirm-top { top: -20px; padding-top: 8px; align-items: flex-start; gap: 12px; }
  .confirm-top .eyebrow { display: block; font-size: 10px; line-height: 1.7; }
  .confirm-top .eyebrow span { display: block; border: 0; padding: 0; font-size: 11px; }
  .confirm-top h2 { font-size: 19px; line-height: 1.7; }
  .confirm-top .dialog-close { font-size: 12px; padding-inline: 8px; gap: 6px; }
  .confirm-details > div { grid-template-columns: 1fr; gap: 7px; padding-block: 17px; }
  .confirm-details dd { font-size: 15px; }
  .confirm-actions { flex-direction: column-reverse; align-items: stretch; gap: 16px; }
  .confirm-actions .form-send { flex-basis: auto; font-size: 15px; padding: 14px 17px; min-height: 62px; }
  .confirm-actions .text-link { align-self: center; }
  .thanks-page h1 { font-size: 28px; }
  .thanks-page p:not(.eyebrow) { font-size: 15px; }
}

/* Keep the original site's type hierarchy while preserving the large visuals. */
.eyebrow { font-weight: 400; }
.experience strong,.case-number,.service-number,.value > span { font-weight: 300; }
.social-links strong { font-weight: 400; }
@media (max-width:1100px) {
  .founder-summary { font-size: 25px; }
  .founder-intro .essay { font-size: 16px; }
  .message-grid { grid-template-columns: .75fr 1.25fr; gap: 6%; }
  .message-heading h2 { font-size: 28px; }
}
@media (max-width:860px) {
  .founder-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .founder-name,.founder-photo,.founder-intro { grid-column: 1; grid-row: auto; }
  .founder-photo { width: min(418px,100%); }
  .founder-page-heading { margin-bottom: 30px; }
  .founder-summary { font-size: 29px; }
  .message-grid { grid-template-columns: 1fr; gap: 35px; }
  .message-heading h2 { font-size: 34px; }
  .profile-facts { grid-template-columns: 1fr 1fr; gap: 28px; }
  .profile-facts > div:last-child { grid-column: 1 / -1; }
  .founder-image img { aspect-ratio: 2; }
}
@media (max-width:600px) {
  .founder-page-heading h1 { font-size: 34px; }
  .founder-hero { padding-block: 34px 48px; }
  .founder-name h2 { gap: 9px 18px; font-size: 30px; }
  .founder-name h2 span { font-size: 12px; }
  .founder-name p { font-size: 12px; line-height: 1.9; }
  .founder-summary { font-size: clamp(24px,6.8vw,30px); margin-block: 0 22px; }
  .founder-intro .essay { font-size: 16px; }
  .founder-intro .text-link { font-size: 15px; }
  .message-heading h2 { font-size: 28px; }
  .message-copy { font-size: 16px; line-height: 2.05; }
  .message-copy .message-quote { font-size: 21px; }
  .profile-facts { gap: 24px; }
  .profile-facts strong { font-size: 59px; }
  .profile-facts h3 { font-size: 14px; }
  .career-list > div { grid-template-columns: 65px minmax(0,1fr); gap: 18px; padding-block: 24px; }
  .career-list dt { font-size: 22px; }
  .career-list strong { font-size: 20px; }
  .career-list p { font-size: 15px; }
  .history-actions { display: grid; gap: 18px; }
  .history-actions .text-link { justify-content: space-between; font-size: 14px; }
  .founder-image img { aspect-ratio: 1.5; }
}

/* 2026-09-11: all eight roles and an actual invoice deliverable. */
.team-grid { row-gap: 54px; }
.team-member { display: flex; flex-direction: column; }
.team-copy { display: flex; flex: 1; flex-direction: column; align-items: flex-start; }
.team-copy .team-role { font-size: 15px; line-height: 1.6; }
.team-copy .team-output { font-size: 14px; line-height: 1.8; padding-top: 17px; margin-top: auto; }
.team-output span { display: block; color: var(--rose-ink); font-size: 12px; margin-bottom: 2px; }
.team-copy .text-link { min-height: 48px; }
.invoice-showcase { background: #efe6e1; }
.invoice-feature { display: grid; grid-template-columns: 1.5fr 1fr; gap: 6%; align-items: start; }
.invoice-media { min-width: 0; }
.invoice-media video { display: block; width: 100%; height: auto; aspect-ratio: 16/9; background: #f8f7f5; border: 1px solid #d8c9c0; }
.invoice-caption { font-size: 13px; line-height: 1.85; color: #665954; margin-top: 16px; }
.invoice-details h3 { font-size: 30px; margin-bottom: 24px; }
.invoice-steps { list-style: none; padding: 0; margin: 0 0 25px; }
.invoice-steps li { display: flex; align-items: flex-start; gap: 18px; border-top: 1px solid #d7c9c0; padding: 15px 0; }
.invoice-steps li > span { color: var(--rose-ink); font-family: var(--latin); font-size: 20px; line-height: 1.7; }
.invoice-steps strong { font-size: 17px; }
.invoice-steps p { font-size: 14px; }
.invoice-details .button { margin-top: 28px; width: 100%; background: #7c4148; color: #fff; font-size: 16px; }
@media(max-width:1100px) { .invoice-feature { grid-template-columns: 1.2fr 1fr; gap: 5%; } .invoice-details h3 { font-size: 26px; } }
@media(max-width:860px) { .invoice-feature { grid-template-columns: 1fr; gap: 38px; } .invoice-details { max-width: 640px; } }
@media(max-width:600px) { .invoice-details h3 { font-size: 27px; } .invoice-caption { font-size: 13px; } .team-copy .team-output { font-size: 14px; } }


/* LUCIA / cinematic refinement — 2026-09-13. Existing brand tokens stay authoritative. */
.header { background:rgba(248,247,245,.96); backdrop-filter:blur(14px); }
.nav-contact { background:var(--rose-wash); border-color:#d6aaa1; }
.hero.cinematic-hero .hero-art { height: min(820px,calc(100svh - var(--header-height))); min-height:660px; display:block; isolation:isolate; overflow:hidden; background:#e9ded2; }
.cinematic-hero .hero-art picture { position:absolute; inset:0; }
.cinematic-hero .hero-art picture img { width:100%; height:100%; max-height:none; aspect-ratio:auto; object-fit:cover; object-position:center; }
.cinematic-film { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.1s ease; pointer-events:none; }
.cinematic-film.is-playing { opacity:1; }
.cinematic-hero .hero-art::after { content:""; display:block; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(248,247,245,.76) 0%,rgba(248,247,245,.57) 34%,rgba(248,247,245,.09) 63%,transparent 82%); z-index:1; }
.cinematic-hero .hero-copy { top:12%; left:max(6%,calc((100% - 1260px)/2)); z-index:2; color:#423a37; padding:0; background:none; text-shadow:none; }
.cinematic-hero .hero-eyebrow { font-size:14px; letter-spacing:.12em; margin-bottom:30px; display:flex; align-items:center; gap:16px; }
.cinematic-hero .hero-eyebrow::before { content:""; width:34px; height:1px; background:var(--rose-ink); }
.cinematic-hero h1 { font-size:clamp(42px,4.1vw,62px); line-height:1.7; letter-spacing:.065em; }
.cinematic-hero .hero-lead { margin-top:25px; font-size:18px; line-height:1.9; letter-spacing:.04em; }
.cinematic-hero .hero-lead span { display:block; }
.hero-action { display:inline-flex; gap:42px; align-items:center; justify-content:space-between; margin-top:29px; min-height:58px; padding:13px 25px; border:1px solid #b97676; background:rgba(248,247,245,.78); border-radius:2px; font-size:16px; color:var(--rose-ink); transition:background .2s; }
.hero-action:hover { background:#fffaf7; }
.hero-action svg { width:23px; }
.film-control { position:absolute; right:4%; bottom:27px; z-index:3; min-height:46px; padding:10px 17px; display:inline-flex; gap:12px; align-items:center; background:rgba(248,247,245,.93); border:1px solid #b9a69b; border-radius:2px; font-size:13px; color:#51443e; }
.film-control[hidden] { display:none; }
.film-control span:first-child { min-width:12px; font-family:var(--sans); font-size:16px; }
.cinematic-hero .hero-bottom { min-height:105px; padding-block:26px; border-bottom:1px solid var(--line); }
.hero-bottom .hero-brandline { color:var(--rose-ink); font-family:var(--serif); font-size:23px; letter-spacing:.06em; }
.hero-bottom .hero-scroll { display:flex; gap:17px; align-items:center; font-size:14px; }
.hero-scroll svg { width:19px; height:19px; }
.team-section { padding-block:112px; }
.team-role { font-size:15px; letter-spacing:.025em; }
.team-grid { row-gap:65px; }
.team-member figure { border-radius:3px; }
.team-copy { padding-top:26px; }
.team-copy .team-output { line-height:1.9; }
.team-copy .text-link { min-height:48px; font-size:14px; }
.eyebrow { font-size:13px; }
.eyebrow span { font-size:14px; }
.purpose-teaser { display:block; position:relative; isolation:isolate; overflow:hidden; min-height:700px; background:var(--rose-wash); }
.purpose-teaser > figure { position:absolute; inset:0; z-index:-2; }
.purpose-teaser img { width:100%; height:100%; min-height:0; object-fit:cover; object-position:center; }
.purpose-teaser::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(248,247,245,.94),rgba(248,247,245,.79) 34%,rgba(248,247,245,.08) 65%,transparent); z-index:-1; pointer-events:none; }
.purpose-teaser-copy { width:min(600px,53%); padding:100px 0; margin-left:max(6%,calc((100% - 1260px)/2)); }
.purpose-teaser h2 { font-size:clamp(33px,3.1vw,46px); line-height:1.65; }
.purpose-teaser-copy > p:not(.eyebrow) { font-size:17px; line-height:2.1; }
.purpose-teaser .text-link { margin-top:30px; min-height:48px; font-size:16px; }
.purpose-hero.cinematic-hero h1 { font-size:clamp(36px,3.6vw,53px); line-height:1.65; }
.purpose-hero.cinematic-hero .hero-copy { top:13%; }
.contact { position:relative; isolation:isolate; overflow:hidden; }
.contact::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(110deg,rgba(248,247,245,.96) 12%,rgba(248,247,245,.83) 50%,rgba(248,247,245,.5)),url('img/purpose.jpg') center 50% / cover; }
@media (max-width:1100px) and (min-width:601px) {
 .hero.cinematic-hero .hero-art { min-height:660px; height:720px; }
 .cinematic-hero .hero-copy { left:6%; top:13%; }
 .cinematic-hero h1 { font-size:43px; letter-spacing:.055em; }
 .cinematic-hero .hero-lead { font-size:17px; }
 .cinematic-hero .hero-art::after { background:linear-gradient(90deg,rgba(248,247,245,.8),rgba(248,247,245,.62) 38%,rgba(248,247,245,.06) 78%); }
 .purpose-teaser { min-height:650px; }
 .purpose-teaser-copy { width:50%; padding-block:85px; }
 .purpose-teaser h2 { font-size:33px; }
 .purpose-teaser-copy p br { display:none; }
}
@media (max-width:860px) {
 .team-section { padding-block:76px; }
 .purpose-teaser-copy { width:58%; }
 .purpose-teaser h2 { font-size:31px; }
}
@media (max-width:600px) {
 .hero.cinematic-hero .hero-art { display:flex; flex-direction:column; min-height:0; height:auto; overflow:hidden; background:var(--paper); }
 .cinematic-hero .hero-copy,.purpose-hero.cinematic-hero .hero-copy { position:relative; top:auto; left:auto; order:-1; padding:35px 6% 33px; background:linear-gradient(120deg,#f8f7f5,#f2e8e4); width:100%; }
 .cinematic-hero .hero-eyebrow { font-size:12px; margin-bottom:20px; gap:12px; }
 .cinematic-hero h1 { font-size:clamp(29px,8vw,39px); line-height:1.7; letter-spacing:.045em; }
 .cinematic-hero .hero-lead { font-size:16px; margin-top:18px; line-height:1.85; letter-spacing:.015em; }
 .hero-action { min-height:54px; margin-top:23px; padding:12px 20px; font-size:15px; gap:33px; }
 .cinematic-hero .hero-art picture { position:relative; inset:auto; height:460px; width:100%; }
 .cinematic-hero .hero-art picture img { width:100%; height:100%; aspect-ratio:auto; object-position:center; }
 .cinematic-film { inset:auto 0 0; height:460px; object-fit:cover; }
 .cinematic-hero .hero-art::after { display:none; }
 .film-control { bottom:18px; right:6%; min-height:44px; font-size:12px; padding:9px 13px; }
 .cinematic-hero .hero-bottom { min-height:0; padding-block:23px; gap:16px; flex-direction:row; flex-wrap:wrap; align-items:center; }
 .hero-bottom .hero-brandline { font-size:19px; }
 .hero-bottom .hero-scroll { font-size:13px; }
 .team-grid { row-gap:48px; }
 .team-role { font-size:14px; }
 .team-copy { padding-top:24px; }
 .purpose-teaser { display:flex; flex-direction:column; min-height:0; }
 .purpose-teaser > figure { position:relative; inset:auto; z-index:auto; width:100%; height:390px; }
 .purpose-teaser img { min-height:0; height:100%; object-position:55% center; }
 .purpose-teaser::after { display:none; }
 .purpose-teaser-copy { width:auto; margin:0; padding:42px 6% 49px; }
 .purpose-teaser h2 { font-size:32px; }
 .purpose-teaser-copy > p:not(.eyebrow) { font-size:16px; }
 .purpose-hero.cinematic-hero h1 { font-size:31px; }
 .purpose-hero.cinematic-hero .hero-art picture { height:430px; }
 .purpose-hero .cinematic-film { height:430px; }
 .contact::before { background:linear-gradient(110deg,rgba(248,247,245,.94),rgba(248,247,245,.8)),url('img/purpose.jpg') 62% center / cover; }
}
@media(prefers-reduced-motion:reduce) { .cinematic-film { transition:none; } }

/* Invitation to the founder's personal story. */
.story-entry{margin-top:30px;padding-top:24px;border-top:1px solid #ddccc4}.story-entry p{font-size:16px;line-height:1.9;margin:0 0 15px;color:#66544d}.story-entry .text-link{margin:0}
@media(max-width:760px){.story-entry{margin-top:26px;padding-top:22px}.story-entry p{font-size:15px}}


/* Company outline and navigation added on 2026-09-13. */
.company-page-hero{padding:64px 0;background:#f2eae4}
.company-page-heading{display:grid;grid-template-columns:1fr 1.15fr;gap:8%;align-items:center}
.company-page-heading h1{font-size:48px;font-weight:400;margin:25px 0 28px;line-height:1.5}
.company-page-lead{font-size:20px;line-height:1.9}
.company-page-heading figure{margin:0}.company-page-heading img{display:block;width:100%;height:auto}
.company-details-grid{display:grid;grid-template-columns:.8fr 1.3fr;gap:10%}
.company-details h2{font-size:34px;line-height:1.7}
.company-name-meaning{font-size:17px;line-height:1.9;margin-bottom:25px}
.company-details .company-data>div{font-size:17px;padding-block:24px;line-height:1.9}
.company-details .company-data dt{font-size:14px}
.company-details .company-data dd{margin:0;overflow-wrap:anywhere}
.company-details .company-data a{text-underline-offset:5px}
.company-related{display:grid;grid-template-columns:1fr 1fr;gap:5%;padding-bottom:90px}
.company-related>a{position:relative;border-top:1px solid var(--line);padding:30px 42px 12px 0;text-decoration:none}
.company-related h2{font-size:26px;line-height:1.7;margin:20px 0 12px}
.company-related p{font-size:15px;line-height:1.9}
.company-related-arrow{position:absolute;right:0;top:85px;font-size:25px;color:var(--rose-ink)}
.company-related>a:hover h2{text-decoration:underline;text-underline-offset:6px}
.company .company-overview-link{margin-top:24px}
@media(min-width:861px) and (max-width:1100px){.header-inner{padding-inline:3%;gap:16px}.main-nav{gap:12px}.nav-contact{gap:9px;padding-inline:10px}}
@media(max-width:860px){.company-page-hero{padding:36px 0}.company-page-heading{grid-template-columns:1fr;gap:30px}.company-page-heading h1{font-size:36px;margin:20px 0}.company-page-lead{font-size:18px}.company-page-heading figure{max-width:640px}.company-details-grid{grid-template-columns:1fr;gap:34px}.company-details h2{font-size:29px}.company-related{grid-template-columns:1fr;gap:24px;padding-bottom:55px}.company-related h2{font-size:25px}.company-related .eyebrow{font-size:12px}}
@media(max-width:560px){.company-details .company-data>div{grid-template-columns:1fr;gap:8px;padding-block:21px;font-size:16px}.company-details .company-data dt{font-size:13px}.company-related>a{padding-right:30px}.company-related p{font-size:14px}}