/* Island Commercial only. Load AFTER new style/contact and retained CSS.
   Keep the browser's preferred root size; improve reading text, not hero scale. */
:root {
  --ic-read-body: clamp(1.125rem, 1.03rem + .2vw, 1.25rem);
  --ic-read-label: 1rem;
  --ic-read-small: 1rem;
  --ic-read-leading: 1.7;
  /* The retained commercial stylesheet already consumes these four tokens. */
  --read-body: var(--ic-read-body);
  --read-label: var(--ic-read-label);
  --read-small: var(--ic-read-small);
  --read-leading: var(--ic-read-leading);
}

html { font-size: 100%; scroll-padding-top: 8rem; }
html:lang(zh) { --ic-read-leading: 1.75; }
body, .ic-site { font-size: var(--ic-read-body); line-height: var(--ic-read-leading); }

/* New pages: body copy must win against the earlier 9–15px component rules. */
.hero-bottom > div > p:last-child,
.section-lead > p,
.service-answer p,
.lens > p,
.advisor-name > p:not(.overline),
.advisor-why > p,
.role-explainer > p,
.contact-area > p,
.contact-promise,
.service-body p,
.service-body li,
.document p,
.document li,
.regional-guides > p {
  font-size: var(--ic-read-body);
  line-height: var(--ic-read-leading);
}
.service-answer h3 { font-size: 1.25rem; line-height: 1.45; }
.big-copy { font-size: clamp(1.25rem, 1.1rem + .3vw, 1.5rem); line-height: 1.6; }
.service-hero > p:not(.overline) { font-size: 1.25rem; line-height: var(--ic-read-leading); }
.service-body h2, .document h2 { font-size: 1.625rem; line-height: 1.4; }
.service-answer p, .lens > p { max-width: 58ch; }
.service-body p, .document p, .document li { max-width: 65ch; }

/* Labels, navigation, controls and supporting links are real reading text. */
.overline,
.section-lead .overline,
.perspective-intro .overline,
.advisor-name .overline,
.contact-area .overline,
.contact-area .contact-region,
.enquiry .overline,
.service-hero .overline,
.hero-topline,
.hero-category,
.service-num,
.space-caption,
.scroll-cue,
.back-link,
.area-link,
.team-link,
.service-detail,
.service-body figcaption,
.motion-control,
.film-control {
  font-size: var(--ic-read-small);
  line-height: 1.55;
  letter-spacing: .035em;
}
.hero-category { letter-spacing: .045em; }
.overline, .hero-topline, .hero-category, .space-caption { overflow-wrap: break-word; }
.service-num { min-width: 1.6rem; }
.hero-topline { gap: 1rem 2rem; flex-wrap: wrap; }
.scroll-cue { letter-spacing: 0; }
.header nav,
.header nav > a,
.nav-services > summary,
.nav-panel a,
.nav-panel a:last-child,
.cta,
.hero-bottom .cta,
.line-link,
.service-answer .line-link,
.advisor-why .line-link,
.lens summary,
.role-explainer > summary,
.regional-guides > a {
  font-size: var(--ic-read-label);
  line-height: 1.5;
}
.cta, .line-link, .team-link, .area-link, .header-contact {
  white-space: normal;
  overflow-wrap: break-word;
  max-width: 100%;
}
.cta { gap: clamp(1rem, 3vw, 2.25rem); }
.cta > span, .line-link > span, .option-arrow, .header-contact > span { flex-shrink: 0; }
.service-option summary { font-size: 1.25rem; line-height: 1.45; min-height: 4.5rem; }
.lens summary, .role-explainer > summary { min-height: 3rem; }
.service-detail, .team-link { display: inline-flex; align-items: center; min-height: 2.75rem; }
.motion-control, .film-control { min-height: 2.75rem; padding: .6rem .8rem; }
.motion-control { max-width: calc(100% - 1.5rem); letter-spacing: 0; }
.contact-direct a { font-size: 1.125rem; overflow-wrap: anywhere; }
.contact-direct a:first-child { font-size: 1.5rem; }
.contact-direct a > span { flex-shrink: 0; }

/* Preserve the wordmark but stop shrinking its brokerage disclosure. */
.brand { min-width: 0; flex-shrink: 1; }
.brand-words { font-size: 1.25rem; line-height: 1.05; min-width: 0; }
.brokerage-name { font-size: 1rem; line-height: 1.35; letter-spacing: 0; white-space: normal; }
.header { height: auto; min-height: 6.5rem; gap: 1.25rem; padding-block: .75rem; }
.header nav { gap: clamp(1rem, 2vw, 2rem); min-width: 0; }
.header nav > a, .nav-services > summary { min-height: 2.75rem; }
.header-contact { gap: 1rem; }
.nav-panel { width: min(25rem, 90vw); }
.nav-panel a { gap: 1rem; min-height: 3rem; }

