/* Edgar Cabral — 1st-Pouf claymorphism adaptation. See /licenses/1st-pouf.txt. */
@font-face {
    font-family:'Nunito Variable';
    src:url('../fonts/nunito-latin-variable.woff2') format('woff2');
    font-style:normal;
    font-weight:200 1000;
    font-display:swap
}

@font-face {
    font-family:'Fredoka Variable';
    src:url('../fonts/fredoka-latin-variable.woff2') format('woff2');
    font-style:normal;
    font-weight:300 700;
    font-display:swap
}

:root {
    --text:var(--ink);
    --accent:#7144b2;
    --line:#ded1f2;
    --display:'Fredoka Variable','Nunito Variable',sans-serif;
    --max:1240px;
    --zappy:#571eb8;
    --zappy-lilac:#c679ec;
    --pimer:#ff4900;
    --ease:cubic-bezier(.2,.9,.3,1.2);
    color-scheme:light
}

* {
    box-sizing:border-box
}

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

body {
    margin:0;
    min-height:100vh;
    overflow-x:clip;
    background:var(--bg);
    color:var(--ink);
    font:700 16px/1.65 var(--font);
    -webkit-font-smoothing:antialiased
}

body:before {
    content:'';
    position:absolute;
    z-index:-1;
    inset:0 0 auto;
    height:1050px;
    pointer-events:none;
    background:radial-gradient(ellipse at 86% 16%,#ffdcec80,transparent 48%),radial-gradient(ellipse at 2% 60%,#dcecff77,transparent 50%)
}

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

button,input,select,textarea {
    font:inherit
}

button,a {
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent
}

button {
    cursor:pointer;
    color:inherit
}

button {
    line-height:1.2
}

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

svg {
    vertical-align:middle
}

::selection {
    background:var(--purple);
    color:var(--ink)
}

:focus-visible {
    outline:3px solid var(--ink);
    outline-offset:5px
}

[hidden],.hidden {
    display:none!important
}

.wrap {
    width:min(var(--max),calc(100% - 80px));
    margin-inline:auto
}

.skip {
    position:fixed;
    left:20px;
    top:-100px;
    z-index:100;
    padding:14px 22px;
    border-radius:var(--r-control);
    background:var(--yellow);
    color:var(--ink);
    box-shadow:var(--pouf-control)
}

.skip:focus {
    top:20px
}

.progress {
    position:fixed;
    top:0;
    left:0;
    width:0;
    height:5px;
    background:var(--zappy-lilac);
    z-index:80;
    border-radius:0 8px 8px 0
}

/* Navigation is a floating white cushion, with pressed state for the current route. */
.nav-shell {
    position:sticky;
    top:0;
    z-index:40;
    padding-top:22px;
    transition:padding 160ms ease
}

.nav-shell.scrolled {
    padding-top:10px
}

.nav {
    min-height:86px;
    padding:16px 22px 20px 25px;
    border-radius:var(--r-card);
    background:var(--surface);
    box-shadow:var(--pouf-card);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px
}

.brand {
    display:flex;
    gap:11px;
    align-items:center;
    font-family:var(--display);
    font-size:22px;
    font-weight:600;
    letter-spacing:-.4px;
    white-space:nowrap
}

.brand-mark {
    display:grid;
    place-items:center;
    min-width:45px;
    height:45px;
    padding-bottom:4px;
    border-radius:16px;
    background:var(--purple);
    box-shadow:var(--pouf-blob);
    font-family:var(--display);
    font-size:27px;
    font-weight:600;
    letter-spacing:-2px
}

.nav-links {
    display:flex;
    align-items:center;
    gap:6px;
    font-size:14px;
    font-weight:900
}

.nav-links>a {
    padding:10px 11px 12px;
    border-radius:14px;
    transition:background .15s,box-shadow .15s,transform .15s
}

.nav-links>a:hover,.nav-links>a[aria-current] {
    background:var(--bg);
    box-shadow:var(--pouf-field)
}

.nav-links .contact-link {
    margin-left:8px;
    background:var(--purple);
    box-shadow:var(--pouf-control);
    padding:14px 21px;
    font-size:15px
}

.nav-links .contact-link:hover {
    background:var(--purple);
    transform:translateY(-2px);
    box-shadow:var(--pouf-control)
}

.nav-links .contact-link:active {
    transform:translateY(2px);
    box-shadow:var(--pouf-control-active)
}

.menu-toggle {
    display:none;
    border:0;
    border-radius:16px;
    min-height:44px;
    padding:12px 17px;
    background:var(--purple);
    box-shadow:var(--pouf-control);
    font-size:14px;
    font-weight:900
}

/* Shared controls use the exact three-shadow recipe from 1st-Pouf. */
.button,.filter,.dialog-close,.copy-button,.motion-toggle {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:48px;
    border:0;
    border-radius:var(--r-control);
    padding:14px 25px;
    color:var(--on-accent);
    background:var(--purple);
    box-shadow:var(--pouf-control);
    font-size:15px;
    line-height:1.2;
    font-weight:1000;
    transition:transform 140ms var(--ease),box-shadow 140ms ease;
    position:relative
}

.button:hover,.filter:hover,.dialog-close:hover {
    transform:translateY(-3px)
}

.button:active,.filter:active,.dialog-close:active,.copy-button:active,.motion-toggle:active {
    transform:translateY(2px)!important;
    box-shadow:var(--pouf-control-active)
}

.button.secondary {
    background:var(--surface);
    box-shadow:var(--pouf-row);
    color:var(--ink)
}

.button.secondary:active {
    box-shadow:var(--pouf-control-active)
}

.actions {
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    align-items:center
}

.text-link {
    font-size:15px;
    font-weight:1000;
    display:inline-block;
    border-bottom:2px solid #bca1dc;
    padding-bottom:3px
}

.text-link:hover {
    color:var(--zappy);
    border-color:var(--zappy)
}

.eyebrow {
    display:flex;
    align-items:center;
    gap:9px;
    line-height:1.35;
    color:var(--muted);
    font-size:12px;
    font-weight:1000;
    letter-spacing:1.15px;
    text-transform:uppercase;
    margin:0 0 23px
}

.eyebrow:before {
    content:'';
    width:11px;
    height:11px;
    background:var(--purple);
    border-radius:4px;
    flex:none;
    box-shadow:inset 0 -2px 0 #3a2e5c20
}

.glass {
    background:var(--surface);
    border:0;
    box-shadow:var(--pouf-card);
    border-radius:var(--r-card)
}

/* Main introduction: rounded display type, soft highlight and dimensional portrait. */
.hero {
    display:grid;
    grid-template-columns:1.17fr 1fr;
    align-items:center;
    gap:46px;
    padding:84px 0 65px;
    min-height:760px
}

.hero .eyebrow {
    display:inline-flex;
    background:var(--surface);
    border-radius:999px;
    padding:10px 16px;
    color:var(--ink);
    font-size:12px;
    letter-spacing:.8px;
    box-shadow:var(--pouf-row)
}

.hero h1 {
    font-family:var(--display);
    font-weight:600;
    line-height:1.08;
    font-size:clamp(54px,5.45vw,80px);
    letter-spacing:-2.1px;
    margin:0 0 25px
}

.hero h1 span {
    display:inline-block;
    background:var(--orange);
    border-radius:22px;
    padding:1px 15px 11px;
    margin-top:9px;
    margin-left:-10px;
    box-shadow:var(--pouf-blob);
    color:var(--ink);
    transform:rotate(-1.5deg);
    white-space:nowrap
}

.hero-lead {
    font-size:18px;
    line-height:1.75;
    max-width:530px;
    margin:30px 0;
    color:var(--muted);
    font-weight:700
}

.hero-lead strong {
    font-weight:1000;
    color:var(--ink)
}

.hero .button.primary {
    background:var(--purple);
    font-size:16px;
    min-height:54px
}

.hero .button.secondary {
    min-height:54px;
    font-size:16px
}

.hero-signature {
    margin-top:32px;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center
}

.hero-signature>span {
    width:100%;
    color:var(--muted);
    font-size:14px;
    margin-bottom:1px
}

.brand-logo {
    display:block;
    width:100%;
    height:auto;
    object-fit:contain;
    max-width:none
}

.hero-brand-pill {
    display:flex;
    align-items:center;
    justify-content:center;
    width:148px;
    min-height:57px;
    padding:16px 20px;
    border-radius:19px;
    box-shadow:var(--pouf-control);
    transition:transform .18s var(--ease)
}

.hero-brand-pill.zappy {
    background:var(--zappy)
}

.hero-brand-pill.pimer {
    background:#fff4ec
}

.hero-brand-pill.pimer .brand-logo {
    width:101px
}

.hero-brand-pill:hover {
    transform:translateY(-4px) rotate(-1deg)
}

.hero-brand-pill:active {
    transform:translateY(2px);
    box-shadow:var(--pouf-control-active)
}

.hero-visual {
    height:540px;
    position:relative;
    isolation:isolate;
    perspective:1200px
}

.portrait-stage {
    position:absolute;
    inset:12px 35px 25px 24px;
    border-radius:145px 145px 38px 38px;
    background:var(--mint);
    box-shadow:inset 0 -13px 0 #77cbae70,inset 0 8px 0 #ffffffa0,0 25px 45px #3a2e5c24;
    overflow:hidden;
    transform:rotate(-3deg);
    transition:transform .25s ease-out
}

.portrait-stage:before {
    content:'';
    position:absolute;
    inset:28px 24px 26px;
    border-radius:125px 125px 25px 25px;
    background:#c8a8ff66;
    box-shadow:inset 0 3px 8px #3a2e5c10
}

.portrait-stage img {
    position:absolute;
    bottom:-3%;
    left:2%;
    height:100%;
    width:96%;
    object-fit:contain;
    object-position:center bottom;
    filter:drop-shadow(0 16px 12px #3a2e5c1a);
    transform:rotate(3deg)
}

.float-label {
    position:absolute;
    z-index:3;
    box-shadow:var(--pouf-card);
    border-radius:24px;
    padding:17px 21px 24px;
    transition:transform .2s var(--ease)
}

.float-label.top {
    right:-6px;
    /* Mantener la tarjeta debajo del rostro al cambiar el tamaño del retrato. */
    top:42%;
    display:flex;
    align-items:center;
    gap:13px;
    background:var(--yellow);
    transform:rotate(5deg);
    box-shadow:var(--pouf-blob)
}

.float-label.top .code-icon {
    display:grid;
    place-items:center;
    width:45px;
    height:45px;
    border-radius:15px;
    background:var(--blue);
    box-shadow:var(--pouf-blob);
    font-size:20px;
    color:var(--ink);
    font-weight:1000
}

.float-label span {
    display:block;
    font-size:12px;
    color:var(--muted);
    line-height:1.5
}

.float-label strong {
    display:block;
    font-family:var(--display);
    font-size:18px;
    font-weight:500
}

.float-label.bottom {
    left:-10px;
    bottom:33px;
    min-width:275px;
    transform:rotate(-4deg);
    background:white
}

.float-label.bottom>span {
    font-size:10px;
    font-weight:1000;
    letter-spacing:.5px
}

.float-label.bottom b {
    display:block;
    font-family:var(--display);
    font-size:21px;
    font-weight:500;
    margin:4px 0
}

.float-roles {
    display:flex;
    gap:10px;
    align-items:center;
    margin-top:12px
}

.float-roles>span {
    color:var(--muted);
    font-size:12px;
    font-weight:1000
}

.mini-brand {
    width:92px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8px 12px;
    border-radius:11px;
    background:var(--zappy);
    box-shadow:var(--pouf-control)
}

.mini-brand.pimer {
    background:#ffdfc9
}

.mini-brand.pimer .brand-logo {
    width:63px
}

.visual-caption {
    position:absolute;
    right:30px;
    bottom:-12px;
    font-size:10px;
    font-weight:1000;
    letter-spacing:1px;
    color:var(--muted)
}

.hero-line {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    font-size:12px;
    color:var(--muted);
    font-weight:900;
    padding:20px 3px
}

.cities,.scroll-cue {
    display:flex;
    align-items:center;
    gap:10px
}

.mouse {
    display:inline-block;
    width:16px;
    height:24px;
    border:2px solid #9c84b8;
    border-radius:12px;
    position:relative
}

.mouse:before {
    content:'';
    position:absolute;
    left:5px;
    top:4px;
    width:2px;
    height:5px;
    border-radius:2px;
    background:var(--ink)
}

.expertise-strip {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    padding:24px 29px 31px;
    margin-top:7px;
    background:white;
    border-radius:var(--r-card);
    box-shadow:var(--pouf-card);
    color:var(--ink);
    font-family:var(--display);
    font-size:17px;
    font-weight:500
}

.expertise-strip i {
    display:block;
    width:8px;
    height:8px;
    border-radius:3px;
    background:var(--pink);
    transform:rotate(15deg);
    flex:none
}

/* Section rhythm and expressive, padded surfaces. */
section {
    scroll-margin-top:128px
}

.section {
    padding-block:83px
}

.section-head {
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:40px;
    margin-bottom:42px
}

.section-head .eyebrow {
    margin-bottom:18px
}

.section-head h2,.section-title {
    font-family:var(--display);
    font-weight:500;
    font-size:clamp(37px,3.7vw,52px);
    line-height:1.15;
    letter-spacing:-1px;
    margin:0
}

.section-head h2 em,.section-title em {
    font-style:normal;
    color:#8e62b8
}

.section-head p {
    max-width:370px;
    color:var(--muted);
    font-size:16px;
    margin:0 0 4px;
    line-height:1.75
}

.section-head>.text-link {
    flex:none;
    margin-bottom:6px
}

#productos {
    padding-top:84px
}

.products {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:32px;
    align-items:stretch
}

.product-card {
    --product-tone:var(--purple);
    --product-soft:#f3e9ff;
    --product-deep:var(--zappy);
    position:relative;
    isolation:isolate;
    min-width:0;
    border:0;
    border-radius:var(--r-card);
    background:var(--surface);
    box-shadow:var(--pouf-card);
    overflow:hidden;
    transform-style:preserve-3d;
    transition:transform .2s var(--ease),box-shadow .2s ease
}

.product-card.pimer {
    --product-tone:var(--orange);
    --product-soft:#fff1e8;
    --product-deep:#b73808
}

.product-card:hover {
    box-shadow:inset 0 -10px 0 #c9a8ff59,inset 0 6px 0 #ffffffe6,0 26px 46px #3a2e5c26
}

.product-card:focus-within {
    outline:3px solid var(--product-tone);
    outline-offset:4px
}

.product-visual {
    position:relative;
    height:374px;
    background:var(--product-tone);
    margin:13px 13px 0;
    border-radius:25px;
    overflow:hidden;
    box-shadow:inset 0 -8px 0 #3a2e5c16,inset 0 5px 0 #ffffff5e
}

.product-visual:before {
    content:'';
    position:absolute;
    inset:55% -10% -35%;
    border-radius:50%;
    background:#ffffff24;
    box-shadow:inset 0 5px 0 #ffffff20
}

.product-meta-top {
    position:absolute;
    top:20px;
    left:22px;
    right:22px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    font-size:10px;
    letter-spacing:.4px;
    font-weight:1000;
    z-index:3
}

.role-badge {
    border-radius:999px;
    padding:6px 10px;
    background:#ffffff8a;
    color:var(--ink);
    font-size:10px;
    white-space:nowrap;
    letter-spacing:.1px
}

.logo-plate {
    position:absolute;
    display:flex;
    align-items:center;
    justify-content:center;
    top:74px;
    left:50%;
    transform:translateX(-50%);
    width:224px;
    min-height:71px;
    padding:17px 23px 21px;
    border-radius:21px;
    z-index:2;
    background:var(--zappy);
    box-shadow:var(--pouf-blob);
    transition:transform .2s var(--ease)
}

.pimer .logo-plate {
    left:30px;
    top:138px;
    transform:rotate(-4deg);
    width:201px;
    min-height:87px;
    background:#fffaf6;
    padding:19px 23px 25px
}

.capture-button {
    position:absolute;
    cursor:zoom-in;
    background:transparent;
    padding:0;
    border:0;
    display:block;
    transition:transform .3s var(--ease)
}

.zappy .capture-button {
    left:4%;
    top:148px;
    width:92%;
    transform:perspective(900px) rotateX(4deg) rotateY(-4deg) rotateZ(-1.5deg)
}

.product-capture {
    width:100%;
    height:auto;
    filter:drop-shadow(0 14px 18px #3a2e5c24);
    transition:transform .3s var(--ease)
}

.pimer .capture-button {
    right:35px;
    top:86px;
    width:176px;
    transform:rotate(8deg)
}

.pimer .product-capture {
    border:7px solid white;
    border-radius:28px;
    box-shadow:0 15px 25px #87321328;
    aspect-ratio:540/1106;
    object-fit:cover;
    object-position:top;
    filter:none
}

.capture-button:hover {
    filter:brightness(1.03)
}

.capture-caption {
    position:absolute;
    bottom:29%;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:11px 15px 14px;
    background:white;
    box-shadow:var(--pouf-control);
    color:var(--ink);
    border-radius:16px;
    font-size:14px;
    font-weight:1000;
    white-space:nowrap;
    opacity:0;
    transition:opacity .15s
}

.pimer .capture-caption {
    bottom:40%
}

.capture-button:hover .capture-caption,.capture-button:focus-visible .capture-caption {
    opacity:1
}

.product-body {
    padding:31px 32px 42px
}

.product-body .mini {
    font-size:11px;
    font-weight:1000;
    letter-spacing:1px;
    color:var(--product-deep)
}

.product-body h3 {
    font-family:var(--display);
    font-size:30px;
    line-height:1.25;
    letter-spacing:-.4px;
    font-weight:500;
    margin:12px 0 25px
}

.product-tablist {
    display:flex;
    gap:6px;
    background:var(--bg);
    border-radius:21px;
    box-shadow:var(--pouf-field);
    padding:7px
}

.product-tab {
    flex:1;
    min-width:0;
    min-height:43px;
    border:0;
    border-radius:16px;
    background:transparent;
    color:var(--muted);
    padding:10px 7px;
    font-size:14px;
    font-weight:1000;
    white-space:nowrap;
    transition:transform .15s,box-shadow .15s,background .15s
}

.product-tab[aria-selected=true] {
    background:var(--product-tone);
    box-shadow:var(--pouf-control);
    color:var(--ink)
}

.product-tab:hover {
    background:#ffffffb3;
    color:var(--ink)
}

.product-tab[aria-selected=true]:hover {
    background:var(--product-tone)
}

.product-tab:active {
    transform:translateY(2px);
    box-shadow:var(--pouf-control-active)
}

.product-panels {
    padding:25px 2px 20px;
    min-height:185px
}

.product-panel h4 {
    font-family:var(--display);
    font-size:20px;
    line-height:1.35;
    font-weight:500;
    margin:0 0 11px
}

.product-panel p {
    color:var(--muted);
    font-size:16px;
    line-height:1.7;
    margin:0;
    font-weight:700
}

.product-bottom {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:21px 0 0;
    border-top:2px dashed #e6d8f3
}

.ownership-label {
    font-size:12px;
    line-height:1.6;
    color:var(--muted);
    font-weight:700
}

.ownership-label strong {
    color:var(--ink);
    font-size:14px;
    font-weight:1000
}

.product-cta {
    background:var(--product-tone);
    font-size:14px;
    padding:14px 20px;
    white-space:nowrap
}

.award {
    display:flex;
    gap:17px;
    align-items:center;
    margin-top:27px;
    padding:19px 25px 25px;
    background:var(--yellow);
    border-radius:24px;
    box-shadow:var(--pouf-blob);
    font-size:14px;
    color:var(--on-accent-muted)
}

.award strong {
    color:var(--ink);
    font-weight:1000
}

.award .star {
    font-size:30px;
    line-height:1;
    color:#8a5b23;
    flex:none
}

/* Five service cushions, each using one of the reference system's tones. */
.services-layout {
    display:grid;
    grid-template-columns:.82fr 1.18fr;
    gap:75px;
    align-items:start
}

.services-intro {
    position:sticky;
    top:145px
}

.services-intro p:not(.eyebrow) {
    font-size:17px;
    line-height:1.75;
    color:var(--muted);
    margin:24px 0 28px;
    max-width:365px
}

.service-list {
    display:grid;
    gap:17px
}

.service-row {
    --tone:var(--purple);
    background:white;
    border:0;
    border-radius:25px;
    box-shadow:var(--pouf-row);
    overflow:hidden;
    transition:box-shadow .15s,transform .15s
}

.service-row:nth-child(2) {
    --tone:var(--mint)
}

.service-row:nth-child(3) {
    --tone:var(--pink)
}

.service-row:nth-child(4) {
    --tone:var(--blue)
}

.service-row:nth-child(5) {
    --tone:var(--yellow)
}

.service-row:hover {
    box-shadow:var(--pouf-row-hover)
}

.service-row summary {
    list-style:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:16px;
    padding:22px 24px 28px
}

.service-row summary::-webkit-details-marker {
    display:none
}

.service-num {
    width:39px;
    height:39px;
    display:grid;
    place-items:center;
    flex:none;
    border-radius:13px;
    box-shadow:var(--pouf-blob);
    background:var(--tone);
    font-size:13px;
    font-weight:1000;
    padding-bottom:3px
}

.service-row h3 {
    font-family:var(--display);
    font-size:22px;
    font-weight:500;
    letter-spacing:-.2px;
    line-height:1.3;
    flex:1;
    margin:0
}

.plus {
    font-family:var(--font);
    font-size:26px;
    line-height:1;
    color:#9880b5;
    transition:transform .15s
}

.service-row[open] .plus {
    transform:rotate(45deg)
}

.service-content {
    padding:0 25px 30px 80px;
    color:var(--muted);
    font-size:16px
}

.service-content p {
    margin:0 0 16px;
    line-height:1.75
}

.tags {
    display:flex;
    flex-wrap:wrap;
    gap:7px
}

.tags span {
    font-size:12px;
    color:var(--on-accent-muted);
    background:var(--tone,var(--bg));
    padding:6px 11px;
    border-radius:999px;
    font-weight:900
}

.service-content a {
    color:var(--ink);
    font-size:14px;
    display:inline-block;
    margin-top:20px;
    font-weight:1000;
    text-decoration:underline;
    text-underline-offset:4px
}

/* Professional biography and evidence. */
.about {
    padding:55px 55px 64px;
    display:grid;
    grid-template-columns:1fr 1.1fr;
    gap:60px;
    background:white
}

.about .eyebrow {
    color:var(--muted)
}

.about h2 {
    font-family:var(--display);
    font-size:45px;
    line-height:1.16;
    font-weight:500;
    letter-spacing:-.7px;
    margin:0 0 28px
}

.about p {
    font-size:16px;
    line-height:1.8;
    color:var(--muted)
}

.about .hello {
    font-family:var(--display);
    font-size:26px;
    font-weight:500;
    color:var(--ink);
    line-height:1.3;
    margin:0 0 20px
}

.about-facts {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:17px;
    margin-top:30px
}

.about-facts>div {
    background:var(--blue);
    padding:23px 21px 30px;
    border-radius:var(--r-blob);
    box-shadow:var(--pouf-blob)
}

.about-facts>div:nth-child(2) {
    background:var(--mint)
}

.about-facts strong {
    font-family:var(--display);
    font-weight:500;
    font-size:39px;
    line-height:1.15;
    display:block;
    letter-spacing:-.7px
}

.about-facts span {
    display:block;
    font-size:12px;
    line-height:1.6;
    margin-top:9px;
    color:var(--on-accent-muted)
}

.about .quote {
    color:var(--ink);
    font-family:var(--display);
    font-size:22px;
    line-height:1.45;
    font-weight:400;
    background:var(--yellow);
    padding:20px 24px 26px;
    margin:25px 0 27px;
    border-radius:22px;
    box-shadow:var(--pouf-blob)
}

.about-long {
    display:grid;
    grid-template-columns:.72fr 1.2fr;
    gap:60px;
    align-items:start
}

.about-long>div:first-child {
    padding:13px 13px 25px;
    background:white;
    border-radius:var(--r-card);
    box-shadow:var(--pouf-card);
    transform:rotate(-2deg)
}

.about-photo {
    width:100%;
    height:auto;
    max-height:590px;
    object-fit:cover;
    border-radius:24px
}

.footer-note {
    font-size:13px;
    color:var(--muted);
    margin:15px 12px 0
}

.about-long>div:nth-child(2) {
    padding-top:15px
}

.about-long>div:nth-child(2)>p {
    font-size:17px;
    line-height:1.75;
    margin:24px 0
}

.timeline {
    list-style:none;
    padding:0;
    display:grid;
    gap:17px;
    margin:28px 0 0
}

.timeline li {
    padding:22px 25px 28px;
    border-radius:24px;
    background:white;
    box-shadow:var(--pouf-row)
}

.timeline strong {
    display:inline-block;
    padding:5px 10px;
    background:var(--purple);
    border-radius:999px;
    color:var(--ink);
    font-size:11px;
    font-weight:1000
}

.timeline li:nth-child(2) strong {
    background:var(--mint)
}

.timeline li:nth-child(3) strong {
    background:var(--orange)
}

.timeline h3 {
    font-family:var(--display);
    font-size:23px;
    font-weight:500;
    line-height:1.3;
    margin:13px 0 9px
}

.timeline p {
    color:var(--muted);
    font-size:16px;
    margin:0
}

.media-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px
}

.media-card {
    padding:30px 30px 37px;
    transition:transform .15s var(--ease);
    font-size:18px
}

.media-card:nth-child(2n) {
    background:#fff4f8
}

.media-card p {
    font-family:var(--display);
    font-size:25px;
    font-weight:500;
    margin:13px 0 22px
}

.media-card small {
    font-size:11px;
    font-weight:1000;
    color:var(--muted)!important
}

.media-card:hover {
    transform:translateY(-4px)
}

/* Portfolio, categories, project details and editorial cards. */
.portfolio-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:29px
}

