:root {
            --hyas-navy: #0f2d6b;
            --hyas-navy-deep: #081b4a;
            --hyas-ink: #11285f;
            --hyas-red: #df2a1d;
            --hyas-paper: #f5f9ff;
            --hyas-line: rgba(15, 45, 107, 0.14);
            --hyas-shadow: rgba(8, 27, 74, 0.10);
        }
        html, body {
            overflow-x: clip;
        }
        img {
            max-width: 100%;
            height: auto;
        }
        body {
            background:
                radial-gradient(circle at top center, rgba(255, 255, 255, 0.98) 0%, rgba(247, 250, 255, 0.96) 46%, rgba(236, 243, 255, 0.98) 100%);
            color: var(--hyas-ink);
        }
        body::before {
            content: "";
            position: fixed;
            inset: 0;
            border: 1px solid rgba(15, 45, 107, 0.2);
            pointer-events: none;
            z-index: 80;
        }
        header {
            border-top: 4px solid var(--hyas-navy-deep);
            box-shadow: 0 16px 34px rgba(8, 27, 74, 0.06);
        }
        .brand-lockup {
            min-width: 0;
            line-height: 1;
        }
        .brand-caption {
            display: block;
            font-size: 0.62rem;
            font-weight: 900;
            letter-spacing: 0.34em;
            color: var(--hyas-navy-deep);
            margin-bottom: 0.2rem;
            white-space: nowrap;
        }
        .brand-wordmark {
            display: block;
            font-family: "Cormorant Garamond", "Times New Roman", serif;
            font-size: clamp(2.6rem, 4vw, 3.65rem);
            line-height: 0.76;
            letter-spacing: -0.08em;
            color: var(--hyas-navy-deep);
            white-space: nowrap;
        }
        .brand-dot {
            color: var(--hyas-red);
        }
        .nav-link {
            position: relative;
        }
        .nav-link::after {
            content: "";
            position: absolute;
            left: 0;
            right: 100%;
            bottom: -0.35rem;
            height: 1px;
            background: linear-gradient(90deg, var(--hyas-navy-deep), var(--hyas-red));
            transition: right 180ms ease;
        }
        .nav-link:hover::after,
        .nav-link:focus-visible::after {
            right: 0;
        }
        .header-chip {
            background: linear-gradient(180deg, #ffffff 0%, #f0f6ff 100%);
            border: 1px solid var(--hyas-line);
            box-shadow: 0 8px 18px rgba(8, 27, 74, 0.05);
        }
        .header-mail {
            background: linear-gradient(135deg, var(--hyas-navy) 0%, var(--hyas-navy-deep) 100%);
            box-shadow: 0 14px 28px rgba(8, 27, 74, 0.16);
        }
        .section-kicker {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            color: var(--hyas-navy);
            font-size: 0.72rem;
            font-weight: 900;
            letter-spacing: 0.28em;
            text-transform: uppercase;
        }
        .section-kicker::before,
        .section-kicker::after {
            content: "";
            width: 2rem;
            height: 1px;
            background: rgba(15, 45, 107, 0.28);
        }
        .hero-eyebrow {
            font-size: 0.84rem;
            font-weight: 800;
            letter-spacing: 0.22em;
            color: var(--hyas-navy);
        }
        .hero-copy-panel {
            position: relative;
            z-index: 1;
            padding: clamp(1.35rem, 3vw, 2.5rem);
            border: 1px solid rgba(15, 45, 107, 0.14);
            border-left: 6px solid var(--hyas-navy);
            border-radius: 0.4rem 2rem 2rem 0.4rem;
            background: rgba(255, 255, 255, 0.96);
            box-shadow: 0 24px 60px rgba(6, 19, 56, 0.14);
        }
        .hero-copy-panel h1 {
            color: #07142f;
            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
        }
        .hero-copy-panel .hero-description {
            color: #334155;
            font-weight: 500;
        }
        #top {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 249, 255, 0.98) 62%, rgba(236, 243, 255, 0.98) 100%);
        }
        #top::before {
            content: "";
            position: absolute;
            left: -10%;
            bottom: -18%;
            width: min(42rem, 72vw);
            height: min(31rem, 56vw);
            background: linear-gradient(145deg, var(--hyas-navy-deep) 0%, var(--hyas-navy) 100%);
            border-radius: 58% 42% 0 0 / 68% 60% 0 0;
            z-index: 0;
        }
        #top::after {
            content: "";
            position: absolute;
            left: -3%;
            bottom: 10%;
            width: min(30rem, 56vw);
            height: min(23rem, 42vw);
            background-image:
                radial-gradient(circle, rgba(136, 176, 247, 0.82) 0 2px, transparent 2.2px),
                linear-gradient(132deg, transparent 0 43%, rgba(136, 176, 247, 0.18) 43.3%, transparent 43.7%),
                linear-gradient(26deg, transparent 0 54%, rgba(136, 176, 247, 0.12) 54.3%, transparent 54.8%);
            background-size: 32px 32px, 96px 72px, 84px 62px;
            opacity: 0.42;
            clip-path: ellipse(52% 44% at 19% 80%);
            z-index: 0;
        }
        #top > div {
            position: relative;
            z-index: 1;
        }
        .hero-panel,
        .surface-card,
        .surface-card-soft {
            border: 1px solid var(--hyas-line);
            box-shadow: 0 24px 48px var(--hyas-shadow);
            backdrop-filter: blur(12px);
        }
        .hero-panel {
            background: rgba(255, 255, 255, 0.82);
        }
        .surface-card {
            background: rgba(255, 255, 255, 0.86);
        }
        .surface-card-soft {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(246, 250, 255, 0.96) 100%);
        }
        .hero-divider {
            height: 1px;
            background: linear-gradient(90deg, rgba(15, 45, 107, 0) 0%, rgba(15, 45, 107, 0.45) 14%, rgba(15, 45, 107, 0.18) 100%);
        }
        .hero-service-tile {
            position: relative;
        }
        .hero-service-tile::before {
            content: "";
            position: absolute;
            left: -0.75rem;
            top: 0.4rem;
            bottom: 0.4rem;
            width: 1px;
            background: rgba(15, 45, 107, 0.16);
        }
        .hero-service-tile::before {
            display: none;
        }
        .hero-service-tile:first-child::before {
            display: none;
        }
        .credential-row {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            padding: 1rem 0;
            border-top: 1px dotted rgba(15, 45, 107, 0.28);
        }
        .credential-row:first-child {
            padding-top: 0;
            border-top: none;
        }
        .credential-badge {
            width: 3rem;
            height: 3rem;
            border-radius: 999px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, var(--hyas-navy) 0%, var(--hyas-navy-deep) 100%);
            color: #ffffff;
            box-shadow: 0 12px 22px rgba(8, 27, 74, 0.18);
        }
        #services,
        #combination,
        #portfolio,
        #profile,
        #faq,
        #contact,
        #pricing {
            background-color: transparent;
        }
        #services .group,
        #combination .grid > div,
        #portfolio .portfolio-item,
        #faq .border,
        #profile .surface-card,
        #contact .contact-form-card {
            box-shadow: 0 18px 42px rgba(8, 27, 74, 0.08);
        }
        #pricing .pricing-box,
        #pricing .pricing-subbox {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(246, 250, 255, 0.97) 100%);
            border: 1px solid var(--hyas-line);
            box-shadow: 0 18px 42px rgba(8, 27, 74, 0.08);
        }
        #pricing .pricing-good,
        #pricing .pricing-note {
            border: 1px solid rgba(15, 45, 107, 0.12);
            background: rgba(15, 45, 107, 0.06);
            color: var(--hyas-ink);
        }
        #contact {
            background: linear-gradient(180deg, rgba(247, 250, 255, 0.98) 0%, rgba(236, 243, 255, 0.98) 100%);
            color: var(--hyas-ink);
        }
        .contact-direct-card {
            border: 1px solid var(--hyas-line);
            box-shadow: 0 18px 42px rgba(8, 27, 74, 0.08);
        }
        .contact-direct-card-primary {
            background: linear-gradient(145deg, var(--hyas-navy-deep) 0%, var(--hyas-navy) 100%);
            border-color: rgba(255, 255, 255, 0.12);
        }
        .contact-direct-card-secondary,
        .contact-direct-card-note {
            background: rgba(255, 255, 255, 0.86);
        }
        .contact-form-card {
            background: rgba(255, 255, 255, 0.92);
            border: 1px solid var(--hyas-line);
        }
        #portfolioGrid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1rem;
        }
        #portfolio .portfolio-case {
            min-width: 0;
            display: grid;
            grid-template-columns: minmax(9rem, 35%) minmax(0, 1fr);
            overflow: hidden;
            border: 1px solid rgba(15, 45, 107, 0.12);
            border-radius: 1.4rem;
            background: rgba(255, 255, 255, 0.98);
            box-shadow: 0 16px 38px rgba(8, 27, 74, 0.08);
            transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
        }
        #portfolio .portfolio-case:hover {
            transform: translateY(-3px);
            border-color: rgba(37, 99, 235, 0.28);
            box-shadow: 0 24px 48px rgba(8, 27, 74, 0.13);
        }
        #portfolio .portfolio-case--featured {
            grid-column: 1 / -1;
            grid-template-columns: minmax(18rem, 40%) minmax(0, 1fr);
        }
        #portfolio .portfolio-case-media {
            position: relative;
            min-height: 13rem;
            overflow: hidden;
            background: linear-gradient(145deg, #e7eef9 0%, #cad9ef 100%);
            border-right: 1px solid rgba(15, 45, 107, 0.08);
        }
        #portfolio .portfolio-case--featured .portfolio-case-media {
            min-height: 16rem;
        }
        #portfolio .portfolio-case-media::after {
            content: "";
            position: absolute;
            inset: auto 0 0;
            height: 34%;
            background: linear-gradient(180deg, transparent 0%, rgba(5, 20, 51, 0.3) 100%);
            pointer-events: none;
        }
        #portfolio .portfolio-case-media img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top center;
            transition: transform 260ms ease;
        }
        #portfolio .portfolio-case:hover .portfolio-case-media img {
            transform: scale(1.025);
        }
        #portfolio .portfolio-case-number {
            position: absolute;
            z-index: 2;
            left: 0.8rem;
            bottom: 0.65rem;
            font-family: "Cormorant Garamond", serif;
            font-size: 1.45rem;
            line-height: 1;
            font-weight: 700;
            letter-spacing: 0.06em;
            color: #fff;
            text-shadow: 0 2px 12px rgba(5, 20, 51, 0.45);
        }
        #portfolio .portfolio-case-content {
            min-width: 0;
            padding: 1.25rem;
            display: flex;
            flex-direction: column;
        }
        #portfolio .portfolio-case--featured .portfolio-case-content {
            padding: 1.6rem;
            justify-content: center;
        }
        #portfolio .portfolio-case-labels {
            display: flex;
            flex-wrap: wrap;
            gap: 0.45rem;
        }
        #portfolio .portfolio-case-label {
            display: inline-flex;
            align-items: center;
            gap: 0.38rem;
            padding: 0.3rem 0.66rem;
            border-radius: 999px;
            border: 1px solid rgba(15, 45, 107, 0.1);
            background: #f5f8fd;
            color: #536889;
            font-size: 0.64rem;
            font-weight: 900;
        }
        #portfolio .portfolio-case-label--primary { color: #123c78; background: #eaf3ff; border-color: #c7defd; }
        #portfolio .portfolio-case-label--medical { color: #0c5d7e; background: #e8f8fc; border-color: #bde8f2; }
        #portfolio .portfolio-case-label--salon { color: #8b4e42; background: #fff2ed; border-color: #f5d1c4; }
        #portfolio .portfolio-case-label--shrine { color: #76531d; background: #fff8e8; border-color: #ecd7a9; }
        #portfolio .portfolio-case-label--editorial { color: #36557a; background: #edf4fb; border-color: #cfdfef; }
        #portfolio .portfolio-case-label--event { color: #8a4512; background: #fff4e8; border-color: #f5d5ae; }
        #portfolio .portfolio-case h3 {
            margin-top: 0.72rem;
            color: #0d1f46;
            font-size: 1.08rem;
            line-height: 1.35;
            font-weight: 900;
        }
        #portfolio .portfolio-case--featured h3 {
            font-size: clamp(1.35rem, 2.6vw, 1.85rem);
        }
        #portfolio .portfolio-case-content > p {
            margin-top: 0.55rem;
            color: #586b88;
            font-size: 0.8rem;
            line-height: 1.75;
        }
        #portfolio .portfolio-case--featured .portfolio-case-content > p {
            font-size: 0.9rem;
        }
        #portfolio .portfolio-case-points {
            display: flex;
            flex-wrap: wrap;
            gap: 0.45rem 0.85rem;
            margin-top: 0.85rem;
            color: #294271;
            font-size: 0.69rem;
            font-weight: 800;
        }
        #portfolio .portfolio-case-points li {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
        }
        #portfolio .portfolio-case-points i {
            color: #2563a9;
        }
        #portfolio .portfolio-case-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            margin-top: auto;
            padding-top: 0.9rem;
        }
        #portfolio .portfolio-case-footer > span {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #7a8ca8;
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: 0.62rem;
            white-space: nowrap;
        }
        #portfolio .portfolio-case-footer a {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            padding: 0.52rem 0.72rem;
            border: 1px solid #c8dcf4;
            border-radius: 0.72rem;
            background: #eef6ff;
            color: #123c78;
            font-size: 0.68rem;
            font-weight: 900;
            transition: background-color 160ms ease, border-color 160ms ease;
        }
        #portfolio .portfolio-case-footer a:hover {
            border-color: #8ab5e6;
            background: #dfeeff;
        }
        #portfolio .portfolio-history {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            align-items: center;
            gap: 1rem;
            padding: 1.2rem 1.35rem;
            border: 1px dashed rgba(15, 45, 107, 0.2);
            border-radius: 1.25rem;
            background: linear-gradient(135deg, #f7faff 0%, #eef4fc 100%);
        }
        #portfolio .portfolio-history-icon {
            width: 3.2rem;
            height: 3.2rem;
            border-radius: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #123c78;
            color: #fff;
            box-shadow: 0 10px 24px rgba(18, 60, 120, 0.2);
        }
        #portfolio .portfolio-history span {
            color: #52709a;
            font-size: 0.62rem;
            font-weight: 900;
            letter-spacing: 0.14em;
        }
        #portfolio .portfolio-history h3 {
            margin-top: 0.2rem;
            color: #102d6f;
            font-size: 1rem;
            font-weight: 900;
        }
        #portfolio .portfolio-history p {
            margin-top: 0.3rem;
            color: #60718d;
            font-size: 0.78rem;
            line-height: 1.7;
        }
        .profile-photo {
            background: linear-gradient(145deg, #0f2d6b 0%, #173d82 52%, #2c67a5 100%);
        }
        .profile-photo-fallback {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #fff;
        }
        .profile-photo-fallback b {
            font-family: "Cormorant Garamond", serif;
            font-size: 4.5rem;
            line-height: .9;
            letter-spacing: -.05em;
        }
        .profile-photo-fallback small {
            margin-top: .75rem;
            font-size: .65rem;
            font-weight: 900;
            letter-spacing: .28em;
            opacity: .76;
        }
        @media (max-width: 900px) {
            #portfolioGrid {
                grid-template-columns: 1fr;
            }
            #portfolio .portfolio-case,
            #portfolio .portfolio-case--featured {
                grid-column: auto;
                grid-template-columns: minmax(10rem, 34%) minmax(0, 1fr);
            }
            #portfolio .portfolio-case--featured .portfolio-case-media {
                min-height: 13rem;
            }
        }
        @media (max-width: 560px) {
            #portfolio .portfolio-case,
            #portfolio .portfolio-case--featured {
                grid-template-columns: 7.2rem minmax(0, 1fr);
                border-radius: 1.1rem;
            }
            #portfolio .portfolio-case-media,
            #portfolio .portfolio-case--featured .portfolio-case-media {
                min-height: 100%;
            }
            #portfolio .portfolio-case-content,
            #portfolio .portfolio-case--featured .portfolio-case-content {
                padding: 1rem;
            }
            #portfolio .portfolio-case--featured h3,
            #portfolio .portfolio-case h3 {
                font-size: 1rem;
            }
            #portfolio .portfolio-case--featured .portfolio-case-content > p,
            #portfolio .portfolio-case-content > p {
                font-size: 0.75rem;
                line-height: 1.65;
            }
            #portfolio .portfolio-case-points {
                gap: 0.4rem 0.65rem;
            }
            #portfolio .portfolio-case-footer {
                align-items: flex-end;
            }
            #portfolio .portfolio-case-footer > span {
                display: none;
            }
            #portfolio .portfolio-case-footer a {
                margin-left: auto;
            }
            #portfolio .portfolio-history {
                grid-template-columns: 1fr;
                gap: 0.75rem;
            }
        }
        @media (max-width: 639px) {
            .brand-caption {
                font-size: 0.54rem;
                letter-spacing: 0.26em;
            }
            .brand-wordmark {
                font-size: 2.35rem;
            }
            #top::before {
                left: -26%;
                bottom: -12%;
                width: 26rem;
                height: 18rem;
            }
            #top::after {
                left: -18%;
                bottom: 14%;
                width: 18rem;
                height: 13rem;
            }
        }
        @media (max-width: 390px) {
            .hero-copy-panel {
                padding: 1.2rem 1rem;
                border-left-width: 4px;
                border-radius: 0.35rem 1.35rem 1.35rem 0.35rem;
            }
            .hero-eyebrow {
                font-size: 0.72rem;
                letter-spacing: 0.14em;
            }
            .section-kicker {
                gap: 0.45rem;
                font-size: 0.64rem;
                letter-spacing: 0.18em;
            }
            .section-kicker::before,
            .section-kicker::after {
                width: 1.2rem;
            }
            #top h1 {
                font-size: 2rem !important;
                line-height: 1.12 !important;
                letter-spacing: 0.01em !important;
            }
            .hero-location-badge {
                width: 100%;
                justify-content: center;
                text-align: center;
                flex-wrap: wrap;
            }
            .hero-feature-grid {
                gap: 0.65rem;
            }
            .hero-feature-label {
                font-size: 0.68rem;
                line-height: 1.35;
            }
            .hero-cta-button {
                padding: 0.95rem 1rem;
                gap: 0.8rem;
            }
            .hero-cta-meta {
                min-width: 0;
            }
            .hero-cta-title {
                font-size: 0.95rem;
                line-height: 1.35;
                letter-spacing: 0;
            }
            .hero-summary-card {
                padding: 1.2rem;
            }
            .hero-summary-header {
                flex-direction: column;
                align-items: flex-start;
            }
            .hero-summary-brand {
                text-align: left;
            }
            .hero-summary-brand .brand-caption {
                letter-spacing: 0.18em;
            }
            .hero-summary-brand .brand-wordmark {
                font-size: 2rem !important;
            }
            .hero-price-copy {
                font-size: 0.68rem;
                letter-spacing: 0.12em;
            }
            .hero-service-grid {
                gap: 0.75rem;
            }
            .hero-service-label {
                font-size: 0.78rem;
                line-height: 1.3;
            }
            .hero-credentials {
                font-size: 0.95rem;
            }
            .credential-row {
                gap: 0.75rem;
            }
            .mobile-bottom-cta {
                padding: 0.55rem;
                gap: 0.55rem;
            }
            .mobile-bottom-cta a {
                font-size: 0.7rem;
                line-height: 1.2;
                padding-top: 0.8rem;
                padding-bottom: 0.8rem;
            }
        }
        @media (min-width: 640px) {
            .hero-service-tile::before {
                display: block;
            }
        }

