: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(auto-fit, minmax(290px, 1fr));
            gap: 1.5rem;
        }
        #portfolio .portfolio-card {
            overflow: hidden;
            border-radius: 1.75rem;
            border: 1px solid rgba(15, 45, 107, 0.12);
            background: rgba(255, 255, 255, 0.97);
            box-shadow: 0 24px 52px rgba(8, 27, 74, 0.10);
            transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
        }
        #portfolio .portfolio-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 30px 64px rgba(8, 27, 74, 0.14);
        }
        #portfolio .portfolio-thumb {
            position: relative;
            padding: 1rem;
            min-height: 15rem;
            overflow: hidden;
            border-bottom: 1px solid rgba(15, 45, 107, 0.08);
        }
        #portfolio .portfolio-thumb::before,
        #portfolio .portfolio-thumb::after {
            content: "";
            position: absolute;
            border-radius: 999px;
            pointer-events: none;
        }
        #portfolio .portfolio-thumb::before {
            width: 13rem;
            height: 13rem;
            top: -4.5rem;
            left: -2.5rem;
            background: rgba(255, 255, 255, 0.30);
            filter: blur(8px);
        }
        #portfolio .portfolio-thumb::after {
            width: 10rem;
            height: 10rem;
            right: -2.25rem;
            bottom: -3.75rem;
            background: rgba(255, 255, 255, 0.18);
            filter: blur(10px);
        }
        #portfolio .portfolio-card[data-category="wp"] .portfolio-thumb {
            background: linear-gradient(145deg, #eef6ff 0%, #d7e8ff 56%, #94b6ff 100%);
        }
        #portfolio .portfolio-card[data-category="html"] .portfolio-thumb {
            background: linear-gradient(145deg, #fff6ea 0%, #ffe1b3 54%, #f7b141 100%);
        }
        #portfolio .portfolio-card[data-category="free"] .portfolio-thumb {
            background: linear-gradient(145deg, #eefcf6 0%, #d2f5e3 54%, #7bd6ae 100%);
        }
        #portfolio .portfolio-thumb-top {
            position: relative;
            z-index: 2;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 0.75rem;
        }
        #portfolio .portfolio-chip,
        #portfolio .portfolio-thumb-date,
        #portfolio .portfolio-mini-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            border-radius: 999px;
            font-weight: 900;
        }
        #portfolio .portfolio-chip {
            padding: 0.48rem 0.85rem;
            font-size: 0.72rem;
            border: 1px solid rgba(255, 255, 255, 0.55);
            backdrop-filter: blur(10px);
        }
        #portfolio .portfolio-chip--wp {
            background: rgba(255, 255, 255, 0.86);
            color: #0f2d6b;
        }
        #portfolio .portfolio-chip--html {
            background: rgba(255, 250, 242, 0.94);
            color: #8a4500;
        }
        #portfolio .portfolio-chip--free {
            background: rgba(247, 255, 251, 0.94);
            color: #0d6b4b;
        }
        #portfolio .portfolio-thumb-date {
            padding: 0.45rem 0.78rem;
            font-size: 0.68rem;
            color: #294271;
            background: rgba(255, 255, 255, 0.82);
            border: 1px solid rgba(255, 255, 255, 0.56);
            text-align: right;
            line-height: 1.4;
        }
        #portfolio .portfolio-browser {
            position: relative;
            z-index: 2;
            margin-top: 1rem;
            border-radius: 1.35rem;
            overflow: hidden;
            border: 1px solid rgba(15, 45, 107, 0.10);
            background: rgba(255, 255, 255, 0.96);
            box-shadow: 0 18px 34px rgba(8, 27, 74, 0.10);
        }
        #portfolio .portfolio-browser-bar {
            display: flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.7rem 0.8rem;
            background: linear-gradient(180deg, #f8fbff 0%, #edf4ff 100%);
            border-bottom: 1px solid rgba(15, 45, 107, 0.08);
        }
        #portfolio .portfolio-browser-bar span {
            width: 0.55rem;
            height: 0.55rem;
            border-radius: 999px;
            background: #cbd5e1;
        }
        #portfolio .portfolio-browser-body {
            padding: 0.9rem;
        }
        #portfolio .portfolio-browser-body--image {
            padding: 0;
            background: #f6f9ff;
        }
        #portfolio .portfolio-shot {
            display: block;
            width: 100%;
            aspect-ratio: 16 / 10;
            object-fit: cover;
            object-position: top center;
            background: #eef3ff;
        }
        .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;
        }
        #portfolio .portfolio-browser-hero {
            display: flex;
            align-items: flex-end;
            gap: 0.8rem;
            min-height: 6.8rem;
            padding: 0.9rem;
            border-radius: 1rem;
            color: #ffffff;
        }
        #portfolio .portfolio-browser-hero--system {
            background: linear-gradient(140deg, #102d6f 0%, #294c9e 58%, #668de8 100%);
        }
        #portfolio .portfolio-browser-hero--event {
            background: linear-gradient(140deg, #15366e 0%, #2557b8 54%, #df2a1d 120%);
        }
        #portfolio .portfolio-browser-hero--editorial {
            background: linear-gradient(140deg, #234670 0%, #3e6f9b 56%, #8bb4dd 100%);
        }
        #portfolio .portfolio-browser-hero--shrine {
            background: linear-gradient(140deg, #8a4b10 0%, #c7791a 56%, #f3c979 100%);
        }
        #portfolio .portfolio-browser-hero--corporate {
            background: linear-gradient(140deg, #0f2d6b 0%, #17648b 58%, #67b0ca 100%);
        }
        #portfolio .portfolio-browser-hero--academic {
            background: linear-gradient(140deg, #23345f 0%, #4f6fab 56%, #a7bde8 100%);
        }
        #portfolio .portfolio-browser-hero--medical {
            background: linear-gradient(140deg, #0c4f76 0%, #1d83b8 54%, #87d2e7 100%);
        }
        #portfolio .portfolio-browser-hero--salon {
            background: linear-gradient(140deg, #9d5f50 0%, #d08c78 56%, #f2cfbf 100%);
        }
        #portfolio .portfolio-browser-hero--support {
            background: linear-gradient(140deg, #123c78 0%, #2667ba 54%, #77b7ff 100%);
        }
        #portfolio .portfolio-browser-hero--fan {
            background: linear-gradient(140deg, #1f4d47 0%, #25806f 54%, #8fd6b4 100%);
        }
        #portfolio .portfolio-browser-icon {
            width: 3rem;
            height: 3rem;
            border-radius: 1rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.16);
            font-size: 1.05rem;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
            flex-shrink: 0;
        }
        #portfolio .portfolio-browser-copy {
            min-width: 0;
        }
        #portfolio .portfolio-browser-label {
            font-size: 0.68rem;
            font-weight: 900;
            letter-spacing: 0.12em;
            opacity: 0.86;
        }
        #portfolio .portfolio-browser-name {
            margin-top: 0.35rem;
            font-size: 1.05rem;
            line-height: 1.25;
            font-weight: 900;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        #portfolio .portfolio-browser-strip {
            display: grid;
            gap: 0.42rem;
            margin-top: 0.8rem;
        }
        #portfolio .portfolio-browser-strip span,
        #portfolio .portfolio-browser-grid span {
            display: block;
            background: linear-gradient(180deg, rgba(15, 45, 107, 0.12) 0%, rgba(15, 45, 107, 0.06) 100%);
        }
        #portfolio .portfolio-browser-strip span {
            height: 0.5rem;
            border-radius: 999px;
        }
        #portfolio .portfolio-browser-strip .span-wide {
            width: 78%;
        }
        #portfolio .portfolio-browser-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.55rem;
            margin-top: 0.75rem;
        }
        #portfolio .portfolio-browser-grid span {
            height: 2.35rem;
            border-radius: 0.85rem;
        }
        #portfolio .portfolio-card-body {
            gap: 0;
        }
        #portfolio .portfolio-mini-chip {
            padding: 0.32rem 0.72rem;
            font-size: 0.66rem;
            color: #173d82;
            background: rgba(230, 240, 255, 0.84);
            border: 1px solid rgba(15, 45, 107, 0.10);
        }
        #portfolio .portfolio-mini-chip--ghost {
            color: #5c6f8f;
            background: rgba(245, 248, 253, 0.96);
        }
        #portfolio .portfolio-meta-list {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.75rem;
        }
        #portfolio .portfolio-meta-list div {
            padding: 0.85rem 0.9rem;
            border-radius: 1rem;
            border: 1px solid rgba(15, 45, 107, 0.08);
            background: linear-gradient(180deg, #f9fbff 0%, #f3f8ff 100%);
        }
        #portfolio .portfolio-meta-list span {
            display: block;
            font-size: 0.63rem;
            font-weight: 900;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: #6f86af;
        }
        #portfolio .portfolio-meta-list strong {
            display: block;
            margin-top: 0.35rem;
            font-size: 0.84rem;
            line-height: 1.5;
            color: #102d6f;
        }
        #portfolio .portfolio-link {
            flex-shrink: 0;
            border: 1px solid transparent;
        }
        #portfolio .portfolio-link--wp {
            background: #eff6ff;
            border-color: #bfdbfe;
            color: #0f2d6b;
        }
        #portfolio .portfolio-link--wp:hover {
            background: #dbeafe;
        }
        #portfolio .portfolio-link--html {
            background: #fff7ed;
            border-color: #fed7aa;
            color: #8a4500;
        }
        #portfolio .portfolio-link--html:hover {
            background: #ffedd5;
        }
        #portfolio .portfolio-link--free {
            background: #ecfdf5;
            border-color: #a7f3d0;
            color: #065f46;
        }
        #portfolio .portfolio-link--free:hover {
            background: #d1fae5;
        }
        @media (max-width: 640px) {
            #portfolio .portfolio-thumb {
                min-height: 14.2rem;
            }
            #portfolio .portfolio-thumb-top {
                flex-direction: column;
                align-items: flex-start;
            }
            #portfolio .portfolio-thumb-date {
                text-align: left;
            }
            #portfolio .portfolio-meta-list {
                grid-template-columns: 1fr;
            }
        }
        .filter-btn.active {
            background-color: var(--hyas-navy);
            color: #ffffff;
            border-color: var(--hyas-navy);
        }
        .filter-btn.active span:last-child {
            background-color: rgba(255, 255, 255, 0.2);
            color: #ffffff;
        }
        @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;
            }
        }