.work-card {
    --tone:var(--blue);
    min-width:0;
    padding:13px 13px 12px;
    background:white;
    border-radius:var(--r-card);
    box-shadow:var(--pouf-card);
    transition:transform .18s var(--ease)
}

.work-card:nth-child(3n+2) {
    --tone:var(--pink)
}

.work-card:nth-child(3n+3) {
    --tone:var(--mint)
}

.work-card:hover {
    transform:translateY(-6px) rotate(-.4deg)
}

.work-card:focus-within {
    outline:3px solid var(--ink);
    outline-offset:4px
}

.work-image {
    height:232px;
    border-radius:23px;
    overflow:hidden;
    background:var(--tone);
    box-shadow:inset 0 -5px 0 #3a2e5c16
}

.work-image img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .35s var(--ease)
}

.work-image--contain {
    background:#f7fafc
}

.work-image--contain img {
    object-fit:contain
}

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

.work-info {
    padding:22px 12px 24px;
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:start
}

.work-info h3 {
    font-family:var(--display);
    font-size:24px;
    line-height:1.25;
    font-weight:500;
    letter-spacing:-.2px;
    margin:0
}

.work-info p {
    color:var(--muted);
    font-size:13px;
    font-weight:800;
    margin:7px 0 0
}

.work-info>span {
    font-size:12px;
    font-weight:1000;
    padding:4px 8px;
    background:var(--tone);
    border-radius:999px;
    white-space:nowrap;
    margin-top:3px
}

