/* @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"); */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");

:root {
    --bg: hsl(217, 59%, 8%);
    --panel: hsl(213, 48%, 12%);
    --ink: hsl(201, 58%, 95%);
    --muted: hsl(212, 23%, 72%);
    --line: hsl(211, 36%, 21%);
    --mint: hsl(164, 74%, 62%);
    --orange: hsl(29, 100%, 71%);
    --border-color: hsla(0, 0%, 100%, 0.055);
    --nav-bg: hsla(217, 59%, 8%, 0.87);
    --surface-strong: hsl(211, 42%, 17%);
    --surface-deep: hsl(213, 48%, 10%);
    --ink-on-mint: hsl(160, 74%, 8%);
    --accent-blue: hsl(207, 64%, 44%);
    --accent-purple: hsl(260, 36%, 49%);
    --accent-teal: hsl(193, 46%, 27%);
    --accent-warm: hsl(27, 61%, 58%);
    --tooltip-bg: hsl(190, 43%, 94%);
    --tooltip-ink: hsl(204, 68%, 7%);
    --whatsapp: hsl(142, 70%, 45%);
    --whatsapp-ink: hsl(150, 80%, 9%);
    --progress-bg: hsl(212, 43%, 8%);
    --shadow-color: hsl(164, 74%, 62%, 0.4);    --body-color: var(--bg);
    --text-color: var(--ink);

    /*========== Font and typography ==========*/
    /*.5rem = 8px | 1rem = 16px ...*/
    --body-font: "Poppins", sans-serif;
    --second-font: "Montagu Slab", serif;
    --biggest-font-size: 2rem;
    --h1-font-size: 1.5rem;
    --h2-font-size: 1.25rem;
    --h3-font-size: 1rem;
    --normal-font-size: 0.938rem;
    --small-font-size: 0.813rem;
    --smaller-font-size: 0.75rem;

    /*========== Font weight ==========*/
    --font-regular: 400;
    --font-medium: 500;
    --font-semi-bold: 600;

    /*========== z index ==========*/
    --z-tooltip: 10;
    --z-fixed: 100;
}
* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    margin: 0;
    background: var(--bg);
    color: var(--text-color);
    font:
        16px/1.5 "Poppins",
        Arial,
        sans-serif;
}
input, textarea, select, button {
        font:
        16px/1.5 "Poppins",
        Arial,
        sans-serif;
        font-size: var(--small-font-size);
}
a {
    color: inherit;
    text-decoration: none;
}
.section {
    max-width: 1180px;
    margin: auto;
    padding: 105px 28px;
}
.site-nav {
    position: sticky;
    top: 0;
    z-index: 10;
    height: 72px;
    padding: 0 4vw;
    display: flex;
    align-items: center;
    gap: 26px;
    background: var(--nav-bg);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid hsla(0, 0%, 100%, 0.055);
}
.brand {
    font-weight: 800;
    font-size: 20px;
}
.brand em,
h1 span,
h2 span {
    color: var(--mint);
    font-style: normal;
}
.nav-links {
    margin-left: auto;
    display: flex;
    gap: 18px;
    font-size: var(--small-font-size);
    color: var(--muted);
}
.nav-links a:hover {
    color: var(--mint);
}
.nav-cart { position: relative; font-size: 18px; }
.nav-cart span { position: absolute; top: -7px; right: -9px; min-width: 16px; height: 16px; padding: 0 4px; display: grid; place-items: center; border-radius: 9px; background: var(--mint); color: var(--ink-on-mint); font-size: 9px; font-weight: 800; }
.cart-drawer-overlay{position:fixed;inset:0;z-index:199;background:#020811b8;opacity:0;visibility:hidden;transition:.3s;backdrop-filter:blur(3px)}.cart-drawer-overlay.show{opacity:1;visibility:visible}.cart-drawer{position:fixed;z-index:200;top:0;right:0;width:min(440px,100vw);height:100dvh;background:var(--bg);border-left:1px solid var(--line);box-shadow:-30px 0 80px #0008;transform:translateX(105%);transition:transform .38s cubic-bezier(.22,.8,.25,1);display:flex;flex-direction:column}.cart-drawer.open{transform:translateX(0)}body.cart-drawer-open{overflow:hidden}.cart-drawer>header{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 25px;border-bottom:1px solid var(--line);background:var(--panel)}.cart-drawer>header>div{display:grid}.cart-drawer>header span{font-size:21px;font-weight:800}.cart-drawer>header strong{font-size:10px;text-transform:uppercase;color:var(--muted);letter-spacing:1px}.cart-drawer>header strong b{color:var(--mint)}.cart-drawer>header button{border:1px solid var(--line);background:var(--surface-strong);color:var(--ink);width:38px;height:38px;border-radius:50%;font-size:20px;cursor:pointer}.cart-drawer-content{min-height:0;display:flex;flex:1;flex-direction:column}.cart-drawer-list{overflow:auto;flex:1;padding:8px 24px}.cart-drawer-item{display:grid;grid-template-columns:70px 1fr 30px;gap:14px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}.cart-drawer-thumb{height:70px;border-radius:7px;display:grid;place-items:center;background:linear-gradient(145deg,#285366,#142633)}.cart-drawer-thumb i{font-size:30px;color:var(--mint)}.cart-drawer-item>div:nth-child(2){display:grid;gap:3px}.cart-drawer-item small{color:var(--mint);font-size:8px;text-transform:uppercase}.cart-drawer-item a{font-size:13px;font-weight:700;line-height:1.35}.cart-drawer-item b{font-size:13px}.cart-drawer-item form button{border:0;background:none;color:var(--muted);font-size:18px;cursor:pointer}.cart-drawer-footer{padding:22px 25px 25px;border-top:1px solid var(--line);background:var(--panel)}.cart-drawer-footer>div{display:flex;justify-content:space-between;align-items:center}.cart-drawer-footer strong{font-size:25px}.cart-drawer-footer p{font-size:10px;color:var(--muted);margin:2px 0 18px}.cart-drawer-footer .button{display:flex;justify-content:center;align-items:center;gap:8px}.drawer-view-cart{display:block;text-align:center;margin-top:12px;color:var(--muted);font-size:11px;text-decoration:underline}.cart-drawer-empty{margin:auto;text-align:center;padding:40px}.cart-drawer-empty>span{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;margin:0 auto;background:var(--panel);border:1px solid var(--line);color:var(--mint);font-size:31px}.cart-drawer-empty h3{font-size:22px;margin-bottom:7px}.cart-drawer-empty p{color:var(--muted);font-size:12px;margin-bottom:22px}.cart-drawer-loading{margin:auto;display:grid;justify-items:center;gap:12px;color:var(--muted);font-size:11px}.cart-drawer-loading i,.is-loading:after{width:25px;height:25px;border:2px solid #ffffff2d;border-top-color:var(--mint);border-radius:50%;animation:cart-spin .7s linear infinite}.cart-ajax-toast{position:fixed;z-index:250;left:50%;bottom:25px;transform:translate(-50%,20px);padding:12px 18px;border-radius:8px;background:#eafff8;color:#08251d;box-shadow:0 15px 45px #0009;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;opacity:0;visibility:hidden;transition:.25s}.cart-ajax-toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}.cart-ajax-toast i{color:#0b9d70;font-size:19px}.cart-ajax-toast.is-error{background:#ffe8e5;color:#48120b}.cart-count-pop{animation:cart-pop .35s ease}.is-loading{position:relative;pointer-events:none}.is-loading>*{opacity:0}.is-loading:after{content:"";position:absolute;left:50%;top:50%;width:17px;height:17px;margin:-10px}.is-added{background:#dfffee!important;color:#073c2d!important}@keyframes cart-spin{to{transform:rotate(360deg)}}@keyframes cart-pop{50%{transform:scale(1.45)}}
.theme-toggle,
.menu-button {
    background: none;
    border: 0;
    color: var(--ink);
    font-size: 20px;
}
.menu-button {
    display: none;
}
.social-rail {
    position: fixed;
    left: 15px;
    top: 40%;
    z-index: 4;
    display: grid;
    gap: 7px;
}
.social-rail a,
.whatsapp-float {
    background: var(--surface-strong);
    border: 1px solid var(--line);
    border-radius: 50%;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
}
.whatsapp-float {
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: var(--z-fixed);
    width: auto;
    height: auto;
    border-radius: 24px;
    padding: 9px 14px;
    background: var(--whatsapp);
    color: var(--whatsapp-ink);
    font-weight: bold;
    font-size: 12px;
}
.hero {
    min-height: 650px;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
    gap: 60px;
    background:
        radial-gradient(circle at 15% 20%, #17445b55, transparent 35%),
        radial-gradient(circle at 85% 70%, #73542b35, transparent 35%);
}
.eyebrow {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 11px;
    font-weight: bold;
    color: var(--mint);
}
h1 {
    font-size: clamp(42px, 6vw, 76px);
    line-height: 1.05;
    letter-spacing: -1px;
    margin: 15px 0 22px;
}
h2 {
    font-size: clamp(32px, 4vw, 51px);
    line-height: 1.1;
    letter-spacing: -1px;
    margin: 12px 0 20px;
}
.hero-text,
.section-heading > p:not(.eyebrow) {
    color: var(--muted);
    max-width: 620px;
}
.hero-badges,
.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}
.hero-badges span {
    border: 1px solid var(--line);
    padding: 7px 12px;
    border-radius: 20px;
    font-size: 12px;
}
.button {
    padding: 12px 18px;
    border-radius: 7px;
    font-weight: bold;
    display: inline-block;
}
.button-primary {
    background: var(--mint);
    color: var(--ink-on-mint);
}
.button-ghost {
    border: 1px solid var(--line);
}
.portrait-wrap {
    text-align: center;
}
.portrait-blob {
    width: 340px;
    height: 390px;
    margin: auto;
    background: linear-gradient(145deg, var(--mint), var(--accent-blue));
    border-radius: 56% 44% 62% 38%/45% 57% 43% 55%;
    padding: 10px;
    animation: morph 8s ease-in-out infinite;
}
.portrait-initials {
    height: 100%;
    display: grid;
    place-content: center;
    background: var(--panel);
    color: white;
    font-size: 105px;
    font-weight: 900;
    border-radius: inherit;
}
.portrait-initials small {
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--mint);
}
.orbit {
    color: var(--mint);
    font-size: 12px;
    letter-spacing: 3px;
    margin: 12px;
}
.trust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    padding-top: 0;
}
.stat {
    padding: 26px;
    border-left: 1px solid var(--line);
}
.stat strong {
    display: block;
    font-size: 43px;
    color: var(--mint);
}
.stat span {
    color: var(--muted);
    font-size: 13px;
}
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}
.about-photo {
    width: min(100%, 360px);
    height: auto;
    aspect-ratio: 9 / 16;
    justify-self: center;
    border-radius: 20px;
    background: linear-gradient(140deg, var(--accent-teal), var(--orange));
    display: grid;
    place-items: center;
    font-size: 95px;
    font-weight: bold;
}
.strengths,
.service-grid,
.skill-groups,
.project-grid,
.blog-grid,
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.strengths {
    grid-template-columns: 1fr 1fr;
    margin-top: 25px;
}
.strengths article,
.service-card,
.skill-group,
.project,
.blog-card,
.testimonial-card {
    padding: 20px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    transition: 0.25s;
}
.strengths b,
.strengths small {
    display: block;
}
.strengths small {
    color: var(--muted);
    font-size: 12px;
}
.section-heading {
    margin-bottom: 36px;
}
.service-card:hover,
.project:hover,
.blog-card:hover {
    transform: translateY(-6px);
    border-color: var(--mint);
}
.service-card i {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 12px;
    border: 1px solid color-mix(in srgb, var(--mint) 32%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--mint) 10%, transparent);
    font-size: 28px;
    color: var(--mint);
}
.service-card p,
.project span,
.blog-card span {
    color: var(--muted);
    font-size: 14px;
}
.service-card a,
.project a,
.blog-card a {
    display: block;
    color: var(--mint);
    margin-top: 17px;
    font-size: 13px;
}
.skill-groups {
    grid-template-columns: repeat(3, 1fr);
}
.skill-group span {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}
.skill-group b {
    float: right;
    color: var(--muted);
    font-size: 10px;
}
.workflow ol {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    list-style: none;
    padding: 0;
    gap: 12px;
}
.workflow li {
    border-top: 2px solid var(--mint);
}
.workflow b {
    color: var(--mint);
}
.workflow p {
    color: var(--muted);
    font-size: 12px;
}
.project-grid {
    grid-template-columns: repeat(3, 1fr);
}
.portfolio-disciplines {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: -12px 0 26px;
}
.portfolio-disciplines span,
.project-tags li {
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--panel) 80%, transparent);
    border-radius: 999px;
}
.portfolio-disciplines span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    color: var(--muted);
    font-size: 12px;
}
.portfolio-disciplines i {
    color: var(--mint);
    font-size: 17px;
}
.project-showcase {
    grid-template-columns: repeat(12, 1fr);
    gap: 18px;
}
.project-showcase .project {
    grid-column: span 4;
}
.project-showcase .project-featured,
.project-showcase .architecture-feature {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 28px;
    align-items: center;
}
.project-featured .project-art {
    height: 330px;
}
.project-copy h3,
.project > h3 {
    margin: 7px 0 10px;
}
.project-copy > span,
.project > span {
    display: block;
    line-height: 1.65;
}
.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 0;
    margin: 18px 0 0;
    list-style: none;
}
.project-tags li {
    padding: 6px 9px;
    color: var(--muted);
    font-size: 10px;
}
.project-number {
    position: absolute;
    z-index: 2;
    top: 14px;
    right: 14px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid #ffffff55;
    border-radius: 50%;
    background: #06101ccc;
    color: #fff;
    font-size: 11px;
}
.architecture-feature {
    min-height: 390px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--panel) 86%, var(--mint)), var(--panel));
}
.architecture-blueprint {
    position: relative;
    min-height: 330px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--mint) 50%, var(--line));
    border-radius: 10px;
    background-color: #0b3141;
    background-image: linear-gradient(#ffffff0b 1px, transparent 1px), linear-gradient(90deg, #ffffff0b 1px, transparent 1px);
    background-size: 20px 20px;
}
.blueprint-room {
    position: absolute;
    display: grid;
    place-items: center;
    border: 2px solid #73dfc8;
    color: #c8fff3;
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.room-living { inset: 13% 44% 46% 9%; }
.room-kitchen { inset: 13% 9% 46% 56%; }
.room-bed { inset: 58% 51% 9% 9%; }
.room-terrace { inset: 58% 9% 9% 51%; border-style: dashed; }
.blueprint-north { position: absolute; right: 18px; top: 15px; color: #fff; font-style: normal; font-size: 11px; }
.project-art {
    height: 180px;
    border-radius: 8px;
    padding: 20px;
    background: linear-gradient(130deg, var(--accent-teal), var(--accent-warm));
    font-size: 28px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
}
.project-art i {
    font-style: normal;
}
.blog-grid,
.testimonial-grid {
    grid-template-columns: repeat(3, 1fr);
}
.blog-thumb {
    height: 110px;
    background: linear-gradient(135deg, var(--accent-teal), var(--accent-purple));
    display: grid;
    place-items: center;
    font-size: 45px;
    font-weight: bold;
    border-radius: 7px;
}
.blog-card p,
.stars {
    font-size: 11px;
    color: var(--mint);
}
blockquote {
    font-size: 18px;
    margin: 18px 0;
}
.testimonial-card footer {
    display: flex;
    gap: 10px;
    align-items: center;
}
.avatar {
    background: var(--mint);
    color: var(--ink-on-mint);
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
}
.testimonial-card small {
    display: block;
    color: var(--muted);
}
.testimonial-avatar-image{object-fit:cover}.testimonial-page{padding-top:130px;min-height:70vh}.testimonial-page .section-heading{margin-bottom:38px}.testimonial-page .section-heading h1{font-size:clamp(42px,6vw,72px);margin:8px 0}.testimonial-page .section-heading>p:last-child{color:var(--muted);max-width:650px}.testimonial-page .testimonial-card{min-height:240px;display:flex;flex-direction:column}.testimonial-page .testimonial-card blockquote{flex:1;margin:20px 0;color:var(--muted);line-height:1.75}
.resume-reader-page{max-width:1440px;margin:0 auto;padding:120px 28px 80px}.resume-reader-header{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:28px}.resume-reader-header h1{margin:8px 0 10px;font-size:clamp(38px,6vw,68px);line-height:1}.resume-reader-header>div>p:last-child{max-width:680px;margin:0;color:var(--muted);line-height:1.7}.resume-download-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;flex:none;min-height:48px;padding:0 20px;border-radius:999px;background:var(--mint);color:var(--ink-on-mint);font-size:13px;font-weight:800;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}.resume-download-button:hover{transform:translateY(-2px);box-shadow:0 12px 30px color-mix(in srgb,var(--mint) 22%,transparent)}.resume-reader{height:min(78vh,1050px);min-height:620px;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--panel);box-shadow:0 28px 80px rgba(0,0,0,.18)}.resume-reader object{display:block;width:100%;height:100%;border:0}.resume-reader-fallback{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;text-align:center}.resume-reader-fallback>i{font-size:58px;color:var(--mint)}.resume-reader-fallback h2{margin:16px 0 8px}.resume-reader-fallback p{max-width:520px;margin:0 0 24px;color:var(--muted)}@media(max-width:700px){.resume-reader-page{padding:90px 15px 55px}.resume-reader-header{align-items:stretch;flex-direction:column}.resume-reader-header .resume-download-button{align-self:flex-start}.resume-reader{height:72vh;min-height:500px;border-radius:12px}}
.faq-list details {
    border-bottom: 1px solid var(--line);
    padding: 17px 0;
}
.faq-list summary {
    cursor: pointer;
    font-weight: bold;
}
.faq-list p {
    color: var(--muted);
}
.contact-section {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
    align-items: center;
    gap: 60px;
    background: linear-gradient(120deg, var(--surface-strong), var(--surface-deep));
}
.contact-action {
    padding: 32px;
    background: linear-gradient(135deg, var(--accent-teal), var(--accent-purple));
    border: 1px solid var(--line);
    border-radius: 18px;
}
.contact-action h3 {
    margin: 8px 0 26px;
    font-size: clamp(28px, 3vw, 42px);
}
.contact-action h3 span {
    display: block;
    color: var(--accent-warm);
}
.contact-copy ul {
    padding: 0;
    list-style: none;
    color: var(--muted);
}
.contact-copy b {
    color: var(--ink);
    display: block;
}
.contact-form {
    padding: 24px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 12px;
}
.contact-form label {
    display: block;
    font-size: 13px;
    margin-bottom: 12px;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
    width: 100%;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink);
    padding: 10px;
    margin-top: 5px;
}
.contact-form textarea {
    height: 110px;
}
.counter {
    float: right;
    color: var(--muted);
}
.cta {
    text-align: center;
    background: linear-gradient(135deg, var(--accent-teal), var(--accent-purple));
    margin-top: 60px;
    border-radius: 18px;
}
.site-footer {
    max-width: 1180px;
    margin: 70px auto 0;
    padding: 45px 28px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 25px;
    border-top: 1px solid var(--line);
    color: var(--muted);
}
.site-footer b,
.site-footer a {
    display: block;
    margin: 7px 0;
}
.site-footer small {
    grid-column: 1/-1;
}
.legal-page{max-width:1120px;margin:0 auto;padding:110px 28px 100px}.legal-hero{max-width:820px;padding-bottom:55px}.legal-hero h1{margin:12px 0 18px;font-size:clamp(44px,7vw,78px);line-height:1.05}.legal-hero .lead{max-width:760px;color:var(--muted);font-size:17px;line-height:1.8}.legal-updated{display:flex;align-items:center;gap:8px;margin-top:24px;color:var(--mint);font-size:12px;font-weight:600}.legal-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:55px;align-items:start}.legal-summary{position:sticky;top:105px;padding:22px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}.legal-summary span{color:var(--mint);font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase}.legal-summary p{margin:10px 0 0;color:var(--muted);font-size:12px;line-height:1.75}.legal-content>section{display:grid;grid-template-columns:42px 1fr;gap:18px;padding:0 0 36px;margin-bottom:36px;border-bottom:1px solid var(--line)}.legal-section-number{color:var(--mint);font-size:11px;font-weight:800;padding-top:7px}.legal-content h2{margin:0 0 14px;font-size:clamp(22px,3vw,31px)}.legal-content p{margin:0 0 12px;color:var(--muted);font-size:14px;line-height:1.85}.legal-contact{display:flex;gap:15px;align-items:center;padding:22px;border-radius:13px;background:linear-gradient(135deg,color-mix(in srgb,var(--mint) 12%,var(--panel)),var(--panel));border:1px solid var(--line)}.legal-contact>i{color:var(--mint);font-size:26px}.legal-contact div{display:grid;gap:4px}.legal-contact a{color:var(--mint);font-size:13px}@media(max-width:760px){.legal-page{padding:75px 20px 80px}.legal-layout{grid-template-columns:1fr;gap:30px}.legal-summary{position:static}.legal-content>section{grid-template-columns:30px 1fr;gap:10px}.legal-hero{padding-bottom:35px}}
.back-top {
    position: fixed;
    right: 25px;
    bottom: 82px;
    display: none;
    background: var(--panel);
    color: var(--mint);
    border: 1px solid var(--line);
    border-radius: 50%;
    width: 38px;
    height: 38px;
}
.back-top.show {
    display: block;
}
.skip-link {
    position: absolute;
    left: -999px;
}
.skip-link:focus {
    left: 15px;
    top: 15px;
    z-index: 99;
    background: white;
    color: black;
    padding: 8px;
}
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: 0.7s;
}
.reveal.visible {
    opacity: 1;
    transform: none;
}
.page-loader {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: var(--bg);
    display: grid;
    place-items: center;
    transition: 0.5s;
}
.page-loader span {
    font-size: 40px;
    color: var(--mint);
    font-weight: bold;
}
.page-loader.done {
    opacity: 0;
    pointer-events: none;
}
@keyframes morph {
    50% {
        border-radius: 35% 65% 38% 62%/60% 35% 65% 40%;
    }
}
@media (max-width: 800px) {
    .nav-links {
        display: none;
    }
    .menu-button {
        display: block;
        margin-left: auto;
    }
    .nav-links.open {
        display: flex;
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        padding: 25px;
        background: var(--bg);
        flex-direction: column;
    }
    .social-rail {
        display: none;
    }
    .hero,
    .split,
    .contact-section {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .portrait-wrap {
        order: -1;
    }
    .trust,
    .service-grid,
    .skill-groups,
    .project-grid,
    .blog-grid,
    .testimonial-grid {
        grid-template-columns: 1fr 1fr;
    }
    .workflow ol {
        grid-template-columns: 1fr 1fr;
    }
    .site-footer {
        grid-template-columns: 1fr 1fr;
    }
    .section {
        padding: 70px 20px;
    }
    .portrait-blob {
        width: 270px;
        height: 310px;
    }
}
@media (max-width: 520px) {
    .trust,
    .service-grid,
    .skill-groups,
    .project-grid,
    .blog-grid,
    .testimonial-grid,
    .strengths {
        grid-template-columns: 1fr;
    }
    .site-footer {
        grid-template-columns: 1fr;
    }
    h1 {
        letter-spacing: -2px;
    }
    .whatsapp-float span {
        display: none;
    }
    .nav-links .nav-links a {
    position: fixed;
}
}
@media (max-width: 800px) {
    .project-showcase .project { grid-column: span 6; }
    .project-showcase .project-featured,
    .project-showcase .architecture-feature { grid-column: 1 / -1; grid-template-columns: 1fr; }
    .project-featured .project-art { height: 260px; }
}
@media (max-width: 520px) {
    .project-showcase .project { grid-column: 1 / -1; }
    .project-featured .project-art,
    .architecture-blueprint { min-height: 230px; height: 230px; }
}
.portrait-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}
.about-photo {
    overflow: hidden;
}
.about-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.project-art {
    position: relative;
    overflow: hidden;
}
.project-art img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s;
}
.project:hover .project-art img {
    transform: scale(1.08);
}
.project-art i {
    position: relative;
    z-index: 1;
    margin-left: auto;
    text-shadow: 0 2px 12px #000;
}
.project-art:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, color-mix(in srgb, var(--bg) 73%, transparent), color-mix(in srgb, var(--panel) 60%, transparent));
}
.material-symbols-rounded {
    font-family: "Material Symbols Rounded";
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    display: inline-block;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: "liga";
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}
.nav-links a {
    position: relative;
}
.nav-links a.active {
    color: var(--mint);
    font-weight: 600;
}
.nav-links a.active:after {
    content: "";
    position: absolute;
    height: 2px;
    left: 0;
    right: 0;
    bottom: -8px;
    background: var(--mint);
    border-radius: 2px;
    animation: navLine 0.25s ease-out;
}
.social-rail {
    transition:
        opacity 0.45s ease,
        transform 0.45s ease;
}
.social-rail a {
    position: relative;
    overflow: visible;
    transition:
        transform 0.25s ease,
        background 0.25s ease,
        color 0.25s ease;
}
.social-rail a:hover {
    transform: translateX(7px) rotate(6deg);
    background: var(--mint);
    color: var(--tooltip-ink);
    box-shadow: 0 8px 25px var(--shadow-color);
}
.social-rail a:after {
    content: attr(data-tip);
    position: absolute;
    left: 44px;
    top: 50%;
    transform: translateY(-50%) translateX(-6px);
    background: var(--tooltip-bg);
    color: var(--tooltip-ink);
    padding: 4px 9px;
    border-radius: 5px;
    font-size: 11px;
    font-family: "Poppins";
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: 0.2s;
}
.social-rail a:hover:after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
.skill-item {
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
}
.skill-title {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
}
.skill-title b {
    color: var(--mint);
    font-size: 12px;
}
.skill-item small {
    display: block;
    color: var(--muted);
    font-size: 10px;
    margin-top: 5px;
}
.skill-track {
    height: 7px;
    margin-top: 8px;
    background: var(--progress-bg);
    border-radius: 999px;
    overflow: hidden;
}
.skill-track i {
    display: block;
    width: var(--progress);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--mint), var(--accent-blue));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
}
.skill-group.visible .skill-track i {
    transform: scaleX(1);
}
@keyframes navLine {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}
.menu-button {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 7px;
    cursor: pointer;
}
.menu-button .material-symbols-rounded {
    font-size: 25px;
}
.theme-toggle {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    cursor: pointer;
}
.page-loader {
    background: var(--bg);
    align-items: center;
}
.loader-content {
    width: min(320px, 80vw);
    text-align: center;
}
.loader-content b {
    display: block;
    font-size: 14px;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
}
.loader-content small {
    color: var(--muted);
    font-size: 11px;
}
.loader-track {
    height: 7px;
    background: var(--panel);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 10px;
}
.loader-track i {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--mint), var(--accent-blue));
    animation: loading 800ms ease-out forwards;
}
.whatsapp-float svg {
    width: 21px;
    height: 21px;
    display: block;
}
@keyframes loading {
    to {
        width: 100%;
    }
}
html[data-theme="light"] {
    --bg: #f6fafc;
    --panel: #ffffff;
    --ink: #102033;
    --muted: #536477;
    --line: #d9e4eb;
    --mint: #047c66;
    --nav-bg: hsla(204, 45%, 97%, 0.87);
    --surface-strong: hsl(0, 0%, 100%);
    --surface-deep: hsl(204, 40%, 96%);
    --ink-on-mint: hsl(0, 0%, 100%);
    --accent-blue: hsl(207, 79%, 55%);
    --accent-purple: hsl(260, 46%, 67%);
    --accent-teal: hsl(183, 42%, 67%);
    --accent-warm: hsl(32, 90%, 74%);
    --tooltip-bg: hsl(0, 0%, 100%);
    --tooltip-ink: hsl(207, 46%, 15%);
    --whatsapp: hsl(142, 70%, 42%);
    --whatsapp-ink: hsl(0, 0%, 100%);
    --progress-bg: hsl(204, 31%, 89%);
    --shadow-color: hsla(164, 60%, 35%, 0.25);
}
html[data-theme="light"] .site-nav {
    background: #f6fafcdd;
}
html[data-theme="light"] .contact-form {
    background: #fff;
}
html[data-theme="light"] .skill-track {
    background: #dce8ef;
}
html[data-theme="light"] .page-loader {
    background: #f6fafc;
}
html[data-theme="light"] .portrait-initials {
    background: #eaf4f7;
}
@media (max-width: 800px) {
    .menu-button {
        display: grid;
    }
}
.page-loader {
    animation: loaderFailsafe 0.01s linear 3s forwards;
}
.page-loader.done {
    visibility: hidden;
}
@keyframes loaderFailsafe {
    to {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}
html[data-theme="light"] .hero {
    background:
        radial-gradient(circle at 15% 20%, #c7f1e566, transparent 35%),
        radial-gradient(circle at 85% 70%, #ffe3bd80, transparent 35%);
}
html[data-theme="light"] .contact-section {
    background: linear-gradient(120deg, #e3f4f0, #e7eff9);
}
html[data-theme="light"] .cta {
    background: linear-gradient(135deg, #d5f4ea, #e9ddf4);
}
html[data-theme="light"] .social-rail a,
html[data-theme="light"] .back-top {
    background: #fff;
    color: #173047;
    border-color: #cbdbe5;
}
html[data-theme="light"] .social-rail a:hover {
    background: var(--mint);
    color: #fff;
}
html[data-theme="light"] .whatsapp-float {
    color: #fff;
}
html[data-theme="light"] .project-art:after {
    background: linear-gradient(135deg, #f7fbff22, #d9f5ec33);
}
html[data-theme="light"] .site-footer {
    border-color: #cfdee6;
}
.menu-button {
    display: none;
}
@media (max-width: 800px) {
    .menu-button {
        display: grid;
    }
    .site-nav {
        position: sticky;
    }
    .nav-links.open ~ .social-rail {
        display: flex;
    }
    .social-rail {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 210px);
        width: auto;
        grid-auto-flow: column;
        grid-auto-columns: 34px;
        justify-content: center;
        gap: 9px;
        padding: 12px;
        background: var(--bg);
        border-top: 1px solid var(--line);
        transform: none;
        opacity: 1;
    }
    .social-rail.reveal {
        opacity: 1;
        transform: none;
    }
    .social-rail a:hover {
        transform: translateY(-4px) rotate(4deg);
    }
    .social-rail a:after {
        display: none;
    }
    .nav-links.open {
        padding-bottom: 70px;
    }
    .theme-toggle {
        margin-left: 0;
    }
}

/* Admin login */
.admin-login-page{min-height:100vh;background:var(--bg);color:var(--ink)}.admin-login-shell{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}.admin-login-intro{position:relative;overflow:hidden;padding:48px clamp(32px,7vw,110px);display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(145deg,var(--surface-deep),var(--accent-teal))}.admin-intro-copy{max-width:580px;position:relative;z-index:1}.admin-intro-copy h1{font-size:clamp(42px,5vw,70px);margin:14px 0}.admin-intro-copy p:not(.eyebrow){color:var(--muted);max-width:470px}.admin-orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.55}.orb-one{width:300px;height:300px;background:var(--mint);right:-110px;top:12%}.orb-two{width:190px;height:190px;background:var(--accent-purple);left:15%;bottom:-75px}.admin-footer-note{position:relative;z-index:1;color:var(--muted);font-size:12px;display:flex;align-items:center;gap:7px}.admin-footer-note span{color:var(--mint);font-size:17px}.admin-login-panel{display:grid;place-items:center;padding:32px;background:var(--bg)}.admin-login-card{width:min(420px,100%);padding:42px;border:1px solid var(--line);border-radius:20px;background:var(--panel);box-shadow:0 25px 70px color-mix(in srgb,var(--bg) 55%,transparent)}.admin-lock-icon{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--mint) 14%,transparent);color:var(--mint);margin-bottom:24px}.admin-login-card h2{font-size:35px;margin:8px 0}.admin-login-subtitle{color:var(--muted);font-size:14px;margin:0 0 27px}.admin-login-form label{font-size:12px;font-weight:600;display:block;margin:18px 0 7px}.admin-input{height:51px;display:flex;align-items:center;gap:9px;padding:0 13px;border:1px solid var(--line);border-radius:9px;background:var(--bg);transition:border-color .2s,box-shadow .2s}.admin-input:focus-within{border-color:var(--mint);box-shadow:0 0 0 3px color-mix(in srgb,var(--mint) 14%,transparent)}.admin-input>span{color:var(--muted);font-size:20px}.admin-input input{border:0;outline:0;background:transparent;color:var(--ink);font:inherit;width:100%;font-size:13px}.password-toggle{border:0;background:transparent;color:var(--muted);cursor:pointer;display:grid;padding:2px}.password-toggle:hover{color:var(--mint)}.admin-submit{width:100%;margin-top:26px;border:0;border-radius:9px;padding:14px 16px;display:flex;justify-content:center;align-items:center;gap:9px;background:var(--mint);color:var(--ink-on-mint);font:600 14px 'Poppins',sans-serif;cursor:pointer;transition:transform .2s,box-shadow .2s}.admin-submit:hover{transform:translateY(-2px);box-shadow:0 12px 26px var(--shadow-color)}.admin-submit span{font-size:18px}.admin-form-error{display:flex;gap:6px;align-items:center;color:#ff8585;font-size:12px;margin:14px 0 0}.admin-form-error span{font-size:16px}.admin-back-link{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:25px;color:var(--muted);font-size:12px}.admin-back-link:hover{color:var(--mint)}.admin-back-link span{font-size:16px}.admin-mobile-brand{display:none}@media(max-width:850px){.admin-login-shell{grid-template-columns:1fr}.admin-login-intro{display:none}.admin-login-panel{padding:28px 20px}.admin-mobile-brand{display:block;margin-bottom:38px}.admin-login-card{border:0;box-shadow:none;padding:10px;background:transparent}}html[data-theme='light'] .admin-login-panel{background:var(--bg)}html[data-theme='light'] .admin-login-card{background:var(--panel)}html[data-theme='light'] .admin-login-intro{background:linear-gradient(145deg,var(--surface-deep),var(--accent-teal))}.article-page,.comments-section{max-width:820px;margin:auto;padding:80px 28px}.article-page header{text-align:center}.article-page h1{font-size:clamp(38px,6vw,66px)}.article-lead{font-size:19px;color:var(--muted)}.article-body{font-size:17px;line-height:1.9;margin-top:45px}.article-body p{margin:0 0 22px}.article-footer{margin-top:55px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between}.article-footer a{color:var(--mint)}.comments-section{padding-top:0}.comment-form{padding:22px;background:var(--panel);border:1px solid var(--line);border-radius:12px}.comment-form>div{display:grid;grid-template-columns:1fr 1fr;gap:12px}.comment-form label{display:block;font-size:12px;margin-bottom:12px}.comment-form input,.comment-form textarea,.reply-form input,.reply-form textarea{width:100%;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:9px;margin-top:5px}.comment-form textarea{height:100px}.comment{display:flex;gap:12px;margin-top:25px}.comment-reply{margin-left:35px;border-left:2px solid var(--line);padding-left:15px}.comment-avatar{display:grid;place-items:center;min-width:35px;height:35px;border-radius:50%;background:var(--mint);color:var(--ink-on-mint);font-weight:bold}.comment header{display:flex;gap:10px}.comment small{color:var(--muted)}.comment p{margin:7px 0}.reply-button{padding:8px 14px;border-radius:6px;border:1px solid var(--mint);background:transparent;color:var(--mint);font-weight:bold;cursor:pointer;font-size:13px;transition:all .2s;display:inline-block}.reply-button:hover{background:var(--mint);color:var(--ink-on-mint);transform:translateY(-2px)}.reply-button:active{transform:translateY(0)}.reply-form{display:none;margin-top:10px;padding:12px;background:var(--panel);border-radius:8px}.reply-form.open{display:grid;gap:7px}.reply-form textarea{height:70px}.reply-form button{padding:10px 16px;border-radius:6px;border:0;background:var(--mint);color:var(--ink-on-mint);font-weight:bold;cursor:pointer;font-size:13px;transition:all .2s;display:inline-block}.reply-form button:hover{transform:translateY(-2px);box-shadow:0 8px 16px var(--shadow-color)}.reply-form button:active{transform:translateY(0)}.comment-success{color:var(--mint)}
.blog-hero{max-width:1180px;margin:auto;padding:120px 28px 75px;text-align:center;background:radial-gradient(circle at 50% 10%,color-mix(in srgb,var(--mint) 16%,transparent),transparent 48%)}.blog-hero h1{max-width:850px;margin:12px auto;font-size:clamp(42px,6vw,76px)}.blog-hero>p:not(.eyebrow){max-width:620px;margin:0 auto;color:var(--muted)}.blog-categories{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:30px}.blog-categories button{border:1px solid var(--line);color:var(--muted);background:transparent;border-radius:20px;padding:7px 12px;font:11px Poppins}.blog-categories .active{background:var(--mint);color:var(--ink-on-mint);border-color:var(--mint)}.blog-listing{max-width:1180px;margin:auto;padding:15px 28px 100px}.featured-post{display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:center;padding:24px;background:var(--panel);border:1px solid var(--line);border-radius:18px;margin-bottom:85px}.featured-art,.article-card-art{display:grid;place-items:center;background:linear-gradient(135deg,var(--accent-teal),var(--accent-purple));font-size:85px;font-weight:800;border-radius:12px;min-height:290px;position:relative}.featured-post small,.article-card small{color:var(--muted);font-size:11px}.featured-post h2{font-size:34px;margin:9px 0}.featured-post p:not(.eyebrow){color:var(--muted)}.blog-section-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:25px}.blog-section-title h2{margin:4px 0;font-size:32px}.blog-section-title>span{color:var(--muted);font-size:11px}.blog-index-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.article-card{padding:0 0 20px;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}.article-card>*:not(.article-card-art){margin-left:18px;margin-right:18px}.article-card-art{min-height:165px;font-size:48px;margin-bottom:17px}.article-card-art i{position:absolute;right:15px;top:15px;font-size:20px}.article-card h2{font-size:18px;margin-top:7px;margin-bottom:8px}.article-card p{font-size:12px;color:var(--muted);min-height:54px}.article-card a{display:block;color:var(--mint);font-size:12px;font-weight:600;margin-top:15px}.article-card a span{font-size:17px}.blog-pagination{margin-top:30px}@media(max-width:760px){.featured-post{grid-template-columns:1fr;gap:25px}.featured-art{min-height:200px}.blog-index-grid{grid-template-columns:1fr}.blog-hero{padding-top:80px}.featured-post h2{font-size:28px}}
/* Locale switcher */
.language-switcher{position:relative;flex:0 0 auto}
.language-switcher summary{height:40px;min-width:52px;padding:0 8px 0 11px;display:flex;align-items:center;justify-content:center;gap:3px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.72rem;font-weight:700;cursor:pointer;list-style:none}
.language-switcher summary::-webkit-details-marker{display:none}
.language-switcher summary i{font-size:14px;transition:transform .2s}
.language-switcher[open] summary{border-color:color-mix(in srgb,var(--mint) 45%,var(--line))}
.language-switcher[open] summary i{transform:rotate(180deg)}
.language-menu{position:absolute;z-index:1400;top:calc(100% + 10px);right:0;min-width:72px;padding:5px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--panel) 98%,transparent);box-shadow:0 18px 50px #0007;backdrop-filter:blur(18px)}
.language-menu a{display:block;padding:8px 12px;border-radius:8px;color:var(--muted);font-size:.72rem;font-weight:700;text-align:center;text-decoration:none}
.language-menu a:hover,.language-menu a.active{background:var(--mint);color:var(--ink-on-mint)}

/* Keep the complete navigation on one line on narrow phones. */
@media (max-width: 560px) {
    .site-nav {
        height: 72px;
        padding: 0 12px;
        display: flex;
        gap: 7px;
    }
    .brand {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        font-size: 1rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .menu-button {
        flex: 0 0 40px;
        margin: 0;
    }
    .theme-toggle {
        flex: 0 0 40px;
        margin: 0;
    }
    .site-nav .nav-account {
        flex: 0 0 38px;
        margin: 0;
    }
    .nav-account-trigger > i {
        display: none;
    }
    .nav-account-trigger {
        padding: 3px;
    }
    .nav-links.open {
        top: 72px;
    }
    .site-nav .nav-account-menu {
        top: 70px;
        right: 10px;
        width: min(270px, calc(100vw - 20px));
    }
    .language-switcher summary {
        min-width: 44px;
        padding: 0 6px 0 8px;
    }
    .nav-links .nav-cart {
    /* position: fixed; */
    /* top: 100px; */
    width: fit-content;
}
}
.admin-form-success{display:flex;gap:7px;align-items:center;padding:11px 12px;border:1px solid color-mix(in srgb,var(--mint) 45%,transparent);border-radius:8px;background:color-mix(in srgb,var(--mint) 10%,transparent);color:var(--mint);font-size:12px;margin:14px 0}.admin-form-success span{font-size:17px}

/* Error pages */
.error-page{min-height:100vh;background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--mint) 12%,transparent),transparent 32%),var(--bg);color:var(--ink)}.error-shell{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px;text-align:center}.error-brand{position:absolute;left:clamp(24px,5vw,70px);top:30px;color:var(--ink);font-size:18px;font-weight:800;text-decoration:none}.error-brand em{color:var(--mint);font-style:normal}.error-card{width:min(760px,100%)}.error-code{display:flex;align-items:center;justify-content:center;gap:clamp(4px,2vw,18px);color:color-mix(in srgb,var(--ink) 12%,transparent);font-size:clamp(100px,22vw,220px);font-weight:800;line-height:.8;letter-spacing:-.08em;user-select:none}.error-code i{display:grid;place-items:center;width:clamp(72px,14vw,140px);height:clamp(72px,14vw,140px);border:1px solid var(--line);border-radius:50%;background:var(--panel);color:var(--mint);font-size:clamp(38px,7vw,70px);letter-spacing:normal}.error-card h1{margin:14px 0;font-size:clamp(38px,6vw,66px);line-height:1.08}.error-card>p:not(.eyebrow){max-width:610px;margin:0 auto;color:var(--muted);font-size:15px;line-height:1.8}.error-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:30px}.error-actions .button{display:inline-flex;align-items:center;gap:8px;text-decoration:none}.error-actions .material-symbols-rounded{font-size:19px}.error-links{display:flex;align-items:center;gap:12px;margin-top:55px;color:var(--muted);font-size:12px}.error-links a{color:inherit;text-decoration:none}.error-links a:hover{color:var(--mint)}@media(max-width:520px){.error-brand{position:static;margin-bottom:75px}.error-shell{justify-content:flex-start}.error-code{font-size:100px}.error-actions{flex-direction:column}.error-actions .button{justify-content:center}.error-links{margin-top:40px;flex-wrap:wrap;justify-content:center}}

