@font-face {
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(assets/fonts/L0xjDF02iFML4hGCyOCpRdycFsGxSrqDlR4fFg.ttf) format('truetype');
}
@font-face {
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/L0xjDF02iFML4hGCyOCpRdycFsGxSrqDyx4fFg.ttf) format('truetype');
}
@font-face {
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/L0xjDF02iFML4hGCyOCpRdycFsGxSrqD-R4fFg.ttf) format('truetype');
}
@font-face {
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/L0xjDF02iFML4hGCyOCpRdycFsGxSrqDFRkfFg.ttf) format('truetype');
}
@font-face {
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/L0xjDF02iFML4hGCyOCpRdycFsGxSrqDLBkfFg.ttf) format('truetype');
}

/* EDIT YOUR SITE HERE
   Shared settings apply to both themes. Light and dark colors are below.
   The navigation pill uses a refractive surface and a sliding glossy selection.
   --accent controls hover, focus rings, and link accents.
*/
:root {
    /* Refractive navigation: colors and motion from the approved prototype. */
    --pill-tint: #FFFFFF30;
    --pill-active-top: #FFFFFFC9;
    --pill-active-bottom: #FFFFFF66;
    --pill-edge: #FFFFFFBB;
    --pill-shadow: #30243F22;
    --pill-inset-shadow: #00000030;
    --pill-border-blue: #4CB4E3;
    --pill-border-purple: #C48ED8;
    --pill-border-pink: #FFB3C9;
    --pill-border-faint: #FFFFFF25;
    --pill-slide-duration: 550ms;
    --pill-slide-easing: cubic-bezier(.34, 1.45, .5, 1);

    /* Testimonial palette: exact Figma RGB values, with original stop opacity.
       Reuse --testimonial-gradient for fills and --testimonial-stroke-gradient
       for borders. The theme veil is included in the fill, not on the content. */
    --testimonial-pink: #FFB3C9;
    --testimonial-purple: #C48ED8;
    --testimonial-blue-mid: #88A1DE;
    --testimonial-blue: #4CB4E3;
    --testimonial-blue-deep: #265A72;
    --testimonial-clear: #00000000;
    --testimonial-light: #FBFAFD;
    --testimonial-dark: #000000;
    --testimonial-text: #333333;
    --testimonial-muted: #76737D;
    --testimonial-veil: color-mix(in srgb, var(--testimonial-light) 90%, transparent);
    --testimonial-gradient: radial-gradient(
        ellipse 104.43% 161.14% at 20.04% 22.57%,
        var(--testimonial-pink) 3.9384%,
        var(--testimonial-purple) 33.98%,
        color-mix(in srgb, var(--testimonial-blue-mid) 62.5%, transparent) 52.43%,
        color-mix(in srgb, var(--testimonial-blue) 25%, transparent) 70.879%,
        color-mix(in srgb, var(--testimonial-blue-deep) 12.5%, transparent) 85.44%,
        var(--testimonial-clear) 100%
    );
    --testimonial-stroke-gradient: linear-gradient(
        135deg, #F6F3FC75, #76737D25, #F6F3FC75, #76737D75 
        /* var(--testimonial-pink),
        var(--testimonial-purple) 50%,
        var(--testimonial-blue) */
    );

    --accent-bold: #A076DF;
    --accent-med: #A076DF25;
    --font-family: Urbanist, Arial, sans-serif;
    --radius-card: 24px;
    /* --card-hover-radius: 60px; */
    --card-hover-radius: 120px;
    --card-hover-duration: 800ms;
    --page-motion-duration: 800ms;
    --page-motion-easing: cubic-bezier(.22, .68, 0, 1);
    --radius-card-mobile: 18px;
    --radius-pill: 999px;
    --radius-drawer: 46px;
    --radius-field: 10px;
    --grid-gap: 8px;
    --icon-size: 30px;
    --icon-hover-rotation: -15deg;
    --icon-motion: 200ms;
    --menu-motion: 280ms;
    --menu-easing: ease-in-out;
    --menu-icon-color: var(--ink);
    --icon-button-background: var(--pill);
    --motion-fast: .25s;
    --theme-button-blur: 6px;
    --theme-button-tint: var(--glass-tint);
    --shadow-hover: 0 8px 12px #00000026;
    /* Navigation glass: lower tint alpha = more transparent. */
    --glass-blur: 6px;
    --glass-strength: 50;
    /* --glass-saturation: 140%; */
    --glass-saturation: 300%;
    --glass-tint: #fbfafd66;
    --glass-border: #77777710;

    /* Light theme */
    color-scheme: light;
    --on-accent: #21152e;
    --accent: #F6F3FC;
    --button-stroke: #D1CED5;
    --page: #fbfafd;
    --strip: #eeedf1;
    --ink: #333333;
    --muted: #76737d;
    --surface: #faf9fe;
    --pill: #f0eff3;
    --line: #dedce2;
    --selected: #ffffff;
    --on-selected: #333333;
    --caption: #252329;
    --on-caption: #ffffff;
    --button: #333333;
    --on-button: #fbfafd;
    --icon-filter: none;
    /* Drawer backdrop, separate from navigation glass. */
    --drawer-scrim: #00000044;
}

