/* Shared responsive layout. Loaded last on every public page. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-width: 0; }
main h1, main h2, main h3, main p, #footer a { overflow-wrap: break-word; }
main :is(.container,.detail-columns,.example-grid,.split,.use-cases,.steps) > * { min-width: 0; }
:is(.header-cta,.dark-button,.project-cta,.subpage .button) { max-width: 100%; white-space: normal; height: auto; min-height: 48px; padding-block: 13px; }
.subpage .crumbs { flex-wrap: wrap; line-height: 1.5; }
.subpage .muted-chip { white-space: normal; }

/* Let the hero's text columns wrap before they can meet the central action. */
#landing .intro h1, #landing .impact h2 { white-space: normal; }
#landing .hero { padding-bottom: 64px; }
@media (min-width: 1281px) {
  #landing .hero-copy { grid-template-columns: minmax(0,1fr) 240px minmax(0,1fr); column-gap: clamp(24px,3vw,64px); }
  #landing .intro h1 { font-size: clamp(34px,2.92vw,42px); }
  #landing .impact { width: 100%; max-width: 390px; margin: 0; justify-self: end; }
  #landing .impact h2 { font-size: clamp(30px,2.64vw,38px); }
}
@media (min-width: 761px) and (max-width: 1280px) {
  #landing .hero { min-height: 0; }
  #landing .hero-copy { width: calc(100% - 64px); margin-inline: auto; padding-inline: 0; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 40px; }
  #landing .intro { grid-column: 1; grid-row: 1; }
  #landing .impact { grid-column: 2; grid-row: 1; width: auto; margin: 0; padding: 0; }
  #landing .hero-action-group { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
  #landing .intro h1 { font-size: clamp(30px,3.1vw,38px); }
  #landing .impact h2 { font-size: clamp(28px,2.8vw,34px); }
}
/* Keep the impact message after the action on screens using the mobile menu. */
@media (min-width: 761px) and (max-width: 990px) {
  #landing .hero-copy { grid-template-columns: minmax(0,1fr); max-width: 640px; justify-items: center; row-gap: 0; }
  #landing .intro { grid-column: 1; grid-row: 1; width: 100%; max-width: 620px; text-align: center; }
  #landing .intro p { max-width: 620px; margin-inline: auto; }
  #landing .hero-action-group { grid-column: 1; grid-row: 2; margin-top: 27px; }
  #landing .impact { grid-column: 1; grid-row: 3; justify-self: center; width: 100%; max-width: 560px; padding-top: 38px; text-align: center; }
  #landing .impact p { margin-inline: auto; }
  #landing .work-link { justify-content: center; }
}
@media (max-width: 760px) {
  #landing .hero-copy { width: calc(100% - 40px); max-width: 560px; margin-inline: auto; }
  #landing .intro h1 { font-size: clamp(30px,7vw,42px); }
  #landing .impact h2 { font-size: clamp(28px,7vw,34px); }
  #landing .impact { padding-top: 38px; }
  #landing .hero-action-group { gap: 20px; }
}

/* Service titles and links have their own lines at narrower desktop widths. */
@media (min-width: 901px) and (max-width: 1180px) {
  #services .service-list { padding-inline: 28px; }
  #services .service-item { grid-template-columns: 56px minmax(0,1fr); gap: 18px; }
  #services .service-icon { width: 56px; height: 56px; }
  #services .service-item:not(:last-child)::after { left: 74px; }
  #services .service-content h2 { padding-right: 0; }
  #services .service-more { position: static; margin-top: 7px; }
  #services .visual { min-height: 0; }
}
@media (max-width: 650px) {
  #services .service-content p { font-size: 15px; line-height: 1.5; }
  #services .service-more { min-height: 30px; align-items: center; }
  #services .service-item:not(:last-child)::after { bottom: 0; }
}

