/* ThinkStart 1.1 — readable type, generous controls, and responsive reflow.
   Load after styles.css. rem sizes respect the visitor's font preferences. */
:root {
  --body-size: 1.125rem;
  --detail-size: 1rem;
  --label-size: .875rem;
  --muted: #595b54;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 7rem;
  scroll-padding-bottom: 8rem;
}
body {font-size: var(--body-size); line-height: 1.7;}
.wrap {width: min(1280px, calc(100% - 80px));}
h1, h2, h3, p, a, button, label, strong, summary {overflow-wrap: anywhere;}
h2 {font-size: clamp(2.5rem, 4.4vw, 3.75rem); line-height: 1.12; letter-spacing: -.045em;}
h3 {font-size: 1.625rem; line-height: 1.3; letter-spacing: -.025em;}
.section-heading {grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 64px;}
.section-heading > p {font-size: var(--body-size); line-height: 1.75; max-width: 32rem;}
.eyebrow, .hero > .eyebrow, .addon-heading .eyebrow,
.estimate-card > .eyebrow, .inquiry-dialog > .eyebrow {
  font-size: var(--label-size); line-height: 1.6; letter-spacing: .08em;
}
.button, .button-small, .hero-actions .button, .package-card .button,
.estimate-card .button, .form-actions .button {
  min-height: 52px; font-size: 1rem; line-height: 1.4; padding: 14px 22px; gap: 16px;
  white-space: normal;
}
.text-link, .service-card .text-link, .project > .text-link,
.growth-services .text-link, .footer-top > .text-link {
  font-size: 1rem; line-height: 1.6; min-height: 44px;
  padding-block: 9px 7px; text-align: left;
}
button, a, summary, input, select, textarea {touch-action: manipulation;}
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--purple); outline-offset: 4px;
}
/* Header */
.nav-wrap {min-height: 104px; height: auto; padding-block: 18px; gap: 28px;}
.wordmark {font-size: 2rem; letter-spacing: -.055em; flex-shrink: 0;}
.brand-star {font-size: 2.25rem;}
.wordmark small {font-size: .875rem; letter-spacing: .035em; line-height: 1.4; margin-top: 8px;}
.nav-wrap nav {font-size: 1rem; gap: 26px; align-items: center;}
.nav-wrap nav a {padding-block: 12px; min-height: 48px;}
.nav-cta {flex-shrink: 0;}
/* Hero */
.hero h1 {font-size: clamp(3rem, 6.7vw, 6rem); line-height: 1.06; letter-spacing: -.055em;}
.serif-accent {letter-spacing: -.05em;}
.hero-intro {font-size: 1.25rem; line-height: 1.7; max-width: 52rem; margin-inline: auto;}
.hero-note, .image-caption {font-size: .9375rem; line-height: 1.7;}
.hero-note {margin-top: 22px;}
.hero > .eyebrow {max-width: 42rem; margin-inline: auto;}
.status-dot {flex-shrink: 0;}
.hero-showcase {height: 460px; margin-top: 84px;}
.showcase-top, .showcase-foot, .showcase-foot b {font-size: .875rem; line-height: 1.5; letter-spacing: 0;}
.showcase-top {padding: 8px 10px 12px;}
.showcase-top > span:nth-child(2) {text-align: center;}
.showcase-foot {padding: 12px 9px 8px; flex-wrap: wrap; gap: 2px 12px;}
.showcase-main img {height: 300px;}
.showcase-left img {height: 213px;}
.showcase-note {height: 340px; padding: 25px 22px 22px 48px;}
.showcase-note p {font-size: 2rem; line-height: 1.2; margin-top: 58px;}
.showcase-note a {font-size: .875rem; line-height: 1.5; min-height: 44px; padding-block: 8px; letter-spacing: .02em;}
.floating-label, .label-left, .label-right {font-size: .9375rem;}
.label-left {top: -48px;}
.label-right {bottom: 0; right: 30px;}
.image-caption {max-width: 52rem; margin-inline: auto;}
.platform-inner {flex-wrap: wrap; gap: 24px;}
.platform-inner > span, .platform-inner > span:last-child {font-size: .875rem; line-height: 1.6; letter-spacing: .03em; max-width: 200px;}
.platform-inner > div {font-size: 1.75rem;}
/* Services and portfolio */
.service-grid {gap: 20px;}
.service-card {padding: 26px; min-width: 0;}
.service-number {font-size: .875rem;}
.service-card h3, .project-meta h3 {font-size: 1.5rem;}
.service-card p, .project-description {font-size: var(--body-size); line-height: 1.75;}
.service-illustration {width: 100%; max-width: 230px; align-self: center; flex-shrink: 0;}
.project-visual {height: 520px; padding: 30px;}
.project-overline {font-size: .875rem; letter-spacing: .065em;}
.project-display-title {font-size: clamp(2.125rem, 3.2vw, 2.875rem); line-height: 1.1; letter-spacing: -.04em;}
.project-open {font-size: 1rem; padding-bottom: 22px;}
.project-open b {height: 44px; width: 44px; flex-shrink: 0;}
.project-meta {align-items: flex-start; flex-wrap: wrap;}
.project-meta p, .pill {font-size: .875rem; line-height: 1.6;}
.project-meta .pill {display: inline-block;}
.project-description {max-width: 38rem;}
.archive-note {font-size: .9375rem; line-height: 1.75; max-width: 56rem;}
/* Package cards and estimate */
.center-heading {max-width: 58rem;}
.center-heading > p:last-child {font-size: var(--body-size); line-height: 1.75;}
.package-tabs {width: fit-content;}
.package-tabs > button {font-size: 1rem; min-height: 52px; padding: 13px 22px; line-height: 1.4;}
.package-grid {align-items: stretch;}
.package-card {padding: 28px; min-width: 0;}
.package-kicker {font-size: .875rem; letter-spacing: .04em; margin: 0 0 16px; padding-right: 0;}
.package-card h3 {font-size: 1.625rem; min-height: 0; max-width: none; margin-bottom: 14px;}
.package-description {font-size: var(--detail-size); min-height: 0; line-height: 1.7;}
.package-price {font-size: 2.75rem; line-height: 1.25; letter-spacing: -.04em;}
.package-price.is-custom {font-size: 2.125rem;}
.package-price small, .package-price .from, .package-time {font-size: .875rem; line-height: 1.6;}
.package-price small {white-space: nowrap; display: inline-block;}
.package-time {margin-top: 14px;}
.package-features {gap: 14px; grid-template-columns: 1fr;}
.package-features li {font-size: 1rem; line-height: 1.65; padding-left: 24px;}
.package-features li:before {font-size: 1rem;}
.selected-marker {font-size: .875rem; letter-spacing: .03em; position: static; align-self: flex-start; margin-bottom: 14px; padding: 4px 9px;}
/* Reserve the same badge row on every card to align names and buttons. */
.package-card:not(.is-selected)::before {content: ''; display: block; min-height: 1.9rem; margin-bottom: 14px;}
.pricing-footnote {font-size: .9375rem; line-height: 1.75;}
.builder-layout {grid-template-columns: minmax(0,1.55fr) minmax(350px,1fr); gap: 32px;}
.addon-heading h3 {font-size: 1.875rem; line-height: 1.3;}
.addon-heading > p:last-child {font-size: var(--body-size); line-height: 1.75;}
.addon-grid {grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px;}
.addon-item {grid-template-columns: 22px minmax(0,1fr); gap: 12px; padding: 20px; min-width: 0;}
.addon-item input {width: 22px; height: 22px; margin-top: 3px;}
.addon-title, .addon-price {font-size: 1.0625rem; line-height: 1.5;}
.addon-description {font-size: 1rem; line-height: 1.7;}
.addon-label, .addon-price small {font-size: .875rem; line-height: 1.6;}
.addon-item:has(input:disabled) {opacity: 1; background: #edece6; color: #5b5d56;}
.estimate-card {top: 126px; padding: 30px; min-width: 0;}
.estimate-card h3 {font-size: 2.375rem; line-height: 1.15; letter-spacing: -.04em;}
.estimate-line {font-size: 1rem; line-height: 1.6; gap: 14px; padding-block: 13px;}
.estimate-line > span {max-width: none; min-width: 0;}
.estimate-line strong {white-space: normal; text-align: right; flex-shrink: 0; max-width: 50%;}
.estimate-totals > div {gap: 16px; flex-wrap: wrap; align-items: baseline;}
.estimate-totals > div > span, .estimate-totals strong span {font-size: 1rem;}
.estimate-totals strong {font-size: 1.875rem; line-height: 1.3; letter-spacing: -.025em; margin-left: auto;}
.estimate-totals > small, .estimate-disclaimer, .no-pressure {font-size: .9375rem; line-height: 1.75;}
.text-button, .reset-button {font-size: 1rem; line-height: 1.6; min-height: 48px; padding: 12px 0;}
/* Migration, growth, process, and FAQ */
.migration-layout {grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 64px;}
.migration-layout h2 {font-size: clamp(2.5rem,4.4vw,3.75rem);}
.migration-layout > div > p:not(.eyebrow) {font-size: var(--body-size); line-height: 1.75; max-width: 32rem;}
.migration-board {padding: 28px;}
.route {grid-template-columns: minmax(0,1fr) 22px minmax(70px,.4fr); gap: 12px; font-size: 1rem; line-height: 1.6; padding-block: 20px;}
.route > strong {font-size: 1rem;}
.route b {width: 32px; height: 32px; font-size: 1.125rem;}
.migration-checks {gap: 20px;}
.migration-checks > div > span {font-size: .875rem;}
.migration-checks p {font-size: 1rem; line-height: 1.7; color: #535b4b;}
.migration-checks b {font-size: 1.0625rem; line-height: 1.5;}
.small-note {font-size: .9375rem; line-height: 1.75; color: #595f50;}
.growth-layout {grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 60px; align-items: start;}
.growth-poster {min-height: 650px;}
.growth-services article {gap: 20px; padding-block: 30px;}
.growth-services article > div {min-width: 0;}
.growth-index {font-size: .875rem; flex-shrink: 0;}
.growth-services h3 {font-size: 1.5rem; line-height: 1.35;}
.growth-services p, .process-grid p {font-size: var(--body-size); line-height: 1.75;}
.growth-note {font-size: .9375rem; line-height: 1.75; max-width: 50rem;}
.process-grid {grid-template-columns: repeat(4,minmax(0,1fr)); gap: 28px;}
.process-grid article > span {font-size: .875rem; color: var(--muted);}
.process-grid h3 {font-size: 1.5rem; max-width: none; line-height: 1.35;}
.ai-note h3 {font-size: 1.375rem; line-height: 1.4;}
.ai-note p {font-size: 1.0625rem; line-height: 1.75;}
.faq-section {grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr); gap: 64px;}
.faq-heading > p:not(.eyebrow) {font-size: var(--body-size); line-height: 1.75;}
.faq-list summary {font-size: 1.125rem; line-height: 1.6; min-height: 48px; gap: 20px;}
.faq-list details p {font-size: 1.0625rem; line-height: 1.8; padding-right: 0;}
/* Booking, footer, and dialogs */
.booking-layout {grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 72px;}
.booking-copy h2 {font-size: clamp(3.25rem,5.6vw,5.125rem); letter-spacing: -.045em; line-height: 1.08;}
.booking-copy > p:not(.eyebrow) {font-size: var(--body-size); line-height: 1.75; max-width: 30rem; position: relative; z-index: 1;}
.booking-email {font-size: 1.0625rem; min-height: 44px; padding-block: 8px; position: relative; z-index: 1;}
.booking-card {padding: 34px; min-width: 0;}
.booking-card h3 {font-size: 2.375rem; line-height: 1.2; letter-spacing: -.04em;}
.host-mark {flex-shrink: 0;}
.meeting-header > div > span {font-size: .875rem; letter-spacing: .05em;}
.meeting-header p {font-size: 1rem; line-height: 1.6;}
.meeting-chips {gap: 10px;}
.meeting-chips > span {font-size: .875rem; padding: 7px 10px;}
.meeting-agenda > p, .meeting-agenda > div {font-size: 1rem; line-height: 1.7;}
.meeting-agenda > div {align-items: baseline; gap: 12px; margin-bottom: 16px;}
.meeting-agenda b {font-size: .875rem; color: #625674; flex-shrink: 0;}
.booking-status {font-size: .9375rem; line-height: 1.7;}
.calendly-link {font-size: 1rem; padding: 12px 0; min-height: 44px;}
.footer-top p {font-size: 1rem; line-height: 1.75;}
.footer-bottom {flex-wrap: wrap; font-size: .875rem; color: var(--muted); gap: 12px 24px; align-items: center;}
.footer-bottom > div {flex-wrap: wrap; gap: 12px 20px; margin-left: 0;}
.footer-bottom button, .footer-bottom a {font-size: .875rem; padding: 10px 0; min-height: 44px; display: inline-flex; align-items: center;}
.toast {font-size: 1rem; line-height: 1.6;}
dialog {width: min(740px,calc(100% - 32px)); max-height: 90vh; max-height: 90dvh; padding: 60px 38px 38px; overscroll-behavior: contain;}
.close-dialog {width: 48px; height: 48px; top: 10px; right: 12px; font-size: 2rem;}
.inquiry-dialog h2 {font-size: 2.5rem; line-height: 1.15; letter-spacing: -.04em;}
.dialog-intro, .project-dialog > p:not(.eyebrow) {font-size: 1.0625rem; line-height: 1.75;}
form label {font-size: 1rem; line-height: 1.6; margin-bottom: 20px; min-width: 0;}
form input:not([type=checkbox]), form textarea, form select {
  font-size: 1.0625rem; line-height: 1.5; min-height: 52px; padding: 12px; max-width: 100%;
}
form input[type=date], form input[type=time] {min-width: 0; width: 100%; -webkit-appearance: none; appearance: none;}
.form-row {grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px;}
.form-help, .consent {font-size: .9375rem; line-height: 1.75;}
.consent input {width: 22px; height: 22px; flex-shrink: 0; margin-top: 3px;}
.form-actions {gap: 12px; flex-wrap: wrap;}
.form-feedback {font-size: 1rem; line-height: 1.7;}
.project-dialog {width: min(1000px,calc(100% - 32px));}
.project-dialog h2 {font-size: 2.375rem; line-height: 1.2;}
.legal-dialog h2 {font-size: 2rem; line-height: 1.25;}
.legal-dialog h3 {font-size: 1.25rem; line-height: 1.4;}
.legal-dialog p, .legal-dialog li {font-size: 1.0625rem; line-height: 1.8;}
/* iPad landscape and smaller laptops: switch before columns become cramped. */
@media (max-width: 1199px) {
  .wrap {width: calc(100% - 64px);}
  .section {padding-block: 88px;}
  .service-grid, .process-grid {grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px;}
  .service-card {padding: 28px;}
  .service-card p {max-width: 35rem;}
  .service-illustration {margin-block: 22px; height: 160px;}
  .process-grid {gap: 40px 32px;}
  .builder-layout {grid-template-columns: minmax(0,1fr) minmax(330px,.85fr); gap: 24px;}
  .addon-grid {grid-template-columns: 1fr;}
  .migration-layout, .booking-layout, .faq-section {gap: 40px;}
  .growth-layout {gap: 36px;}
  .project-visual {height: 480px;}
  .showcase-main img {height: 280px;}
}
@media (max-width: 1099px) {
  .nav-wrap {min-height: 96px; padding-block: 16px; gap: 18px;}
  .nav-cta {margin-left: auto;}
  .menu-toggle {display: block; order: 3; min-width: 48px; min-height: 48px; padding: 12px;}
  .menu-toggle span {display: block; width: 24px; height: 2px; background: var(--ink); margin: 6px 0; transition: transform .2s;}
  .menu-toggle[aria-expanded=true] span:first-child {transform: translateY(4px) rotate(45deg);}
  .menu-toggle[aria-expanded=true] span:last-child {transform: translateY(-4px) rotate(-45deg);}
  .nav-wrap nav {position: absolute; display: none; top: 100%; left: 0; right: 0; padding: 20px 32px; border-bottom: 1px solid var(--line); background: var(--paper); flex-direction: column; gap: 0; align-items: stretch; font-size: 1.125rem; box-shadow: 0 10px 20px #2221; max-height: 70vh; max-height: 70dvh; overflow-y: auto;}
  .nav-wrap nav.is-open {display: flex;}
  .nav-wrap nav a {padding: 14px 8px;}
  .package-grid {grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px;}
  .package-card:last-child {grid-column: 1 / -1;}
  .package-card:last-child .package-features {grid-template-columns: repeat(2,minmax(0,1fr));}
  .package-card:last-child .button {max-width: 28rem; align-self: flex-start;}
  .package-card:last-child:not(.is-selected)::before {display: none;}
  .package-description {max-width: 42rem;}
  .hero-showcase {height: 440px;}
  .showcase-main {width: 70%; left: 4%;}
  .showcase-left {display: none;}
  .showcase-main img {height: 280px;}
  .showcase-note {width: 36%; top: 45px; padding-left: 55px; height: 330px;}
  .showcase-note p {font-size: 1.875rem;}
  .showcase-foot b {display: none;}
  .platform-inner > span:first-child {flex-basis: 100%; max-width: none; text-align: center;}
  .platform-inner {justify-content: center; gap: 24px 48px;}
  .platform-inner > span:last-child {display: none;}
  .estimate-card {position: static;}
}
/* iPad portrait: comfortable reading width and a full-width summary. */
@media (max-width: 899px) {
  .wrap {width: calc(100% - 48px);}
  .section-heading {grid-template-columns: 1fr; gap: 24px;}
  .section-heading > p {max-width: 42rem;}
  .hero-intro {max-width: 42rem;}
  .builder-layout {grid-template-columns: 1fr; gap: 32px;}
  .addon-grid {grid-template-columns: repeat(2,minmax(0,1fr));}
  .estimate-card {padding: 32px;}
  .estimate-line strong {max-width: 45%;}
  .migration-layout, .booking-layout, .faq-section {grid-template-columns: 1fr; gap: 40px;}
  .migration-layout > div > p:not(.eyebrow), .booking-copy > p:not(.eyebrow) {max-width: 42rem;}
  .migration-board {transform: none; margin-right: 10px;}
  .growth-layout {grid-template-columns: 1fr; gap: 36px;}
  .growth-poster {min-height: 390px;}
  .poster-circle {left: 8%; top: 35px; width: 360px; height: 360px; padding: 55px 0 0 35px; font-size: 3.5rem;}
  .poster-circle:before {width: 310px; height: 310px;}
  .poster-bottom {left: auto; right: 30px; bottom: 30px; display: block; text-align: right;}
  .poster-bottom b {display: block; margin-top: 20px;}
  .growth-services p {max-width: 44rem;}
  .booking-card {margin-right: 10px;}
  .booking-star {top: 85px; right: 30px; font-size: 150px;}
  .project-visual {height: 420px; padding: 24px;}
  .project-display-title {font-size: 2.125rem;}
  .project-screen {width: 95%; margin-left: 5%;}
  .project-dj .project-screen {margin-left: 0;}
  .project-overline {letter-spacing: .035em;}
  .footer-top {flex-wrap: wrap; align-items: flex-start;}
  .footer-top p {margin-left: auto;}
  .footer-bottom {flex-direction: column; align-items: flex-start;}
}
/* Phones, including small iPhones. No fixed card or text heights. */
@media (max-width: 700px) {
  :root {--body-size: 1.0625rem;}
  html {scroll-padding-top: 6rem;}
  .wrap {width: calc(100% - 40px);}
  .section {padding-block: 68px;}
  h2, .center-heading h2, .migration-layout h2 {font-size: clamp(2.125rem,7.5vw,2.875rem); letter-spacing: -.04em; line-height: 1.15;}
  .nav-wrap {min-height: 80px; gap: 10px; padding-block: 12px;}
  .wordmark {font-size: 1.6875rem;}
  .brand-star {font-size: 1.875rem;}
  .site-header .wordmark small {display: none;}
  .nav-cta {font-size: 1rem; min-height: 48px; padding: 10px 14px; gap: 8px;}
  .nav-wrap nav {padding-inline: 20px;}
  .hero {padding-top: 44px;}
  .hero > .eyebrow {font-size: .875rem; letter-spacing: .045em; max-width: 28rem; gap: 12px;}
  .hero h1 {font-size: clamp(2.625rem,9.8vw,4rem); letter-spacing: -.05em; margin-top: 26px;}
  .hero-intro {font-size: 1.125rem; line-height: 1.75; margin-top: 24px; max-width: 33rem;}
  .hero-actions {gap: 14px; flex-direction: column;}
  .hero-actions .button {width: min(100%,24rem); min-height: 54px;}
  .hero-note {max-width: 29rem; margin-inline: auto;}
  .hero-showcase {height: auto; margin-top: 44px; padding-block: 8px 20px;}
  .showcase-main {position: relative; top: auto; left: auto; width: 94%; margin-inline: auto; transform: rotate(-2deg);}
  .showcase-main:hover {transform: rotate(0);}
  .showcase-main img {height: auto; width: 100%; object-fit: contain;}
  .showcase-note, .floating-label {display: none;}
  .showcase-top {padding-inline: 5px; font-size: .875rem;}
  .showcase-top > span:first-child {display: none;}
  .showcase-foot {font-size: .875rem; padding: 12px 8px 8px;}
  .image-caption {font-size: .875rem; line-height: 1.7; max-width: 32rem; margin-top: 14px;}
  .platform-inner {gap: 18px 26px; padding-block: 28px;}
  .platform-inner > span:first-child {font-size: .875rem;}
  .platform-inner > div {font-size: 1.5rem;}
  .section-heading {margin-bottom: 32px;}
  .service-grid, .portfolio-grid, .package-grid, .process-grid, .addon-grid {grid-template-columns: 1fr; gap: 24px;}
  .service-card {padding: 28px;}
  .service-card h3 {font-size: 1.5rem;}
  .service-card p {font-size: var(--body-size); line-height: 1.75;}
  .service-card .text-link {font-size: 1rem;}
  .service-illustration {height: 160px; margin: 15px auto 24px;}
  .service-illustration .mini-window {width: 164px; top: 24px; left: 6px;}
  .mini-window b {font-size: 14px;}
  .mini-window i {display: block; width: 34px; height: 36px;}
  .art-orbit {font-size: 70px;}
  .refresh-old, .refresh-new {font-size: 22px; padding: 20px 13px;}
  .migrate-art > span {width: 59px; height: 59px; font-size: 29px;}
  .grow-art {height: 128px; margin-block: 31px 33px;}
  .grow-art > span {font-size: 15px;}
  .project-visual {height: auto; min-height: 420px; padding: 26px 24px 90px;}
  .project-display-title {font-size: clamp(2rem,8vw,2.75rem);}
  .project-screen {width: 85%; margin: 28px 0 0 10%;}
  .project-dj .project-screen {margin-left: 5%;}
  .project-meta h3 {font-size: 1.5rem;}
  .project-meta .pill {display: inline-block;}
  .project-description {font-size: var(--body-size);}
  .portfolio-grid {gap: 44px;}
  .package-tabs {display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; gap: 6px; padding: 6px;}
  .package-tabs > button {font-size: 1rem; padding: 13px 10px; min-height: 52px;}
  .package-card {padding: 26px;}
  .package-card h3 {font-size: 1.625rem;}
  .package-card:last-child {grid-column: auto;}
  .package-card:last-child .package-features {grid-template-columns: 1fr;}
  .package-card:last-child .button {max-width: none;}
  .package-card:not(.is-selected)::before {display: none;}
  .selected-marker {margin-bottom: 14px;}
  .package-description {font-size: 1rem;}
  .package-price {font-size: 2.625rem;}
  .pricing-footnote {text-align: left;}
  .addon-item {padding: 22px;}
  .addon-heading h3 {font-size: 1.75rem;}
  .estimate-card {padding: 26px;}
  .estimate-card h3 {font-size: 2.125rem;}
  .migration-section {padding-block: 68px;}
  .migration-board {padding: 22px;}
  .route {grid-template-columns: minmax(0,1fr) 20px minmax(66px,.45fr); gap: 8px;}
  .route > span {flex-wrap: wrap; gap: 8px;}
  .route b {display: none;}
  .growth-poster {min-height: 340px;}
  .poster-circle {left: 0; top: 30px; width: 300px; height: 300px; padding: 48px 0 0 25px; font-size: 3.125rem;}
  .poster-circle:before {width: 260px; height: 260px;}
  .poster-bottom {right: 20px; bottom: 20px;}
  .growth-services h3, .process-grid h3 {font-size: 1.5rem;}
  .growth-services article {gap: 16px;}
  .process-grid {gap: 32px;}
  .process-grid article > span {margin-bottom: 16px;}
  .ai-note {gap: 16px;}
  .ai-note > span {flex-shrink: 0; font-size: 2.25rem;}
  .ai-note h3 {font-size: 1.375rem;}
  .faq-list summary {font-size: 1.125rem;}
  .booking-copy h2 {font-size: clamp(3rem,11vw,4rem);}
  .booking-star {right: 0; top: 100px; font-size: 120px; opacity: .7;}
  .booking-card {padding: 26px;}
  .booking-card h3 {font-size: 2rem;}
  .booking-card h3 br {display: none;}
  .meeting-header {align-items: flex-start;}
  .meeting-chips > span {font-size: .875rem;}
  .meeting-agenda > p, .meeting-agenda > div {font-size: 1rem;}
  .meeting-agenda b {font-size: .875rem;}
  .site-footer {padding-bottom: calc(200px + env(safe-area-inset-bottom,0px));}
  .footer-top {flex-direction: column; gap: 24px;}
  .footer-top p {font-size: 1rem; margin-left: 0;}
  .footer-bottom {font-size: .875rem;}
  .footer-bottom button {font-size: .875rem;}
  .mobile-estimate {display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding: 12px 20px max(12px,env(safe-area-inset-bottom,0px));}
  .mobile-estimate small {font-size: .875rem; letter-spacing: .025em;}
  .mobile-estimate strong {font-size: 1.125rem; letter-spacing: 0; line-height: 1.6;}
  .mobile-estimate strong > span {font-size: .875rem;}
  .mobile-estimate .button {font-size: 1rem; min-height: 48px; padding: 12px 14px; max-width: 10rem;}
  .toast {bottom: calc(170px + env(safe-area-inset-bottom,0px)); font-size: 1rem;}
  body.modal-open .mobile-estimate {visibility: hidden;}
  dialog {padding: 66px 22px 28px; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);}
  .inquiry-dialog h2, .project-dialog h2 {font-size: 2rem;}
  .form-row {grid-template-columns: 1fr; gap: 0;}
  .form-actions {flex-direction: column;}
  .form-actions .button {width: 100%; flex: none; font-size: 1rem; white-space: normal;}
}
@media (max-width: 380px) {
  .wrap {width: calc(100% - 32px);}
  .nav-wrap {gap: 6px;}
  .site-header .wordmark {font-size: 1.5rem;}
  .site-header .brand-star {font-size: 1.625rem;}
  .nav-cta {padding-inline: 10px;}
  .nav-cta > span {display: none;}
  .menu-toggle {padding: 12px;}
  .hero > .eyebrow {font-size: .875rem;}
  .hero h1 {font-size: 2.625rem;}
  .service-card, .package-card, .estimate-card {padding: 22px;}
  .project-visual {min-height: 380px; padding: 22px 20px 85px;}
  .project-open {padding-inline: 20px;}
  .project-meta .pill {display: inline-block;}
  .booking-card {padding: 22px;}
  .meeting-header {gap: 10px;}
  .mobile-estimate {padding-inline: 16px; grid-template-columns: 1fr; gap: 8px;}
  .mobile-estimate > div {display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px;}
  .mobile-estimate .button {width: 100%; max-width: none;}
}
/* Safe areas for notched iPhones in landscape. */
@supports (padding: max(0px)) {
  @media (orientation: landscape) and (max-width: 1099px) {
    .wrap {width: auto; margin-left: max(24px,env(safe-area-inset-left)); margin-right: max(24px,env(safe-area-inset-right));}
    .nav-wrap nav {padding-left: max(24px,env(safe-area-inset-left)); padding-right: max(24px,env(safe-area-inset-right));}
  }
}
/* Leave useful vertical room on short phone screens and when a keyboard is open. */
@media (max-height: 550px) {
  .site-header {position: relative;}
  .mobile-estimate {display: none;}
  .estimate-card {position: static;}
  .toast {bottom: 16px;}
  .site-footer {padding-bottom: 40px;}
  html {scroll-padding-top: 16px;}
}
@media (hover: none) {
  .button:hover, .service-card:hover {transform: none;}
}
@media (prefers-reduced-motion: reduce) {
  html {scroll-behavior: auto;}
  *, *::before, *::after {animation: none !important; transition: none !important;}
}
@media print {
  body {font-size: 11pt;}
  .wrap {width: 100%;}
  .site-header, .mobile-estimate, .button, .menu-toggle, .toast, dialog {display: none !important;}
  .section {padding-block: 24pt;}
  .estimate-card {position: static;}
  .site-footer {padding-bottom: 20px;}
}

/* Contact hierarchy: immediate calls; appointments through the booking form. */
.appointment-link {text-decoration: underline; text-underline-offset: 4px; display: inline-block; padding-block: 8px; min-height: 44px;}
.contact-links, .footer-contact {display: flex; flex-direction: column; align-items: flex-start; gap: 10px;}
.contact-links {margin-top: 24px; position: relative; z-index: 1;}
.contact-links .booking-email {margin-top: 0;}
.booking-phone {font-size: 1.375rem; font-weight: 600; min-height: 44px; padding-block: 5px;}
.footer-contact .text-link {font-size: 1rem;}
@media(max-width:700px){.booking-phone {font-size: 1.25rem;}.footer-contact {width: 100%;}}

/* Expanded ecommerce portfolio, retaining the original framed presentation. */
.portfolio-tools {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; margin: -12px 0 32px; scroll-margin-top: 7rem;}
.portfolio-filters {display: flex; flex-wrap: wrap; gap: 8px;}
.portfolio-filters button {font-size: 1rem; min-height: 48px; padding: 10px 18px; border: 1px solid #c9c9bf; border-radius: 50px; background: transparent; line-height: 1.5;}
.portfolio-filters button[aria-pressed=true] {background: var(--ink); color: white; border-color: var(--ink);}
#portfolio-status {font-size: .9375rem; color: var(--muted);}
.project-added .project-visual {background: var(--project-tone);}
.project-visual-source {height: auto; min-height: 520px; padding: 28px 28px 92px;}
.project-visual-source .project-display-title {font-size: clamp(1.875rem,2.75vw,2.5rem); line-height: 1.15;}
.project-source-image {display: block; margin: 26px 6px 0; overflow: hidden; border: 5px solid #fff; border-radius: 9px; transform: rotate(-3deg); box-shadow: 0 12px 24px #2222; transition: transform .25s;}
.project-added:nth-child(even) .project-source-image {transform: rotate(3deg);}
.project-source-image img {display: block; width: 100%; height: auto; aspect-ratio: 1200 / 839; object-fit: contain; background: #fff;}
.project-cg .project-source-image img {aspect-ratio: 1200 / 839;}
.project-visual-source:hover .project-source-image {transform: rotate(0);}
.project-added .project-open {background: var(--project-tone); padding-top: 16px;}
.project-added .project-meta {gap: 12px;}
.portfolio-more {display: flex; justify-content: center; margin-top: 36px;}
.portfolio-more .button {min-width: 250px;}
@media(max-width:899px){.project-visual-source {padding: 24px 20px 90px; min-height: 440px;}.project-visual-source .project-display-title {font-size: 1.875rem;}.project-source-image {margin-inline: 0;}}
@media(max-width:700px){.portfolio-tools {margin-top: 0;}.portfolio-filters {display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%;}.portfolio-filters button {padding-inline: 10px;}.project-visual-source {min-height: 0; padding: 26px 22px 90px;}.project-visual-source .project-display-title {font-size: clamp(1.875rem,7vw,2.375rem);}.project-source-image {margin-top: 24px;}.portfolio-more .button {width: 100%;}}
@media(hover:none){.project-visual-source:hover .project-source-image {transform: none;}}
@media print{.portfolio-tools,.portfolio-more {display: none!important;}.portfolio-grid>.project[hidden] {display:block!important;}}