.filters {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin:0 0 26px
}

.filter {
    background:white;
    border-radius:18px;
    font-size:14px;
    padding:13px 21px;
    box-shadow:var(--pouf-row)
}

.filter[aria-pressed=true] {
    background:var(--purple);
    box-shadow:var(--pouf-control)
}

.count-label {
    color:var(--muted);
    font-size:14px;
    font-weight:900;
    margin:0 0 25px
}

.writing-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:27px
}

.article-card {
    --tone:var(--purple);
    display:flex;
    flex-direction:column;
    min-height:328px;
    padding:31px 29px 40px;
    transition:transform .18s var(--ease)
}

.article-card:nth-child(3n+2) {
    --tone:var(--mint)
}

.article-card:nth-child(3n+3) {
    --tone:var(--orange)
}

.article-card:hover {
    transform:translateY(-6px) rotate(.5deg)
}

.article-meta {
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    font-size:12px;
    color:var(--muted);
    font-weight:900
}

.article-meta .tag {
    padding:6px 10px;
    background:var(--tone,var(--purple));
    color:var(--on-accent);
    border-radius:999px;
    font-size:10px;
    letter-spacing:.3px;
    font-weight:1000
}

.article-card h3 {
    font-family:var(--display);
    font-size:27px;
    line-height:1.25;
    letter-spacing:-.3px;
    font-weight:500;
    margin:22px 0 14px
}

