/* Shared styles specific to interior pages */

.page-hero {
  padding: 180px var(--gutter) 80px;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.page-hero__inner { max-width: var(--container); margin: 0 auto;}
.page-hero__kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: var(--accent); text-transform: uppercase; display: flex; gap: 14px; align-items: center;}
.page-hero__kicker::before { content:""; width: 28px; height: 1px; background: var(--accent);}
.page-hero__title { font-family: var(--serif); font-size: clamp(56px, 10vw, 180px); line-height: 0.94; letter-spacing: -0.025em; margin-top: 24px; font-weight: 400;}
.page-hero__title em { font-style: italic; color: var(--accent);}
.page-hero__lede { max-width: 60ch; margin-top: 28px; color: var(--fg-dim); font-size: 20px; line-height: 1.5;}
.page-hero__meta { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint);}

.two-col { display: grid; grid-template-columns: 1fr 2fr; gap: 60px; max-width: var(--container); margin: 0 auto;}
.two-col .sticky { position: sticky; top: 120px; align-self: start;}
.two-col h2 { font-family: var(--serif); font-size: clamp(28px, 3.2vw, 48px); line-height: 1.05; letter-spacing: -0.015em;}
.two-col h2 em { font-style: italic; color: var(--accent);}
.two-col p + p { margin-top: 18px;}
.two-col .body p { color: var(--fg-dim); font-size: 18px; line-height: 1.6;}
.two-col .body p.lead { color: var(--fg); font-size: 22px; font-family: var(--serif); line-height: 1.35;}
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr;} .two-col .sticky { position: static;} }

/* team grid */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;}
@media (max-width: 900px) { .team-grid { grid-template-columns: 1fr 1fr;} }
.teammate { position: relative;}
.teammate__img { width: 100%; aspect-ratio: 4/5; background: repeating-linear-gradient(135deg, var(--bg-2) 0 12px, var(--bg-3) 12px 24px); border: 1px solid var(--rule); display: grid; place-items: center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint); transition: transform 0.6s var(--ease);}
.teammate:hover .teammate__img { transform: scale(1.02);}
.teammate__name { font-family: var(--serif); font-size: 28px; margin-top: 18px; letter-spacing: -0.01em;}
.teammate__role { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint); margin-top: 4px;}
.teammate__bio { color: var(--fg-dim); font-size: 15px; line-height: 1.55; margin-top: 12px;}

/* service detail list */
.svc-list { border-top: 1px solid var(--rule);}
.svc { display: grid; grid-template-columns: 80px 1fr 1fr 120px 140px; gap: 28px; padding: 32px 0; border-bottom: 1px solid var(--rule); align-items: center; transition: background 0.4s var(--ease), padding 0.4s var(--ease);}
.svc:hover { background: var(--bg-2); padding-left: 20px;}
.svc__num { font-family: var(--mono); font-size: 12px; color: var(--accent); letter-spacing: 0.14em;}
.svc__title { font-family: var(--serif); font-size: 34px; line-height: 1.1;}
.svc__title em { font-style: italic; color: var(--accent);}
.svc__desc { color: var(--fg-dim); font-size: 14px; line-height: 1.5;}
.svc__meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint);}
.svc__arrow { font-family: var(--serif); font-size: 28px; text-align: right; transition: transform 0.4s var(--ease);}
.svc:hover .svc__arrow { transform: translateX(6px);}
@media (max-width: 900px) { .svc { grid-template-columns: 1fr; gap: 10px;} .svc__arrow, .svc__num { display: none;} }

/* case study */
.case-list { display: grid; gap: 0; border-top: 1px solid var(--rule);}
.case { display: grid; grid-template-columns: 2fr 3fr; gap: 40px; padding: 60px 0; border-bottom: 1px solid var(--rule); align-items: center;}
.case__meta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; color: var(--accent); text-transform: uppercase;}
.case__title { font-family: var(--serif); font-size: clamp(32px, 4vw, 56px); line-height: 1.05; margin-top: 14px; letter-spacing: -0.015em;}
.case__title em { font-style: italic; color: var(--accent);}
.case__desc { margin-top: 16px; color: var(--fg-dim); font-size: 17px; line-height: 1.55;}
.case__nums { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);}
.case__nums .n { padding: 20px; border-right: 1px solid var(--rule);}
.case__nums .n:last-child { border-right: 0;}
.case__nums .v { font-family: var(--serif); font-size: 44px; line-height: 1; letter-spacing: -0.02em;}
.case__nums .v em { font-style: italic; color: var(--accent);}
.case__nums .l { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-faint); margin-top: 10px;}
@media (max-width: 900px) { .case { grid-template-columns: 1fr;} }