:root[data-theme=dark] {
    /* Dark glass: retain transparency while protecting text over bright artwork. */
    --pill-tint: color-mix(in srgb, var(--page) 25%, transparent);
    --pill-active-top: color-mix(in srgb, var(--pill) 85%, transparent);
    --pill-active-bottom: color-mix(in srgb, var(--surface) 70%, transparent);
    --pill-edge: #FFFFFF55;
    --pill-shadow: #00000050;
    --testimonial-text: #FFFFFF;
    --testimonial-veil: color-mix(in srgb, var(--testimonial-dark) 80%, transparent);
    color-scheme: dark;
    /* --page: #252329; */
    --page: #111;
    --strip: #0c0b0f;
    --ink: #f5f3f8;
    --muted: #b5b1bc;
    --surface: #2d2933;
    --pill: #39353f;
    --glass-tint: #25232966;
    --glass-border: #ffffff10;
    --line: #514b59;
    --selected: #f5f3f8;
    --on-selected: #333333;
    --button: #f5f3f8;
    --on-button: #252329;
    --icon-filter: brightness(0) invert(1);
    --on-accent: var(--button);
    --accent: var(--on-button);
    --button-stroke: var(--surface);
}

/* BASE AND ACCESSIBILITY */
* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px
}

body {
    max-width: 1600px;
    margin: 0 auto;
    /* margin: 0; */
    background: var(--page);
    color: var(--ink);
    font-family: var(--font-family)
}

a {
    color: inherit;
    text-decoration: none
}

button,
input,
textarea {
    font: inherit
}

button {
    cursor: pointer
}

button,
a,
input,
textarea {
    -webkit-tap-highlight-color: transparent
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 4px
}

img {
    display: block;
    max-width: 100%
}

.skip {
    position: fixed;
    left: 10px;
    top: -100px;
    padding: 12px;
    background: var(--page);
    z-index: 200
}

.skip:focus {
    top: 10px
}



.header {
    position: fixed;
    top: 24px;
    left: 0;
    right: 0;
    height: 52px;
    padding: 0 24px;
    z-index: 20;
    pointer-events: none;
    transition: top var(--motion-fast);
    max-width: 1900px;
    margin: 0 auto;
}

.header.scrolled {
    top: 12px
}

.header a,
.header button {
    pointer-events: auto
}

.identity,
.year {
    position: absolute;
    top: 19px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.44px;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
    transition: opacity .2s
}

.identity {
    left: 25%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px
}

.year {
    left: 75%;
    transform: translateX(-50%)
}

.scrolled .identity,
.scrolled .year {
    opacity: 0
}

.header-left,
.header-right {
    position: absolute;
    top: 0;
    display: flex;
    gap: 4px
}