/* Keep copy in normal flow; illustrations occupy a separate part of each card. */
#approach .steps { height: auto; grid-template-rows: auto auto; }
#approach .step { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; height: auto; }
#approach .step .step-copy { position: relative; inset: auto; grid-column: 1; grid-row: 1; padding: 30px 0 30px 28px; }
#approach .step .art-wrap { position: relative; inset: auto; grid-column: 2; grid-row: 1; width: 100%; min-height: 280px; }
#approach .step:not(.discover) .step-art { width: 100%; height: 90%; inset: 5% 0 auto auto; }
#approach .step p { max-width: none; }
#approach .step.discover { display: flex; flex-direction: column; align-items: stretch; }
#approach .discover .step-copy { padding: 34px 30px 12px; }
#approach .discover .art-wrap { flex: 1; min-height: 340px; }
#approach .discover .step-art { width: 85%; height: 94%; top: 0; right: 7.5%; }
@media (max-width: 900px) {
  #approach .step .step-copy { padding-left: 22px; }
  #approach .step .art-wrap { min-height: 270px; }
}
@media (max-width: 760px) {
  #approach .step { display: flex; flex-direction: column; align-items: stretch; }
  #approach .step.discover { height: auto; }
  #approach .step .step-copy, #approach .discover .step-copy { inset: auto; padding: 26px 24px 0; }
  #approach .step:not(.discover) .step-copy { right: auto; }
  #approach .step p, #approach .step:not(.discover) p { max-width: none; font-size: 16px; }
  #approach .step .art-wrap, #approach .discover .art-wrap { min-height: 0; height: clamp(230px,62vw,310px); flex: none; }
  #approach .step .step-art, #approach .step:not(.discover) .step-art { width: 88%; height: 90%; top: 5%; right: 6%; }
}

#about .about-grid { height: auto; min-height: 615px; }
#about .about-copy { padding: clamp(44px,6vw,90px) clamp(28px,4.4vw,64px); }
#about .about-copy .founder-note { margin-top: 32px; }
#about .factory { top: 0; height: 100%; }
#capabilities .feature { height: auto; min-height: 470px; padding-top: 300px; }
#capabilities .copy, #capabilities .feature:nth-child(even) .copy, #capabilities .feature:nth-child(n+3) .copy { position: relative; inset: auto; padding: 0 clamp(26px,4vw,58px) 34px; }
#capabilities .feature-art { max-width: 90%; }
#capabilities .feature-grid { width: 100%; max-width: none; }
.about-page .about-brand-art img { height: auto; max-height: none; }
@media (max-width: 850px) {
  #about .about-grid { min-height: 0; }
  #about .about-copy { min-height: 0; }
  .about-page .about-brand-art { width: min(100%,420px); }
}
@media (max-width: 760px) {
  #about .about-copy { padding: 40px 26px; }
  #about .about-art { height: clamp(260px,85vw,480px); }
  #capabilities .feature { min-height: 0; padding-top: 277px; }
  #capabilities .copy, #capabilities .feature:nth-child(even) .copy, #capabilities .feature:nth-child(n+3) .copy { padding: 0 24px 32px; }
  #capabilities .copy p { font-size: 16px; }
  .about-page .about-hero h1 { font-size: clamp(34px,8vw,54px); margin-bottom: 20px; }
}

