/*
 * Readability & interaction refinements (2026-10-27).
 * The original approved-Figma layout remains in styles.css; refinements adjust
 * only the legibility, responsive fit and motion of interface components.
 * Text palette tested for WCAG AA against #FCFBF7, #F4EDE8 and #DFD7D3.
 */
:root {
  --text-secondary: #59514d;
  --text-subtle: #625b56;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Base typography: body at least 16px; normal weight resists thin Windows rendering. */
body { font-size: 17px; font-weight: 400; line-height: 1.65; }
h1, h2, h3 { font-weight: 400; line-height: 1.18; }
h2 { font-size: clamp(37px, 3.7vw, 55px); }
h3 { font-size: 24px; }
p { color: var(--text-secondary); }
.eyebrow { font-size: 12px; color: var(--wine); letter-spacing: .15em; font-weight: 600; }
.approach-grid { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); }
.contact-grid { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); }
.interior-section__grid { grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); }
.section-description { font-size: 17px; line-height: 1.72; max-width: 540px; }
.section-title { max-width: 660px; }
.section-title--narrow { max-width: 630px; }

/* The delivered logo SVG contains two identical copies, but our cropped SVG
 * shows the approved FIRST copy once at its original aspect ratio (258:32). */
.brand, .brand img { width: 258px; }
.brand img { height: 32px; }
.site-header { height: 86px; }
.header-inner { gap: 18px; }
.desktop-nav { gap: clamp(16px, 2vw, 32px); margin-right: 18px; }
.desktop-nav > a, .nav-pop__trigger {
  font-size: 13px; color: var(--text-secondary); letter-spacing: .055em;
  font-weight: 500; line-height: 1.3;
}
.nav-pop__menu { width: 340px; }
.nav-pop__menu a { font-size: 15px; padding: 13px 0; }
.header-inner > .button { font-size: 13px; padding: 13px 18px; }
.button { font-size: 13px; font-weight: 600; letter-spacing: .055em; line-height: 1.35; min-height: 50px; transition: background .25s, color .25s, border-color .25s, transform .28s var(--motion-ease); }
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0); }
.inline-link { font-size: 13px; font-weight: 600; letter-spacing: .035em; }

/* Hero: preserve approved left portrait / right copy and hierarchy. */
.home-hero, .home-hero__grid { min-height: 820px; }
.home-hero__photo { height: 820px; }
.home-hero__content { max-width: 740px; padding-left: 5%; }
.home-hero h1 { font-size: clamp(45px, 3.8vw, 60px); line-height: 1.17; letter-spacing: -.042em; max-width: 700px; }
.home-hero__content > p { font-size: 18px; line-height: 1.7; color: var(--text-secondary); max-width: 605px; }
.hero-tags span { font-size: 12px; line-height: 1.45; color: var(--text-secondary); padding: 9px 12px; letter-spacing: .045em; }
.hero-actions .button { font-size: 13px; }
.manifesto .container { font-size: 17px; letter-spacing: .045em; font-weight: 400; color: var(--text-secondary); line-height: 1.65; }

/* Cards + case results. */
.info-card { padding: 31px 29px; }
.info-card__meta, .approach-number { color: var(--text-subtle); }
.info-card__meta { font-size: 13px; margin-bottom: 17px; }
.info-card h3, .service-grid .info-card h3 { font-size: 23px; line-height: 1.32; font-weight: 500; }
.info-card p, .service-grid .info-card p { font-size: 16px; line-height: 1.65; color: var(--text-secondary); }
.info-card .inline-link { font-size: 13px; }
.info-card--dark p { color: var(--paper); font-size: 19px; font-weight: 400; }
.approach-number { font-size: 24px; }
.approach-list h3 { font-size: 23px; font-weight: 500; }
.approach-list p { font-size: 16px; line-height: 1.7; }
.home-formats .section-title { max-width: 680px; }
.service-grid .info-card { min-height: 270px; }
.case-row small, .case-metrics small { font-size: 13px; color: var(--text-subtle); letter-spacing: .045em; }
.case-row__name h3 { font-size: 25px; }
.case-row__point strong { font-size: 33px; font-weight: 500; }
.case-row__point p { font-size: 16px; line-height: 1.7; }
.case-row .inline-link { font-size: 13px; }
.telegram-strip h2 { font-size: 38px; }
.telegram-strip p { font-size: 17px; }

