/*
  2026-08 subpage refinement
  Applies the approved v3 hierarchy to lower pages without changing the
  established color, grid, motion or interaction language.
*/

/* --- Shared hierarchy ------------------------------------------------- */
.page-title{
  font-size:clamp(34px,3.7vw,52px);
  line-height:1.42;
  letter-spacing:-.034em;
  max-width:14em;
}
.section-title{
  font-size:clamp(25px,2.7vw,40px);
  line-height:1.5;
  letter-spacing:-.025em;
  max-width:15em;
}
.cta-inner h2{
  font-size:clamp(27px,3vw,40px);
  line-height:1.52;
}
.page-lead{font-size:13.5px;line-height:1.95}
.section-body{font-size:13.5px;line-height:2;max-width:37em}

/* Give hierarchy through composition, not headline scale. */
.content-section{padding-top:clamp(62px,5.8vw,88px);padding-bottom:clamp(62px,5.8vw,88px)}
.process,.capabilities,.price-wrap,.support-grid,.attitude-list,.career-flow,.contact-layout{margin-top:38px}

/* --- SERVICE ---------------------------------------------------------- */
.process article{min-height:220px}
.process h3{font-size:16px}
.process strong{font-size:17px}
.cap-row{grid-template-columns:58px 1.15fr 1.55fr 1.9fr;padding:26px 0}
.cap-no{font-size:18px}
.cap-name h3{font-size:20px}
.cap-row>p{font-size:13.5px}
.support-plan h3{font-size:21px;line-height:1.6}