.header-left {
    left: 24px
}

.header-right {
    right: 24px
}

.logo,
.icon-button {
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0
}

.logo img {
    width: 52px;
    height: 52px;
    object-fit: contain
}

.back {
    background: var(--page)
}





.icon-button:hover {
    color: var(--on-accent);
    background: var(--accent);
    border: 1px solid var(--button-stroke);
    box-shadow: var(--shadow-hover);
}

.logo:hover {
    background: var(--accent)
}

.dark-icon {
    display: none
}

:root[data-theme=dark] .light-icon {
    display: none
}

:root[data-theme=dark] .dark-icon {
    display: block
}

.pill {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    height: 52px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: transparent;
    box-shadow: 0 12px 30px -8px var(--pill-shadow);
}
.pill-glass {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: var(--pill-tint);
    box-shadow: inset 0 1px 1px var(--pill-edge), inset 0 -1px 2px var(--pill-inset-shadow);
}
.pill::after {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(130deg, var(--pill-border-pink), var(--pill-border-faint) 30%, var(--pill-border-purple) 65%, var(--pill-border-blue));
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: .75;
}
.pill-selection {
    position: absolute;
    left: 0;
    top: 4px;
    height: 42px;
    width: 108px;
    border-radius: var(--radius-pill);
    pointer-events: none;
    background: linear-gradient(var(--pill-active-top), var(--pill-active-bottom));
    box-shadow: inset 0 1px 0 var(--pill-edge), inset 0 -1px 0 var(--pill-inset-shadow), 0 4px 14px var(--pill-shadow);
}
.pill a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 108px;
    height: 42px;
    font-family: var(--font-family);
    font-size: 15px;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    color: var(--muted);
    transition: color 350ms;
}
.pill a[aria-current=page],
.pill a:hover {
    color: var(--ink);
}

.work-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--grid-gap);
    padding: 176px 12px 100px
}

.project-card {
    position: relative;
    aspect-ratio: 740/450;
    overflow: hidden;
    border-radius: var(--radius-card);
    background: var(--strip);
    display: block
}

.project-card>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease
}

.project-card:hover>img {
    transform: scale(1.035)
}

.card-caption {
    position: absolute;
    inset: auto 0 0;
    display: flex;
    align-items: end;
    justify-content: space-between;
    padding: 28px 24px;
    background: var(--caption);
    opacity: 0;
    transition: opacity var(--motion-fast);
    color: var(--on-caption)
}

.project-card:hover .card-caption,
.project-card:focus-visible .card-caption {
    opacity: 1
}

.card-caption h2 {
    font-size: clamp(24px, 2.65vw, 40px);
    font-weight: 300;
    margin: 8px 0 0
}

.card-caption small {
    font-size: 14px
}

.card-caption>img {
    width: 50px;
    height: 48px;
    object-fit: contain
}

.email-card>img {
    object-position: top
}

.drawer {
    position: fixed;
    inset: 80px 14px 14px auto;
    width: min(408px, calc(100vw - 28px));
    height: calc(100dvh - 94px);
    max-height: none;
    margin: 0;
    padding: 24px 0;
    background: var(--page);
    color: var(--ink);
    border: 3px solid var(--line);
    border-radius: var(--radius-drawer);
    overflow: auto;
}

.drawer[open] {
    animation: slide-in .3s ease
}

.drawer::backdrop {
    background: var(--drawer-scrim)
}

.drawer-heading {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    align-items: center;
    padding: 0 24px 24px
}

.drawer h2 {
    font-size: 40px;
    font-weight: 300;
    margin: 0
}

.drawer nav a {
    min-height: 55px;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid transparent;
    gap: 12px;
    font-size: 18px;
    color: var(--muted)
}

.drawer nav a:hover,
.drawer nav a:focus-visible {
    color: var(--ink);
    border-color: var(--accent-med)
}

.view-work {
    font-size: 13px;
    background: var(--accent);
    color: var(--accent-bold);
    padding: 4px 8px;
    border-radius: 4px;
    opacity: 0;
    white-space: nowrap
}

