/* This stylesheet is loaded only at desktop widths. The mobile stylesheet,
   story choreography and Three.js model remain the shared source of truth. */
@media (min-width: 1024px) {
  :root {
    --gutter: max(44px, calc((100vw - 1440px) / 2));
    --desktop-blue: #345f9f;
    --desktop-line: #dce3ed;
  }

  html { scroll-padding-top: 130px; }
  .desktop-copy { display: inline; }
  .desktop-icon { display: block; }
  .mobile-copy { display: none; }

  /* An open masthead on the page grid. The :} signature marks the current
     chapter; the dark story and scrolling content get a readable backdrop. */
  .site-header {
    --nav-text: #52627b;
    --nav-active: #345f9f;
    --header-rule: #b7c5d9;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    min-height: 108px;
    display: grid;
    grid-template-columns: minmax(178px, 1fr) minmax(0, auto) minmax(218px, 1fr);
    gap: clamp(18px, 2vw, 32px);
    padding: 25px var(--gutter);
    color: #202c40;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: color .25s, padding .25s, min-height .25s;
  }
  .site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(242, 244, 247, .94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, background .25s;
  }
  .site-header::after {
    content: '';
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    bottom: 0;
    height: 1px;
    background: var(--header-rule);
    opacity: .65;
    pointer-events: none;
    transition: background .25s;
  }
  .site-header .brand { width: 178px; }
  .desktop-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 12px;
    margin: 0;
    font-size: .875rem;
    font-weight: 600;
  }
  .desktop-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 13px 20px;
    border-radius: 3px;
    white-space: nowrap;
    line-height: 1.5;
    letter-spacing: -.015em;
    color: var(--nav-text);
    transition: color .2s;
  }
  .desktop-nav a::after { content: none; }
  .desktop-nav .nav-edge {
    position: absolute;
    top: 50%;
    display: block;
    font-family: monospace;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1;
    color: var(--nav-active);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
  }
  .nav-colon { left: 4px; transform: translate(3px, -53%); }
  .nav-brace { right: 3px; transform: translate(-3px, -50%); }
  .desktop-nav a:hover,
  .desktop-nav a:focus-visible,
  .desktop-nav a[aria-current="location"] { color: var(--nav-active); }
  .desktop-nav a:hover .nav-edge,
  .desktop-nav a:focus-visible .nav-edge,
  .desktop-nav a[aria-current="location"] .nav-edge { opacity: 1; transform: translate(0, -50%); }
  .desktop-nav a:focus-visible { outline-offset: 1px; }
  .site-header .header-contact {
    justify-self: end;
    margin: 0;
    min-height: 50px;
    max-width: 100%;
    padding: 5px 6px 5px 19px;
    gap: 18px;
    background: #416daf;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #fff;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -.015em;
    white-space: normal;
    box-shadow: inset 0 1px 0 #ffffff1a;
    transition: background .2s, color .2s;
  }
  .header-contact .brand-smile { display: none; }
  .header-contact .desktop-icon {
    width: 36px;
    height: 36px;
    padding: 9px;
    flex-shrink: 0;
    border-radius: 6px;
    background: #ffffff18;
    stroke: currentColor;
    stroke-width: 1.5;
  }
  .header-contact .desktop-icon path { transition: transform .2s; }
  .site-header .header-contact:hover { background: #345f9f; }
  .header-contact:hover .desktop-icon path { transform: translate(1px, -1px); }
  .site-header .menu-toggle { display: none; }
  .site-header.compact { top: 0; min-height: 84px; padding: 16px var(--gutter); background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .site-header.compact::before { opacity: 1; }
  .site-header.on-dark,
  .site-header.compact.on-dark {
    --nav-text: #dce5f5;
    --nav-active: #fff;
    --header-rule: #ffffff42;
    background: transparent;
    color: #fff;
  }
  .site-header.on-dark::before { background: rgba(17, 37, 82, .76); opacity: 1; }
  .site-header.compact.on-dark::before { background: rgba(16, 24, 36, .95); }
  .site-header.on-dark .header-contact { background: #f1f5fc; color: #345f9f; box-shadow: none; }
  .site-header.on-dark .header-contact .desktop-icon { background: #416daf10; }
  .site-header.on-dark .header-contact:hover { background: #dce8fa; color: #234a83; }

  /* The same moving mark, with a more deliberate balance of type and space. */
  .hero { padding: 144px var(--gutter) 124px; }
  .hero-copy { width: 55%; max-width: 800px; }
  .hero-eyebrow { color: #687891; margin-bottom: 24px; font-size: .75rem; letter-spacing: .13em; }
  .hero-eyebrow .short-rule { width: 34px; background: #648dc8; }
  .hero h1 {
    font-size: clamp(66px, min(6.6vw, 12svh), 116px);
    line-height: 1.055;
    letter-spacing: -.06em;
    font-weight: 550;
    color: #172337;
  }
  .hero h1 > span { color: #426faa; font-weight: 550; }
  .hero-description { max-width: 450px; margin-top: 28px; font-size: 1.0625rem; line-height: 1.8; color: #627085; }
  .hero-link {
    min-height: 48px;
    width: max-content;
    margin-top: 25px;
    padding: 13px 19px;
    gap: 30px;
    border: 1px solid #ccd7e5;
    border-radius: 7px;
    color: #234b7f;
    font-weight: 650;
    background: #ffffff55;
    transition: background .2s, border-color .2s;
  }
  .hero-link span { padding: 0; border: 0; }
  .hero-link:hover { background: #fff; border-color: #a7bad5; }
  .hero-link svg { width: 18px; height: 18px; }
  .object-caption {
    display: flex;
    align-items: center;
    gap: 14px;
    left: 67%;
    bottom: 115px;
    color: #6b7d97;
    font-size: .8125rem;
    letter-spacing: .01em;
  }
  .object-caption::before { content: ''; width: 26px; height: 1px; background: #8da8ce; }
  .chapter { padding: 140px var(--gutter) 112px; }
  .chapter-copy { width: 43%; max-width: 650px; }
  .enhanced .opening .chapter-copy { margin-top: 0; }
  .chapter h2 { font-size: clamp(46px, 4.5vw, 76px); line-height: 1.12; letter-spacing: -.047em; margin: 27px 0 26px; }
  .chapter-copy > p:not(.eyebrow) { max-width: 430px; font-size: 1.0625rem; line-height: 1.85; }
  .chapter-keyword { max-width: 430px; margin-top: 30px; padding-top: 18px; }
  .journey-foot { bottom: 31px; padding-top: 22px; border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
  .journey-progress { gap: 17px; }
  .progress-line { width: 145px; }
  .scroll-line { height: 22px; }

  /* Portfolio: aligned covers, useful summaries and a consistent reading grid. */
  .work-section { padding-top: 108px; background: #101824; }
  .work-section .section-head { grid-template-columns: 1fr; gap: 30px; }
  .work-section .section-head > .eyebrow { padding: 0; color: #aebbd0; }
  .work-section .section-head > div { display: grid; grid-template-columns: 1.6fr 1fr; gap: 64px; align-items: end; }
  .work-section .section-head h2 { font-size: clamp(48px, 4.55vw, 76px); line-height: 1.13; letter-spacing: -.045em; }
  .muted-word { color: #97a9c3; }
  .work-section .section-description { justify-self: end; max-width: 360px; margin: 0 0 5px; font-size: 1rem; line-height: 1.8; color: #a8b7ce; }
  .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 36px; margin-top: 60px; }
  .project-memorial { margin-top: 0; }
  .project-art { height: clamp(350px, 30vw, 460px); border: 1px solid #ffffff09; border-radius: 11px; }
  .art-vehicle { background: #fff; color: #1a2b42; }
  .art-memorial { background: #f0e8ec; }
  .art-label { top: 25px; left: 27px; letter-spacing: .075em; }
  .art-bottom { bottom: 25px; left: 27px; }
  .art-vehicle .project-image { width: 91%; height: 81%; margin-top: 2%; }
  .art-vehicle .project-image.project-image-vehicle-v2 { width: 100%; height: 100%; margin-top: 0; object-fit: cover; object-position: center 50%; filter: none; }
  .art-memorial .project-image { width: 88%; height: 81%; margin-top: 3%; }
  .project-caption { margin-top: 27px; gap: 25px; }
  .project-caption h3 { font-size: 1.6875rem; letter-spacing: -.035em; }
  .project-caption p { max-width: 510px; margin-top: 11px; font-size: 1rem; line-height: 1.8; color: #a5b2c6; }
  .project-number { padding-top: 9px; color: #8d9eb9; }
  .project-note { margin-top: 22px; border-color: #ffffff1d; }
  .project-note summary { padding: 17px 0; font-size: .875rem; color: #c5d0e1; }
  .project-note > p { padding-bottom: 22px; font-size: 1rem; color: #a9b8cf; }
  .project-pawbnb { margin-top: 0; }
  .art-pawbnb { height: 480px; grid-template-columns: 43% 57%; padding: 0 54px; background: #e5dff1; }
  .pawbnb-copy { padding-top: 101px; padding-bottom: 43px; }
  .pawbnb-copy h3 { font-size: clamp(55px, 4.5vw, 75px); }
  .pawbnb-copy > p { margin-top: 23px; }
  .pawbnb-wordmark { font-size: 1.5rem; }
  .art-pawbnb > .project-image { height: 450px; }
  .trust-strip { margin-top: 66px; padding: 50px 0 57px; grid-template-columns: 26% minmax(0, 1fr); gap: 36px; border-color: #ffffff1d; }
  .trust-strip > p { font-size: .9375rem; color: #a0afc6; }
  .trust-logos { gap: 45px; }
  .trust-logos img { height: 40px; max-width: 148px; opacity: .83; }

  /* Expertise gets a stable introduction beside the interactive service list. */
  .capabilities { display: block; padding-top: 108px; }
  .capabilities-core { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 28px; position: relative; }
  .capabilities .section-head { grid-column: 1 / 5; display: flex; flex-direction: column; gap: 27px; position: sticky; top: 142px; align-self: start; }
  .capabilities .section-head > .eyebrow { max-width: none; padding: 0; font-size: .75rem; letter-spacing: .055em; color: #62748d; }
  .capabilities .section-index { margin-right: 15px; }
  .capabilities .section-head h2 { font-size: clamp(37px, 3.05vw, 51px); line-height: 1.17; letter-spacing: -.044em; }
  .quiet-word { color: #7b8da7; }
  .capabilities .section-description { max-width: 355px; margin-top: 26px; font-size: 1rem; line-height: 1.85; color: #66778f; }
  .expertise-list { grid-column: 6 / -1; margin-top: 0; border-color: #cbd6e5; }
  .expertise { border-color: #d5deeb; }
  .expertise summary { grid-template-columns: 27px minmax(0, 1fr) 24px; gap: 8px 17px; padding: 27px 0; }
  .expertise-number { font-size: .75rem; color: #7589a5; }
  .expertise-title { font-size: clamp(23px, 1.9vw, 31px); line-height: 1.35; letter-spacing: -.035em; }
  .expertise-label { grid-column: 2; grid-row: 2; font-size: .875rem; color: #75859d; }
  .expertise .plus { grid-column: 3; grid-row: 1 / 3; width: 24px; height: 24px; color: #5d7698; }
  .expertise summary:hover .expertise-title,
  .expertise[open] .expertise-title { color: #345f9f; }
  .expertise-body { display: block; padding: 0 35px 31px 44px; }
  .expertise-body p { max-width: 570px; font-size: 1rem; line-height: 1.85; color: #66778f; }
  .expertise-body ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 20px; margin-top: 21px; font-size: .875rem; line-height: 1.65; color: #516b8e; }
  .expertise-body li::before { color: #9cb0cb; margin-right: 8px; }
  .belief { grid-column: 1 / -1; grid-template-columns: 55px 1fr auto; gap: 28px; padding: 42px 0 52px; margin-top: 74px; border-top: 1px solid #d5deeb; }
  .belief img { width: 32px; height: 57px; }
  .belief p { font-size: clamp(24px, 2vw, 31px); line-height: 1.5; color: #7485a0; }
  .belief > span { color: #7789a2; letter-spacing: .08em; }

  .contact-section { display: grid; grid-template-columns: 1.12fr 1fr; column-gap: 72px; padding-top: 54px; padding-bottom: 45px; background: #234a83; }
  .contact-top { grid-column: 1 / -1; }
  .contact-section h2 { grid-column: 1; margin-top: 58px; font-size: clamp(53px, 4.7vw, 78px); line-height: 1.14; letter-spacing: -.045em; }
  .contact-section h2 > span { color: #b0c5e3; }
  .contact-mail { grid-column: 2; align-self: end; gap: 22px; margin: 0 0 6px; padding: 0 0 18px; font-size: clamp(21px, 2.05vw, 34px); letter-spacing: -.035em; border-color: #ffffff4a; }
  .contact-mail svg { width: 38px; height: 38px; flex-shrink: 0; }
  .contact-bottom { grid-column: 1 / -1; padding-top: 31px; margin-top: 57px; border-top: 1px solid #ffffff2a; }
  .contact-bottom > p { color: #ccdaef; font-size: 1rem; }
  .contact-phone { font-size: 1.4375rem; }
  .contact-location { color: #b5c8e5; }
  .site-footer { background: #101824; padding-top: 48px; }
  .footer-main { grid-template-columns: 1fr 1fr 1.5fr auto; gap: 35px; padding-bottom: 39px; }
  .footer-brand img { width: 165px; }
  .footer-main > p,
  .footer-main address { color: #98a9c2; }
  .back-top { grid-column: auto; color: #c4d1e4; }
  .footer-bottom { padding-top: 22px; color: #8599b5; }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  :root { --gutter: 36px; }
  .site-header { grid-template-columns: minmax(158px, 1fr) minmax(0, auto) minmax(208px, 1fr); gap: 18px; }
  .site-header .brand { width: 158px; }
  .desktop-nav { column-gap: 2px; }
  .desktop-nav a { padding-inline: 17px; }
  .nav-colon { left: 1px; }
  .nav-brace { right: 0; }
  .site-header .header-contact { gap: 12px; padding-left: 15px; }
  .hero-copy { width: 57%; }
  .hero-description { max-width: 400px; }
  .object-caption { left: 65%; font-size: .75rem; }
  .chapter-copy { width: 44%; }
  .projects-grid { gap: 50px 26px; }
  .project-art { height: 350px; }
  .art-pawbnb { height: 435px; padding-inline: 36px; }
  .art-pawbnb > .project-image { height: 405px; }
  .capabilities-core { column-gap: 20px; }
  .capabilities .section-head { grid-column: 1 / 6; padding-right: 28px; }
  .expertise-list { grid-column: 6 / -1; }
  .expertise-body { padding-right: 0; }
  .expertise-body ul { grid-template-columns: 1fr; }
  .contact-section { column-gap: 40px; }
  .contact-mail { font-size: 1.375rem; gap: 12px; }
  .footer-main { gap: 24px; }
}

@media (min-width: 1024px) and (max-height: 760px) {
  .site-header { min-height: 88px; padding-block: 16px; }
  .site-header.compact { min-height: 80px; padding-block: 12px; }
  .hero { padding-top: 121px; padding-bottom: 92px; }
  .hero h1 { font-size: clamp(61px, min(6.4vw, 11.9svh), 92px); }
  .hero-eyebrow { margin-bottom: 17px; }
  .hero-description { margin-top: 21px; font-size: 1rem; line-height: 1.7; }
  .hero-link { margin-top: 20px; min-height: 43px; padding-block: 11px; }
  .object-caption { display: none; }
  .chapter { padding-top: 118px; padding-bottom: 92px; }
  .chapter h2 { font-size: clamp(44px, min(4.5vw, 8.8svh), 67px); margin-block: 20px; }
  .chapter-copy > p:not(.eyebrow) { font-size: 1rem; line-height: 1.75; }
  .chapter-keyword { margin-top: 22px; padding-top: 15px; }
  .journey-foot { bottom: 23px; padding-top: 18px; }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header::before,
  .site-header::after,
  .desktop-nav a,
  .desktop-nav .nav-edge,
  .site-header .header-contact,
  .hero-link { transition-duration: .15s; }
  .desktop-nav .nav-edge { transform: translate(0, -50%); }
  .header-contact:hover .desktop-icon path { transform: none; }
}