.article-card p {
    font-size:16px;
    line-height:1.7;
    color:var(--muted);
    margin:0 0 24px
}

.article-bottom {
    align-self:start;
    margin-top:auto;
    display:inline-flex;
    background:var(--tone);
    color:var(--ink);
    box-shadow:var(--pouf-control);
    border-radius:15px;
    padding:11px 16px 13px;
    font-size:14px;
    font-weight:1000
}

.press {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:28px 32px 35px;
    margin-top:47px;
    border-radius:26px;
    background:#ffffff85;
    box-shadow:var(--pouf-row)
}

.press>span {
    font-size:11px;
    color:var(--muted);
    font-weight:1000;
    max-width:190px
}

.press>a {
    font-family:var(--display);
    font-size:22px;
    font-weight:500;
    color:#826ba1
}

.press>a:hover {
    color:var(--zappy)
}

.page-hero {
    padding:80px 0 50px
}

.page-hero h1 {
    font-family:var(--display);
    font-weight:500;
    line-height:1.1;
    font-size:clamp(43px,5.1vw,70px);
    letter-spacing:-1.8px;
    margin:0 0 26px;
    max-width:1030px;
    overflow-wrap:anywhere
}

.page-hero>p:not(.eyebrow) {
    color:var(--muted);
    font-size:19px;
    line-height:1.75;
    max-width:740px;
    margin:0
}

.page-hero .eyebrow {
    margin-bottom:21px
}

.breadcrumb {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:11px;
    color:var(--muted);
    font-size:13px;
    line-height:1.55;
    margin-bottom:31px
}

.breadcrumb a {
    font-weight:1000
}

.breadcrumb>a:hover {
    color:var(--zappy)
}

.breadcrumb>span:last-child {
    color:var(--ink);
    font-weight:800
}

.project-hero-image {
    width:100%;
    max-height:590px;
    object-fit:cover;
    border:13px solid white;
    border-radius:var(--r-card);
    box-shadow:var(--pouf-card)
}

.project-hero-image.project-hero-image--full {
    display:block;
    width:auto;
    max-width:100%;
    margin-inline:auto;
    height:auto;
    max-height:none;
    object-fit:contain
}

.project-copy {
    display:grid;
    grid-template-columns:.7fr 1.3fr;
    gap:55px;
    padding:55px 0 25px;
    align-items:start
}

.project-cover {
    display:block;
    width:100%;
    padding:0;
    border:0;
    background:none;
    border-radius:var(--r-card);
    cursor:zoom-in
}

.project-media {
    padding:40px 0 25px
}

.project-video {
    max-width:1040px;
    margin-inline:auto;
    padding:13px 13px 20px;
    background:white;
    border-radius:var(--r-card);
    box-shadow:var(--pouf-card)
}

.project-video-frame {
    position:relative;
    aspect-ratio:16/9;
    border-radius:22px;
    overflow:hidden;
    background:var(--ink)
}

.project-video-frame iframe {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0
}

.project-video>.text-link {
    display:inline-flex;
    margin:18px 10px 0
}

.project-gallery {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    align-items:start;
    gap:24px
}

.project-gallery--pair {
    grid-template-columns:repeat(2,minmax(0,1fr))
}

.project-gallery--screens {
    grid-template-columns:repeat(5,minmax(0,1fr))
}

.project-capture {
    display:block;
    width:100%;
    min-width:0;
    padding:10px;
    border:0;
    background:white;
    border-radius:24px;
    box-shadow:var(--pouf-card);
    text-align:left;
    cursor:zoom-in
}

.project-capture img {
    width:100%;
    height:auto;
    border-radius:16px
}

.project-capture--wide {
    grid-column:1/-1;
    max-width:1044px;
    margin:0 auto 12px
}

.project-capture-caption {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:16px 6px 10px;
    font-size:15px;
    line-height:1.4;
    font-weight:900
}

.project-capture-caption>span {
    color:var(--zappy);
    font-size:20px
}

.project-gallery-dialog.capture-dialog>img {
    max-height:none
}

.project-carousel .section-head {
    flex-wrap:wrap;
    align-items:center;
    gap:24px
}

.project-carousel-controls {
    display:flex;
    align-items:center;
    gap:12px
}

.project-carousel-arrow {
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    border:0;
    border-radius:16px;
    background:white;
    color:var(--zappy);
    box-shadow:var(--pouf-field);
    font-size:24px;
    cursor:pointer
}

.project-carousel-arrow:disabled {
    opacity:.4;
    cursor:default
}

.project-carousel-controls .project-carousel-status {
    min-width:80px;
    margin:0;
    text-align:center;
    font-size:14px;
    font-weight:800;
    white-space:nowrap
}

.project-carousel-track {
    display:flex;
    gap:24px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:12px;
    overscroll-behavior-x:contain;
    padding:12px 12px 26px;
    margin:-12px -12px 0;
    scrollbar-width:thin;
    scrollbar-color:var(--purple) transparent
}

.project-carousel-track>.project-capture {
    flex:0 0 calc((100% - 72px)/4);
    scroll-snap-align:start
}

@media(max-width:900px) {
    .project-gallery {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

    .project-carousel-track>.project-capture {
        flex-basis:calc((100% - 24px)/2)
    }
}

@media(max-width:600px) {
    .project-media {
        padding:25px 0
    }

    .project-video {
        padding:10px 10px 16px
    }

    .project-video-frame {
        border-radius:18px
    }

    .project-gallery {
        gap:18px 14px
    }

    .project-gallery--pair {
        grid-template-columns:minmax(0,1fr)
    }

    .project-carousel-track {
        gap:14px
    }

    .project-carousel-track>.project-capture {
        flex-basis:82%
    }

    .project-capture {
        padding:7px;
        border-radius:18px
    }

    .project-capture img {
        border-radius:12px
    }

    .project-capture-caption {
        gap:5px;
        padding:12px 4px 8px;
        font-size:13px
    }
}

.project-copy h2 {
    font-family:var(--display);
    font-size:37px;
    line-height:1.2;
    font-weight:500;
    letter-spacing:-.6px;
    margin:0 0 25px
}

.project-copy p {
    color:var(--muted);
    font-size:17px;
    line-height:1.75
}

.project-summary {
    background:white;
    border-radius:var(--r-card);
    padding:30px 35px 40px;
    box-shadow:var(--pouf-card);
    overflow-wrap:anywhere
}

.project-summary p {
    margin:0 0 20px;
    font-size:16px
}

.project-summary a {
    color:var(--zappy);
    font-weight:900;
    text-decoration:underline;
    text-underline-offset:4px
}

.project-summary blockquote {
    margin:0 0 20px;
    padding:18px 22px 22px;
    background:var(--bg);
    border-radius:18px;
    box-shadow:var(--pouf-field)
}

.project-summary blockquote p {
    color:var(--ink);
    margin:0
}

.project-summary .tags a {
    font-size:14px;
    background:var(--mint);
    padding:6px 10px;
    border-radius:999px;
    color:var(--ink)
}

.source-note {
    font-size:13px!important;
    line-height:1.7;
    border-top:2px dashed var(--line);
    padding-top:22px;
    margin-top:27px!important;
    color:var(--muted)
}

.source-note a {
    font-size:13px;
    font-weight:1000
}

.article-header {
    max-width:940px
}

.article-header h1 {
    font-size:clamp(38px,4.5vw,60px);
    line-height:1.16;
    letter-spacing:-1px
}

.article-header .article-meta {
    font-size:14px;
    margin-top:25px;
    gap:12px
}

.article-header .article-meta>span:first-child {
    background:var(--purple);
    color:var(--ink);
    padding:7px 13px;
    border-radius:999px
}

.detail-content {
    background:white;
    max-width:900px;
    margin:0 auto 30px;
    padding:39px 48px 54px;
    border-radius:var(--r-card);
    box-shadow:var(--pouf-card);
    font-size:18px;
    line-height:1.85;
    font-weight:650;
    color:#584a73;
    overflow-wrap:anywhere
}

.detail-content h2,.detail-content h3,.detail-content h4 {
    font-family:var(--display);
    color:var(--ink);
    font-weight:500;
    line-height:1.25;
    margin:40px 0 20px;
    letter-spacing:-.3px
}

.detail-content h2 {
    font-size:34px
}

.detail-content h3 {
    font-size:28px
}

.detail-content h4 {
    font-size:24px
}

.detail-content p {
    margin:0 0 23px
}

.detail-content strong,.detail-content b {
    font-weight:900;
    color:var(--ink)
}

.detail-content a {
    color:var(--zappy);
    font-weight:900;
    text-decoration:underline;
    text-underline-offset:4px
}

.detail-content ul,.detail-content ol {
    padding-left:26px;
    margin:0 0 26px
}

.detail-content li {
    margin:10px 0
}

.detail-content li::marker {
    color:#9b6ed0;
    font-weight:1000
}

.detail-content img {
    height:auto;
    max-width:100%;
    border-radius:23px;
    margin:28px auto
}

.detail-content blockquote {
    background:var(--yellow);
    color:var(--ink);
    border-radius:24px;
    padding:24px 29px 30px;
    margin:30px 0;
    box-shadow:var(--pouf-blob)
}

.detail-content blockquote p:last-child {
    margin-bottom:0
}

.detail-content table {
    display:block;
    max-width:100%;
    overflow-x:auto;
    border-collapse:collapse;
    font-size:16px
}

.detail-content td,.detail-content th {
    padding:13px 16px;
    border:1px solid var(--line)
}

.detail-content th {
    background:var(--bg)
}

.detail-content pre {
    padding:20px;
    border-radius:20px;
    background:var(--bg);
    max-width:100%;
    overflow:auto;
    font-size:14px
}

.detail-content hr {
    border:0;
    border-top:2px dashed var(--line);
    margin-block:30px
}

/* Dedicated product pages keep the same cushions and branded emphasis. */
.product-detail-showcase {
    display:grid;
    grid-template-columns:1.18fr 1fr;
    margin-bottom:40px;
    transform:none!important;
    min-height:456px
}

.product-detail-showcase .product-visual {
    margin:13px;
    height:430px
}

.product-detail-showcase .product-body {
    padding:38px 34px 43px;
    align-self:center
}

.product-detail-showcase .product-body .eyebrow {
    color:var(--product-deep);
    margin-bottom:25px
}

.product-detail-showcase .product-body .eyebrow:before {
    background:var(--product-tone)
}

.product-detail-showcase .product-panels {
    min-height:185px
}

.product-detail-showcase .product-panel h4 {
    font-size:25px;
    line-height:1.25
}

.product-detail-showcase.pimer .logo-plate {
    left:23px;
    top:162px;
    width:216px
}

.product-detail-showcase.pimer .capture-button {
    right:27px;
    top:80px;
    width:184px
}

.product-detail-showcase.zappy .capture-button {
    top:154px
}

.case-columns {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
    margin:32px 0
}

.case-columns>div {
    padding:30px 29px 40px
}

.case-columns>div:nth-child(2) {
    background:#fff6eb
}

.case-columns>div:nth-child(3) {
    background:#f2fff7
}

.case-columns small {
    display:inline-grid;
    place-items:center;
    width:36px;
    height:36px;
    background:var(--purple);
    border-radius:12px;
    box-shadow:var(--pouf-blob);
    color:var(--ink);
    font-size:12px;
    font-weight:1000;
    padding-bottom:3px
}

.brand-page.pimer .case-columns small {
    background:var(--orange)
}

.case-columns h3 {
    font-family:var(--display);
    font-weight:500;
    font-size:26px;
    line-height:1.3;
    margin:20px 0 13px
}

.case-columns p {
    font-size:16px;
    line-height:1.8;
    color:var(--muted);
    margin:0
}

.brand-page.zappy .page-hero .eyebrow {
    color:var(--zappy)
}

.brand-page.pimer .page-hero .eyebrow {
    color:#b73808
}

.brand-page.pimer .page-hero .eyebrow:before {
    background:var(--orange)
}

.brand-page.pimer>.wrap>.actions>.primary {
    background:var(--orange)
}

.brand-page.zappy>.wrap>.actions>.primary {
    background:var(--purple)
}

/* Contact, footer, dialogs and empty route. */
.contact-panel {
    padding:62px 50px 74px;
    text-align:center;
    background:var(--purple);
    box-shadow:var(--pouf-blob);
    border-radius:40px;
    position:relative
}

.contact-panel .eyebrow {
    justify-content:center;
    color:var(--on-accent-muted);
    margin-bottom:23px
}

.contact-panel .eyebrow:before {
    background:white
}

.contact-panel h2 {
    font-family:var(--display);
    font-size:clamp(40px,4.5vw,65px);
    font-weight:500;
    line-height:1.13;
    letter-spacing:-1px;
    margin:0 0 25px
}

.contact-panel h2 em {
    font-style:normal;
    color:var(--ink)
}

.contact-panel p {
    font-size:18px;
    line-height:1.75;
    max-width:580px;
    color:var(--on-accent-muted);
    margin:0 auto 31px
}

.contact-panel .actions {
    justify-content:center
}

.contact-panel .button.primary {
    background:var(--mint);
    font-size:16px
}

.contact-panel .button.secondary {
    font-size:16px
}

.contact-direct {
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    margin-top:33px;
    font-size:13px;
    color:var(--on-accent-muted)
}

.contact-direct>* {
    padding:8px 13px;
    background:#ffffff60;
    border-radius:999px
}

.contact-direct a:hover {
    background:#ffffffb3
}

.contact-page-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
    margin:10px auto 28px
}

