/* Website-first visual system for the Work and About pages. */

.page-studio-about main,
.page-studio-work main {
    overflow: hidden;
    background: #fffdf8;
}

.page-studio-about .content-hero,
.page-studio-work .content-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-bottom: 1px solid rgba(16, 16, 20, .07);
    background:
        radial-gradient(circle at 8% 12%, rgba(135, 95, 170, .14), transparent 29rem),
        radial-gradient(circle at 92% 72%, rgba(40, 120, 216, .14), transparent 31rem),
        #fffdf8;
}

.page-studio-about .content-hero::before,
.page-studio-work .content-hero::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(circle, rgba(16, 16, 20, .07) 0 1px, transparent 1.5px);
    background-size: 26px 26px;
    content: "";
    opacity: .36;
    mask-image: linear-gradient(90deg, transparent 22%, #000);
}

.page-studio-about .content-hero-grid,
.page-studio-work .content-hero-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: clamp(38px, 5vw, 64px);
    min-height: 500px;
    padding-block: var(--hero-pad-top) var(--hero-pad-bottom);
}

.page-studio-about .content-hero-copy,
.page-studio-work .content-hero-copy { position: relative; z-index: 2; }

.page-studio-about .content-hero h1,
.page-studio-work .content-hero h1 {
    max-width: 22ch;
    margin: 0 0 18px;
    font-size: var(--fs-h1);
    line-height: var(--lh-tight);
    letter-spacing: var(--track-display);
    text-wrap: balance;
}

.page-studio-about .content-hero .lead,
.page-studio-work .content-hero .lead {
    max-width: 610px;
    margin: 0;
    color: #55515c;
    font-size: clamp(1.06rem, 1.55vw, 1.24rem);
    line-height: 1.55;
}

.page-studio-about .content-actions,
.page-studio-work .content-actions { margin-top: 25px; }

.content-diagnostic-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    max-width: 570px;
    margin-top: 20px;
    color: #55515c;
    font-size: .9rem;
    font-weight: 760;
    text-decoration: underline;
    text-decoration-color: rgba(135, 95, 170, .32);
    text-underline-offset: 4px;
}

.content-diagnostic-link > span {
    display: grid;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    place-items: center;
    border: 1px solid rgba(16, 16, 20, .1);
    border-radius: 50%;
    background: rgba(255, 255, 255, .78);
    color: var(--brand-ink);
    text-decoration: none;
}

.page-studio-about .content-section,
.page-studio-work .content-section { padding: var(--section-pad) 0; }

.content-section-heading { max-width: 760px; margin-bottom: 34px; }
.content-section-heading h2 {
    margin: 0;
    font-size: var(--fs-h2);
    line-height: var(--lh-tight);
    letter-spacing: var(--track-tight);
    text-wrap: balance;
}

.content-section-heading--split {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, .6fr);
    align-items: end;
    gap: clamp(34px, 7vw, 100px);
    max-width: none;
}

.content-section-heading--split > p { margin: 0 0 7px; color: #625e68; }

/* About */
.about-founder-frame {
    position: relative;
    width: min(520px, 94%);
    margin: 0 auto;
    padding: 18px;
    border: 1px solid rgba(16, 16, 20, .08);
    border-radius: 38px;
    background: rgba(255, 255, 255, .8);
    box-shadow: 0 34px 86px rgba(30, 25, 44, .17);
    transform: rotate(1.4deg);
}

.about-founder-frame::before {
    position: absolute;
    top: -13%;
    right: -14%;
    z-index: -1;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: linear-gradient(145deg, #d8f3e6, #cbdcf6 55%, #ebdff4);
    content: "";
    filter: blur(1px);
}

.about-founder-photo {
    overflow: hidden;
    aspect-ratio: 4 / 4.55;
    border-radius: 26px;
    background: linear-gradient(145deg, #e8ddf3, #c6dff6);
}

.about-founder-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }

.about-founder-frame figcaption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 17px 7px 2px;
}

.about-founder-frame figcaption strong,
.about-founder-frame figcaption span { font: 800 .8rem/1.15 Inter, Arial, sans-serif; }
.about-founder-frame figcaption span { color: #68636c; }

.about-floating-note {
    position: absolute;
    display: grid;
    width: 68px;
    height: 68px;
    place-items: center;
    border: 1px solid rgba(16, 16, 20, .09);
    border-radius: 22px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 17px 40px rgba(30, 25, 44, .15);
    color: var(--brand-ink);
    font: 850 .75rem/1 Inter, Arial, sans-serif;
    backdrop-filter: blur(14px);
    animation: content-float 4.8s ease-in-out 1 both;
}

.about-floating-note--top { top: 14%; left: -11%; }
.about-floating-note--bottom { right: -10%; bottom: 20%; animation-delay: -2.2s; color: var(--blue); }

@keyframes content-float {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-9px) rotate(1deg); }
}