.drawer nav a:hover .view-work,
.drawer nav a:focus-visible .view-work {
    opacity: 1
}

@keyframes slide-in {
    from {
        transform: translateX(110%)
    }

    to {
        transform: translateX(0)
    }
}

.case-study {
    padding: 176px 12px 140px;
    display: grid;
    gap: var(--grid-gap)
}

.case-title {
    height: 200px;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 20px
}

.case-title h1 {
    font-size: 40px;
    line-height: 1.5;
    font-weight: 400;
    margin: 0
}

.case-panel {
    border-radius: var(--radius-card);
    overflow: hidden;
    margin: 0;
    aspect-ratio: 1488/800;
    background: var(--strip)
}

.case-panel img {
    height: 100%;
    width: 100%;
    object-fit: cover
}

.case-copy {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6% 10%;
    aspect-ratio: auto;
    /* min-height: 52.9vw; */
    min-height: 40vw;
}

.case-copy p {
    font-size: clamp(24px, 2.65vw, 40px);
    line-height: 1.5;
    margin: 0;
    font-weight: 400
}

.email-panel {
    aspect-ratio: auto;
    padding: 40px
}

.email-panel img {
    max-width: 650px;
    margin: auto;
    height: auto;
    object-fit: contain
}

.next-panel {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 15;
    height: 55px;
    min-width: 150px;
    padding: 0 24px;
    border: 2px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--pill);
    color: var(--ink);
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600
}



.next-panel:hover {
    color: var(--on-accent);
    background: var(--accent)
}

.next-project {
    padding: 80px 10%;
    font-size: 14px;
    color: var(--muted)
}

.next-project span {
    display: block;
    font-size: 36px;
    color: var(--ink);
    margin-top: 15px
}

.information {
    max-width: 1600px;
    margin: auto;
    padding: 180px 40px 100px
}

.info-intro {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    padding-bottom: 70px;
    background-color: var(--accent-med);
    border-radius: var(--radius-card);
    padding:60px;
}

.info-intro h1 {
    font-size: clamp(40px, 5vw, 72px);
    line-height: 1.1;
    font-weight: 300
}

.info-intro img {
    /* width: 190px;
    height: 190px;
    object-fit: cover;
    border-radius: 50% */
}

.eyebrow {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--muted)
}

.info-profile {
    display: grid;
    grid-template-columns: minmax(100px, .6fr) minmax(0, 2fr) minmax(160px, .7fr);
    gap: 40px;
    padding: 60px 0;
    border-top: 1px solid var(--line)
}

.information h2 {
    font-size: 36px;
    font-weight: 300;
    margin: 0 0 24px
}

.info-profile p {
    font-size: 24px;
    line-height: 1.6;
    margin-top: 0
}

.text-link {
    border-bottom: 1px solid var(--accent);
    padding-bottom: 4px
}

.testimonials {
    padding: 70px 0;
    border-top: 1px solid var(--line)
}

.contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    border-top: 1px solid var(--line);
    padding-top: 70px
}

.contact h2 {
    font-size: 60px
}

.contact label {
    display: block;
    margin: 0 0 8px
}

.contact input,
.contact textarea {
    width: 100%;
    background: var(--strip);
    border: 1px solid var(--line);
    border-radius: var(--radius-field);
    padding: 14px;
    color: var(--ink)
}

.contact textarea {
    min-height: 140px;
    resize: vertical
}

.contact .mb-3 {
    margin-bottom: 20px
}

.contact button {
    padding: 15px 25px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--button);
    color: var(--on-button)
}

.contact .h-captcha {
    margin-top: 20px
}

@media(max-width:900px) {
    .identity {
        left: 110px;
        transform: none;
        font-size: 10px;
        gap: 7px
    }

    .identity .dot,
    .identity span:last-child {
        display: none
    }

    .year {
        display: none
    }

    
    
}