/* Do not set a larger hero font-size. Let content grow instead of clipping. */
.hero { height: auto; min-height: max(100svh, 49.375rem); }
.hero h1 { white-space: normal; }
.hero-bottom { flex-wrap: wrap; gap: 1.5rem 2rem; }
.hero-bottom > div { min-width: 0; max-width: 42rem; }
.hero-bottom .cta { flex-shrink: 0; }
.services { gap: 8%; padding-top: 7rem; padding-bottom: 6.5rem; }
.perspective { gap: 3rem 7%; padding-top: 5.5rem; }
.perspective-copy { padding-top: 3.25rem; }
.advisor { grid-template-columns: minmax(8rem, .7fr) minmax(0, .9fr) minmax(0, 1.3fr); gap: 2rem; padding-block: 2.75rem; }
.contact { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 6%; padding-block: 6rem; }
.section-lead, .service-selector, .perspective-intro, .perspective-copy,
.advisor-name, .advisor-why, .contact-area, .enquiry-wrap,
.service-body > *, .document-grid > * { min-width: 0; }
.service-body { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6%; }
.document-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 6%; }
.title-phrase { max-width: 100%; white-space: normal; overflow-wrap: break-word; }
main h1, main h2, main h3 { overflow-wrap: break-word; word-break: normal; }