/* Keep the eight portfolio examples equally sized; history is the final row. */
#portfolioGrid { grid-template-rows: repeat(4, 1fr) auto; }
#portfolio .portfolio-case-media img { position: absolute; inset: 0; }
@media (max-width: 900px) {
    #portfolioGrid { grid-template-rows: repeat(8, 1fr) auto; }
}
/* Direct links beneath the service overview. */
.service-menu{position:relative}.service-menu-heading{display:flex;align-items:center;gap:2px;white-space:nowrap}.service-menu-toggle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;border:0;border-radius:8px;background:transparent;color:#0f2d6b;cursor:pointer;font-size:20px}.service-menu-toggle:hover{background:#e6f0ff}.service-menu-toggle[aria-expanded="true"] span{transform:rotate(180deg)}.service-menu-links{list-style:none;margin:0;padding:8px;border:1px solid #dbe3ef;border-radius:12px;background:#fff;box-shadow:0 12px 28px #081b4a1a}.service-menu-links[hidden]{display:none}.service-menu-desktop .service-menu-links{position:absolute;top:100%;left:0;min-width:230px}.service-menu-links a{display:flex;align-items:center;gap:12px;min-height:44px;padding:12px;border-radius:7px;color:#11285f;font-size:14px;white-space:nowrap}.service-menu-links a:hover{background:#f0f5fc}.service-menu-number{font-size:11px;color:#64748b}.service-menu a:focus-visible,.service-menu-toggle:focus-visible{outline:2px solid #173d82;outline-offset:2px}.service-menu-mobile .service-menu-heading{justify-content:space-between}.service-menu-mobile .service-menu-heading>a{flex:1;padding:12px}.service-menu-mobile .service-menu-links{margin:0 0 8px 16px;box-shadow:none;background:#f5f9ff;border-left:3px solid #cadcff}.service-menu-mobile .service-menu-toggle{margin-right:4px}#mobileMenu{max-height:calc(100dvh - 80px);overflow-y:auto;overscroll-behavior:contain}
@media(min-width:768px) and (max-width:1279px){header nav.hidden.md\:flex,header div.hidden.md\:flex{display:none}#mobileMenuBtn{display:block}#mobileMenu:not(.hidden){display:block}}

.home-web-pricing{margin-bottom:24px;padding:20px;border:1px solid #cadcff;border-radius:16px;background:#f5f9ff}.home-web-pricing h4{margin:0 0 12px;font-size:15px;font-weight:700;color:#11285f}.home-web-pricing h4 span{display:inline-block;margin-left:8px;font-size:11px;font-weight:400;color:#64748b}.home-web-pricing dl{margin:0}.home-web-pricing dl>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid #dbe3ef}.home-web-pricing dt{font-size:13px;font-weight:700}.home-web-pricing dd{margin:0;white-space:nowrap;font-size:12px;color:#0b2358}.home-web-pricing dd strong{font-size:23px;font-weight:900}.home-web-pricing p{font-size:11px;line-height:1.9;color:#64748b;margin:12px 0}.home-web-pricing>a{display:inline-block;font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:4px;color:#0f2d6b}.home-web-pricing>a:focus-visible{outline:2px solid #173d82;outline-offset:4px}
@media(max-width:380px){.home-web-pricing{padding:16px}.home-web-pricing dl>div{flex-wrap:wrap;gap:4px}.home-web-pricing dd{margin-left:auto}}