/* Animated segmented control: equal-width tabs, moving dark indicator. */
.segmented {
  position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch; isolation: isolate; min-width: 300px;
  border: 1px solid rgba(50,45,41,.22); background: rgba(252,251,247,.27);
}
.segmented::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 50%;
  background: var(--ink); z-index: -1;
  transform: translateX(0);
  transition: transform 380ms var(--motion-ease), background 280ms ease;
}
.segmented[data-active="leaders"]::before { transform: translateX(100%); }
.segmented button,
.segmented button.is-active {
  position: relative; z-index: 1; font-size: 13px; font-weight: 600;
  padding: 14px 19px; min-height: 48px; letter-spacing: .025em;
  background: transparent; transition: color 260ms ease;
}
.segmented button { color: var(--text-secondary); }
.segmented button.is-active { color: #fff; }
.segmented button:focus-visible { outline-offset: -3px; }
.formats-panel { will-change: opacity, transform; }
.formats-panel.is-leaving { opacity: 0; transform: translateY(10px); transition: opacity 160ms ease, transform 160ms ease; }
.formats-panel.is-entering { animation: panel-in 380ms var(--motion-ease) both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: translateY(0); } }

/* Contact, inputs and supporting content. */
.contact-grid h2 { font-size: clamp(40px, 3.5vw, 54px); }
.contact-grid > div > p { font-size: 17px; line-height: 1.75; }
.contact-lines small { font-size: 13px; color: var(--text-secondary); }
.contact-lines a { font-size: 16px; }
.lead-form label:not(.checkbox-label) { font-size: 13px; font-weight: 600; letter-spacing: .025em; color: var(--text-secondary); }
.lead-form input:not([type=checkbox]), .lead-form select, .lead-form textarea { font-size: 16px; min-height: 50px; }
.lead-form ::placeholder, .lead-form select:invalid { color: #675e58; opacity: 1; }
.checkbox-label { font-size: 14px; color: var(--text-secondary); }
.form-status { font-size: 15px; }

/* Internal pages use the same readability standards as the homepage. */
.inner-hero h1 { font-size: clamp(47px, 4.4vw, 69px); }
.inner-hero p, .long-text p, .legal-copy p { font-size: 18px; line-height: 1.76; color: var(--text-secondary); }
.inner-hero__visual > span { color: var(--text-secondary); font-weight: 400; }
.interior-section__heading h2 { font-size: clamp(36px, 3.5vw, 52px); }
.interior-section__heading > p { font-size: 17px; line-height: 1.73; }
.editorial-list li { font-size: 17px; color: var(--text-secondary); line-height: 1.75; }
.steps li > span { font-size: 20px; }
.steps h3 { font-size: 25px; }
.steps p { font-size: 17px; line-height: 1.7; }
.format-link h3 { font-size: 27px; }
.format-link p { font-size: 17px; line-height: 1.7; }
.price-list > div { font-size: 20px; }
.small-muted { font-size: 15px; color: var(--text-secondary); }
.detail-list summary { font-size: 18px; }
.detail-line strong { font-size: 17px; }
.detail-line p { font-size: 16px; }
.case-metrics strong { font-size: 36px; font-weight: 500; }
.case-detail-section h2 { font-size: 40px; }
.legal-warning { font-size: 15px; color: var(--text-secondary); }
.legal-copy h2 { font-size: 33px; }
.form-modal__panel h2 { font-size: 38px; }
.form-modal__panel > p { font-size: 16px; }
.footer-row > span, .footer-row nav a { font-size: 12px; color: var(--text-secondary); letter-spacing: .04em; }

/* Laptop and tablet: keep the same content, with larger text and a safe menu. */
@media (max-width: 1200px) {
  .desktop-nav { gap: 15px; margin-right: 6px; }
  .desktop-nav > a, .nav-pop__trigger { font-size: 12px; }
  .brand, .brand img { width: 234px; }
  .brand img { height: auto; }
  .home-hero h1 { font-size: clamp(41px, 4.15vw, 54px); }
  .home-hero, .home-hero__grid { min-height: 740px; }
  .home-hero__photo { height: 740px; }
}
@media (max-width: 1030px) {
  .desktop-nav, .header-inner > .button { display: none; }
  .menu-toggle { display: flex; flex-direction: column; gap: 6px; align-items: center;
    justify-content: center; border: 0; background: transparent; padding: 12px 0 12px 14px; }
  .menu-toggle span { width: 28px; height: 2px; background: var(--ink); display: block; }
  .mobile-nav:not([hidden]) { display: block; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 20px 25px rgba(50,45,41,.07);
    max-height: calc(100vh - 86px); overflow-y: auto; }
  .mobile-nav .container { display: grid; padding: 15px 0 24px; }
  .mobile-nav a { font-size: 16px; border-bottom: 1px solid var(--line); padding: 14px 0; }
  .home-hero h1 { font-size: 44px; }
  .contact-grid, .approach-grid, .interior-section__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 850px) {
  .home-hero, .home-hero__grid { min-height: 720px; }
  .home-hero__photo { height: 680px; }
  .home-hero__content > p { font-size: 17px; }
  .hero-tags span { font-size: 11px; }
  .section { padding-block: 85px; }
  .section-title { max-width: 740px; }
  .info-card h3, .service-grid .info-card h3 { font-size: 23px; }
  .info-card p, .service-grid .info-card p { font-size: 16px; }
  .service-grid .info-card { min-height: 225px; }
  .inner-hero h1 { font-size: clamp(42px, 5.2vw, 54px); }
  .inner-hero p { font-size: 17px; }
}
@media (max-width: 600px) {
  .site-header { height: 72px; }
  .brand, .brand img { width: 230px; }
  .home-hero, .home-hero__grid { min-height: 0; }
  .home-hero__content { padding: 48px 0 20px; }
  .home-hero h1 { font-size: clamp(38px, 9.5vw, 50px); line-height: 1.16; }
  .home-hero__content > p { font-size: 17px; line-height: 1.65; }
  .hero-tags span { font-size: 11px; }
  .hero-actions { gap: 12px; }
  .hero-actions .button { font-size: 12px; padding: 14px 15px; }
  .manifesto .container { font-size: 16px; letter-spacing: .01em; }
  .section-title, .contact-grid h2 { font-size: 37px; }
  .info-card { min-height: 174px; }
  .info-card h3, .service-grid .info-card h3 { font-size: 22px; }
  .info-card p, .service-grid .info-card p { font-size: 16px; }
  .info-card__meta { font-size: 13px; }
  .approach-list h3 { font-size: 22px; }
  .approach-list p { font-size: 16px; }
  .segmented { min-width: 0; width: 100%; }
  .segmented button, .segmented button.is-active { font-size: 12px; padding: 14px 9px; }
  .service-grid .info-card { min-height: 210px; }
  .case-row__name h3 { font-size: 24px; }
  .case-row__point strong { font-size: 30px; }
  .case-row__point p { font-size: 15px; }
  .contact-grid h2 { font-size: 37px; }
  .inner-hero h1, .inner-hero--text h1 { font-size: clamp(37px, 9.5vw, 49px); }
  .inner-hero p, .long-text p { font-size: 17px; }
  .interior-section__heading h2 { font-size: 37px; }
  .editorial-list li, .steps p { font-size: 16px; }
  .format-link p { font-size: 16px; }
  .form-modal__panel h2 { font-size: 33px; }
  .footer-row > span, .footer-row nav a { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .segmented::before, .segmented button, .formats-panel,
  .button { transition: none !important; animation: none !important; }
}