/* Both contact implementations: same reading floor, no changed fields. */
.enquiry label, .ic-field label { font-size: 1rem; line-height: 1.5; }
.enquiry label { gap: .5rem; margin-bottom: 1rem; }
.enquiry input, .enquiry select, .enquiry textarea,
.ic-field input, .ic-field select, .ic-field textarea {
  font-size: 1.125rem;
  line-height: 1.55;
  min-height: 3rem;
  min-width: 0;
  height: auto;
}
.enquiry input, .enquiry select, .enquiry textarea { padding-block: .5rem; }
.enquiry textarea, .ic-field textarea { min-height: 7rem; resize: vertical; }
.enquiry input::placeholder, .enquiry textarea::placeholder { color: #596651; opacity: 1; }
.field-row, .ic-field-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.enquiry .contact-consent,
.enquiry .form-notice,
.enquiry .form-result,
.enquiry noscript p,
.ic-consent,
.ic-help,
.ic-form-status,
.ic-response {
  font-size: 1rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.enquiry .contact-consent { grid-template-columns: 1.3rem minmax(0, 1fr); gap: .75rem; }
.enquiry .contact-consent input {
  width: 1.3rem;
  height: 1.3rem;
  min-height: 0;
  padding: 0;
  margin-top: .2rem;
}
.enquiry .form-button, .ic-form > .ic-button { font-size: 1.125rem; min-height: 3.25rem; }
.enquiry-wrap { padding: 2rem; }
.contact-promise { margin-bottom: 1.25rem; }

/* Footnotes stay readable; flex/grid may wrap rather than squeezing them. */
.footer-links,
.footer-links > a,
.footer-bottom,
.footer-bottom p,
.footer-bottom > span,
.footer-bottom > a,
.ic-footer strong,
.ic-footer p:not(.ic-kicker),
.ic-footer a,
.ic-footer-bottom {
  font-size: 1rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.footer-main { gap: 2.5rem; flex-wrap: wrap; }
.footer-links { flex: 1 1 32rem; width: auto; max-width: 46rem; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 2rem; }
.footer-links > a { min-height: 2.75rem; padding-block: .35rem; }
.footer-bottom, .ic-footer-bottom { flex-wrap: wrap; align-items: flex-start; gap: 1rem 2rem; }
.footer { padding-bottom: 5.5rem; }

/* Retained commercial guides use their existing .ic-* structure. */
.ic-article section > p, .ic-article li, .ic-contact-intro,
.ic-form-intro, .ic-form [data-plan-context] {
  font-size: var(--ic-read-body);
  line-height: var(--ic-read-leading);
}
.ic-article { max-width: 60rem; }
.ic-article-lede { font-size: 1.375rem; line-height: 1.7; }
.ic-article-links > a { font-size: 1.125rem; line-height: 1.65; overflow-wrap: anywhere; }
.ic-brand { font-size: 1rem; letter-spacing: .04em; min-width: 0; }
.ic-brand small { font-size: 1rem; line-height: 1.4; letter-spacing: 0; }
.ic-brand > span:last-child { min-width: 0; }
.ic-desktop-nav, .ic-mobile-nav nav, .ic-button, .ic-text-link,
.ic-breadcrumb, .ic-mobile-dock > a { font-size: 1rem; line-height: 1.5; }
.ic-header-inner { min-height: 6.5rem; height: auto; }
.ic-button { white-space: normal; max-width: 100%; gap: 1rem; }
.ic-email { font-size: 1.125rem; overflow-wrap: anywhere; }
.ic-contact-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 3rem; }
.ic-form, .ic-contact-grid > *, .ic-footer-grid > * { min-width: 0; }

@media (max-width: 75rem) {
  .contact { grid-template-columns: 1fr; gap: 2.5rem; }
  .contact h2 { max-width: 12ch; }
  .contact-area > p { max-width: 48ch; }
  .enquiry-wrap { width: 100%; max-width: 48rem; margin-top: 0; }
  .ic-contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 60rem) {
  html { scroll-padding-top: 7.5rem; }
  .header { min-height: 6rem; flex-wrap: nowrap; gap: 1rem; padding-inline: 4%; }
  .header nav { flex: 0 1 auto; justify-content: flex-end; gap: 1rem; }
  .nav-services > summary { gap: .75rem; }
  .header-contact { padding: .5rem .625rem; }
  .nav-panel { left: auto; right: 0; top: calc(100% + .5rem); max-height: calc(100svh - 8rem); overflow-y: auto; }
  .hero { padding-top: 9rem; }
  .film-control { position: relative; top: auto; right: auto; align-self: flex-end; margin: .75rem 0 0; }
  .hero h1 { margin-block: 2rem; }
  .services { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 5%; padding-top: 5rem; }
  .service-answer { padding-left: 0; }
  .perspective { grid-template-columns: 1fr; gap: 2rem; }
  .perspective-copy { padding-top: 0; }
  .advisor { grid-template-columns: minmax(7rem, .6fr) minmax(0, 1fr); gap: 1.5rem; }
  .advisor-why { grid-column: 1 / -1; }
  .service-page, .document { padding-top: 9rem; }
  .service-body, .document-grid { grid-template-columns: 1fr; gap: 2rem; }
  .service-body figure { position: relative; top: auto; }
  .ic-header-inner { flex-wrap: wrap; }
}

@media (max-width: 50rem) {
  html { scroll-padding-top: 8.75rem; }
  .header { flex-wrap: wrap; gap: .2rem 1rem; padding-block: .375rem; }
  .header nav { flex: 1 1 100%; flex-wrap: wrap; gap: .25rem 1rem; }
  .header nav > a:not(.header-contact), .nav-services > summary { padding-block: .5rem; }
  .header .brokerage-name { margin-top: .25rem; line-height: 1.3; }
  .nav-panel { position: fixed; top: 8.5rem; left: 4%; right: 4%; width: auto; max-height: calc(100svh - 9.5rem); }
  .hero, .service-page, .document { padding-top: 10rem; }
}

@media (max-width: 47.5rem) {
  .brand-words { font-size: 1.125rem; }
  .brokerage-name { max-width: 16rem; }
  .header nav { justify-content: space-between; gap: .25rem .75rem; }
  .header-contact { font-size: 1rem; gap: .5rem; border: 1px solid currentColor; }
  .hero { min-height: max(100svh, 43.125rem); padding-bottom: 3rem; }
  .hero-topline { gap: .5rem 1rem; letter-spacing: .025em; }
  .hero-bottom { gap: 1.5rem; }
  .hero-bottom .cta { max-width: 100%; margin-left: 0; }
  .services { display: block; min-height: 0; padding-block: 4rem 5rem; }
  .section-lead > p { margin-block: 1.5rem 2rem; }
  .service-option summary { font-size: 1.125rem; gap: .75rem; }
  .service-answer { padding-bottom: 1.5rem; }
  .space-caption { left: 7%; right: 7%; bottom: 1.5rem; gap: 1rem; }
  .perspective { padding-top: 4rem; }
  .perspective-copy { padding-top: 2rem; }
  .advisor { margin-top: 2rem; }
  .contact { padding-block: 4rem; }
  .enquiry-wrap { margin-top: 2.5rem; padding: 1.5rem; }
  .field-row, .ic-field-pair { grid-template-columns: 1fr; gap: 0; }
  .footer-main { gap: 2rem; }
  .footer-links { grid-template-columns: 1fr; width: 100%; }
  .footer .brand { margin-bottom: 1.5rem; }
  .footer-bottom { gap: 1rem; }
  .ic-wrap { padding-inline: 1.5rem; }
  .ic-brand small { max-width: 13.5rem; }
  .ic-form { padding: 1.5rem; }
}

@media (max-width: 25rem) {
  .header { padding-inline: 5%; }
  .hero, .services, .perspective, .contact, .footer,
  .service-page, .document { padding-inline: 6%; }
  .advisor { grid-template-columns: minmax(5.5rem, .55fr) minmax(0, 1fr); gap: 1rem; }
  .enquiry-wrap, .ic-form { padding: 1.25rem; }
  .ic-brand-symbol { padding-right: .5rem; font-size: 2.25rem; }
}

@media print {
  html { scroll-padding-top: 0; }
  .hero, .services, .perspective, .contact { min-height: 0; height: auto; }
  .hero, .service-page, .document { padding-top: 2rem; }
  .footer { padding-bottom: 2rem; }
}