.contact-item {
    padding:31px 29px 40px;
    min-width:0
}

.contact-item:nth-child(2) {
    background:#fff5e9
}

.contact-item:nth-child(3) {
    background:#e7fff0
}

.contact-item small {
    font-size:11px;
    font-weight:1000;
    letter-spacing:.6px;
    color:var(--muted)
}

.contact-item h2 {
    font-family:var(--display);
    font-size:24px;
    font-weight:500;
    line-height:1.3;
    margin:18px 0
}

.contact-item a {
    font-size:16px;
    font-weight:1000;
    color:var(--zappy);
    text-decoration:underline;
    text-underline-offset:4px
}

.contact-item p {
    font-size:16px;
    color:var(--muted);
    line-height:1.75
}

.copy-button {
    background:var(--orange);
    font-size:14px;
    min-height:42px;
    padding:11px 16px
}

.footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    flex-wrap:wrap;
    margin-bottom:32px;
    padding:29px 30px 36px;
    background:white;
    border-radius:var(--r-card);
    box-shadow:var(--pouf-card)
}

.footer .brand {
    font-size:20px
}

.footer .brand-mark {
    width:39px;
    min-width:39px;
    height:39px;
    font-size:25px;
    border-radius:14px
}

.footer>span {
    font-size:12px;
    color:var(--muted);
    max-width:none;
    white-space:nowrap
}

.socials {
    display:flex;
    gap:18px;
    font-size:14px;
    font-weight:1000
}

.socials a:hover {
    color:var(--zappy)
}

.motion-toggle {
    background:var(--bg);
    box-shadow:var(--pouf-field);
    font-size:12px;
    padding:11px 15px;
    min-height:40px;
    border-radius:14px
}

.motion-toggle:hover {
    background:var(--purple)
}

.capture-dialog {
    position:fixed;
    inset:0;
    margin:auto;
    width:min(1050px,calc(100vw - 48px));
    max-width:none;
    max-height:90dvh;
    padding:0;
    background:white;
    border:0;
    color:var(--ink);
    border-radius:var(--r-card);
    box-shadow:var(--pouf-card);
    overflow:auto;
    overscroll-behavior:contain
}

.capture-dialog::backdrop {
    background:#3a2e5c66;
    backdrop-filter:blur(2px)
}

.dialog-toolbar {
    position:sticky;
    top:0;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:19px 25px 24px;
    background:white;
    box-shadow:var(--pouf-row);
    font-family:var(--display);
    font-size:20px;
    font-weight:500
}

.dialog-close {
    background:var(--pink);
    font-family:var(--font);
    font-size:14px;
    padding:12px 17px;
    min-height:45px;
    gap:13px;
    border-radius:17px
}

.dialog-close span {
    font-size:22px;
    line-height:1
}

.capture-dialog>img {
    display:block;
    max-width:calc(100% - 40px);
    max-height:72dvh;
    width:auto;
    height:auto;
    object-fit:contain;
    margin:27px auto 38px;
    border-radius:18px
}

.notfound {
    padding:110px 0 100px;
    text-align:center;
    min-height:60vh
}

.notfound .eyebrow {
    justify-content:center
}

.notfound p:not(.eyebrow) {
    font-size:18px;
    color:var(--muted);
    margin-bottom:28px
}

/* Tactile motion; no compulsory animation. */
.reveal {
    opacity:1;
    transform:none
}

.motion-on .reveal {
    transition:opacity .55s ease,transform .55s var(--ease)
}

.motion-on .reveal.pre-reveal {
    opacity:0;
    transform:translateY(20px)
}

.motion-on .product-panel.panel-enter {
    animation:pouf-content-enter .22s var(--ease)
}

.motion-on .capture-dialog[open] {
    animation:pouf-dialog-enter .18s var(--ease)
}

.motion-on .float-label.top {
    animation:pouf-float-top 8s ease-in-out infinite
}

.motion-on .float-label.bottom {
    animation:pouf-float-bottom 9s ease-in-out infinite
}

@keyframes pouf-content-enter {
    from {
        opacity:.2;
        transform:translateY(6px)
    }

    to {
        opacity:1;
        transform:translateY(0)
    }

}

@keyframes pouf-dialog-enter {
    from {
        opacity:0;
        scale:.96
    }

    to {
        opacity:1;
        scale:1
    }

}

@keyframes pouf-float-top {
    0%,100% {
        transform:rotate(5deg) translateY(0)
    }

    50% {
        transform:rotate(3deg) translateY(-7px)
    }

}

@keyframes pouf-float-bottom {
    0%,100% {
        transform:rotate(-4deg) translateY(0)
    }

    50% {
        transform:rotate(-2deg) translateY(6px)
    }

}

.no-motion *,.no-motion *:before,.no-motion *:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
}

.no-motion .reveal {
    opacity:1!important;
    transform:none!important
}

.no-motion [data-tilt],.no-motion .portrait-stage,.no-motion .float-label,.no-motion .capture-button {
    transform:none!important
}

/* Tablet layout retains the same token-driven shapes and depth. */
@media(min-width:1600px) {
    .hero {
        min-height:800px
    }

    .hero h1 {
        font-size:82px
    }

}