.content-section--principles { background: #fff; }
.about-principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.about-principle {
    min-height: 220px;
    padding: 26px;
    border: 1px solid rgba(16, 16, 20, .09);
    border-radius: 25px;
    background: linear-gradient(150deg, #fff, #fbf8f2);
    box-shadow: 0 13px 35px rgba(28, 23, 38, .05);
    transition: transform .28s cubic-bezier(.22, 1, .36, 1), box-shadow .28s ease;
}

.about-principle:hover { transform: translateY(-6px); box-shadow: 0 23px 52px rgba(28, 23, 38, .1); }
.about-principle > span { color: var(--brand); font: 850 .72rem/1 Inter, Arial, sans-serif; letter-spacing: .08em; }
.about-principle h3 { margin: 62px 0 8px; font-size: 1.45rem; }
.about-principle p { margin: 0; color: #625d67; }

.content-section--founder { border-block: 1px solid rgba(16, 16, 20, .06); background: #f7f2e9; }
.about-founder-panel { display: grid; grid-template-columns: minmax(380px, .92fr) minmax(0, 1.08fr); align-items: center; gap: clamp(48px, 8vw, 112px); }
.about-founder-copy h2 { max-width: 24ch; margin-bottom: 18px; font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: var(--track-tight); }
.about-founder-copy > p:not(.eyebrow) { max-width: 650px; color: #5c5862; font-size: 1.05rem; }
.about-founder-copy .about-principle-quote { padding-left: 17px; border-left: 3px solid var(--brand); color: #22202a; font-weight: 800; }

.about-builder-visual { position: relative; min-height: 400px; perspective: 900px; }
.builder-card {
    position: absolute;
    display: grid;
    width: 58%;
    min-height: 245px;
    align-content: space-between;
    padding: 23px;
    border: 1px solid rgba(16, 16, 20, .08);
    border-radius: 27px;
    background: #fff;
    box-shadow: 0 25px 58px rgba(29, 25, 40, .14);
    transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}

.builder-card i { width: 46px; height: 46px; border: 8px solid #e7dcf3; border-radius: 16px; }
.builder-card b { color: #9b91a1; font: 850 .72rem/1 Inter, Arial, sans-serif; }
.builder-card span { font: 850 1.3rem/1 Inter, Arial, sans-serif; }
.builder-card--strategy { top: 20%; left: 0; z-index: 1; transform: rotate(-8deg); }
.builder-card--design { top: 7%; left: 21%; z-index: 2; background: #f3edfb; transform: rotate(1deg); }
.builder-card--design i { border-color: #b7a3d2; border-radius: 50%; }
.builder-card--build { top: 22%; right: 0; z-index: 3; background: #eef6fd; transform: rotate(8deg); }
.builder-card--build i { border-color: #9fc7ef; }
.about-builder-visual:hover .builder-card--strategy { transform: translateX(-10px) rotate(-11deg); }
.about-builder-visual:hover .builder-card--design { transform: translateY(-12px) rotate(0); }
.about-builder-visual:hover .builder-card--build { transform: translateX(10px) rotate(11deg); }

.content-section--mission { background: #fffdf8; }
.about-mission-band {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(24px, 4vw, 48px);
    padding: clamp(28px, 4vw, 46px);
    border: 1px solid rgba(16, 16, 20, .09);
    border-radius: 29px;
    background: linear-gradient(130deg, #f1f8fd, #fff 48%, #f5eefb);
    box-shadow: 0 22px 62px rgba(35, 29, 48, .09);
}

.about-mission-mark { display: grid; width: 82px; height: 82px; place-items: center; border-radius: 25px; background: #fff; box-shadow: 0 13px 34px rgba(30, 25, 43, .12); color: var(--brand-ink); font: 850 1.2rem/1 Inter, Arial, sans-serif; }
.about-mission-band h2 { margin: 0 0 7px; font-size: var(--fs-h3); }
.about-mission-band p:last-child { margin: 0; color: #615d66; }

/* Work */
.work-hero-art { position: relative; min-height: 440px; perspective: 1000px; }
.work-browser { position: absolute; overflow: hidden; border: 7px solid #171923; border-radius: 21px; background: #fff; box-shadow: 0 29px 68px rgba(24, 26, 40, .21); }
.work-browser header { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; background: #f2eee7; }
.work-browser header i { width: 8px; height: 8px; border-radius: 50%; background: #cbc4cc; }
.work-browser header i:first-child { background: #ff765c; }
.work-browser header i:nth-child(2) { background: #f5bd43; }
.work-browser header i:nth-child(3) { background: var(--green); }
.work-browser--back { inset: 3% 17% 18% 0; background: #edf5fd; transform: rotate(-8deg) translateZ(-30px); }
.work-browser--front { inset: 14% 0 0 12%; transform: rotate(2.2deg); transition: transform .55s cubic-bezier(.22, 1, .36, 1); }
.work-hero-art:hover .work-browser--front { transform: translateY(-7px) rotate(.8deg); }
.work-browser-layout { display: grid; grid-template-columns: 30% repeat(3, 1fr); gap: 10px; height: calc(100% - 34px); padding: 21px; }
.work-browser-layout span { grid-row: span 2; border-radius: 13px; background: #20232e; }
.work-browser-layout b { border-radius: 13px; background: rgba(255, 255, 255, .82); }
.work-browser-hero { display: grid; grid-template-columns: 1fr .9fr; gap: 16px; padding: 24px 24px 14px; }
.work-browser-hero > div { display: grid; align-content: center; gap: 9px; }
.work-browser-hero b { display: block; height: 13px; border-radius: 5px; background: #23252f; }
.work-browser-hero b:nth-child(2) { width: 72%; background: #555865; }
.work-browser-hero i { width: 46%; height: 27px; margin-top: 4px; border-radius: 99px; background: linear-gradient(90deg, var(--brand), var(--blue)); }
.work-browser-hero > span { min-height: 178px; border-radius: 17px; background: radial-gradient(circle at 72% 27%, rgba(255,255,255,.8) 0 10%, transparent 11%), linear-gradient(145deg, #c1d9f2, #e3d4ee 54%, #bde3d1); }
.work-browser-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; padding: 0 24px 22px; }
.work-browser-cards i { height: 66px; border: 1px solid #e5e0e6; border-radius: 11px; background: #fbfaf7; }

.work-proof-chip { position: absolute; z-index: 4; padding: 11px 15px; border: 1px solid rgba(16,16,20,.09); border-radius: 999px; background: rgba(255,255,255,.91); box-shadow: 0 14px 35px rgba(28,25,40,.14); font: 850 .73rem/1 Inter,Arial,sans-serif; backdrop-filter: blur(12px); animation: content-float 4.8s ease-in-out 1 both; }
.work-proof-chip::before { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--green); content: ""; }
.work-proof-chip--one { top: 6%; right: 3%; }
.work-proof-chip--two { bottom: 3%; left: 5%; animation-delay: -2.6s; }
.work-proof-chip--two::before { background: var(--blue); }

.content-section--capabilities { background: #fff; }
.work-capability-grid { display: grid; grid-template-columns: 1.2fr .9fr .9fr; gap: 15px; }
.work-capability {
    display: flex;
    min-height: 385px;
    flex-direction: column;
    overflow: hidden;
    padding: 27px;
    border: 1px solid rgba(16,16,20,.09);
    border-radius: 27px;
    background: #fff;
    color: var(--ink);
    box-shadow: 0 15px 42px rgba(29,24,40,.06);
    transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}

.work-capability:hover { transform: translateY(-7px); box-shadow: 0 27px 64px rgba(29,24,40,.13); }
.work-capability--website { background: linear-gradient(145deg, #fff, #f2ebfa); }
.work-capability--automation { background: linear-gradient(145deg, #fff, #eaf8f1); }
.work-capability--apps { background: linear-gradient(145deg, #fff, #eaf2fb); }
.work-capability h3 { margin: 8px 0 18px; font-size: clamp(1.65rem, 2.55vw, 2.6rem); line-height: 1.02; }
.work-capability-link { margin-top: auto; font-weight: 850; }

.capability-site { align-self: center; width: 86%; height: 145px; margin-bottom: 24px; padding: 18px; border: 6px solid #1c1e28; border-radius: 16px; background: #fff; box-shadow: 0 18px 35px rgba(26,25,36,.16); transform: rotate(-2deg); }
.capability-site span { display: block; width: 42%; height: 10px; margin-bottom: 20px; border-radius: 99px; background: #242630; }
.capability-site i { display: block; width: 66%; height: 8px; margin: 7px 0; border-radius: 99px; background: #d6d2da; }
.capability-site b { display: block; width: 36%; height: 24px; margin-top: 14px; border-radius: 99px; background: linear-gradient(90deg,var(--brand),var(--blue)); }
.capability-flow { position: relative; height: 145px; margin-bottom: 24px; }
.capability-flow::before { position: absolute; top: 67px; right: 12%; left: 12%; height: 3px; border-radius: 99px; background: #bfe6d3; content: ""; }
.capability-flow i { position: absolute; top: 42px; z-index: 1; width: 51px; height: 51px; border: 8px solid #fff; border-radius: 17px; background: var(--green); box-shadow: 0 10px 25px rgba(13,100,69,.15); }
.capability-flow i:first-child { left: 1%; }
.capability-flow i:nth-child(2) { left: calc(50% - 25px); background: var(--gold); }
.capability-flow i:nth-child(3) { right: 1%; background: var(--blue); }
.capability-flow span { position: absolute; top: 61px; left: 18%; z-index: 2; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(19,163,111,.17); animation: capability-run 3.2s ease-in-out 1 both; }
@keyframes capability-run { 0% { left: 18%; opacity: 0; } 12%, 88% { opacity: 1; } 100% { left: 79%; opacity: 0; } }
.capability-dashboard { display: grid; grid-template-columns: 28% 1fr; overflow: hidden; height: 145px; margin-bottom: 24px; border: 6px solid #1c1e28; border-radius: 17px; background: #fff; box-shadow: 0 18px 35px rgba(25,32,57,.16); transform: rotate(2deg); }
.capability-dashboard > span { background: #252836; }
.capability-dashboard > div { display: flex; align-items: end; gap: 7px; padding: 20px 13px; }
.capability-dashboard i { flex: 1; height: 32%; border-radius: 5px 5px 2px 2px; background: #cbd7ed; }
.capability-dashboard i:nth-child(2) { height: 58%; }
.capability-dashboard i:nth-child(3) { height: 82%; background: #8ca9e5; }
.capability-dashboard i:nth-child(4) { height: 66%; background: var(--blue); }

/* Motion is progressive: content stays visible without JavaScript. */
.js .page-studio-about [data-motion] { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.js .page-studio-about [data-motion].is-inview { opacity: 1; transform: translateY(0); }

@media (max-width: 1020px) {
    .page-studio-about .content-hero-grid,
    .page-studio-work .content-hero-grid { grid-template-columns: 1fr; min-height: auto; }
    .page-studio-about .content-hero-copy,
    .page-studio-work .content-hero-copy { max-width: 760px; }
    .about-founder-frame { width: min(560px,88%); }
    .work-hero-art { width: min(720px,100%); min-height: 470px; margin-inline: auto; }
    .about-founder-panel { grid-template-columns: 1fr; }
    .about-builder-visual { width: min(620px,100%); margin-inline: auto; }
    .work-capability-grid { grid-template-columns: 1fr 1fr; }
    .work-capability--website { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
    .page-studio-about .content-hero-grid,
    .page-studio-work .content-hero-grid { min-height: auto; }
    .content-section-heading--split { grid-template-columns: 1fr; gap: 16px; }
    .about-principle-grid,
    .work-capability-grid { grid-template-columns: 1fr; }
    .work-capability--website { grid-column: auto; }
    .about-mission-band { grid-template-columns: auto 1fr; }
    .about-mission-band .text-link { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    .about-founder-frame { width: 92%; padding: 12px; border-radius: 28px; }
    .about-founder-photo { border-radius: 20px; }
    .about-floating-note { width: 56px; height: 56px; border-radius: 18px; }
    .about-floating-note--top { left: -7%; }
    .about-floating-note--bottom { right: -7%; }
    .about-principle { min-height: 185px; }
    .about-principle h3 { margin-top: 40px; }
    .about-builder-visual { min-height: 340px; width: 100%; margin-inline: 0; }
    .builder-card { min-height: 210px; padding: 18px; }
    .about-mission-band { grid-template-columns: 1fr; }
    .work-hero-art { min-height: 350px; margin-inline: -9%; width: 118%; }
    .work-browser { border-width: 5px; }
    .work-browser--back { inset: 4% 14% 18% 0; }
    .work-browser--front { inset: 15% 0 0 9%; }
    .work-browser-hero { padding: 17px 17px 10px; }
    .work-browser-hero > span { min-height: 125px; }
    .work-browser-cards { padding: 0 17px 16px; }
    .work-browser-cards i { height: 45px; }
    .work-proof-chip { font-size: .65rem; }
    .work-capability { min-height: 340px; }
}

@media (prefers-reduced-motion: reduce) {
    .about-floating-note,
    .work-proof-chip,
    .capability-flow span { animation: none !important; }
    .about-principle,
    .builder-card,
    .work-browser--front,
    .work-capability { transition: none !important; }
    .js .page-studio-about [data-motion] { opacity: 1; transform: none; transition: none; }
}