/* pricing */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;}
.price-card { border: 1px solid var(--rule); border-radius: 16px; padding: 36px 28px; position: relative; transition: border-color 0.4s, transform 0.5s var(--ease);}
.price-card:hover { border-color: var(--accent); transform: translateY(-6px);}
.price-card.featured { border-color: var(--accent); background: var(--bg-2);}
.price-card .badge { position: absolute; top: -12px; left: 28px; background: var(--accent); color: var(--bg); font-family: var(--mono); font-size: 10px; padding: 5px 10px; letter-spacing: 0.14em; text-transform: uppercase;}
.price-card h3 { font-family: var(--serif); font-size: 36px; letter-spacing: -0.01em;}
.price-card h3 em { font-style: italic; color: var(--accent);}
.price-card .price { font-family: var(--serif); font-size: 64px; line-height: 1; letter-spacing: -0.02em; margin: 20px 0 8px;}
.price-card .price .u { font-size: 0.35em; font-style: italic; color: var(--fg-dim); letter-spacing: 0;}
.price-card .sub { color: var(--fg-dim); font-size: 14px; font-family: var(--mono); letter-spacing: 0.1em; text-transform: uppercase;}
.price-card ul { list-style: none; margin-top: 28px;}
.price-card li { padding: 12px 0; border-top: 1px solid var(--rule); color: var(--fg-dim); font-size: 15px; display: flex; gap: 12px; align-items: flex-start;}
.price-card li::before { content: "✓"; color: var(--accent); flex-shrink: 0;}
.price-card .btn { margin-top: 28px; width: 100%; justify-content: center;}
@media (max-width: 900px) { .price-grid { grid-template-columns: 1fr;} }

/* faq */
.faq-list { max-width: 900px; margin: 0 auto;}
.faq { border-bottom: 1px solid var(--rule);}
.faq summary { list-style: none; cursor: pointer; padding: 28px 0; display: flex; justify-content: space-between; align-items: center; gap: 20px;}
.faq summary::-webkit-details-marker { display: none;}
.faq summary .q { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 32px); line-height: 1.2; letter-spacing: -0.01em;}
.faq summary .plus { font-family: var(--mono); font-size: 28px; color: var(--accent); transition: transform 0.4s var(--ease);}
.faq[open] summary .plus { transform: rotate(45deg);}
.faq .a { padding: 0 0 28px; color: var(--fg-dim); font-size: 17px; line-height: 1.6; max-width: 70ch;}

/* insight list */
.artlist { border-top: 1px solid var(--rule);}
.art { display: grid; grid-template-columns: 160px 1fr 240px 120px; gap: 40px; padding: 32px 0; border-bottom: 1px solid var(--rule); align-items: center; transition: padding 0.4s var(--ease), background 0.4s var(--ease);}
.art:hover { padding-left: 20px; background: var(--bg-2);}
.art__date { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint);}
.art__title { font-family: var(--serif); font-size: 28px; line-height: 1.15; letter-spacing: -0.01em;}
.art__title em { font-style: italic; color: var(--accent);}
.art__author { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-dim);}
.art__tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); text-align: right;}
@media (max-width: 900px) { .art { grid-template-columns: 1fr;} .art__author, .art__tag { text-align: left;} }

/* contact */
.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px;}
.contact-grid form { display: grid; gap: 18px;}
.contact-grid label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-faint); display: block; margin-bottom: 6px;}
.contact-grid input, .contact-grid select, .contact-grid textarea {
  width: 100%; background: var(--bg-2); color: var(--fg); border: 1px solid var(--rule); border-radius: 8px;
  padding: 16px 18px; font: inherit; font-family: var(--body); font-size: 16px; transition: border-color 0.3s;
}
.contact-grid input:focus, .contact-grid select:focus, .contact-grid textarea:focus { outline: none; border-color: var(--accent);}
.contact-grid textarea { min-height: 140px; resize: vertical;}
.contact-info h4 { font-family: var(--serif); font-size: 28px; margin-bottom: 18px; letter-spacing: -0.01em;}
.contact-info .row { padding: 20px 0; border-top: 1px solid var(--rule);}
.contact-info .row:last-child { border-bottom: 1px solid var(--rule);}
.contact-info .row .l { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 6px;}
.contact-info .row .v { font-family: var(--serif); font-size: 22px; letter-spacing: -0.01em;}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr;} }

/* testimonial wall */
.voice-wall { columns: 3; column-gap: 28px;}
.voice-wall .voice { break-inside: avoid; margin-bottom: 28px;}
@media (max-width: 900px) { .voice-wall { columns: 1;} }

/* timeline (about) */
.timeline { border-top: 1px solid var(--rule);}
.timeline__row { display: grid; grid-template-columns: 160px 1fr 2fr; gap: 40px; padding: 36px 0; border-bottom: 1px solid var(--rule); align-items: flex-start;}
.timeline__year { font-family: var(--serif); font-size: 48px; letter-spacing: -0.02em; color: var(--accent); font-style: italic; line-height: 1;}
.timeline__h { font-family: var(--serif); font-size: 26px; line-height: 1.2;}
.timeline__p { color: var(--fg-dim); font-size: 16px; line-height: 1.55;}
@media (max-width: 900px) { .timeline__row { grid-template-columns: 1fr; gap: 10px;} }