/* --- WORKS INDEX: equal visual weight for every project --------------- */
.works-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:64px 28px;
  margin-top:44px;
}
.work-entry,
.work-entry:nth-child(even){
  display:flex;
  flex-direction:column;
  gap:0;
  padding:0;
  border:0;
  min-width:0;
  background:transparent;
}
.work-entry:last-child{border:0}
.work-entry .work-visual,
.work-entry:nth-child(even) .work-visual{
  order:0;
  width:100%;
  aspect-ratio:16/10;
}
.work-entry .work-copy,
.work-entry:nth-child(even) .work-copy{order:1;padding-top:17px}
.work-copy small{font-size:9px}
.work-copy h2{margin:8px 0 4px;font-size:clamp(19px,1.65vw,24px);line-height:1.45}
.work-copy .work-meta{margin:0 0 12px;font-size:9.5px}
.work-copy strong{max-width:30em;font-size:clamp(14px,1.1vw,16px);line-height:1.75;color:#425363}
.work-copy>p:not(.work-meta){display:none}
.work-actions{margin-top:12px}
.work-link{min-height:38px;min-width:0;margin-top:0;font-size:9.5px}
.work-site-link{font-size:9.5px}
.work-entry:hover{background:transparent}

/* --- CASE STUDY ------------------------------------------------------- */
.case-hero{min-height:56svh}
.case-client{font-size:clamp(31px,3.7vw,50px);line-height:1.3;max-width:13em}
.case-lead{margin-top:26px;font-size:clamp(20px,2.2vw,30px);line-height:1.58;max-width:20em}
.case-overview{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--pad) clamp(56px,5.2vw,78px);
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:24px;
}
.case-overview-inner{
  grid-column:1/13;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.case-overview-item{padding:22px 0}
.case-overview-item+ .case-overview-item{border-left:1px solid var(--line);padding-left:26px}
.case-overview-item small{display:block;margin-bottom:8px;font-size:9px;letter-spacing:.13em;color:var(--deep-blue)}
.case-overview-item strong{font-size:13px;line-height:1.7;font-weight:500;color:#425363}
.case-section h2{font-size:clamp(22px,2.25vw,30px);line-height:1.55;max-width:16em;letter-spacing:-.018em}
.case-copy{font-size:13.5px;line-height:2}
.next-case h2{font-size:clamp(21px,2.2vw,30px)}

/* --- ABOUT ------------------------------------------------------------ */
.attitude h3{font-size:clamp(18px,1.75vw,24px)}
.career-flow strong{font-size:12px;line-height:1.65}
.company-row strong{font-weight:500}

/* --- CONTACT ---------------------------------------------------------- */
.contact-side p{font-size:13px;line-height:2}
.submit-row button{font-family:inherit;letter-spacing:.06em}

@media (max-width:900px){
  .page-title{font-size:clamp(30px,5.6vw,40px)!important;line-height:1.46!important}
  .section-title{font-size:clamp(23px,4.4vw,31px)!important;line-height:1.52!important}
  .cta-inner h2{font-size:clamp(24px,4.8vw,31px)!important;line-height:1.55!important}
  .works-list{grid-template-columns:1fr!important;gap:38px!important;margin-top:36px!important}
  .work-entry{padding:0!important;gap:0!important}
  .work-copy{padding-top:14px!important}
  .work-copy h2{margin:7px 0 4px!important;font-size:19px!important}
  .work-copy strong{font-size:14px!important;line-height:1.72!important}
  .work-copy>p:not(.work-meta){display:none!important}
  .work-actions{border-top:0!important;padding-top:0!important;margin-top:10px!important}
  .case-client{font-size:clamp(28px,5.7vw,38px)!important}
  .case-lead{font-size:clamp(19px,4vw,26px)!important;line-height:1.58!important}
  .case-section h2{font-size:clamp(21px,4vw,28px)!important;line-height:1.58!important}
}

@media (max-width:620px){
  .page-title{font-size:clamp(27px,7.4vw,33px)!important;line-height:1.5!important;max-width:12.5em!important}
  .section-title{font-size:clamp(21px,5.8vw,26px)!important;line-height:1.58!important;max-width:14em!important}
  .page-title br{display:none}
  .cta-inner h2{font-size:clamp(22px,6vw,27px)!important;line-height:1.58!important}
  .page-lead{font-size:12.5px!important;line-height:1.95!important}
  .section-body{font-size:12.8px!important;line-height:1.95!important}
  .process article h3{font-size:14px!important}
  .process article strong{font-size:14px!important}
  .cap-name h3{font-size:16px!important}
  .support-plan h3{font-size:18px!important}
  .works-list{gap:34px!important}
  .work-copy h2{font-size:18px!important}
  .case-client{font-size:clamp(26px,7.2vw,32px)!important;line-height:1.38!important}
  .case-lead{font-size:clamp(18px,5vw,22px)!important;line-height:1.62!important;max-width:17em!important}
  .case-overview{padding:0 20px 42px}
  .case-overview-inner{display:block}
  .case-overview-item{padding:13px 0}
  .case-overview-item+ .case-overview-item{border-left:0;border-top:1px solid rgba(24,34,46,.07);padding-left:0}
  .case-section h2{font-size:clamp(19px,5.2vw,23px)!important;line-height:1.62!important;max-width:14em!important}
  .case-copy{font-size:12.8px!important;line-height:1.95!important}
  .attitude h3{font-size:16px!important}
  .contact-side p{font-size:12.5px!important;line-height:1.95!important}
}

/* v6 — WORKS INDEX: make project visual the primary information */
.work-copy h2{
  margin:7px 0 3px;
  font-size:clamp(15px,1.18vw,18px);
  line-height:1.5;
  font-weight:500;
  letter-spacing:.015em;
  color:#223342;
}
.work-copy .work-meta{
  margin:0 0 9px;
  font-size:8.5px;
  line-height:1.6;
  letter-spacing:.14em;
  color:#758696;
}
.work-copy strong{
  display:block;
  max-width:34em;
  font-size:clamp(12px,.92vw,14px);
  line-height:1.78;
  font-weight:400;
  color:#687987;
}
.work-copy small{
  font-size:8px;
  color:#8b99a5;
}
.work-actions{margin-top:10px}

@media (max-width: 860px){
  .work-copy h2{
    margin:6px 0 3px!important;
    font-size:16px!important;
    line-height:1.5!important;
  }
  .work-copy .work-meta{
    margin-bottom:8px!important;
    font-size:8px!important;
  }
  .work-copy strong{
    font-size:12.5px!important;
    line-height:1.75!important;
  }
}

@media (max-width: 560px){
  .work-copy h2{font-size:15px!important}
  .work-copy strong{font-size:12px!important}
}

/* v7 — WORKS INDEX typography correction
   subpage.css contains !important declarations for .work-copy h2/strong,
   so these must explicitly win in the final refinement layer. */
.works-list .work-copy h2{
  margin:6px 0 2px!important;
  font-size:clamp(13px,.95vw,15px)!important;
  line-height:1.5!important;
  font-weight:500!important;
  letter-spacing:.02em!important;
  color:#334554!important;
}
.works-list .work-copy .work-meta{
  margin:0 0 7px!important;
  font-size:8px!important;
  line-height:1.55!important;
  letter-spacing:.14em!important;
  color:#81909d!important;
}
.works-list .work-copy strong{
  display:block!important;
  max-width:36em!important;
  font-size:clamp(11px,.78vw,12.5px)!important;
  line-height:1.78!important;
  font-weight:400!important;
  color:#758591!important;
}
.works-list .work-copy small{
  font-size:7.5px!important;
  color:#96a2ac!important;
}

@media (max-width:860px){
  .works-list .work-copy h2{font-size:14px!important}
  .works-list .work-copy strong{font-size:11.5px!important}
  .works-list .work-copy .work-meta{font-size:7.5px!important}
}

@media (max-width:560px){
  .works-list .work-copy h2{font-size:13.5px!important}
  .works-list .work-copy strong{font-size:11px!important}
}

/* v8 — WORKS INDEX grouping & responsive sequence
   One project must always read as: visual -> project information -> next project. */
.works-list{
  gap:48px 26px!important;
  align-items:start!important;
}
.works-list .work-entry,
.works-list .work-entry:nth-child(even){
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
  padding:0 0 26px!important;
  border:0!important;
  border-bottom:1px solid rgba(24,34,46,.09)!important;
  align-items:stretch!important;
  min-width:0!important;
}
.works-list .work-entry .work-visual,
.works-list .work-entry:nth-child(even) .work-visual{
  order:0!important;
  width:100%!important;
  margin:0!important;
  aspect-ratio:16/9!important;
}
.works-list .work-entry .work-copy,
.works-list .work-entry:nth-child(even) .work-copy{
  order:1!important;
  width:100%!important;
  margin:0!important;
  padding:12px 0 0!important;
}
.works-list .work-identity{
  display:flex!important;
  align-items:baseline!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin:0 0 6px!important;
}
.works-list .work-copy small,
.works-list .work-copy .work-meta{
  margin:0!important;
}
.works-list .work-copy h2{
  margin:0 0 5px!important;
}
.works-list .work-copy strong{
  margin:0!important;
  max-width:31em!important;
}
.works-list .work-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:8px 18px!important;
  margin:11px 0 0!important;
  padding:0!important;
  border:0!important;
}
.works-list .work-link,
.works-list .work-site-link{
  margin:0!important;
}

@media (max-width:900px){
  .works-list{
    grid-template-columns:1fr!important;
    gap:0!important;
    margin-top:28px!important;
  }
  .works-list .work-entry,
  .works-list .work-entry:nth-child(even){
    padding:0 0 30px!important;
    margin:0 0 30px!important;
    border-bottom:1px solid rgba(24,34,46,.1)!important;
  }
  .works-list .work-entry:last-child{margin-bottom:0!important}
  .works-list .work-entry .work-visual,
  .works-list .work-entry:nth-child(even) .work-visual{
    order:0!important;
    aspect-ratio:16/10!important;
  }
  .works-list .work-entry .work-copy,
  .works-list .work-entry:nth-child(even) .work-copy{
    order:1!important;
    padding-top:11px!important;
  }
  .works-list .work-identity{
    justify-content:flex-start!important;
    gap:12px!important;
    margin-bottom:5px!important;
  }
  .works-list .work-copy h2{margin-bottom:4px!important}
  .works-list .work-actions{margin-top:10px!important}
}

@media (max-width:560px){
  .works-list .work-entry,
  .works-list .work-entry:nth-child(even){
    padding-bottom:24px!important;
    margin-bottom:24px!important;
  }
  .works-list .work-entry .work-visual,
  .works-list .work-entry:nth-child(even) .work-visual{
    aspect-ratio:4/3!important;
  }
  .works-list .work-entry .work-copy,
  .works-list .work-entry:nth-child(even) .work-copy{padding-top:10px!important}
  .works-list .work-identity{gap:10px!important}
  .works-list .work-actions{gap:6px 14px!important}
}

/* v9 — WORKS outcome / project information */
.case-overview-inner.case-overview-inner-extended{
  grid-template-columns:repeat(5,minmax(0,1fr));
}
.case-result-section{background:#f8fafc}
.case-result-copy{align-self:start}
.result-status{margin-top:28px!important;padding-top:18px;border-top:1px solid var(--line)}
.result-status span{display:block;margin-bottom:7px;font-size:9px;letter-spacing:.13em;color:var(--deep-blue)}
.result-status strong{font-size:11px;font-weight:500;letter-spacing:.1em;color:#647582}
.result-grid{grid-column:3/13;margin-top:58px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.result-item{min-height:150px;padding:24px 24px 26px 0}
.result-item+.result-item{border-left:1px solid var(--line);padding-left:24px}
.result-item small{display:block;margin-bottom:18px;font-size:9px;letter-spacing:.13em;color:var(--deep-blue)}
.result-item>strong{display:block;font-size:clamp(22px,2.4vw,34px);line-height:1.35;font-weight:500;letter-spacing:-.025em;color:var(--ink)}
.result-item p{margin:12px 0 0;font-size:11px;line-height:1.8;color:var(--muted)}
.case-consult{border-top:1px solid rgba(24,34,46,.07);background:#fff}
.case-consult-inner{max-width:var(--max);margin:0 auto;padding:clamp(74px,8vw,118px) var(--pad);display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px}
.case-consult small{grid-column:1/3;font-size:10px;letter-spacing:.13em;color:var(--deep-blue)}
.case-consult h2{grid-column:3/8;margin:0;font-size:clamp(25px,3vw,40px);line-height:1.5;font-weight:500;letter-spacing:-.025em}
.case-consult p{grid-column:9/13;margin:0;font-size:13px;line-height:2;color:#526471}
.case-consult a{grid-column:9/13;margin-top:34px;justify-self:start;display:inline-flex;gap:24px;align-items:center;padding-bottom:8px;border-bottom:1px solid var(--ink);font-size:11px;letter-spacing:.09em}

/* v9 — CONTACT consultation fields / FAQ */
.contact-intro-note{margin-top:28px;padding-top:24px;border-top:1px solid var(--line);font-size:12px!important;line-height:1.9!important;color:var(--muted)!important}
.field-help{display:block;margin-top:7px;font-size:10px;line-height:1.7;color:var(--muted)}
.contact-form select{cursor:pointer}
.faq-section{border-top:1px solid rgba(24,34,46,.07)}
.faq-list{grid-column:3/13;margin-top:58px;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-question{width:100%;display:grid;grid-template-columns:54px 1fr auto;gap:18px;align-items:center;padding:24px 0;border:0;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.faq-question small{font-size:9px;letter-spacing:.13em;color:var(--deep-blue)}
.faq-question strong{font-size:14px;line-height:1.7;font-weight:500}
.faq-question i{position:relative;width:16px;height:16px}
.faq-question i::before,.faq-question i::after{content:"";position:absolute;left:0;top:7px;width:16px;height:1px;background:var(--ink);transition:transform .25s ease}
.faq-question i::after{transform:rotate(90deg)}
.faq-item.is-open .faq-question i::after{transform:rotate(0deg)}
.faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.faq-answer>div{overflow:hidden}
.faq-answer p{margin:0;padding:0 54px 24px;font-size:13px;line-height:2;color:#526471}
.faq-item.is-open .faq-answer{grid-template-rows:1fr}

@media(max-width:900px){
  .case-overview-inner.case-overview-inner-extended{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case-overview-item:nth-child(odd){border-left:0!important;padding-left:0!important}
  .case-overview-item:nth-child(n+3){border-top:1px solid var(--line)}
  .result-grid{grid-column:auto;grid-template-columns:1fr;margin-top:42px}
  .result-item{min-height:auto;padding:20px 0}
  .result-item+.result-item{border-left:0;border-top:1px solid var(--line);padding-left:0}
  .case-consult-inner{grid-template-columns:1fr}
  .case-consult small,.case-consult h2,.case-consult p,.case-consult a{grid-column:auto}
  .case-consult h2{margin-top:24px}
  .case-consult p{margin-top:28px;max-width:44em}
  .faq-list{grid-column:1/13}
}
@media(max-width:560px){
  .case-overview-inner.case-overview-inner-extended{display:block}
  .case-overview-item:nth-child(n+2){border-left:0!important;border-top:1px solid var(--line);padding-left:0!important}
  .result-item>strong{font-size:22px}
  .case-consult-inner{padding-top:72px;padding-bottom:76px}
  .case-consult h2{font-size:24px}
  .faq-list{margin-top:38px}
  .faq-question{grid-template-columns:38px 1fr auto;gap:10px;padding:20px 0}
  .faq-question strong{font-size:13px}
  .faq-answer p{padding:0 0 20px 48px;font-size:12px}
}

/* v9 — WORKS index result preview */
.works-list .work-result-preview{display:flex!important;gap:12px!important;align-items:baseline!important;margin:10px 0 0!important;padding-top:9px!important;border-top:1px solid rgba(24,34,46,.07)!important;max-width:none!important}
.works-list .work-result-preview small{font-size:7.5px!important;letter-spacing:.13em!important;color:var(--deep-blue)!important}
.works-list .work-result-preview span{font-size:10.5px;line-height:1.7;color:#526471}


/* Performance: CMS visuals are static images or lightweight fallbacks. */
.work-visual img,.case-visual-box img{display:block;width:100%;height:100%;object-fit:cover}
.work-visual .fallback-art,.case-visual-box .fallback-art{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(145deg,#edf1f6,#fff)}
.case-visual-box{position:relative}

/* Work detail: show the complete CMS preview image without cropping. */
.case-visual-box {
  aspect-ratio: auto;
  min-height: 0;
  background: #edf1f6;
  overflow: hidden;
}
.case-visual-box img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center top;
}
.case-visual-box:has(.fallback-art) {
  position: relative;
  aspect-ratio: 16 / 10;
}

/* WORKS detail — final CMS structure */
.case-overview-inner-compact{
  grid-template-columns:1.45fr .8fr .8fr;
}
.case-overview-inner-compact .case-overview-item strong{
  white-space:normal;
}
.case-project-section .project-story{
  grid-column:6/13;
  display:grid;
  gap:0;
  border-top:1px solid var(--line);
}
.case-project-section .project-story-item{
  display:grid;
  grid-template-columns:minmax(90px,.3fr) 1fr;
  gap:clamp(24px,3vw,48px);
  padding:26px 0;
  border-bottom:1px solid var(--line);
}
.case-project-section .project-story-item small{
  padding-top:4px;
  font-size:8.5px;
  line-height:1.5;
  letter-spacing:.14em;
  color:var(--muted);
}
.case-project-section .project-story-item p{
  margin:0;
  font-size:13px;
  line-height:2;
  color:#53616d;
}
.case-result-section .result-grid{
  grid-column:6/13;
  margin-top:0;
}

/* A real project image owns its height. Never expose the placeholder background. */
.case-visual-box.has-cms-image{
  aspect-ratio:auto!important;
  height:auto!important;
  min-height:0!important;
  padding:0!important;
  background:transparent!important;
  line-height:0!important;
  font-size:0!important;
}
.case-visual-box.has-cms-image img{
  position:static!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  margin:0!important;
  object-fit:contain!important;
  object-position:center top!important;
  vertical-align:top!important;
}

@media (max-width:900px){
  .case-overview-inner-compact{
    grid-template-columns:1fr;
  }
  .case-project-section .project-story,
  .case-result-section .result-grid{
    grid-column:auto;
  }
}

@media (max-width:620px){
  .case-visual{
    padding-bottom:24px!important;
  }
  .case-visual-box.has-cms-image{
    border-bottom-color:transparent!important;
    box-shadow:none!important;
    overflow:hidden!important;
  }
  .case-project-section .project-story{
    margin-top:22px;
  }
  .case-project-section .project-story-item{
    grid-template-columns:1fr;
    gap:8px;
    padding:20px 0;
  }
  .case-project-section .project-story-item small{
    padding-top:0;
  }
  .case-project-section .project-story-item p{
    font-size:12px;
    line-height:1.9;
  }
}

/* 2026-08 copy review: restrained desktop hierarchy; mobile sizing remains unchanged. */
@media (min-width:901px){
  .page-title{
    font-size:clamp(31px,3.35vw,46px)!important;
    line-height:1.46!important;
  }
  .section-title{
    font-size:clamp(23px,2.4vw,35px)!important;
    line-height:1.55!important;
  }
  .cta-inner h2{
    font-size:clamp(25px,2.65vw,35px)!important;
    line-height:1.58!important;
  }
  .case-consult h2{
    font-size:clamp(23px,2.5vw,34px)!important;
    line-height:1.55!important;
  }
}

/* WORKS index CMS screenshots: preserve the complete 1440x900 (16:10) capture. */
.works-list .work-entry .work-visual,
.works-list .work-entry:nth-child(even) .work-visual{
  aspect-ratio:16 / 10!important;
  background:#fff!important;
  overflow:hidden!important;
}
.works-list .work-visual img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
}
@media (max-width:560px){
  .works-list .work-entry .work-visual,
  .works-list .work-entry:nth-child(even) .work-visual{
    aspect-ratio:16 / 10!important;
  }
}


/* 2026-08 after-support refinement ------------------------------------- */
.support-grid-three{grid-template-columns:repeat(3,minmax(0,1fr))!important}.support-grid-three .support-plan{min-width:0;padding:34px 28px 40px}.support-grid-three .support-plan+.support-plan{border-left:1px solid var(--line);border-top:0}.support-icon{width:42px;height:42px;margin-bottom:22px;color:var(--deep-blue)}.support-icon svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}.support-grid-three .support-plan h3{margin-top:18px;font-size:20px;line-height:1.6}.support-grid-three .support-price{margin-bottom:22px}.support-grid-three .support-plan li{font-size:12.5px}
@media(max-width:900px){.support-grid-three{grid-template-columns:1fr!important}.support-grid-three .support-plan+.support-plan{border-left:0;border-top:1px solid var(--line)}}
@media(max-width:620px){.support-icon{width:34px;height:34px;margin-bottom:14px}.support-grid-three .support-plan{padding:20px 0 23px!important}.support-grid-three .support-plan h3{margin-top:12px;font-size:18px!important}}