/* Detail cards retain readable measure on tablets and stack on phones. */
.single-service .use-cases, .single-service .steps, .subpage .example-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
@media (min-width: 701px) and (max-width: 1000px) {
  .subpage .detail-columns > div, .single-service .split > div { padding: 30px 26px; }
  .single-service .use-case, .single-service .step-copy, .subpage .example-card { padding: 26px 20px; }
  .about-page .value { padding: 26px 20px; }
}
@media (max-width: 760px) {
  .single-service .split, .single-service .use-cases, .single-service .steps, .about-page .values { display: block; }
  .single-service .split > div, .single-service .use-case, .single-service .step-copy, .about-page .value { padding: 28px 24px; min-height: 0; border-right: 0; border-bottom: 1px dashed var(--jygen-frame-stroke); }
  .single-service .split > div + div { border-left: 0; }
  .single-service .split > div:last-child, .single-service .use-case:last-child, .single-service .step-copy:last-child, .about-page .value:last-child { border-bottom: 0; }
  .single-service .service-main h1 { font-size: clamp(34px,8.5vw,53px); }
  .single-service .service-main { padding-inline: 24px; }
  .single-service .service-cta, .about-page .about-cta { display: flex; flex-direction: column; align-items: center; padding: 30px 24px; gap: 20px; }
  .single-service .service-cta .button, .about-page .about-cta .button { margin-top: 0; }
  .subpage .intro-hero.perspective-section { min-height: 0; padding: 80px 0; }
  .subpage .intro-hero::after { display: none; }
  .subpage .outro.perspective-section { min-height: 0; padding: 80px 22px; }
}
@media (max-width: 540px) {
  .subpage .detail-head, .subpage .detail-columns > div, .about-page .about-section { padding-inline: 22px; }
  .subpage .intro-hero.perspective-section h1 { font-size: clamp(36px,9vw,48px); }
  .subpage .detail-head h2 { font-size: clamp(32px,9vw,42px); }
  .subpage .contact-auth-pair { grid-template-columns: minmax(0,1fr); gap: 15px; }
  .subpage .contact-auth-form-inner h1 { font-size: clamp(32px,8.5vw,40px); }
  .subpage .contact-auth-form-panel { padding-inline: 20px; }
  .subpage .contact-auth-direct a { overflow-wrap: anywhere; }
}
.subpage .contact-auth-pair { min-width: 0; }
.subpage .contact-auth-grid { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); }
.subpage .contact-auth-form-panel, .subpage .contact-auth-why { min-width: 0; }
@media (max-width: 1100px) {
  .subpage .contact-auth-grid { grid-template-columns: minmax(0,1fr); max-width: 660px; min-height: 0; }
  .subpage .contact-auth-why { text-align: center; margin: 24px auto 44px; }
  .subpage .contact-auth-why h2 img, .subpage .contact-auth-why p { margin-inline: auto; }
  .subpage .contact-input-box input, .subpage .contact-input-box select, .subpage .contact-input-box textarea { font-size: 16px; }
}

