/* HomePhone 325 light, left endpoint. See doc/homepage-responsive-validation.md.
   The current business copy is retained, so sections grow with their content.
   The link is restricted to <=699px; this selector also isolates explicit light mode. */
:root[data-theme=light] .home-page #desktop-canvas {
  color:#536276;
  background:#FFFFFF;

  & > .site-header,
  & > .site-header.is-compact {
    height:77px;
    min-height:77px;
    padding:16px 24px 22.16px;
    border:0;
    background:#FFFFFF;
    transform:none;
  }
  & > .site-header .brand img,
  & > .site-header.is-compact .brand img {width:135.46px;height:38.84px}
  & > .site-header .header-controls {gap:0}
  & > .site-header .header-controls > .theme-button {display:none}
  & > .site-header .menu-button {
    width:34.29px;
    height:38.84px;
    padding:0;
    margin:0;
    align-items:center;
  }
  & > .site-header .menu-button img {width:34.29px;height:25.17px}
  & > .site-header .site-nav,
  & > .site-header.is-compact .site-nav {top:77px}
  & > .site-header .site-nav.open .theme-button {display:grid;place-items:center;align-self:flex-start}

  & .home-hero {
    height:375px;
    min-height:375px;
    padding:0 23px;
    background:#1D406B;
    display:flex;
    align-items:center;
    overflow:hidden;
  }
  & .home-hero .hero-copy.wrap {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:24px;
    width:100%;
    margin:0;
    padding:0;
  }
  & .home-hero h1 {
    max-width:282px;
    margin:0;
    color:#FFFFFF;
    font:700 40px/48px Anybody;
    letter-spacing:0;
    text-box-trim:trim-both;
    text-box-edge:cap alphabetic;
  }
  & .home-hero .hero-intro {
    width:180px;
    max-width:180px;
    margin:0;
    color:#FFFFFF;
    font:400 18px/28px Hanken;
    letter-spacing:0;
    text-box-trim:trim-both;
    text-box-edge:cap alphabetic;
  }
  & .home-hero .hero-portrait {
    position:absolute;
    inset:auto auto 0 calc(50% - 130.5px);
    width:452px;
    height:340px;
    overflow:visible;
    pointer-events:none;
  }
  & .home-hero .hero-portrait > img:first-child {
    content:url('../image/HomePhone_Headshot.webp');
    position:absolute;
    inset:auto auto 0 -93px;
    width:655.52px;
    max-width:none;
    height:360.09px;
    object-fit:fill;
    transform:none;
    clip-path:inset(20.09px 110.52px 0 93px);
  }
  & .home-hero .hero-mark {
    position:absolute;
    inset:18px auto auto 185px;
    width:332.11px;
    height:282.11px;
    max-width:none;
    transform:none;
  }
  & :is(.home-hero,.help-section,.strategy-form) .button {
    flex:none;
    width:max-content;
    max-width:100%;
    min-height:36.31px;
    height:36.31px;
    gap:4.03px;
    margin:0;
    padding:9.15px 16px 9.15px 24px;
    border:0;
    border-radius:6px;
    background:#EDA82C;
    color:#1D406B;
    font:700 14px/18px Hanken;
    letter-spacing:.05em;
    white-space:nowrap;
    box-shadow:none;
  }