@media(max-width:1150px) {
    .wrap {
        width:calc(100% - 60px)
    }

    .nav {
        padding-inline:20px;
        gap:15px
    }

    .brand {
        font-size:20px
    }

    .nav-links {
        gap:1px
    }

    .nav-links>a {
        padding-inline:9px;
        font-size:13px
    }

    .nav-links .contact-link {
        padding-inline:17px;
        font-size:14px
    }

    .hero {
        gap:30px;
        min-height:710px
    }

    .hero h1 {
        font-size:63px
    }

    .hero-visual {
        height:500px
    }

    .portrait-stage {
        inset:10px 20px 22px 13px
    }

    .float-label.top {
        right:-5px
    }

    .float-label.bottom {
        left:-15px
    }

    .hero .actions {
        gap:12px
    }

    .hero .button {
        padding-inline:21px;
        font-size:15px
    }

    .services-layout {
        gap:45px
    }

    .about {
        padding:43px 40px 52px;
        gap:39px
    }

    .about h2 {
        font-size:39px
    }

    .about-facts {
        gap:12px
    }

    .about-facts>div {
        padding:20px 15px 27px
    }

    .expertise-strip {
        font-size:15px;
        padding-inline:24px
    }

    .product-visual {
        height:340px
    }

    .product-meta-top {
        left:17px;
        right:17px;
        font-size:9px
    }

    .role-badge {
        font-size:9px;
        padding:6px 8px
    }

    .logo-plate {
        width:198px;
        top:69px;
        min-height:64px;
        padding:15px 22px 20px
    }

    .zappy .capture-button {
        top:143px;
        width:98%;
        left:1%
    }

    .pimer .logo-plate {
        left:22px;
        width:168px;
        top:137px;
        min-height:76px;
        padding:17px 20px 22px
    }

    .pimer .capture-button {
        width:153px;
        right:25px;
        top:91px
    }

    .product-body {
        padding:28px 27px 39px
    }

    .product-body h3 {
        font-size:28px
    }

    .product-tablist {
        gap:4px;
        padding:6px
    }

    .product-tab {
        font-size:14px;
        padding-inline:5px
    }

    .product-panels {
        min-height:211px
    }

    .product-bottom {
        flex-wrap:wrap
    }

    .product-cta {
        padding:13px 18px
    }

    .work-image {
        height:200px
    }

    .work-info {
        padding-inline:9px
    }

    .work-info h3 {
        font-size:22px
    }

    .writing-grid {
        gap:23px
    }

    .article-card {
        padding:27px 25px 36px
    }

    .article-card h3 {
        font-size:25px
    }

    .product-detail-showcase {
        grid-template-columns:1.1fr 1fr
    }

    .product-detail-showcase .product-body {
        padding:30px 26px 38px
    }

    .product-detail-showcase .product-visual {
        height:416px
    }

    .product-detail-showcase.pimer .logo-plate {
        width:170px;
        left:18px
    }

    .product-detail-showcase.pimer .capture-button {
        right:20px;
        width:168px
    }

    .product-detail-showcase .product-tablist {
        flex-wrap:wrap
    }

    .product-detail-showcase .product-tab {
        min-width:86px
    }

    .product-detail-showcase .product-panels {
        min-height:223px
    }

    .contact-item {
        padding:28px 25px 36px
    }

    .contact-item h2 {
        font-size:22px
    }

    .contact-item a {
        font-size:15px
    }

}

@media(max-width:900px) {
    .wrap {
        width:calc(100% - 44px)
    }

    .nav {
        min-height:80px;
        padding:15px 20px 20px
    }

    .nav-links {
        display:none;
        position:absolute;
        top:112px;
        left:22px;
        right:22px;
        padding:18px 18px 25px;
        background:white;
        border-radius:26px;
        box-shadow:var(--pouf-card);
        flex-direction:column;
        align-items:stretch;
        gap:7px
    }

    .nav-shell.scrolled .nav-links {
        top:99px
    }

    .nav-links.open {
        display:flex
    }

    .nav-links>a {
        font-size:16px;
        padding:13px 17px
    }

    .nav-links .contact-link {
        margin:3px 0 0;
        padding:16px;
        font-size:16px;
        text-align:center
    }

    .menu-toggle {
        display:inline-flex
    }

    .hero {
        grid-template-columns:1.07fr 1fr;
        gap:22px;
        min-height:655px;
        padding:65px 0 50px
    }

    .hero h1 {
        font-size:50px;
        letter-spacing:-1.3px
    }

    .hero h1 span {
        border-radius:18px;
        padding-inline:11px;
        margin-left:-5px
    }

    .hero-lead {
        font-size:17px;
        line-height:1.7
    }

    .hero .eyebrow {
        font-size:10px;
        padding:9px 12px;
        letter-spacing:.5px
    }

    .hero-visual {
        height:452px
    }

    .portrait-stage {
        inset:7px 15px 25px 13px
    }

    .float-label.top {
        padding:13px 16px 19px;
        gap:10px
    }

    .float-label strong {
        font-size:15px
    }

    .float-label.top .code-icon {
        width:34px;
        height:34px;
        font-size:17px;
        border-radius:12px
    }

    .float-label.top span {
        font-size:11px
    }

    .float-label.bottom {
        min-width:235px;
        padding:14px 18px 23px;
        left:-8px;
        bottom:22px
    }

    .float-label.bottom b {
        font-size:18px
    }

    .float-label.bottom>span {
        font-size:9px
    }

    .mini-brand {
        width:73px;
        height:30px;
        padding:8px 10px
    }

    .mini-brand.pimer .brand-logo {
        width:51px
    }

    .float-roles {
        gap:8px
    }

    .hero-brand-pill {
        width:124px;
        min-height:48px;
        padding:13px 16px 17px;
        border-radius:16px
    }

    .hero-brand-pill.pimer .brand-logo {
        width:84px
    }

    .hero-signature>span {
        font-size:13px
    }

    .visual-caption {
        display:none
    }

    .hero .button {
        font-size:14px!important;
        min-height:48px!important;
        padding-inline:18px
    }

    .hero .actions {
        gap:13px
    }

    .expertise-strip {
        gap:16px;
        flex-wrap:wrap;
        justify-content:center;
        font-size:16px
    }

    .expertise-strip i {
        display:none
    }

    .section {
        padding-block:66px
    }

    #productos {
        padding-top:70px
    }

    .section-head h2,.section-title {
        font-size:40px
    }

    .section-head {
        gap:25px
    }

    .section-head p {
        max-width:280px;
        font-size:16px
    }

    .products {
        grid-template-columns:1fr;
        gap:30px
    }

    .product-card:not(.product-detail-showcase) {
        display:grid;
        grid-template-columns:1fr 1fr;
        align-items:stretch
    }

    .product-visual {
        height:auto;
        min-height:520px;
        margin:13px 0 13px 13px
    }

    .product-meta-top {
        flex-direction:column;
        align-items:start;
        gap:7px;
        left:20px;
        top:24px
    }

    .role-badge {
        font-size:9px
    }

    .logo-plate {
        width:205px;
        top:108px
    }

    .zappy .capture-button {
        top:205px;
        width:144%;
        left:-20%
    }

    .pimer .logo-plate {
        width:201px;
        left:50%;
        transform:translateX(-50%) rotate(-4deg);
        top:110px
    }

    .pimer .capture-button {
        width:183px;
        top:238px;
        right:calc(50% - 91px)
    }

    .product-body {
        padding:34px 25px 43px
    }

    .product-body .mini {
        font-size:10px;
        letter-spacing:.5px
    }

    .product-body h3 {
        font-size:27px
    }

    .product-tablist {
        flex-wrap:wrap;
        gap:5px
    }

    .product-tab {
        min-width:80px;
        font-size:14px;
        padding-inline:6px
    }

    .product-panels {
        min-height:220px
    }

    .product-bottom {
        gap:18px
    }

    .product-bottom .button {
        font-size:14px
    }

    .services-layout {
        grid-template-columns:1fr;
        gap:28px
    }

    .services-intro {
        position:static
    }

    .services-intro p:not(.eyebrow) {
        max-width:620px
    }

    .service-row summary {
        padding:21px 24px 26px
    }

    .about {
        grid-template-columns:1fr;
        gap:32px;
        padding:42px 40px 52px
    }

    .about h2 {
        font-size:42px
    }

    .about-facts {
        max-width:460px;
        margin-top:25px
    }

    .about-facts>div {
        padding:22px 22px 29px
    }

    .about .hello {
        font-size:26px
    }

    .portfolio-grid {
        grid-template-columns:1fr 1fr
    }

    .work-image {
        height:220px
    }

    .writing-grid {
        grid-template-columns:1fr
    }

    .article-card {
        min-height:unset;
        display:grid;
        grid-template-columns:1fr auto;
        column-gap:28px;
        padding:30px 31px 40px
    }

    .article-card .article-meta,.article-card h3,.article-card p {
        grid-column:1
    }

    .article-card .article-bottom {
        grid-column:2;
        grid-row:1/4;
        align-self:center
    }

    .article-card h3 {
        margin-top:18px;
        font-size:29px
    }

    .article-card p {
        margin-bottom:0
    }

    .press {
        gap:20px;
        justify-content:flex-start
    }

    .press>span {
        max-width:none;
        width:100%
    }

    .press>a {
        font-size:20px
    }

    .about-long {
        gap:35px;
        grid-template-columns:.75fr 1.1fr
    }

    .about-long .section-title {
        font-size:35px
    }

    .about-long>div:nth-child(2)>p {
        font-size:16px
    }

    .timeline li {
        padding:22px 23px 27px
    }

    .timeline h3 {
        font-size:22px
    }

    .media-card {
        padding:26px 25px 34px
    }

    .media-card p {
        font-size:23px
    }

    .project-copy {
        grid-template-columns:1fr;
        gap:18px;
        padding-top:40px
    }

    .project-copy h2 {
        font-size:36px
    }

    .project-summary {
        padding:31px 34px 40px
    }

    .product-detail-showcase {
        grid-template-columns:1fr 1fr;
        min-height:520px
    }

    .product-detail-showcase .product-visual {
        height:auto;
        min-height:480px;
        margin:13px 0 13px 13px
    }

    .product-detail-showcase .product-body {
        padding:28px 24px 40px
    }

    .product-detail-showcase .product-body .eyebrow {
        font-size:10px
    }

    .product-detail-showcase .product-panels {
        min-height:233px
    }

    .product-detail-showcase.zappy .capture-button {
        top:205px
    }

    .product-detail-showcase.pimer .logo-plate {
        left:50%;
        width:202px;
        top:110px
    }

    .product-detail-showcase.pimer .capture-button {
        width:182px;
        right:calc(50% - 91px);
        top:238px
    }

    .case-columns {
        grid-template-columns:1fr;
        gap:20px
    }

    .case-columns>div {
        padding:27px 30px 36px
    }

    .case-columns h3 {
        font-size:26px;
        margin-top:16px
    }

    .contact-page-grid {
        grid-template-columns:1fr
    }

    .contact-item {
        padding:30px 32px 39px
    }

    .contact-item h2 {
        font-size:26px
    }

    .contact-item a {
        font-size:16px
    }

    .footer {
        gap:22px;
        padding:26px 26px 34px
    }

    .footer>span {
        order:3;
        max-width:none;
        width:100%;
        font-size:12px;
        white-space:normal
    }

    .footer .motion-toggle {
        margin-left:auto;
        order:4
    }

    .capture-dialog {
        width:calc(100vw - 30px);
        max-height:92dvh
    }

    .dialog-toolbar {
        font-size:18px
    }

    .detail-content {
        padding:35px 36px 49px
    }

    .page-hero {
        padding-top:65px
    }

    .page-hero h1 {
        font-size:54px
    }

    .page-hero>p:not(.eyebrow) {
        font-size:18px
    }

}