/* Footer columns share available width without clipping the wordmark or links. */
#footer .footer-columns { width: min(1258px,100%); grid-template-columns: minmax(0,1.6fr) repeat(3,minmax(0,1fr)); }
#footer .footer-brand-head { flex-wrap: wrap; gap: 8px 14px; padding-right: 22px; }
#footer .column-head { height: auto; min-height: 90px; padding-bottom: 18px; }
#footer .footer-name, #footer .footer-list { padding-left: clamp(20px,2.8vw,40px); }
#footer .footer-list a { overflow-wrap: anywhere; }
@media (max-width: 850px) {
  #footer .footer-columns { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #footer .instagram span { display: none; }
}
@media (max-width: 570px) {
  #footer .footer-body { padding-inline: 20px; }
  #footer .footer-brand-head { padding-right: 0; flex-wrap: nowrap; }
  #footer .instagram span { display: inline; }
  #footer .footer-wordmark { width: clamp(118px,34vw,178px); }
  #footer .footer-name, #footer .footer-list { padding-left: 0; }
  #footer .footer-column:nth-child(3) .footer-name, #footer .footer-column:nth-child(3) .footer-list { padding-left: 18px; }
  #footer .footer-list a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 8px; }
  #footer .footer-list li + li { margin-top: 3px; }
}
@media (max-width: 360px) { #footer .instagram { font-size: 12px; gap: 5px; } }
@media (max-width: 760px) {
  #contact .hero { min-height: 0; padding: 76px 20px 90px; }
  #contact .statements { height: auto; }
  #contact .project-cta { min-width: 0; padding-inline: 24px; }
}
/* Restore ordinary hover surfaces on touchscreens after a tap. */
@media (hover: none) {
  #approach .step:hover { transform: none; box-shadow: none; }
  #faq .faq-item:hover { background: transparent; }
  #faq .faq-item:has(.faq-question[aria-expanded="true"]) { background: #fff3ec; }
}

/* Final spacing rhythm and safe areas for phones with display cutouts. */
:root {
  --jygen-card-padding: clamp(24px,3.5vw,48px);
  --jygen-safe-top: env(safe-area-inset-top,0px);
  --jygen-safe-right: env(safe-area-inset-right,0px);
  --jygen-safe-bottom: env(safe-area-inset-bottom,0px);
  --jygen-safe-left: env(safe-area-inset-left,0px);
}
main { padding-left: var(--jygen-safe-left); padding-right: var(--jygen-safe-right); }
.site-header { height: calc(81px + var(--jygen-safe-top)); padding-top: var(--jygen-safe-top); padding-left: max(12px,var(--jygen-safe-left)); padding-right: max(28px,var(--jygen-safe-right)); }
.nav { top: calc(15px + var(--jygen-safe-top)); }
.about-page .about-section { padding: var(--jygen-card-padding); }
.about-page .about-story-copy p { margin-bottom: 24px; }
.about-page [aria-labelledby="founders-title"] > h3 { margin-top: 32px; margin-bottom: 12px; }
.single-service .block-heading { padding: 40px var(--jygen-card-padding) 24px; }
#footer .footer-body { padding-left: max(24px,var(--jygen-safe-left)); padding-right: max(24px,var(--jygen-safe-right)); }
@media (max-width: 990px) {
  .site-header { height: calc(70px + var(--jygen-safe-top)); padding-top: var(--jygen-safe-top); padding-left: max(4px,var(--jygen-safe-left)); padding-right: max(18px,var(--jygen-safe-right)); }
  .nav { top: calc(70px + var(--jygen-safe-top)); left: max(12px,var(--jygen-safe-left)); right: max(12px,var(--jygen-safe-right)); }
  .nav.open { max-height: calc(100dvh - 90px - var(--jygen-safe-top) - var(--jygen-safe-bottom)); }
  .site-piece, .site-piece [id], .subpage .service-detail { scroll-margin-top: calc(82px + var(--jygen-safe-top)); }
}
@media (max-width: 760px) {
  #landing .hero { padding-bottom: 40px; }
  #approach .approach { padding-block: 40px; }
  #approach .steps { margin-top: 32px; gap: 16px; }
  #capabilities .frameworks { padding-block: 40px; }
  #capabilities .frameworks p { margin-top: 16px; }
  #faq .faq-intro { padding-block: 40px 24px; }
  #contact .hero { padding-block: 64px; }
  #contact .project-cta { margin-top: 32px; }
  .about-page .about-hero { padding-block: 48px 56px; }
  .subpage .service-detail { padding-block: 48px; }
  .single-service .block-heading { padding: 32px 24px 24px; }
  .single-service .service-main .summary { margin-bottom: 24px; }
}
@media (max-width: 600px) {
  .subpage .contact-auth-form-panel { padding-block: 40px 32px; }
  .subpage .contact-auth-form { margin-top: 32px; gap: 16px; }
  .subpage .contact-auth-lead { line-height: 1.5; }
  .subpage .contact-auth-consent { min-height: 44px; padding-block: 4px; font-size: 13px; line-height: 1.6; }
  .subpage .contact-auth-consent input { width: 18px; height: 18px; }
  .subpage .contact-auth-why { margin-bottom: 32px; }
}
@media (max-width: 570px) {
  #footer .footer-body { padding-left: max(20px,var(--jygen-safe-left)); padding-right: max(20px,var(--jygen-safe-right)); padding-bottom: calc(48px + var(--jygen-safe-bottom)); }
  #footer .column-head { min-height: 76px; }
  #footer .footer-brand-head { padding-bottom: 12px; }
  #footer .left-space { height: 24px; }
  #footer .copyright { margin-block: 16px 24px; }
  #footer .footer-list { margin-block: 24px 32px; }
}

@media (pointer: coarse) {
  .subpage .contact-input-box input, .subpage .contact-input-box textarea, .subpage .contact-input-box select { font-size: 16px; }
}