& :is(.home-hero,.help-section,.strategy-form) .button:hover {background:#D48800;color:#FFFFFF}

  & .home-about {padding:0;background:#F7FAFC}
  & .home-about-grid {display:flex;flex-direction:column-reverse;width:100%;margin:0;gap:0}
  & .home-about-copy {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    width:100%;
    margin:0;
    padding:40px 23px 55px 24px;
    gap:24px;
  }
  & :is(.home-about-copy,.help-section .section-heading) .eyebrow {
    margin:0;
    color:#EDA82C;
    font:700 16px/19.2px Anybody;
    letter-spacing:0;
    text-box-trim:trim-both;
    text-box-edge:cap alphabetic;
  }
  & .home-about-copy h2 {
    margin:0;
    color:#1D406B;
    font:700 32px/38.4px Anybody;
    letter-spacing:0;
    text-box-trim:trim-both;
    text-box-edge:cap alphabetic;
  }
  & .home-about-copy .eyebrow {margin-bottom:-5px}
  & :is(.home-about-copy,.help-section .section-heading) > p.section-copy {
    width:100%;
    max-width:none;
    margin:0;
    font:400 18px/28px Hanken;
    letter-spacing:0;
    text-box-trim:trim-both;
    text-box-edge:cap alphabetic;
  }
  & .home-about-copy > p.section-copy {color:#536276}
  & .home-about-copy .text-link {
    display:inline-flex;
    align-items:center;
    max-width:100%;
    gap:3.85px;
    margin:0;
    padding:0 0 9px;
    color:#1D406B;
    font:700 14px/18px Hanken;
    letter-spacing:.05em;
    white-space:nowrap;
  }
  & .home-about-copy .text-link::before {bottom:0;height:3px;border-radius:0}
& .video-shell {width:100%;margin:0;border-radius:0}
  & .video-shell video {width:100%;aspect-ratio:16/9}
  & .video-shell .play-hint {width:45.03px;height:45.03px}

  & .metric-band {padding:40px 23px 36px 24px;background:#FFFFFF}
  & .metric-grid {display:grid;grid-template-columns:1fr;width:100%;margin:0;gap:0}
  & .metric-grid > div {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:21px;
    width:100%;
    padding:0 0 18px;
    margin:0 0 32px;
    text-align:left;
    border:0;
    border-bottom:1.5px solid #778CA6;
  }
  & .metric-grid > div:last-child {margin:0;padding:0;border:0}
  & .metric-grid strong {
    color:#1D406B;
    font:700 72px/normal Anybody;
    letter-spacing:0;
    white-space:nowrap;
    text-box-trim:trim-both;
    text-box-edge:cap alphabetic;
  }
  & .metric-grid .metric-plus {margin-left:8px}
  & .metric-grid > div > span {
    max-width:none;
    color:#1D406B;
    font:700 14px/18px Hanken;
    letter-spacing:.05em;
    text-box-trim:trim-both;
    text-box-edge:cap alphabetic;
  }
  & .metric-tooltip {left:0;max-width:100%}

  & .help-section {padding:40px 23px 54px 24px;background:#1D406B}
  & .help-layout {display:block;width:100%;margin:0;padding:0}
  & .help-section .section-heading {display:flex;flex-direction:column;align-items:flex-start;gap:24px;width:100%;max-width:none;margin:0}
  & .help-section .section-heading .eyebrow {margin-bottom:-4px}
  & .help-section .section-heading h2 {
    margin:0;
    color:#FFFFFF;
    font:700 28px/35px Anybody;
    letter-spacing:0;
    text-box-trim:trim-both;
    text-box-edge:cap alphabetic;
  }
  & .help-section .section-heading > p.section-copy {color:#FFFFFF}
  & .help-panel {display:none}

  /* Current project content replaces the placeholder testimonial. Keep its content,
     but use the measured phone gutter and type system. */
  & .representative-section {padding:48px 24px;background:#F7FAFC}
  & .representative-section > .wrap {width:100%;margin:0;padding:0}
  & .representative-section > .wrap > h2 {color:#1D406B;font:700 32px/38.4px Anybody}
  & .representative-section .project-intro {font:400 18px/28px Hanken}
  & .project-card h3 > a {font:inherit}

  & .strategy-section {padding:0 0 32px;background:#FFFFFF}
  & .strategy-title {margin:0;padding:32px 24px;background:#1D406B}
  & .strategy-title h2 {
    margin:0;
    color:#FFFFFF;
    font:700 32px/38.4px Anybody;
    letter-spacing:0;
    text-box-trim:trim-both;
    text-box-edge:cap alphabetic;
  }
  & .strategy-content {width:100%;margin:0;padding:20px 23px 0 24px}
  & .strategy-content > p {
    margin:0 0 32px;
    color:#536276;
    font:400 18px/28px Hanken;
    letter-spacing:0;
    text-align:center;
    text-box-trim:trim-both;
    text-box-edge:cap alphabetic;
  }
  & .strategy-form {width:100%;max-width:none;margin:0;gap:14px}
  & .strategy-form label:not(.sr-only) {display:grid;gap:8px;margin:0;color:#1D406B;font:700 16px/20px Hanken;letter-spacing:.05em}
  & .strategy-form .field-label {text-box-trim:trim-both;text-box-edge:cap alphabetic}
  & .strategy-form :is(input:not([type=hidden]),textarea) {
    width:100%;
    min-width:0;
    margin:0;
    padding:4px 8px;
    border:1.5px solid #1D406B;
    border-radius:6px;
    background:#FFFFFF;
    color:#536276;
    font:400 14px/18px Hanken;
    letter-spacing:0;
  }
  & .strategy-form input:not([type=hidden]) {height:28px}
  & .strategy-form textarea {height:151px;min-height:151px;resize:vertical}
  & .strategy-form .form-status:empty {display:none}
  & .strategy-form .button {justify-self:center;max-width:100%}
  & .strategy-form > .strategy-privacy-note {margin:0;color:#536276;font:400 14px/20px Hanken}

  & .contact-strip {min-height:128px;margin:0;padding:24px 23px 24px 24px;background:#1D406B;color:#FFFFFF}
  & .contact-strip .contact-block-panel {display:block;width:100%;margin:0;padding:0;border-radius:0;background:transparent}
  & .contact-strip .contact-block-portrait {display:none}
  & .contact-strip .contact-block-copy {display:flex;flex-direction:column;align-items:flex-start;gap:16px;width:100%;margin:0;padding:0}
  & .contact-strip .contact-block-title {margin:0;color:#FFFFFF;font:700 32px/38.4px Anybody;text-box-trim:trim-both;text-box-edge:cap alphabetic}
  & .contact-strip :is(.contact-block-phone,.contact-block-email) {margin:0;color:#EDA82C;font:700 18px/26.1px Hanken;letter-spacing:.05em;text-box-trim:trim-both;text-box-edge:cap alphabetic;text-decoration-thickness:0.72px;text-underline-offset:2.538px}

  & .site-footer {padding:12px 23px 24px 24px;border:0;background:#FFFFFF}
  & .site-footer .footer-grid {display:flex;flex-direction:column;align-items:flex-start;gap:24px;width:100%;margin:0;padding:0}
  & .site-footer .footer-grid > img {order:2;width:135.46px;height:38.84px}
  & .site-footer .footer-grid nav {display:flex;flex-direction:column;gap:0;width:100%;margin:0}
  & .site-footer .footer-grid nav > a {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    width:100%;
    height:53px;
    min-height:53px;
    padding:0;
    border:0;
    color:#1D406B;
    font:700 16px/20px Hanken;
    letter-spacing:.05em;
  }
  & .site-footer .footer-grid nav > a[href='/peace'] {order:-1}
  & .site-footer .footer-grid nav > a .arrow-tail::before {content:'';order:1}
  & .site-footer .footer-grid nav > a::after {bottom:0;height:1.5px;border-radius:0;background:#D9D9D9}
  & .site-footer .footer-grid nav > a.active::after {height:3px;background:#EDA82C}

}

/* Follow the system preference when no explicit theme is selected. */
@media (prefers-color-scheme:light) {
:root:not([data-theme]) .home-page #desktop-canvas {
  color:#536276;
  background:#FFFFFF;

  & > .site-header,
  & > .site-header.is-compact {
    height:77px;
    min-height:77px;
    padding:16px 24px 22.16px;
    border:0;
    background:#FFFFFF;
    transform:none;
  }
  & > .site-header .brand img,
  & > .site-header.is-compact .brand img {width:135.46px;height:38.84px}
  & > .site-header .header-controls {gap:0}
  & > .site-header .header-controls > .theme-button {display:none}
  & > .site-header .menu-button {
    width:34.29px;
    height:38.84px;
    padding:0;
    margin:0;
    align-items:center;
  }
  & > .site-header .menu-button img {width:34.29px;height:25.17px}
  & > .site-header .site-nav,
  & > .site-header.is-compact .site-nav {top:77px}
  & > .site-header .site-nav.open .theme-button {display:grid;place-items:center;align-self:flex-start}

  & .home-hero {
    height:375px;
    min-height:375px;
    padding:0 23px;
    background:#1D406B;
    display:flex;
    align-items:center;
    overflow:hidden;
  }
  & .home-hero .hero-copy.wrap {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:24px;
    width:100%;
    margin:0;
    padding:0;
  }
  & .home-hero h1 {
    max-width:282px;
    margin:0;
    color:#FFFFFF;
    font:700 40px/48px Anybody;
    letter-spacing:0;
    text-box-trim:trim-both;
    text-box-edge:cap alphabetic;
  }
  & .home-hero .hero-intro {
    width:180px;
    max-width:180px;
    margin:0;
    color:#FFFFFF;
    font:400 18px/28px Hanken;
    letter-spacing:0;
    text-box-trim:trim-both;
    text-box-edge:cap alphabetic;
  }
  & .home-hero .hero-portrait {
    position:absolute;
    inset:auto auto 0 calc(50% - 130.5px);
    width:452px;
    height:340px;
    overflow:visible;
    pointer-events:none;
  }
  & .home-hero .hero-portrait > img:first-child {
    content:url('../image/HomePhone_Headshot.webp');
    position:absolute;
    inset:auto auto 0 -93px;
    width:655.52px;
    max-width:none;
    height:360.09px;
    object-fit:fill;
    transform:none;
    clip-path:inset(20.09px 110.52px 0 93px);
  }
  & .home-hero .hero-mark {
    position:absolute;
    inset:18px auto auto 185px;
    width:332.11px;
    height:282.11px;
    max-width:none;
    transform:none;
  }
  & :is(.home-hero,.help-section,.strategy-form) .button {
    flex:none;
    width:max-content;
    max-width:100%;
    min-height:36.31px;
    height:36.31px;
    gap:4.03px;
    margin:0;
    padding:9.15px 16px 9.15px 24px;
    border:0;
    border-radius:6px;
    background:#EDA82C;
    color:#1D406B;
    font:700 14px/18px Hanken;
    letter-spacing:.05em;
    white-space:nowrap;
    box-shadow:none;
  }
& :is(.home-hero,.help-section,.strategy-form) .button:hover {background:#D48800;color:#FFFFFF}

  & .home-about {padding:0;background:#F7FAFC}
  & .home-about-grid {display:flex;flex-direction:column-reverse;width:100%;margin:0;gap:0}
  & .home-about-copy {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    width:100%;
    margin:0;
    padding:40px 23px 55px 24px;
    gap:24px;
  }
  & :is(.home-about-copy,.help-section .section-heading) .eyebrow {
    margin:0;
    color:#EDA82C;
    font:700 16px/19.2px Anybody;
    letter-spacing:0;
    text-box-trim:trim-both;
    text-box-edge:cap alphabetic;
  }
  & .home-about-copy h2 {
    margin:0;
    color:#1D406B;
    font:700 32px/38.4px Anybody;
    letter-spacing:0;
    text-box-trim:trim-both;
    text-box-edge:cap alphabetic;
  }
  & .home-about-copy .eyebrow {margin-bottom:-5px}
  & :is(.home-about-copy,.help-section .section-heading) > p.section-copy {
    width:100%;
    max-width:none;
    margin:0;
    font:400 18px/28px Hanken;
    letter-spacing:0;
    text-box-trim:trim-both;
    text-box-edge:cap alphabetic;
  }
  & .home-about-copy > p.section-copy {color:#536276}
  & .home-about-copy .text-link {
    display:inline-flex;
    align-items:center;
    max-width:100%;
    gap:3.85px;
    margin:0;
    padding:0 0 9px;
    color:#1D406B;
    font:700 14px/18px Hanken;
    letter-spacing:.05em;
    white-space:nowrap;
  }
  & .home-about-copy .text-link::before {bottom:0;height:3px;border-radius:0}
& .video-shell {width:100%;margin:0;border-radius:0}
  & .video-shell video {width:100%;aspect-ratio:16/9}
  & .video-shell .play-hint {width:45.03px;height:45.03px}

  & .metric-band {padding:40px 23px 36px 24px;background:#FFFFFF}
  & .metric-grid {display:grid;grid-template-columns:1fr;width:100%;margin:0;gap:0}
  & .metric-grid > div {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:21px;
    width:100%;
    padding:0 0 18px;
    margin:0 0 32px;
    text-align:left;
    border:0;
    border-bottom:1.5px solid #778CA6;
  }
  & .metric-grid > div:last-child {margin:0;padding:0;border:0}
  & .metric-grid strong {
    color:#1D406B;
    font:700 72px/normal Anybody;
    letter-spacing:0;
    white-space:nowrap;
    text-box-trim:trim-both;
    text-box-edge:cap alphabetic;
  }
  & .metric-grid .metric-plus {margin-left:8px}
  & .metric-grid > div > span {
    max-width:none;
    color:#1D406B;
    font:700 14px/18px Hanken;
    letter-spacing:.05em;
    text-box-trim:trim-both;
    text-box-edge:cap alphabetic;
  }
  & .metric-tooltip {left:0;max-width:100%}

  & .help-section {padding:40px 23px 54px 24px;background:#1D406B}
  & .help-layout {display:block;width:100%;margin:0;padding:0}
  & .help-section .section-heading {display:flex;flex-direction:column;align-items:flex-start;gap:24px;width:100%;max-width:none;margin:0}
  & .help-section .section-heading .eyebrow {margin-bottom:-4px}
  & .help-section .section-heading h2 {
    margin:0;
    color:#FFFFFF;
    font:700 28px/35px Anybody;
    letter-spacing:0;
    text-box-trim:trim-both;
    text-box-edge:cap alphabetic;
  }
  & .help-section .section-heading > p.section-copy {color:#FFFFFF}
  & .help-panel {display:none}

  /* Current project content replaces the placeholder testimonial. Keep its content,
     but use the measured phone gutter and type system. */
  & .representative-section {padding:48px 24px;background:#F7FAFC}
  & .representative-section > .wrap {width:100%;margin:0;padding:0}
  & .representative-section > .wrap > h2 {color:#1D406B;font:700 32px/38.4px Anybody}
  & .representative-section .project-intro {font:400 18px/28px Hanken}
  & .project-card h3 > a {font:inherit}

  & .strategy-section {padding:0 0 32px;background:#FFFFFF}
  & .strategy-title {margin:0;padding:32px 24px;background:#1D406B}
  & .strategy-title h2 {
    margin:0;
    color:#FFFFFF;
    font:700 32px/38.4px Anybody;
    letter-spacing:0;
    text-box-trim:trim-both;
    text-box-edge:cap alphabetic;
  }
  & .strategy-content {width:100%;margin:0;padding:20px 23px 0 24px}
  & .strategy-content > p {
    margin:0 0 32px;
    color:#536276;
    font:400 18px/28px Hanken;
    letter-spacing:0;
    text-align:center;
    text-box-trim:trim-both;
    text-box-edge:cap alphabetic;
  }
  & .strategy-form {width:100%;max-width:none;margin:0;gap:14px}
  & .strategy-form label:not(.sr-only) {display:grid;gap:8px;margin:0;color:#1D406B;font:700 16px/20px Hanken;letter-spacing:.05em}
  & .strategy-form .field-label {text-box-trim:trim-both;text-box-edge:cap alphabetic}
  & .strategy-form :is(input:not([type=hidden]),textarea) {
    width:100%;
    min-width:0;
    margin:0;
    padding:4px 8px;
    border:1.5px solid #1D406B;
    border-radius:6px;
    background:#FFFFFF;
    color:#536276;
    font:400 14px/18px Hanken;
    letter-spacing:0;
  }
  & .strategy-form input:not([type=hidden]) {height:28px}
  & .strategy-form textarea {height:151px;min-height:151px;resize:vertical}
  & .strategy-form .form-status:empty {display:none}
  & .strategy-form .button {justify-self:center;max-width:100%}
  & .strategy-form > .strategy-privacy-note {margin:0;color:#536276;font:400 14px/20px Hanken}

  & .contact-strip {min-height:128px;margin:0;padding:24px 23px 24px 24px;background:#1D406B;color:#FFFFFF}
  & .contact-strip .contact-block-panel {display:block;width:100%;margin:0;padding:0;border-radius:0;background:transparent}
  & .contact-strip .contact-block-portrait {display:none}
  & .contact-strip .contact-block-copy {display:flex;flex-direction:column;align-items:flex-start;gap:16px;width:100%;margin:0;padding:0}
  & .contact-strip .contact-block-title {margin:0;color:#FFFFFF;font:700 32px/38.4px Anybody;text-box-trim:trim-both;text-box-edge:cap alphabetic}
  & .contact-strip :is(.contact-block-phone,.contact-block-email) {margin:0;color:#EDA82C;font:700 18px/26.1px Hanken;letter-spacing:.05em;text-box-trim:trim-both;text-box-edge:cap alphabetic;text-decoration-thickness:0.72px;text-underline-offset:2.538px}

  & .site-footer {padding:12px 23px 24px 24px;border:0;background:#FFFFFF}
  & .site-footer .footer-grid {display:flex;flex-direction:column;align-items:flex-start;gap:24px;width:100%;margin:0;padding:0}
  & .site-footer .footer-grid > img {order:2;width:135.46px;height:38.84px}
  & .site-footer .footer-grid nav {display:flex;flex-direction:column;gap:0;width:100%;margin:0}
  & .site-footer .footer-grid nav > a {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    width:100%;
    height:53px;
    min-height:53px;
    padding:0;
    border:0;
    color:#1D406B;
    font:700 16px/20px Hanken;
    letter-spacing:.05em;
  }
  & .site-footer .footer-grid nav > a[href='/peace'] {order:-1}
  & .site-footer .footer-grid nav > a .arrow-tail::before {content:'';order:1}
  & .site-footer .footer-grid nav > a::after {bottom:0;height:1.5px;border-radius:0;background:#D9D9D9}
  & .site-footer .footer-grid nav > a.active::after {height:3px;background:#EDA82C}

}

}