@media(min-width:601px) and (max-width:760px) {
    .hero {
        grid-template-columns:1fr;
        padding-top:58px;
        gap:40px
    }

    .hero-copy {
        max-width:610px
    }

    .hero h1 {
        font-size:64px
    }

    .hero-lead {
        max-width:550px
    }

    .hero-visual {
        width:400px;
        max-width:100%;
        height:470px;
        margin:0 auto
    }

    .hero .button {
        font-size:16px!important
    }

    .hero-signature {
        margin-top:27px
    }

}

/* Phone: individual soft panels and comfortable controls, without overflow. */
@media(max-width:600px) {
    :root {
        --radius-card:28px;
        --radius-control:18px;
        --radius-blob:22px;
        --lip:8px
    }

    .wrap {
        width:calc(100% - 32px)
    }

    .nav-shell {
        padding-top:14px
    }

    .nav {
        min-height:76px;
        padding:13px 17px 19px;
        border-radius:25px;
        gap:12px
    }

    .brand {
        font-size:19px;
        gap:10px
    }

    .brand-mark {
        min-width:40px;
        height:40px;
        font-size:25px;
        border-radius:14px
    }

    .menu-toggle {
        font-size:14px;
        min-height:42px;
        padding:11px 14px;
        border-radius:14px
    }

    .nav-links {
        top:102px;
        left:16px;
        right:16px
    }

    .nav-shell.scrolled .nav-links {
        top:98px
    }

    .hero {
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:37px;
        padding:46px 0 29px;
        min-height:0
    }

    .hero h1 {
        font-size:clamp(46px,11.3vw,64px);
        letter-spacing:-1.1px;
        line-height:1.11;
        margin-bottom:24px
    }

    .hero h1 span {
        margin-top:9px;
        padding:0 10px 9px;
        border-radius:17px;
        margin-left:-3px
    }

    .hero .eyebrow {
        font-size:10px;
        margin-bottom:24px;
        letter-spacing:.6px
    }

    .hero-lead {
        font-size:17px;
        line-height:1.75;
        margin:27px 0
    }

    .hero .actions {
        gap:12px
    }

    .hero .button {
        font-size:14px!important;
        padding:14px 19px;
        min-height:49px!important
    }

    .hero-signature {
        margin-top:30px;
        gap:13px
    }

    .hero-signature>span {
        font-size:13px
    }

    .hero-brand-pill {
        width:139px;
        min-height:52px;
        padding:14px 20px 18px
    }

    .hero-brand-pill.pimer .brand-logo {
        width:91px
    }

    .hero-visual {
        height:445px;
        max-width:380px;
        width:100%;
        margin:6px auto 8px
    }

    .portrait-stage {
        inset:3px 28px 27px 25px;
        border-radius:130px 130px 31px 31px
    }

    .float-label.top {
        right:0;
        padding:14px 16px 19px;
        border-radius:20px
    }

    .float-label.top .code-icon {
        width:38px;
        height:38px;
        font-size:18px
    }

    .float-label strong {
        font-size:17px
    }

    .float-label.bottom {
        left:0;
        bottom:13px;
        min-width:258px;
        padding:16px 19px 24px;
        border-radius:23px
    }

    .float-label.bottom b {
        font-size:20px
    }

    .float-label.bottom>span {
        font-size:9px
    }

    .mini-brand {
        width:83px;
        height:33px;
        padding:9px 11px
    }

    .mini-brand.pimer .brand-logo {
        width:61px
    }

    .hero-line {
        gap:12px;
        font-size:10px;
        padding:17px 1px 22px
    }

    .cities,.scroll-cue {
        gap:7px
    }

    .mouse {
        width:13px;
        height:21px
    }

    .mouse:before {
        left:4px;
        top:4px;
        height:4px
    }

    .expertise-strip {
        padding:20px 18px 27px;
        justify-content:start;
        gap:12px 20px;
        border-radius:24px;
        font-size:15px
    }

    .expertise-strip>span {
        flex-basis:calc(50% - 10px);
        font-size:14px
    }

    .section {
        padding-block:55px
    }

    #productos {
        padding-top:60px
    }

    .eyebrow {
        font-size:11px;
        letter-spacing:.9px;
        margin-bottom:20px
    }

    .section-head {
        flex-direction:column;
        align-items:start;
        gap:22px;
        margin-bottom:31px
    }

    .section-head h2,.section-title {
        font-size:37px;
        line-height:1.18;
        letter-spacing:-.6px
    }

    .section-head p {
        max-width:none;
        font-size:16px
    }

    .section-head>.text-link {
        font-size:15px;
        margin:0
    }

    .products {
        gap:29px
    }

    .product-card:not(.product-detail-showcase) {
        display:block
    }

    .product-visual {
        height:337px;
        min-height:0;
        margin:11px 11px 0;
        border-radius:22px
    }

    .product-meta-top {
        top:18px;
        left:17px;
        right:17px;
        flex-direction:row;
        align-items:center;
        gap:7px;
        font-size:8px;
        letter-spacing:.1px
    }

    .role-badge {
        font-size:8px;
        padding:6px 7px
    }

    .logo-plate {
        top:72px;
        left:50%;
        width:181px;
        min-height:64px;
        padding:16px 20px 20px;
        border-radius:18px
    }

    .zappy .capture-button {
        width:99%;
        left:.5%;
        top:150px
    }

    .pimer .logo-plate {
        top:130px;
        left:19px;
        transform:rotate(-4deg);
        width:146px;
        min-height:73px;
        padding:17px 17px 22px
    }

    .pimer .capture-button {
        width:152px;
        top:88px;
        right:20px
    }

    .product-body {
        padding:26px 25px 38px
    }

    .product-body .mini {
        font-size:10px;
        letter-spacing:.55px
    }

    .product-body h3 {
        font-size:29px;
        line-height:1.24;
        margin:12px 0 24px
    }

    .product-tablist {
        gap:4px;
        padding:6px;
        border-radius:20px;
        flex-wrap:wrap
    }

    .product-tab {
        font-size:14px;
        min-width:75px;
        min-height:44px;
        border-radius:15px;
        padding:11px 5px
    }

    .product-panels {
        min-height:212px;
        padding-top:24px;
        padding-bottom:24px
    }

    .product-panel h4 {
        font-size:21px;
        line-height:1.35
    }

    .product-panel p {
        font-size:16px;
        line-height:1.75
    }

    .product-bottom {
        gap:16px;
        padding-top:22px;
        flex-wrap:wrap
    }

    .ownership-label {
        font-size:11px
    }

    .ownership-label strong {
        font-size:13px
    }

    .product-cta {
        min-height:47px;
        font-size:14px;
        padding:13px 17px
    }

    .capture-caption {
        opacity:1;
        font-size:13px;
        padding:10px 12px 13px;
        border-radius:13px;
        gap:8px;
        bottom:28%
    }

    .pimer .capture-caption {
        bottom:38%
    }

    .award {
        gap:13px;
        padding:18px 19px 25px;
        border-radius:22px;
        font-size:13px;
        line-height:1.7
    }

    .award .star {
        font-size:25px
    }

    .services-layout {
        gap:27px
    }

    .services-intro p:not(.eyebrow) {
        font-size:16px;
        line-height:1.8;
        margin:23px 0
    }

    .service-list {
        gap:16px
    }

    .service-row {
        border-radius:23px
    }

    .service-row summary {
        gap:12px;
        padding:20px 18px 26px
    }

    .service-row h3 {
        font-size:21px
    }

    .service-num {
        width:34px;
        height:34px;
        border-radius:12px;
        font-size:12px
    }

    .plus {
        font-size:24px
    }

    .service-content {
        padding:0 22px 28px;
        font-size:16px
    }

    .service-content p {
        line-height:1.75
    }

    .service-content a {
        font-size:14px;
        line-height:1.6
    }

    .tags span {
        font-size:11px;
        padding:6px 10px
    }

    .about {
        padding:30px 26px 42px;
        gap:26px
    }

    .about h2 {
        font-size:36px;
        line-height:1.2;
        letter-spacing:-.4px;
        margin-bottom:20px
    }

    .about-facts {
        gap:13px;
        margin-top:24px
    }

    .about-facts>div {
        padding:20px 15px 27px;
        border-radius:20px
    }

    .about-facts strong {
        font-size:33px
    }

    .about-facts span {
        font-size:11px;
        line-height:1.65
    }

    .about .hello {
        font-size:26px
    }

    .about p {
        font-size:16px
    }

    .about .quote {
        font-size:22px;
        padding:21px 22px 29px;
        line-height:1.45;
        border-radius:22px;
        margin-block:23px
    }

    .portfolio-grid {
        grid-template-columns:1fr;
        gap:27px
    }

    .work-card {
        padding:11px 11px 8px;
        border-radius:27px
    }

    .work-image {
        height:auto;
        aspect-ratio:1.45;
        border-radius:21px
    }

    .work-info {
        padding:23px 13px 27px
    }

    .work-info h3 {
        font-size:25px
    }

    .work-info p {
        font-size:13px
    }

    .work-info>span {
        font-size:12px
    }

    .writing-grid {
        gap:24px
    }

    .article-card {
        display:flex;
        min-height:0;
        padding:28px 27px 39px;
        border-radius:27px
    }

    .article-card h3 {
        font-size:29px;
        line-height:1.27;
        margin:20px 0 15px
    }

    .article-card p {
        font-size:16px;
        margin-bottom:24px
    }

    .article-card .article-bottom {
        align-self:start;
        font-size:14px
    }

    .article-meta {
        font-size:11px
    }

    .article-meta .tag {
        font-size:10px
    }

    .press {
        padding:24px 25px 32px;
        gap:17px 23px;
        border-radius:24px;
        margin-top:34px
    }

    .press>span {
        font-size:10px
    }

    .press>a {
        font-size:20px
    }

    .contact-panel {
        padding:43px 25px 53px;
        border-radius:30px
    }

    .contact-panel .eyebrow {
        font-size:10px;
        letter-spacing:.6px
    }

    .contact-panel h2 {
        font-size:40px;
        line-height:1.15;
        letter-spacing:-.6px
    }

    .contact-panel p {
        font-size:16px;
        line-height:1.75;
        margin-bottom:28px
    }

    .contact-panel .actions {
        flex-direction:column;
        align-items:stretch;
        gap:16px
    }

    .contact-panel .button {
        font-size:15px!important;
        min-height:51px
    }

    .contact-direct {
        gap:10px;
        flex-direction:column;
        align-items:center;
        margin-top:28px;
        font-size:12px
    }

    .contact-direct>* {
        padding:7px 12px
    }

    .footer {
        padding:26px 23px 34px;
        gap:25px;
        margin-bottom:20px;
        border-radius:26px
    }

    .footer .brand {
        font-size:19px
    }

    .socials {
        font-size:14px;
        gap:18px
    }

    .footer>span {
        font-size:12px;
        line-height:1.7;
        order:4
    }

    .footer .motion-toggle {
        margin-left:0;
        order:3;
        font-size:12px
    }

    .page-hero {
        padding:48px 0 35px
    }

    .page-hero h1 {
        font-size:44px;
        line-height:1.15;
        letter-spacing:-1px;
        margin-bottom:24px
    }

    .page-hero>p:not(.eyebrow) {
        font-size:17px;
        line-height:1.75
    }

    .page-hero .eyebrow {
        font-size:10px;
        margin-bottom:20px
    }

    .breadcrumb {
        font-size:12px;
        gap:8px;
        margin-bottom:25px
    }

    .filters {
        gap:10px;
        margin-bottom:25px
    }

    .filter {
        font-size:14px;
        min-height:46px;
        padding:12px 18px;
        border-radius:16px
    }

    .count-label {
        font-size:13px
    }

    .about-long {
        grid-template-columns:1fr;
        gap:31px
    }

    .about-long>div:first-child {
        transform:rotate(-1deg);
        padding:12px 12px 25px
    }

    .about-photo {
        max-height:465px;
        border-radius:21px
    }

    .about-long .section-title {
        font-size:37px
    }

    .about-long>div:nth-child(2)>p {
        font-size:16px;
        line-height:1.8
    }

    .timeline {
        gap:17px
    }

    .timeline li {
        padding:24px 25px 31px;
        border-radius:23px
    }

    .timeline h3 {
        font-size:24px;
        margin-top:16px
    }

    .timeline p {
        font-size:16px
    }

    .media-grid {
        grid-template-columns:1fr;
        gap:23px
    }

    .media-card {
        padding:27px 27px 37px
    }

    .media-card p {
        font-size:26px
    }

    .project-hero-image {
        border-width:10px;
        border-radius:25px;
        max-height:420px
    }

    .project-copy {
        padding:35px 0 0;
        gap:14px
    }

    .project-copy h2 {
        font-size:35px
    }

    .project-copy p {
        font-size:16px
    }

    .project-summary {
        padding:26px 25px 38px
    }

    .project-summary blockquote {
        padding:18px 20px 24px
    }

    .project-summary p {
        font-size:16px
    }

    .project-summary .text-link {
        white-space:normal;
        font-size:14px
    }

    .article-header h1 {
        font-size:38px;
        line-height:1.18;
        letter-spacing:-.7px
    }

    .article-header .article-meta {
        font-size:13px;
        gap:8px
    }

    .detail-content {
        padding:28px 25px 39px;
        font-size:17px;
        line-height:1.85;
        border-radius:27px;
        margin-bottom:15px
    }

    .detail-content h2 {
        font-size:30px;
        line-height:1.25
    }

    .detail-content h3 {
        font-size:26px
    }

    .detail-content h4 {
        font-size:23px
    }

    .detail-content ul,.detail-content ol {
        padding-left:22px
    }

    .detail-content blockquote {
        padding:22px 23px 29px;
        border-radius:22px
    }

    .detail-content .source-note {
        font-size:12px!important
    }

    .product-detail-showcase {
        display:block;
        min-height:0
    }

    .product-detail-showcase .product-visual {
        min-height:0;
        height:347px;
        margin:11px 11px 0
    }

    .product-detail-showcase .product-body {
        padding:28px 25px 38px
    }

    .product-detail-showcase .product-body .eyebrow {
        font-size:11px;
        margin-bottom:23px
    }

    .product-detail-showcase .product-panels {
        min-height:226px
    }

    .product-detail-showcase .product-panel h4 {
        font-size:25px
    }

    .product-detail-showcase.pimer .logo-plate {
        width:145px;
        top:143px;
        left:19px;
        transform:rotate(-4deg)
    }

    .product-detail-showcase.pimer .capture-button {
        width:154px;
        right:20px;
        top:91px
    }

    .product-detail-showcase.zappy .capture-button {
        top:154px
    }

    .case-columns {
        gap:23px;
        margin-block:28px
    }

    .case-columns>div {
        padding:28px 27px 39px
    }

    .case-columns h3 {
        font-size:27px
    }

    .case-columns p {
        font-size:16px
    }

    .contact-page-grid {
        gap:23px
    }

    .contact-item {
        padding:29px 27px 38px
    }

    .contact-item h2 {
        font-size:26px
    }

    .contact-item a {
        font-size:16px
    }

    .capture-dialog {
        inset:auto 0 0;
        width:100%;
        max-height:94dvh;
        border-radius:28px 28px 0 0;
        margin:0;
        box-shadow:var(--pouf-card)
    }

    .dialog-toolbar {
        padding:19px 20px 25px;
        font-size:17px;
        gap:12px
    }

    .dialog-close {
        font-size:14px;
        min-height:43px;
        padding:11px 14px;
        gap:9px
    }

    .capture-dialog>img {
        max-width:calc(100% - 30px);
        max-height:72dvh;
        margin:24px auto 35px;
        border-radius:14px
    }

    .notfound {
        padding:85px 0
    }

    .notfound .section-title {
        font-size:38px
    }

}