/* 500 server error */
.error-page-server{background:radial-gradient(circle at 50% 32%,color-mix(in srgb,var(--orange) 11%,transparent),transparent 30%),radial-gradient(circle at 18% 75%,color-mix(in srgb,var(--mint) 7%,transparent),transparent 25%),var(--bg)}
.error-card-server{position:relative}
.error-status{width:max-content;margin:0 auto 30px;padding:7px 12px;display:flex;align-items:center;gap:8px;border:1px solid color-mix(in srgb,var(--orange) 32%,var(--line));border-radius:999px;background:color-mix(in srgb,var(--orange) 7%,transparent);color:var(--orange);font-size:10px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase}
.error-status-dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 5px color-mix(in srgb,var(--orange) 12%,transparent);animation:errorPulse 2s ease-in-out infinite}
.error-code-server{color:color-mix(in srgb,var(--ink) 10%,transparent)}
.error-code-server i{position:relative;border-color:color-mix(in srgb,var(--orange) 28%,var(--line));background:linear-gradient(145deg,var(--panel),var(--surface-deep));color:var(--orange);box-shadow:0 20px 60px color-mix(in srgb,var(--bg) 70%,transparent),inset 0 0 30px color-mix(in srgb,var(--orange) 5%,transparent)}
.error-code-server i:after{content:'';position:absolute;inset:-9px;border:1px dashed color-mix(in srgb,var(--orange) 30%,transparent);border-radius:50%;animation:errorRotate 18s linear infinite}
.error-card-server h1{max-width:700px;margin-left:auto;margin-right:auto}
.error-help{width:min(520px,100%);margin:30px auto 0;padding:14px 18px;display:flex;align-items:center;justify-content:center;gap:10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--muted);font-size:11px;text-align:left}
.error-help>span{color:var(--mint);font-size:19px}.error-help p{margin:0}.error-help strong{color:var(--ink);font-weight:600}
.error-reference{position:absolute;bottom: -32px;margin:0;color:color-mix(in srgb,var(--muted) 60%,transparent);font-size:9px;font-weight:600;letter-spacing:1.8px}.error-reference span{margin:0 7px;color:var(--orange)}
@keyframes errorPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.78)}}
@keyframes errorRotate{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.error-status-dot,.error-code-server i:after{animation:none}}
@media(max-width:520px){.error-page-server .error-brand{margin-bottom:45px}.error-status{margin-bottom:24px}.error-code-server{font-size:96px}.error-help{align-items:flex-start}.error-reference{position:static;margin-top:35px}}