@media(max-width:600px) {


    .header {
        top: 28px;
        padding: 0 12px
    }

    .header-left {
        left: 8px
    }

    .header-right {
        right: 8px;
        gap: 2px;
    }


    .logo,
    .icon-button,
    .logo img {
        height: 52px;
        width: 52px
    }
    /* .logo,
    .icon-button,
    .logo img {
        height: 42px;
        width: 42px
    } */

    

    .identity {
        display: none
    }

    .header-left:has(.back) .logo {
        display: none
    }

    .pill {
        /* height: 44px; */
        height: 52px;
        padding: 3px;
        gap: 0
    }
    .pill a {
        width: 96px;
        height: 47px;
        font-size: 15px;
    }
    
    /* .pill a {
        width: 87px;
        height: 36px;
        font-size: 13px;
    } */

    .work-grid {
        padding: 106px 8px 50px;
        grid-template-columns: 1fr
    }

    .project-card {
        border-radius: var(--radius-card-mobile)
    }

    .card-caption {
        opacity: 1;
        padding: 20px;
        background: var(--caption)
    }

    .card-caption small {
        font-size: 12px
    }

    .card-caption h2 {
        font-size: 27px
    }

    .card-caption>img {
        width: 32px;
        height: 32px
    }

    .case-study {
        padding: 106px 8px 100px
    }

    .case-title {
        height: 140px
    }

    .case-title h1 {
        font-size: 32px
    }

    .case-panel {
        border-radius: var(--radius-card-mobile);
        aspect-ratio: 9 / 10;
    }

    .case-copy {
        min-height: 0;
        padding: 35px 24px;
        aspect-ratio: auto;
    }

    .case-copy p {
        font-size: 24px
    }

    .next-panel {
        right: 12px;
        /* bottom: 16px; */
        bottom: 120px;
        height: 46px;
        min-width: 112px;
        font-size: 15px
    }

    .email-panel {
        padding: 12px
    }

    .information {
        padding: 120px 24px 60px
    }

    .info-intro {
        flex-direction: column;
        align-items: start;
        gap: 12px;
        padding: 60px 20px;
        border-radius: 60px
    }

    .info-intro img {
        /* height: 110px; */
        /* width: 90%; */
    }

    .info-profile,
    .contact {
        grid-template-columns: 1fr;
        gap: 20px
    }

    .info-profile p {
        font-size: 21px
    }

    .drawer {
        top: 80px;
        border-radius: 30px
    }

    .next-project {
        padding: 50px 24px
    }

    .next-project span {
        font-size: 30px
    }
}



@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *,
    *:before,
    *:after {
        animation: none !important;
        transition: none !important
    }
}



.contact button:hover {
    background: var(--accent);
    color: var(--on-accent);
}

/* Icons contain only artwork. Button surfaces live here. */
.icon-button {
    /* background: var(--icon-button-background); */
    background: var(--page);
}

.icon-button img,
.next-panel img {
    width: var(--icon-size);
    height: var(--icon-size);
    object-fit: contain;
    flex-shrink: 0;
}

.icon-button:hover {
    background: var(--accent);
    border: 1px solid var(--button-stroke);
}

.card-caption>.card-arrow {
    width: var(--icon-size);
    height: var(--icon-size);
}

/* Hover motion: artwork moves, button surfaces stay in place. */
.theme img { transition: transform var(--icon-motion) ease; }
.theme:focus-visible img { transform: rotate(var(--icon-hover-rotation)); }
@media (hover: hover) {
    .theme:hover img { transform: rotate(var(--icon-hover-rotation)); }
}
@media (prefers-reduced-motion: reduce) {
    .theme img { transform: none !important; }
}