@media(max-width:370px) {
    .wrap {
        width:calc(100% - 28px)
    }

    .hero h1 {
        font-size:43px
    }

    .hero .button {
        padding-inline:16px;
        font-size:14px!important
    }

    .product-meta-top {
        font-size:7px;
        left:13px;
        right:13px;
        gap:5px
    }

    .role-badge {
        font-size:7px
    }

    .pimer .logo-plate,.product-detail-showcase.pimer .logo-plate {
        width:127px;
        left:16px;
        padding-inline:16px
    }

    .pimer .capture-button,.product-detail-showcase.pimer .capture-button {
        width:141px;
        right:15px
    }

    .product-body {
        padding-inline:22px
    }

    .product-body h3 {
        font-size:27px
    }

    .product-tab {
        min-width:79px;
        flex-basis:30%
    }

    .about-facts {
        gap:10px
    }

    .about-facts>div {
        padding-inline:12px
    }

    .about-facts strong {
        font-size:31px
    }

    .float-label.bottom {
        min-width:241px
    }

    .hero-visual {
        height:421px
    }

    .portrait-stage {
        inset-inline:20px
    }

    .detail-content {
        padding-inline:22px
    }

    .contact-panel h2 {
        font-size:36px
    }

    .contact-panel {
        padding-inline:22px
    }

}

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

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

    .reveal {
        opacity:1!important;
        transform:none!important
    }

    [data-tilt],.portrait-stage,.float-label,.capture-button,.hero-brand-pill:hover {
        transform:none!important
    }

}