/* Coupon controls */
.drawer-coupon-form{padding-bottom:17px;margin-bottom:15px;border-bottom:1px solid var(--line)}.drawer-coupon-form>label{display:block;margin-bottom:7px;color:var(--muted);font-size:10px;font-weight:700;text-transform:uppercase}.drawer-coupon-form>div{display:flex}.drawer-coupon-form input{min-width:0;flex:1;background:var(--bg);border:1px solid var(--line);border-radius:6px 0 0 6px;color:var(--ink);padding:10px 12px;text-transform:uppercase}.drawer-coupon-form button{min-width:76px;border:1px solid var(--line);border-left:0;border-radius:0 6px 6px 0;background:var(--surface-strong);color:var(--ink);font-weight:700;cursor:pointer}.drawer-coupon-form small{display:none;color:#ff9487;font-size:10px;margin-top:6px}.drawer-coupon-form small.show{display:block}.drawer-coupon-applied{padding:10px 12px!important;margin-bottom:14px;background:#55e0ba10;border:1px dashed #55e0ba55;border-radius:6px;color:var(--mint);font-size:11px}.drawer-coupon-applied span{display:flex;align-items:center;gap:5px}.drawer-coupon-applied form button{border:0;background:none;color:var(--muted);text-decoration:underline;font-size:10px;cursor:pointer}.drawer-total-line{display:flex!important;justify-content:space-between;align-items:center;margin:7px 0;font-size:12px}.drawer-total-line.discount{color:var(--mint)}.drawer-grand-total{padding-top:10px;margin-top:10px;border-top:1px solid var(--line)}.drawer-grand-total strong{font-size:25px}.cart-coupon-form{display:grid!important;grid-template-columns:1fr auto;margin:18px 0!important}.cart-coupon-form label{font-size:10px;color:var(--muted)}.cart-coupon-form input{display:block;width:100%;margin-top:5px;padding:10px;background:var(--bg);border:1px solid var(--line);border-radius:5px 0 0 5px;color:var(--ink);text-transform:uppercase}.cart-coupon-form>button{align-self:end;height:39px;padding:0 14px;border:1px solid var(--line);border-radius:0 5px 5px 0;background:var(--surface-strong);color:var(--ink)}.cart-coupon-form small{grid-column:1/-1;color:#ff9487;margin-top:5px}

/* Clickable portfolio cards and case studies */
.project-card-link{display:block;color:inherit;text-decoration:none;grid-column:span 4;border-radius:14px}.project-card-link:focus-visible{outline:3px solid var(--mint);outline-offset:5px}.project-card-link .project{height:100%;grid-column:auto}.project-showcase .project-card-link:has(.project-featured),.project-showcase .project-card-link:has(.architecture-feature){grid-column:1/-1}.project-read-more{display:inline-flex!important;align-items:center;gap:5px;margin-top:13px;color:var(--mint)!important;font-size:12px!important;font-weight:700}.project-read-more i{font-size:17px;transition:transform .2s}.project-card-link:hover .project-read-more i{transform:translate(3px,-3px)}.case-study{padding-top:30px}.case-study-hero{max-width:1000px;text-align:center;padding-top:110px;padding-bottom:60px}.case-study-back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;margin-bottom:35px}.case-study-back span{font-size:17px}.case-study-hero h1{font-size:clamp(46px,8vw,92px);line-height:1.02;margin:12px auto 20px}.case-study-intro{max-width:750px;margin:0 auto 24px;color:var(--muted);font-size:clamp(16px,2vw,21px)}.case-study-hero .project-tags{justify-content:center}.case-study-hero .button,.case-study-body .button{display:inline-flex;align-items:center;gap:7px;margin-top:24px}.case-study-cover{width:min(1250px,calc(100% - 56px));height:min(68vw,700px);margin:0 auto;border-radius:20px;overflow:hidden;background:var(--panel);border:1px solid var(--line)}.case-study-cover img{width:100%;height:100%;object-fit:cover}.case-study-body{max-width:850px;padding-top:90px;padding-bottom:100px}.case-study-body h2{font-size:clamp(34px,5vw,55px);margin:8px 0 28px}.case-study-copy{color:var(--muted);font-size:17px;line-height:1.9;white-space:normal}.case-study-related{padding-top:0;padding-bottom:120px}.case-study-related .project-grid{grid-template-columns:repeat(3,1fr)}.related-project{display:block;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:inherit;text-decoration:none}.related-project img{width:100%;height:180px;object-fit:cover;transition:transform .25s}.related-project:hover img{transform:scale(1.035)}.related-project div{padding:18px}.related-project small{color:var(--mint)}.related-project h3{margin:6px 0 16px}.related-project span{font-size:12px;color:var(--muted)}@media(max-width:760px){.project-card-link,.project-showcase .project-card-link:has(.project-featured),.project-showcase .project-card-link:has(.architecture-feature){grid-column:1/-1}.case-study-cover{width:calc(100% - 32px);height:60vw;border-radius:13px}.case-study-related .project-grid{grid-template-columns:1fr}.case-study-hero{padding-top:75px}.case-study-body{padding-top:65px}}
/* Member account menu */
.nav-account{position:relative;flex:0 0 auto}.nav-account-trigger{display:flex;align-items:center;gap:3px;padding:3px 5px 3px 3px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--panel) 92%,transparent);color:var(--muted);cursor:pointer}.nav-account-trigger img,.nav-account-trigger>span{width:30px;height:30px;border-radius:50%}.nav-account-trigger img{display:block;object-fit:cover}.nav-account-trigger>span{display:grid;place-items:center;background:var(--mint);color:var(--ink-on-mint);font-size:9px;font-weight:800}.nav-account-trigger>i{font-size:14px}.nav-account-trigger[aria-expanded=true]{border-color:color-mix(in srgb,var(--mint) 45%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--mint) 9%,transparent)}.nav-account-menu{position:absolute;z-index:1400;top:calc(100% + 12px);right:0;width:270px;padding:9px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--panel) 98%,transparent);box-shadow:0 24px 70px #0008;backdrop-filter:blur(20px)}.nav-account-menu[hidden]{display:none}.nav-account-menu header{display:flex;align-items:center;gap:10px;padding:10px 10px 13px;border-bottom:1px solid var(--line)}.nav-account-menu header img,.nav-account-menu header>span{width:38px;height:38px;flex:0 0 38px;border-radius:50%}.nav-account-menu header img{object-fit:cover}.nav-account-menu header>span{display:grid;place-items:center;background:var(--mint);color:var(--ink-on-mint);font-size:10px;font-weight:800}.nav-account-menu header div{display:grid;min-width:0}.nav-account-menu header b{overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.nav-account-menu header small{overflow:hidden;color:var(--muted);font-size:8px;text-overflow:ellipsis;white-space:nowrap}.nav-account-menu>a{display:flex!important;align-items:center!important;gap:10px!important;padding:10px!important;border-radius:9px!important;color:var(--ink)!important;text-decoration:none!important}.nav-account-menu>a:hover{background:color-mix(in srgb,var(--mint) 8%,transparent)!important}.nav-account-menu>a>i{color:var(--mint);font-size:18px}.nav-account-menu>a>span{display:grid}.nav-account-menu>a b{font-size:10px}.nav-account-menu>a small{color:var(--muted);font-size:8px}.nav-account-menu form{margin:5px 0 0;padding-top:7px;border-top:1px solid var(--line)}.nav-account-menu form button{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;border:0;border-radius:8px;background:transparent;color:#ed7777;cursor:pointer;font:600 10px Poppins,sans-serif}.nav-account-menu form button:hover{background:#ef777712}@media(max-width:900px){.nav-account{margin-left:auto}.nav-account-menu{position:fixed;top:70px;right:12px}}