/* One SVG: outer bars slide apart and the middle bar grows into place. */
.menu-bars { width: var(--icon-size); height: var(--icon-size); fill: var(--menu-icon-color); flex-shrink: 0; }
.menu-bars rect { transition: transform var(--menu-motion) var(--menu-easing); transform-box: view-box; transform-origin: 15px 14.625px; }
.menu .bar-middle { transform: scaleX(0); }
.menu:is(:focus-visible, [aria-expanded="true"]) .bar-top { transform: translateY(-3px); }
.menu:is(:focus-visible, [aria-expanded="true"]) .bar-bottom { transform: translateY(3.25px); }
.menu:is(:focus-visible, [aria-expanded="true"]) .bar-middle { transform: scaleX(1); }
@media (hover: hover) {
    .menu:hover .bar-top { transform: translateY(-3px); }
    .menu:hover .bar-bottom { transform: translateY(3.25px); }
    .menu:hover .bar-middle { transform: scaleX(1); }
}

/* One shared glass surface. No opacity on the parent or active tab. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .pill {
        -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
        backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    }
}

/* SVG refraction bends the backdrop only; tab text and active fill stay sharp. */
/* WebKit can accept URL syntax without rendering the SVG backdrop filter.
   Keep native frost there, including iPhone Safari. */
@supports (backdrop-filter: url("#pill-refraction")) and (not (-webkit-touch-callout: none)) {
    .pill { backdrop-filter: url("#pill-refraction"); }
}

/* Navigation surfaces and mobile placement. */
.icon-button.menu, .icon-button.back {
    border: 1px solid var(--button-stroke);
}
.icon-button.theme {
    /* border: 0; */
    background: var(--theme-button-tint);
    -webkit-backdrop-filter: blur(var(--theme-button-blur));
    backdrop-filter: blur(var(--theme-button-blur));
}


/* Shared image and header transitions between full HTML pages. */
@view-transition { navigation: auto; }
.project-card { border-radius: 18px; transition: border-radius var(--card-hover-duration) ease; aspect-ratio: 9 / 10;}
.project-card:focus-visible { border-radius: var(--card-hover-radius); }
@media (hover: hover) {
 .project-card:hover { border-radius: var(--card-hover-radius); }
}
.header .logo { view-transition-name: site-logo; }
.header .pill { view-transition-name: site-navigation; }
.header .theme { view-transition-name: site-theme; }
.header .menu { view-transition-name: site-menu; }
.header .back { view-transition-name: site-back; }
.case-title { view-transition-name: project-title; }
::view-transition-group(*) { animation-duration: var(--page-motion-duration); animation-timing-function: var(--page-motion-easing); }
::view-transition-old(root) { animation: 250ms ease both page-out; }
::view-transition-new(root) { animation: 500ms ease both page-in; }
::view-transition-new(project-title) { animation: 650ms var(--page-motion-easing) both title-reveal; }
::view-transition-new(site-back) { animation: 650ms var(--page-motion-easing) both back-reveal; }
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; } }
@keyframes title-reveal { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes back-reveal { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
 @view-transition { navigation: none; }
 ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
/* Keep shared project snapshots fitted to the moving frame without ghosting. */
::view-transition-old(project-dell), ::view-transition-old(project-lenovo), ::view-transition-old(project-altair), ::view-transition-old(project-sharp), ::view-transition-old(project-bmh), ::view-transition-old(project-ruiz), ::view-transition-old(project-sla), ::view-transition-old(project-hpe) { animation: none; opacity: 0; }
::view-transition-new(project-dell), ::view-transition-new(project-lenovo), ::view-transition-new(project-altair), ::view-transition-new(project-sharp), ::view-transition-new(project-bmh), ::view-transition-new(project-ruiz), ::view-transition-new(project-sla), ::view-transition-new(project-hpe) { animation: none; mix-blend-mode: normal; height: 100%; object-fit: cover; }
::view-transition-new(project-title) { animation-delay: 180ms; }
@media (prefers-reduced-motion: reduce) { .project-card { transition: none; } }

/* Project image scroll reveal. Adjust these shared values to tune the motion. */
:root {
    --image-reveal-distance: 20px;
    --image-reveal-duration: 650ms;
    --image-reveal-easing: cubic-bezier(.22, .61, .36, 1);
}
.image-reveal {
    opacity: 0;
    transform: translateY(var(--image-reveal-distance));
    transition: opacity var(--image-reveal-duration) var(--image-reveal-easing),
                transform var(--image-reveal-duration) var(--image-reveal-easing);
}
.image-reveal.image-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .image-reveal { opacity: 1; transform: none; transition: none; }
}

/* Header hover colors follow the active theme. */
.icon-button:is(.theme, .menu):is(:hover, :focus-visible) {
    background: var(--accent);
    color: var(--on-accent);
}
/* The label expands inside the button; the existing heights stay unchanged. */
:root { --next-button-motion: 350ms; }
.next-panel {
    min-width: 0;
    padding-inline: 10.5px;
    gap: 0;
    overflow: hidden;
    transition: padding var(--next-button-motion) ease, gap var(--next-button-motion) ease,
                background var(--motion-fast), color var(--motion-fast);
}
.next-panel-label {
    max-width: 0;
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;
    transition: max-width var(--next-button-motion) ease, opacity var(--next-button-motion) ease;
}
.next-panel:is(:hover, :focus-visible) { padding-inline: 24px; gap: 12px; }
.next-panel:is(:hover, :focus-visible) .next-panel-label { max-width: 140px; opacity: 1; }
@media (max-width: 600px) { .next-panel { padding-inline: 6px; } }
@media (prefers-reduced-motion: reduce) {
    .next-panel, .next-panel-label { transition: none; }
}

/* Keep the glass surface stable while browser snapshots are on screen. */
html.nav-transition .pill,
html.nav-transition .theme {
    /* Avoid filtering the browser's already-flattened navigation snapshots. */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
html.nav-quick { --page-motion-duration: 250ms; }
html.nav-quick::view-transition-old(root), html.nav-quick::view-transition-new(root) { animation-duration: 250ms; }
::view-transition-old(site-navigation) { animation: none; opacity: 0; }
::view-transition-new(site-navigation) { animation: none; mix-blend-mode: normal; }

/* Project slideshow: same one-second cadence as the live portfolio. */
.proj-carousel {
    position: relative;
}

.proj-carousel .carousel-inner,
.proj-carousel .carousel-item {
    height: 100%;
}

.proj-carousel .proj-slide {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-toggle {
    position: absolute;
    z-index: 2;
    bottom: 16px;
    right: 16px;
    padding: 8px;
    border: 0px solid var(--button-stroke);
    border-radius: var(--radius-pill);
    background: var(--theme-button-tint);
    color: var(--ink);
    font: inherit;
    cursor: pointer;
}

.carousel-toggle .carousel-icon {
    width: 30px;
    height: 30px;
}

.carousel-toggle .carousel-icon[hidden] {
    display: none;
}

.carousel-toggle:hover {
    background: var(--accent);
    color: var(--on-accent);
}


/* INFORMATION PAGE — client logos, tools, and testimonial cards.
   Colors use the Figma testimonial palette in the root theme variables.
   Edit card width, padding, and motion here; full copy lives in information.html. */
.client-section {
    padding: 70px 0;
}
.client-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    gap: 32px;
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
}
.client-grid li {
    display: grid;
    place-items: center;
    min-height: 100px;
}
.client-grid img {
    width: 150px;
    height: 70px;
    object-fit: contain;
    /* filter: var(--icon-filter); */
}
.profile-tools h3 {
    margin: 0 0 20px;
    font-size: 16px;
    font-weight: 600;
}
.tools-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.tool-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}
.tool-item img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}
.testimonial-window {
    position: relative;
}
/* Fade only the viewport edges. The last card becomes fully visible at the end. */
.testimonial-window::before,
.testimonial-window::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 64px;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--motion-fast);
}
.testimonial-window::before {
    left: 0;
    background: linear-gradient(to right, var(--page), transparent);
}
.testimonial-window::after {
    right: 0;
    background: linear-gradient(to left, var(--page), transparent);
}
.testimonial-window.has-previous::before,
.testimonial-window.has-next::after {
    opacity: 1;
}
.testimonial-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 350px;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-med) transparent; /* thumb color, track color */
    padding-bottom: 12px;
}
.testimonial-track.is-scrolling {
    scroll-snap-type: none;
}
.testimonial-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    min-height: 350px;
    margin: 0;
    padding: 24px;
    border: 1px solid transparent;
    border-radius: var(--radius-card);
    scroll-snap-align: start;
    /* Opaque page backing prevents the stroke from bleeding through the fill.
       Background clipping preserves the rounded 1px gradient border. */
    background:
        linear-gradient(var(--testimonial-veil), var(--testimonial-veil)) padding-box,
        var(--testimonial-gradient) padding-box,
        linear-gradient(var(--page), var(--page)) padding-box,
        var(--testimonial-stroke-gradient) border-box;
    color: var(--testimonial-text);
}
.testimonial-card blockquote {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.testimonial-card blockquote p {
    margin: 0;
}
.quote-mark {
    display: block;
    flex: none;
    width: 24.703px;
    height: 21.5px;
    background: var(--muted);
    mask: var(--quote-image) center / contain no-repeat;
    -webkit-mask: var(--quote-image) center / contain no-repeat;
}
.quote-open {
    --quote-image: url(assets/icons/testimonial-quote-open.svg);
    transform: scaleX(-1);
}
.quote-close {
    --quote-image: url(assets/icons/testimonial-quote-close.svg);
    align-self: flex-end;
}
.testimonial-card figcaption {
    font-size: 12px;
    line-height: 1.5;
    color: var(--testimonial-muted);
}
.testimonial-card figcaption span {
    display: block;
}
.testimonial-name {
    font-weight: 700;
    color: var(--testimonial-text);
}
.testimonial-role {
    font-weight: 700;
}
.testimonial-controls {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 12px;
}
/* Shared .icon-button hover supplies the header's accent, border and shadow. */
.testimonial-arrow {
    background: transparent;
    border: 1px solid transparent;
    transition: background var(--motion-fast), border-color var(--motion-fast),
                box-shadow var(--motion-fast);
}
.testimonial-arrow:focus-visible {
    background: var(--accent);
    border-color: var(--button-stroke);
    outline-color: var(--accent-bold);
    box-shadow: var(--shadow-hover);
}
.testimonial-track:focus-visible {
    outline: 2px solid var(--accent-bold);
    outline-offset: 4px;
}
.testimonial-arrow:disabled {
    opacity: .35;
    cursor: default;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
@media (max-width: 900px) {
    .client-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
    }
    .info-profile {
        grid-template-columns: 1fr;
    }
    .tools-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px 28px;
    }
}
@media (max-width: 600px) {
    .client-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .testimonial-track {
        grid-auto-columns: min(350px, 88%);
    }
    .testimonial-window::before,
    .testimonial-window::after {
        width: 28px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .testimonial-window::before,
    .testimonial-window::after,
    .testimonial-arrow {
        transition: none;
    }
}


/* SHARED FOOTER */
.site-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px 32px;
    margin: 0 40px;
    padding: 28px 0 100px;
    border-top: 1px solid var(--line);
    color: var(--muted);
}
.footer-identity,
.footer-links {
    display: flex;
    align-items: center;
    gap: 20px;
}
.footer-identity small {
    font-size: 13px;
}
.footer-logo {
    display: grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
}
.footer-logo img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}
.footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 14px;
    color: var(--ink);
    text-underline-offset: 5px;
}
.footer-links a[hidden] {
    display: none;
}
.footer-links a:is(:hover, :focus-visible) {
    color: var(--accent-bold);
    text-decoration: underline;
}
@media (max-width: 600px) {
    .site-footer {
        flex-direction: column;
        align-items: flex-start;
        margin-inline: 24px;
        padding-bottom: 190px;
        gap: 8px;
    }
}

/* Keep the smallest header clear of the logo and menu button. */
@media (max-width: 360px) {
    .pill a { width: 88px; }
}