:root{
  --white:#f8f8f6;
  --soft:#e3e3df;
  --muted:#bdbdb8;
  --ease:cubic-bezier(.22,1,.36,1);
  --text-shadow:
    0 1px 2px rgba(0,0,0,.85),
    0 3px 8px rgba(0,0,0,.55);
  --text-size: clamp(18px,1.6vw,25px);
  --text-line: 1.58;
}

*{box-sizing:border-box}

html,
body{

    width:100%;
    height:100%;
    margin:0;

    overflow:hidden;

    background:#999;

    color:var(--white);

    font-family:"Michroma",Arial,sans-serif;

}

body{

    font-synthesis:none;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

    text-rendering:optimizeLegibility;

}

a{color:inherit}
button{font:inherit}

/* VIDEO JE VŽDY ÚPLNĚ DOLE */
.background{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;

}

#bgVideo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  filter:
    saturate(1)
    contrast(1)
    brightness(1);
  transform:scale(1.025);
  z-index:0;
  animation:videoWake 1.8s var(--ease) both;
}

.white-veil{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(.8px);
}

.edge-shade{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    radial-gradient(circle at 46% 44%,rgba(255,255,255,.04) 0 35%,rgba(0,0,0,.23) 100%),
    linear-gradient(90deg,rgba(0,0,0,.20),transparent 30%,transparent 72%,rgba(0,0,0,.28));
}

.grain{
  position:absolute;
  inset:-50%;
  z-index:3;
  opacity:.04;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  animation:grain .25s steps(2) infinite;
}

/* HORNÍ BRAND BEZ SAMOSTATNÉ LIŠTY */

.topbar{

    position:fixed;

    z-index:100;

    top:clamp(20px,3vw,46px);
    left:clamp(22px,4vw,66px);
    right:clamp(82px,8vw,146px);

    display:flex;
    align-items:center;
    justify-content:space-between;

    text-shadow:var(--text-shadow);

}

.topbar-left,
.top-whatsapp,
.top-meta{

    position:relative;
    z-index:101;

}

.topbar-left{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  gap:23px; /* vzdálenost mezi textem Pavel Kašša a sluchátkem */
}

.topbar-left,
.top-whatsapp,
.top-meta{
    position:relative;
    z-index:101;
}


.brand{
  display:flex;
  align-items:center;
  gap:18px;
  text-decoration:none;
}

.brand-logo{
  font-size:34px;
  font-weight:800;
  letter-spacing:-.09em;
}

.brand-divider{
  width:42px;
  height:1px;
  background:rgba(255,255,255,.55);
}

.brand-role{
    font-size:24px;
    font-weight:500;
    letter-spacing:.14em;
    text-transform:none;
}


.brand-call{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  margin:0;
  color:#fff;
  text-decoration:none;
  line-height:1;
  transform-origin:center;
  animation:phoneRing 8s ease-in-out infinite;
}

.brand-call svg{
  display:block;
  width:26px;
  height:26px;
}

.brand-call:hover{

    transform:scale(1.15);

}

.top-meta{
  display:flex;
  align-items:center;
  gap:13px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.24em;
  color:rgba(255,255,255,.84);
}

.top-divider{
  width:34px;
  height:1px;
  background:rgba(255,255,255,.48);
}

/* JEDEN STÁLÝ BÍLÝ GLASS PANEL */
.glass-shell{
  position:fixed;
  z-index:20;
  left:clamp(22px,4vw,66px);
  right:clamp(88px,9vw,170px);
  top:clamp(50px,7vh,80px);
  bottom:clamp(16px,3vh,30px);
  overflow:hidden;
  border:none;
  border-radius:0;
  background:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
}

/* SEKCE SE MĚNÍ UVNITŘ PANELU */
.scene{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:clamp(34px,5vw,74px);
  opacity:0;
  visibility:hidden;
  transform:translateY(7vh) scale(.985);
  transition:
    opacity .8s ease,
    transform 1.2s var(--ease),
    visibility 0s linear .7s;
  pointer-events:none;
}

.scene.is-active{
  opacity:1;
  visibility:visible;
  transform:none;
  transition-delay:0s;
  pointer-events:auto;
}

.scene.is-leaving-up{
  transform:translateY(-7vh) scale(.985);
}

.scene-inner{
  width:min(1180px,100%);
  margin:auto;
  text-shadow:var(--text-shadow);

  padding-bottom:70px;
}

/* NOVÉ ROZLOŽENÍ SEKCÍ */
.hero-layout,
.collaboration-layout,
.contact-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,.92fr);
  gap:clamp(38px,5vw,86px);
  align-items:center;
  width:100%;
  min-width:0;
}

.hero-copy,
.contact-copy{min-width:0}

.portrait-card{
  position:relative;
  justify-self:end;
  align-self:end;
  width:min(680px,48vw);
  height:min(76vh,760px);
  overflow:visible;
}


.hero-copy,
.contact-copy{

    min-width:0;
    transform:translateX(60px);

}

.contact-copy{

    min-width:0;
    transform:translateX(180px);

}

.portrait-image{
  position:absolute;
  right:-10vw;
  bottom:-7vh;

  width:min(860px,61vw);
  max-width:none;
  height:auto;
  display:block;

  filter:
    drop-shadow(0 3px 8px rgba(0,0,0,.20))
    drop-shadow(0 12px 24px rgba(0,0,0,.10));
}

.hero-name{
  margin:0 0 14px;
  font-size:clamp(50px,6.5vw,96px);
  line-height:.95;
  letter-spacing:-.064em;
  font-weight:680;
}

.hero-claim{
  max-width:660px;
  margin:38px 0 0;
  font-size:clamp(21px,2.2vw,34px);
  line-height:1.34;
  font-weight:360;
}

.hero-note{
  max-width:590px;
  margin:22px 0 0;
  font-size:clamp(14px,1.25vw,18px);
  line-height:1.65;
  font-weight:340;
  color:var(--soft);
}

.eyebrow{

    font-size:clamp(11px,.75vw,14px);

    font-weight:600;

    letter-spacing:.28em;

    color:rgba(255,255,255,.82);

    margin-bottom:26px;

}

h2{
  margin:0 0 34px;
  max-width:980px;
  font-size:clamp(38px,5vw,76px);
  line-height:1.02;
  letter-spacing:-.056em;
  font-weight:650;
}

.reveal{animation:rise 1s var(--ease) both}
.hero-name{animation-delay:.10s}
.hero-claim{animation-delay:.27s}
.hero-note{animation-delay:.36s}

.collaboration-layout{
  grid-template-columns:minmax(330px,.88fr) minmax(0,1.12fr);
  align-items:center;
}

.collaboration-support{

    display:flex;
    flex-direction:column;
    gap:22px;

    transform:translateX(60px);

}

.collaboration-support .eyebrow{margin-bottom:2px}
.collaboration-main{padding-left:90px;}
.collaboration-main h2{margin:0;font-size:clamp(48px,6.1vw,96px)}

.process-box{
  padding:28px 30px;
  border:3px solid rgba(255,255,255,.42);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.035));
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 18px 44px rgba(0,0,0,.10);
  transition:.35s var(--ease);
}
.process-box:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.72)}
.process-box p{margin:0;font-size:clamp(16px,1.35vw,21px);line-height:1.58;font-weight:350;color:#fff}

.project-fog{

    position:absolute;

    left:-20%;
    right:-20%;
    top:-20%;
    bottom:-20%;

    z-index:0;

    pointer-events:none;

    opacity:.9;

    background:

        radial-gradient(
            ellipse 24% 22% at 42% 48%,
            rgba(255,255,255,.65),
            transparent 100%
        ),

        radial-gradient(
            ellipse 30% 26% at 58% 50%,
            rgba(255,255,255,.38),
            transparent 100%
        ),

        radial-gradient(
            ellipse 85% 55% at 50% 50%,
            rgba(255,255,255,.10),
            transparent 100%
        );

    filter:
        blur(90px)
        drop-shadow(0 14px 24px rgba(0,0,0,.22))
        drop-shadow(0 28px 50px rgba(0,0,0,.12));

}

.contact-layout{grid-template-columns:minmax(0,1fr) minmax(320px,.82fr)}
.contact-copy h2{font-size:clamp(44px,5.8vw,88px)}
.contact-copy>p{max-width:720px;font-size:clamp(18px,1.6vw,25px);line-height:1.55}
.contact-links{display:flex;flex-wrap:wrap;gap:12px 34px;margin-top:44px}
.contact-links a{padding-bottom:6px;font-size:clamp(15px,1.4vw,20px);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.58);transition:.25s}
.contact-links a:hover{transform:translateY(-2px);border-color:#fff}
.signature{margin-top:58px;font-size:13px;font-weight:600}
.signature span{display:block;margin-top:8px;color:var(--soft);font-weight:350}
.contact-portrait{width:min(390px,32vw)}
.contact-portrait .portrait-image{

    width:min(280px,32vw);

    right:13vw;
    bottom:-5vh;

    opacity:.94;
}

/* PRAVÝ SCROLL VŽDY VIDITELNÝ */
.scroll-rail{
  position:fixed;
  z-index:100;
  right:clamp(16px,3vw,52px);
  top:37%;
  transform:translateY(-50%);
  height:min(72vh,680px);
  display:grid;
  grid-template-rows:40px minmax(0,1fr) auto minmax(0,1fr) 40px auto;
  justify-items:center;
  align-items:stretch;
  color:#fff;
  text-shadow:var(--text-shadow);
  user-select:none;
}

.rail-arrow{
  width:auto;
  height:auto;
  padding:0;
  border:none;
  border-radius:0;
  background:none;
  backdrop-filter:none;

  color:#fff;
  cursor:pointer;
  font-size:22px;

  opacity:.82;
  transition:.25s;
}

.rail-arrow:hover{
  opacity:1;
  transform:scale(1.08);
  background:none;
}

.rail-segment{
  position:relative;
  width:1px;
  min-height:120px;
  background:rgba(255,255,255,.36);
}

.rail-segment-top{
  margin-top:0;
  margin-bottom:52px;
}

.rail-segment-bottom{
  margin-top:52px;
  margin-bottom:0;
}

.rail-word{
  align-self:center;
  justify-self:center;
  writing-mode:vertical-rl;
  text-orientation:upright;
  white-space:nowrap;
  font-size:12px;
  font-weight:600;
  letter-spacing:.18em;
  line-height:1;
  opacity:.96;
  z-index:5;
}

.rail-progress{
  position:absolute;
  left:0;
  width:1px;
  background:#fff;
  box-shadow:0 0 12px #fff;
  transition:height .72s var(--ease);
}

.rail-progress-top{
  top:0;
  height:0;
}

.rail-progress-bottom{
  top:0;
  height:0;
}

.rail-dots{
  position:absolute;
  inset:0;
  z-index:6;
}

.rail-dot{
  position:absolute;
  left:50%;
  width:8px;
  height:8px;
  margin:-4px 0 0 -4px;
  padding:0;
  border:1px solid rgba(255,255,255,.96);
  border-radius:50%;
  background:rgba(55,55,55,.72);
  cursor:pointer;
  transition:.35s var(--ease);
}

.rail-dot.is-active{
  background:#fff;
  transform:scale(1.34);
  box-shadow:0 0 16px rgba(255,255,255,.90);
}

.rail-section{
    position:absolute;

    top:calc(100% + 28px);
    left:50%;

    transform:translateX(-50%);

    min-height:0;
    margin:0;

    font-size:12px;
    font-weight:600;

    writing-mode:vertical-rl;
    text-orientation:upright;

    white-space:nowrap;
    letter-spacing:.18em;
    line-height:1;
    text-align:center;
}

.mobile-hint{display:none}
.glitching{animation:textPulse .58s ease both}

@keyframes rise{
  from{opacity:0;transform:translateY(24px);filter:blur(7px)}
  to{opacity:1;transform:none;filter:none}
}

@keyframes videoWake{
  from{opacity:0;transform:scale(1.07)}
  to{opacity:1;transform:scale(1.025)}
}

@keyframes grain{
  0%{transform:translate(0,0)}
  25%{transform:translate(2%,-1%)}
  50%{transform:translate(-1%,2%)}
  75%{transform:translate(1%,1%)}
  100%{transform:translate(0,0)}
}

@keyframes textPulse{
  0%{opacity:1;filter:none}
  40%{opacity:.48;filter:blur(2px)}
  100%{opacity:1;filter:none}
}

@media (max-width:900px){
  .topbar-left{gap:10px}
  .topbar{left:20px;right:72px;top:20px}
  .brand{gap:10px}.brand-divider{width:22px}.brand-role{font-size:8px;letter-spacing:.08em}.top-meta{font-size:8px}
  .glass-shell{left:16px;right:60px;top:72px;bottom:20px;border-radius:24px}
  .scene{padding:28px 24px;overflow-y:auto}
  .hero-layout,
.collaboration-layout,
.contact-layout{grid-template-columns:1fr;gap:26px;align-items:start}
  .hero-copy,
.contact-copy{order:1}
  .portrait-card,
.contact-portrait{order:2}
  .portrait-card,
.contact-portrait{justify-self:end;width:100%;height:46vh;min-height:300px}
  .portrait-image,
.contact-portrait .portrait-image{right:-8vw;bottom:-4vh;width:min(690px,92vw)}
  .collaboration-main{order:1}.collaboration-support{order:2}
  .collaboration-main h2{font-size:clamp(40px,9vw,70px)}
  .scroll-rail{right:10px;height:64vh}.rail-word{display:none}
  .mobile-hint{display:block;position:fixed;z-index:90;left:22px;bottom:8px;font-size:clamp(10px,2vw,14px);letter-spacing:.3em;color:rgba(255,255,255,.76)}
}

@media (max-width:520px){
  .brand-role{max-width:150px;line-height:1.25}.top-meta{display:none}
  .glass-shell{right:52px;left:10px;top:70px;bottom:12px;border-radius:20px}
  .scene{padding:22px 18px}
  .hero-name{font-size:clamp(40px,12vw,62px)}
  h2{font-size:clamp(31px,10vw,45px)}
  .hero-claim{font-size:19px;margin-top:24px}.hero-note{font-size:14px}
  .process-box{padding:20px 21px;border-radius:14px}.process-box p{font-size:16px}
  .portrait-card,
.contact-portrait{height:40vh;min-height:260px}
  .portrait-image,
.contact-portrait .portrait-image{right:-14vw;width:110vw}
  .contact-links{flex-direction:column;align-items:flex-start;margin-top:28px}
  .signature{margin-top:42px}.rail-section{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{
    animation:none!important;
    transition-duration:.01ms!important;
  }
}


/* =========================================
   GLOBAL OVERLAY
========================================= */

.global-overlay{

    position:absolute;
    inset:0;

    z-index:4;

    pointer-events:none;

    background:

        /* hlavní světlo od slunce */
        radial-gradient(

            ellipse 70% 95%
            at 62% 8%,

            rgba(255,255,255,.18) 0%,
            rgba(255,255,255,.10) 18%,
            rgba(255,255,255,.045) 38%,
            rgba(255,255,255,.015) 56%,
            transparent 72%

        ),

        /* jemné rozptýlení světla */
        radial-gradient(

            ellipse 80% 110%
            at 55% 30%,

            rgba(255,255,255,.05) 0%,
            rgba(255,255,255,.02) 45%,
            transparent 80%

        ),

        /* lehké ztmavení pouze středu */
        radial-gradient(

    ellipse 135% 110%
    at 50% 48%,

    rgba(15,20,30,.52) 0%,
    rgba(15,20,30,.38) 28%,
    rgba(15,20,30,.24) 58%,
    rgba(15,20,30,.12) 82%,
    transparent 100%

),

        /* vinětace */
        radial-gradient(

            ellipse at center,

            transparent 20%,
            rgba(20,28,38,.12) 52%,
            rgba(20,28,38,.34) 72%,
            rgba(20,28,38,.72) 88%,
            rgba(20,28,38,.94) 100%

        );

}

.top-whatsapp{

    display:flex;
    align-items:center;
    gap:12px;

    padding:12px 22px;

    border:2px solid rgba(255,255,255,.38);
    border-radius:18px;

    background:transparent;

    color:#fff;
    text-decoration:none;

    font-size:14px;
    font-weight:600;
    letter-spacing:.06em;

    text-shadow:0 2px 6px rgba(0,0,0,.35);

    transition:.3s;

    animation:whatsappShake 3s ease-in-out infinite;

}

.top-whatsapp:hover{

    transform:translateY(-2px);

    border-color:#fff;

}

@keyframes whatsappShake{

    0%,90%,100%{
        transform:translateX(0) rotate(0deg);
    }

    92%{
        transform:translateX(-3px) rotate(-4deg);
    }

    94%{
        transform:translateX(3px) rotate(4deg);
    }

    96%{
        transform:translateX(-2px) rotate(-2deg);
    }

    98%{
        transform:translateX(2px) rotate(2deg);
    }

}

@keyframes phoneRing{

    0%,88%,100%{
        transform:scale(1) rotate(0deg);
    }

    89%{
        transform:scale(2.5) rotate(-18deg);
    }

    90%{
        transform:scale(2.5) rotate(18deg);
    }

    91%{
        transform:scale(2.5) rotate(-14deg);
    }

    92%{
        transform:scale(2.5) rotate(14deg);
    }

    93%{
        transform:scale(2) rotate(0deg);
    }

}

.brand-call{

    position:relative;

    display:inline-flex;
    align-items:center;
    justify-content:center;

}


.phone-ripple{

    position:absolute;

    width:18px;
    height:18px;

    border:2px solid rgba(255,255,255,.8);
    border-radius:50%;

    opacity:0;

    pointer-events:none;

    animation:phoneRipple 8s ease-in-out infinite;

}

.ripple-2{

    animation-delay:.12s;

}

.ripple-3{

    animation-delay:.24s;

}


@keyframes phoneRipple{

    0%,88%,100%{

        transform:scale(.5);

        opacity:0;

    }

    89%{

        transform:scale(1);

        opacity:.8;

    }

    91%{

        transform:scale(2.5);

        opacity:.45;

    }

    93%{

        transform:scale(4);

        opacity:0;

    }

}

@keyframes projectWave{

    0%{

        transform:scale(1);

        opacity:.45;

    }

    25%{

        opacity:.28;

    }

    100%{

        transform:scale(1.18);

        opacity:0;

    }
}

.hero-claim,
.hero-note,
.contact-copy > p,
.process-box p{

    font-size:clamp(16px,1.45vw,20px) !important;
    line-height:1.65 !important;

}

.simple-section-layout{
  width:min(1180px,100%);
}

.simple-section-layout h2,
.about-me-copy h2{
  margin-bottom:28px;
}

.section-content-placeholder{
  width:min(920px,100%);
  min-height:220px;
}

.about-me-layout{
  width:min(1180px,100%);
  padding-bottom:20px;
}

.about-me-heading{
  max-width:1080px;
  margin:0 auto clamp(24px,3.6vh,40px);
  text-align:center;
}

.about-me-heading .eyebrow{
  margin-bottom:18px;
}

.about-me-heading h2{
  max-width:1080px;
  margin:0 auto 20px;
  font-size:clamp(42px,5.6vw,86px);
}

.about-me-intro{
  max-width:980px;
  margin:0 auto;
  font-size:clamp(15px,1.15vw,19px);
  line-height:1.7;
  color:#fff;
}

.about-accordion{
  display:flex;
  flex-direction:column;
  gap:14px;
  width:100%;
}

.about-panel{
  border:3px solid rgba(255,255,255,.42);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.055));
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 18px 44px rgba(0,0,0,.14);
  overflow:hidden;
  transition:
    transform .35s var(--ease),
    border-color .35s ease,
    background .35s ease,
    box-shadow .45s var(--ease);
}

.about-panel:hover,
.about-panel.is-open{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.78);
  background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.075));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 24px 52px rgba(0,0,0,.18);
}

.about-panel-trigger{
  width:100%;
  min-height:66px;
  padding:17px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border:0;
  background:transparent;
  color:#fff;
  text-align:left;
  cursor:pointer;
  text-shadow:var(--text-shadow);
}

.about-panel-trigger > span:first-child{
  font-size:clamp(16px,1.25vw,21px);
  line-height:1.35;
  font-weight:650;
  letter-spacing:.035em;
 text-shadow:var(--text-shadow);
}

.about-panel-icon{
  position:relative;
  flex:0 0 22px;
  width:22px;
  height:22px;
}

.about-panel-icon::before,
.about-panel-icon::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:18px;
  height:2px;
  border-radius:2px;
  background:#fff;
  transform:translate(-50%,-50%);
  transition:transform .4s var(--ease);
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.7));
}

.about-panel-icon::after{
  transform:translate(-50%,-50%) rotate(90deg);
}

.about-panel.is-open .about-panel-icon::before{
  transform:translate(-50%,-50%) rotate(45deg);
}

.about-panel.is-open .about-panel-icon::after{
  transform:translate(-50%,-50%) rotate(-45deg);
}

.about-panel-content{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transition:
    grid-template-rows .52s var(--ease),
    opacity .3s ease;
}

.about-panel.is-open .about-panel-content{
  grid-template-rows:1fr;
  opacity:1;
}

.about-panel-content-inner{
  min-height:0;
  overflow:hidden;
}

.about-panel-content p{
  margin:0;
  padding:0 24px 22px;
  font-size:clamp(14px,1vw,17px);
  line-height:1.72;
  color:#fff;
}

@media (max-width:900px){

  .about-me-heading{
    margin:0 0 28px;
    text-align:left;
  }

  .about-me-heading h2{
    margin:0 0 18px;
    font-size:clamp(40px,9vw,70px);
  }

  .about-me-intro{
    margin:0;
  }

  .about-accordion{
    gap:12px;
  }
}

@media (max-width:520px){

  .about-me-heading{
    margin-bottom:22px;
  }

  .about-me-intro{
    font-size:15px;
  }

  .about-panel{
    border-radius:14px;
  }

  .about-panel-trigger{
    min-height:58px;
    padding:14px 18px;
    gap:18px;
  }

  .about-panel-trigger > span:first-child{
    font-size:15px;
  }

  .about-panel-content p{
    padding:0 18px 18px;
    font-size:14px;
    line-height:1.65;
  }
}


/* =========================================
   02 SPOLUPRÁCE — VERTIKÁLNÍ ROZLOŽENÍ
   Nadpis a text nahoře, dvě okna pod nimi
========================================= */

.collaboration-scene{
  align-items:center;
}

.collaboration-vertical-layout{
  width:min(1180px,100%);
}

.collaboration-heading{
  max-width:1080px;
  margin:0 auto clamp(34px,5vh,64px);
  text-align:center;
}

.collaboration-heading .eyebrow{
  margin-bottom:18px;
}

.collaboration-heading h2{
  max-width:1080px;
  margin:0 auto;
  font-size:clamp(42px,5.6vw,86px);
}

.collaboration-boxes{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(22px,3vw,44px);
  width:100%;
}

.collaboration-boxes .process-box{
  min-height:210px;
  display:flex;
  align-items:center;
}

.collaboration-boxes .process-box p{
  width:100%;
}

@media (max-width:900px){
  .collaboration-scene{
    align-items:start;
  }

  .collaboration-heading{
    margin:0 0 28px;
    text-align:left;
  }

  .collaboration-heading h2{
    margin:0;
    font-size:clamp(40px,9vw,70px);
  }

  .collaboration-boxes{
    grid-template-columns:1fr;
    gap:22px;
  }

  .collaboration-boxes .process-box{
    min-height:0;
  }
}

@media (max-width:520px){
  .collaboration-heading{
    margin-bottom:22px;
  }

  .collaboration-boxes{
    gap:18px;
  }
}

/* =========================================
   04 CENÍK
========================================= */

.pricing-scene{
  align-items:center;
  overflow:visible;
}

.pricing-layout{
  position:relative;
  width:min(1180px,100%);
  padding-bottom:76px;
}

.pricing-heading{
  max-width:1080px;
  margin:0 auto clamp(24px,3.6vh,42px);
  text-align:center;
}

.pricing-heading .eyebrow{margin-bottom:18px}
.pricing-heading h2{
  max-width:1080px;
  margin:0 auto 20px;
  font-size:clamp(42px,5.6vw,86px);
}

.pricing-intro{
  max-width:900px;
  margin:0 auto;
  font-size:clamp(15px,1.2vw,20px);
  line-height:1.65;
  color:#fff;
}

.pricing-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.2vw,30px);
  width:100%;
}

.pricing-card,
.pricing-extras-trigger,
.pricing-extras-popup{
  border:3px solid rgba(255,255,255,.42);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.055));
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 18px 44px rgba(0,0,0,.14);
}

.pricing-card{
  min-height:290px;
  padding:26px 28px 28px;
  transition:.35s var(--ease);
}

.pricing-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.72);
}

.pricing-card h3,
.pricing-extras-popup h3{
    margin:0;
    font-size:clamp(18px,1.45vw,25px);
    line-height:1.25;
    font-weight:650;
    letter-spacing:.04em;

    text-shadow:var(--text-shadow);
}

.pricing-from{
    margin-top:12px;
    font-size:clamp(14px,1vw,17px);
    color:var(--white);

    text-shadow:var(--text-shadow);
}

.pricing-card ul{
    list-style:none;
    margin:24px 0 0;
    padding:0;
}

.pricing-card li{
    position:relative;
    margin:0 0 13px;
    padding-left:20px;

    font-size:clamp(13px,1vw,17px);
    line-height:1.45;

    color:#fff;

    text-shadow:var(--text-shadow);
}

.pricing-card li:last-child{
    margin-bottom:0;
}

.pricing-card li::before{
    content:"•";
    position:absolute;
    left:0;
    top:0;
}

.pricing-extras-trigger{

    position:absolute;
    z-index:4;

    left:0;
    right:0;

    bottom:0;

    width:auto;

    min-height:58px;

    padding:14px 24px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    color:#fff;

    cursor:pointer;

    text-align:left;

    text-shadow:var(--text-shadow);

    transition:
        transform .3s var(--ease),
        border-color .3s ease,
        background .3s ease;

}

.pricing-extras-trigger:hover,
.pricing-extras-trigger[aria-expanded="true"]{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.78);
  background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.075));
}

.pricing-extras-trigger > span:first-child{
  font-size:clamp(16px,1.25vw,21px);
  font-weight:650;
  letter-spacing:.04em;
  text-shadow:var(--text-shadow);
}

.pricing-extras-icon{
  position:relative;
  flex:0 0 22px;
  width:22px;
  height:22px;
}
.pricing-extras-icon::before,
.pricing-extras-icon::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:18px;height:2px;
  border-radius:2px;
  background:#fff;
  transform:translate(-50%,-50%);
  transition:transform .35s var(--ease);
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.7));
}
.pricing-extras-icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.pricing-extras-trigger[aria-expanded="true"] .pricing-extras-icon::after{transform:translate(-50%,-50%) rotate(0deg)}

.pricing-extras-layer{
  position:absolute;
  inset:0;
  z-index:30;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transition:opacity .34s ease,visibility 0s linear .34s;
}
.pricing-extras-layer.is-open{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  transition-delay:0s;
}

.pricing-extras-backdrop{

    position:fixed;

    left:0;
    top:0;
    right:0;
    bottom:0;

    z-index:9998;

    border:0;
    padding:0;

    background:rgba(8,10,14,.34);

    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);

    cursor:default;

}

.pricing-extras-popup{
  position:fixed;
  z-index:9999;
  width:1200px;
  left:50%;
  margin-left:-645px;
  bottom:72px;
  max-height:calc(100% - 84px);
  padding:24px 28px 26px;
  overflow:auto;
  transform:translateY(26px) scale(.965);
  transform-origin:50% 100%;
  opacity:0;
  transition:transform .38s var(--ease),opacity .3s ease,border-color .3s ease;
}
.pricing-extras-layer.is-open .pricing-extras-popup{
  transform:translateY(0) scale(1);
  opacity:1;
}

.pricing-extras-popup-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}
.pricing-extras-close{
  flex:0 0 42px;
  width:42px;height:42px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  transition:.25s ease;
}
.pricing-extras-close:hover{border-color:#fff;background:rgba(255,255,255,.16);transform:rotate(90deg)}

.pricing-extras-grid{display:flex;flex-direction:column;gap:0}
.pricing-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.18);gap:20px;font-size:clamp(13px,1vw,16px)}
.pricing-row:last-child{border-bottom:none}
.pricing-row strong{font-weight:700;white-space:nowrap}

@media (max-width:1100px){
  .pricing-card{padding:24px 22px 26px}
  .pricing-card li{font-size:13px}
}

@media (max-width:900px){
  .pricing-scene{align-items:start}
  .pricing-layout{padding-bottom:72px}
  .pricing-heading{margin:0 0 28px;text-align:left}
  .pricing-heading h2{margin:0 0 18px;font-size:clamp(40px,9vw,70px)}
  .pricing-intro{margin:0}
  .pricing-cards{grid-template-columns:1fr;gap:22px}
  .pricing-card{min-height:0}
  .pricing-extras-trigger{left:0;right:0}
  .pricing-extras-popup{left:0;right:0;bottom:70px;max-height:calc(100% - 78px)}
}

@media (max-width:520px){
  .pricing-heading{margin-bottom:22px}
  .pricing-intro{font-size:15px}
  .pricing-cards{gap:18px}
  .pricing-card,
.pricing-extras-trigger,
.pricing-extras-popup{border-radius:14px}
  .pricing-card{padding:22px 20px 24px}
  .pricing-card li{font-size:15px}
  .pricing-extras-trigger{min-height:54px;padding:12px 18px}
  .pricing-extras-popup{bottom:64px;padding:20px 18px 18px}
  .pricing-row{align-items:flex-start;font-size:13px}
  .pricing-row strong{white-space:normal;text-align:right}
}


/* =========================================
   MOBILE PORTRAIT POSITION FIX
   - contact figure lower on grass
   - compact hero portrait on short phones (iPhone SE etc.)
========================================= */
@media (max-width:520px){
  .contact-portrait .portrait-image{
    bottom:-12vh;
  }
}

@media (max-width:520px) and (max-height:700px){
  .hero .portrait-card{
    height:30vh;
    min-height:180px;
  }

  .hero .portrait-image{
    width:88vw;
    right:-8vw;
    bottom:-10vh;
  }

  .hero .hero-claim{
    margin-top:18px;
    font-size:17px;
    line-height:1.34;
  }

  .hero .scene-inner{
    padding-bottom:26px;
  }

  .contact-portrait{
    height:34vh;
    min-height:210px;
  }

  .contact-portrait .portrait-image{
    width:98vw;
    right:-10vw;
    bottom:-15vh;
  }
}

/* =========================================================
   03 PORTFOLIO — JEDINÁ FINÁLNÍ IMPLEMENTACE
   Desktop: obálka + animovaný fullscreen dopis
   Tablet/mobil: fullscreen dokument a jednosloupcová galerie
========================================================= */
.portfolio-scene {
  align-items: center;
  overflow: visible;
}

.portfolio-envelope-layout {
  width: min(1180px, 100%);
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.portfolio-heading {
  margin-bottom: clamp(20px, 3vh, 38px);
  text-align: center;
}

.portfolio-envelope {
  position: relative;
  width: min(720px, calc(100vw - 96px));
  max-width: 100%;
  aspect-ratio: 1.58 / 1;
  flex: 0 0 auto;
  display: block;
  margin-inline: auto;
  padding: 0;
  overflow: hidden;
  border: 4px solid rgba(255,255,255,.92);
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.17));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 0 60px rgba(255,255,255,.06), 0 34px 78px rgba(0,0,0,.28);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transform: translateZ(0) scale(1);
  transition: transform .45s var(--ease), box-shadow .45s ease, border-color .35s ease, opacity .25s ease;
}

.portfolio-envelope:hover,
.portfolio-envelope:focus-visible {
  transform: scale(1.035);
  border-color: rgba(255,255,255,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 38px 82px rgba(0,0,0,.32);
}

.portfolio-envelope.is-opening {
  transform: scale(1.065);
  opacity: 0;
}

.portfolio-envelope-paper {
  position:absolute;
  z-index:1;
  inset:3% 2% 8%;
  overflow:hidden;
  border-radius:8px;

  background:rgba(251,251,250,.96);

  box-shadow:0 10px 34px rgba(0,0,0,.16);
}

.portfolio-envelope-preview {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
  opacity: .4;
  filter: blur(3px) saturate(.8) contrast(.9);
  transition: opacity .26s ease, filter .26s ease, transform .45s var(--ease);
}

.portfolio-envelope-preview .portfolio-gallery {
  position: absolute;
  inset: 5% 4%;
  width: auto;
  height: auto;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  grid-template-rows: repeat(2,minmax(0,1fr));
  gap: 3%;
  overflow: hidden;
}

.portfolio-envelope-preview .portfolio-gallery-item {
  min-width: 0;
  min-height: 0;
  display: block;
  overflow: hidden;
}

.portfolio-envelope-preview .portfolio-gallery-image {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: none;
}

.portfolio-envelope-preview .portfolio-gallery-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.portfolio-envelope-preview .portfolio-gallery-caption,
.portfolio-envelope-preview .project-title {
  display: none;
}

.portfolio-envelope-preview .item-01 { grid-column: 1 / span 3; grid-row: 1; }
.portfolio-envelope-preview .item-02 { grid-column: 4 / span 4; grid-row: 1; }
.portfolio-envelope-preview .item-03 { grid-column: 8 / span 3; grid-row: 1; }
.portfolio-envelope-preview .item-04 { grid-column: 11 / span 2; grid-row: 1; }
.portfolio-envelope-preview .item-05 { grid-column: 1 / span 4; grid-row: 2; }
.portfolio-envelope-preview .item-06 { grid-column: 5 / span 2; grid-row: 2; }
.portfolio-envelope-preview .item-07 { grid-column: 7 / span 3; grid-row: 2; }
.portfolio-envelope-preview .item-08 { grid-column: 10 / span 3; grid-row: 2; }

.portfolio-envelope:hover .portfolio-envelope-preview,
.portfolio-envelope:focus-visible .portfolio-envelope-preview {
  opacity: .55;
  filter: blur(2px) saturate(.85) contrast(.9);
  transform: scale(1.01);
}

.portfolio-envelope.is-opening .portfolio-envelope-preview {
  opacity: 0;
  filter: blur(8px);
  transform: scale(1.08);
}

.portfolio-envelope-front {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(32deg,transparent 49.4%,rgba(255,255,255,.79) 50%,transparent 50.7%) left bottom / 50% 100% no-repeat,
    linear-gradient(-32deg,transparent 49.4%,rgba(255,255,255,.79) 50%,transparent 50.7%) right bottom / 50% 100% no-repeat,
    linear-gradient(145deg,rgba(255,255,255,.54),rgba(255,255,255,.045));
}

.portfolio-envelope-front::before,
.portfolio-envelope-front::after {
  content: "";
  position: absolute;
  top: 10%;
  width: 45%;
  height: 76%;
  border-bottom: 3px solid rgba(255,255,255,.69);
}

.portfolio-envelope-front::before { left: -20%; transform: rotate(-31deg); }
.portfolio-envelope-front::after { right: -20%; transform: rotate(31deg); }

.portfolio-envelope-label {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 2%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: clamp(11px,.9vw,15px);
  letter-spacing: .22em;
  text-transform: uppercase;
  text-shadow: var(--text-shadow);
}

/* Overlay je v HTML mimo <main>, takže position:fixed není omezen glass-shell. */
.portfolio-letter-overlay {
  --letter-x: 50vw;
  --letter-y: 50vh;
  --letter-w: 420px;
  --letter-h: 270px;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  z-index: 10000;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  background: rgba(10,18,30,.18);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: opacity .35s ease, visibility 0s linear .35s;
}

.portfolio-letter-overlay.is-visible {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  transition-delay: 0s;
}

.portfolio-letter-sheet {
  position: fixed;
  left: var(--letter-x);
  top: var(--letter-y);
  width: var(--letter-w);
  height: var(--letter-h);
  max-width: none;
  max-height: none;
  overflow: hidden;
  border-radius: 12px;
  color: #17263c;
  background: #fbfbfa;
  box-shadow: 0 34px 100px rgba(0,0,0,.32);
  transform: translate(-50%,-50%);
  transition: left .72s var(--ease), top .72s var(--ease), width .72s var(--ease), height .72s var(--ease), border-radius .72s var(--ease), box-shadow .72s ease;
}

.portfolio-letter-overlay.is-open .portfolio-letter-sheet {
  left: 50vw;
  top: 50dvh;
  width: 100vw;
  height: 100dvh;
  border-radius: 0;
  box-shadow: none;
}

.portfolio-letter-content {
  width: 100%;
  height: 100%;
  padding: clamp(42px,4.4vw,68px) clamp(34px,4.8vw,74px) 60px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .38s ease .42s, transform .48s var(--ease) .42s;
}

.portfolio-letter-overlay.is-open .portfolio-letter-content {
  opacity: 1;
  transform: none;
}

.portfolio-letter-header {
  width: 100%;
  margin: 0 auto clamp(24px,3vh,38px);
  display: flex;
  align-items: flex-end;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(23,38,60,.16);
}

.portfolio-letter-kicker {
  padding-bottom: .55em;
  font-size: 12px;
  letter-spacing: .18em;
  color: rgba(23,38,60,.55);
}

#portfolioLetterTitle {
  margin: 0;
  display: flex;
  align-items: flex-end;
  gap: 44px;
  color: #17263c;
  font-size: clamp(58px,6.6vw,106px);
  line-height: .86;
  letter-spacing: -.06em;
  text-shadow: none;
}

.portfolio-letter-note {
  margin-bottom: 40px;
  white-space: nowrap;
  color: rgba(23,38,60,.55);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .08em;
}

.portfolio-gallery {
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  grid-template-rows: repeat(2,255px);
  gap: clamp(14px,1.5vw,24px);
  align-items: stretch;
}

.portfolio-gallery .item-01 { grid-column: 1 / span 3; grid-row: 1; }
.portfolio-gallery .item-02 { grid-column: 4 / span 4; grid-row: 1; }
.portfolio-gallery .item-03 { grid-column: 8 / span 3; grid-row: 1; }
.portfolio-gallery .item-04 { grid-column: 11 / span 2; grid-row: 1; }
.portfolio-gallery .item-05 { grid-column: 1 / span 4; grid-row: 2; }
.portfolio-gallery .item-06 { grid-column: 5 / span 2; grid-row: 2; }
.portfolio-gallery .item-07 { grid-column: 7 / span 3; grid-row: 2; }
.portfolio-gallery .item-08 { grid-column: 10 / span 3; grid-row: 2; }

.portfolio-gallery-item {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
  color: #17263c;
  text-decoration: none;
}

.portfolio-gallery-item:not([data-state="public"]) { cursor: default; }

.portfolio-gallery-image {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border-radius: 6px;
  background: #e9ebee;
  box-shadow: 0 8px 20px rgba(23,38,60,.12);
}

.portfolio-gallery-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.project-title {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  color: #17263c;
  background: rgba(255,255,255,.58);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  font-family: "Michroma",Arial,sans-serif;
  font-size: clamp(18px,2.1vw,38px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .7s ease, visibility 0s linear .7s;
}

.project-title.is-visible,
.portfolio-gallery-item:not([data-state="public"]) .project-title.is-locked-visible {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.portfolio-gallery-caption {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px solid rgba(23,38,60,.16);
}

.portfolio-gallery-caption strong {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
}

.portfolio-gallery-caption small {
  color: rgba(23,38,60,.55);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.portfolio-letter-close {
  border: 0;
  color: #17263c;
  background: transparent;
  cursor: pointer;
}

.portfolio-letter-close-top {
  position: fixed;
  z-index: 10002;
  top: max(20px,env(safe-area-inset-top));
  right: max(22px,env(safe-area-inset-right));
  width: 48px;
  height: 48px;
  border: 1px solid rgba(23,38,60,.2);
  border-radius: 50%;
  background: rgba(251,251,250,.9);
  font-size: 30px;
  line-height: 1;
  opacity: 0;
  transition: opacity .3s ease .48s, transform .3s ease;
}

.portfolio-letter-overlay.is-open .portfolio-letter-close-top { opacity: 1; }
.portfolio-letter-close-top:hover { transform: rotate(90deg); }

.portfolio-letter-close-bottom {
  position: relative;
  left: 50%;
  margin: 42px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

body.portfolio-letter-open { overflow: hidden; }
body.portfolio-letter-open .topbar,
body.portfolio-letter-open .scroll-rail,
body.portfolio-letter-open .mobile-hint {
  opacity: 0;
  pointer-events: none;
}

/* Tablet */
@media (max-width: 1180px) {
  .portfolio-envelope {
    width: min(700px, calc(100vw - 110px));
  }

  .portfolio-letter-content {
    padding-inline: clamp(28px,4vw,52px);
  }

  .portfolio-gallery {
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-template-rows: none;
    gap: 28px 22px;
  }

  .portfolio-gallery .item-01,
  .portfolio-gallery .item-02,
  .portfolio-gallery .item-03,
  .portfolio-gallery .item-04,
  .portfolio-gallery .item-05,
  .portfolio-gallery .item-06,
  .portfolio-gallery .item-07,
  .portfolio-gallery .item-08 {
    grid-column: auto;
    grid-row: auto;
  }

  .portfolio-gallery-image {
    flex: none;
    aspect-ratio: 16 / 10;
  }
}

/* Mobil a telefon na šířku */
@media (max-width: 760px), (orientation: landscape) and (max-height: 540px) and (max-width: 1000px) {
  .portfolio-scene,
  .portfolio-envelope-layout {
    overflow: visible;
  }

  .scene-inner{
    width:100%;
    max-width:none;
    padding-inline:0;
  }

  .portfolio-envelope-layout {
    width:100%;
    padding-inline:0;
  }

  .portfolio-heading {
    width: 100%;
    margin-bottom: clamp(16px,3vh,26px);
  }

  .portfolio-envelope {
    width:100%;
    max-width:430px;
    margin-inline:auto;
    box-sizing:border-box;
    border-width:3px;
    border-radius:10px;
  }

  .portfolio-envelope-label {
    bottom: 6%;
    font-size: 10px;
  }

  .portfolio-letter-overlay,
  .portfolio-letter-overlay.is-mobile-portfolio {
    width: 100vw;
    height: 100dvh;
    background: #fbfbfa;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .portfolio-letter-sheet,
  .portfolio-letter-overlay.is-open .portfolio-letter-sheet,
  .portfolio-letter-overlay.is-mobile-portfolio .portfolio-letter-sheet,
  .portfolio-letter-overlay.is-mobile-portfolio.is-open .portfolio-letter-sheet {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    overflow: hidden;
    border-radius: 0;
    background: #fbfbfa;
    box-shadow: none;
    transform: none;
    transition: opacity .28s ease;
  }

  .portfolio-letter-content,
  .portfolio-letter-overlay.is-mobile-portfolio .portfolio-letter-content {
    width: 100%;
    height: 100%;
    padding: max(78px,calc(env(safe-area-inset-top) + 66px)) max(20px,env(safe-area-inset-right)) max(42px,calc(env(safe-area-inset-bottom) + 28px)) max(20px,env(safe-area-inset-left));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    opacity: 1;
    transform: none;
  }

  .portfolio-letter-header {
    display: block;
    margin: 0 0 34px;
    padding: 0 0 22px;
  }

  .portfolio-letter-kicker {
    display: block;
    margin: 0 0 12px;
    padding: 0;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .2em;
  }

  #portfolioLetterTitle {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    font-size: clamp(44px,13vw,68px);
    line-height: .96;
  }

  .portfolio-letter-note {
    margin: 0;
    max-width: 31rem;
    white-space: normal;
    font-size: 11px;
    line-height: 1.65;
  }

  .portfolio-gallery {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 42px;
  }

  .portfolio-gallery-item {
    width: 100%;
    min-width: 0;
    min-height: 0;
  }

  .portfolio-gallery-image {
    flex: none;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 0;
    box-shadow: none;
  }

  .project-title { font-size: clamp(20px,7vw,34px); }

  .portfolio-gallery-caption {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 10px 13px;
    margin-top: 13px;
    padding-top: 13px;
  }

  .portfolio-gallery-caption strong {
    font-size: 12px;
    line-height: 1.45;
  }

  .portfolio-gallery-caption small {
    font-size: 10px;
    line-height: 1.55;
  }

  .portfolio-letter-close-top {
    top: max(14px,env(safe-area-inset-top));
    right: max(14px,env(safe-area-inset-right));
    width: 46px;
    height: 46px;
    opacity: 1;
  }

  .portfolio-letter-close-bottom {
    left: auto;
    margin: 54px auto 6px;
    display: flex;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-letter-sheet,
  .portfolio-letter-content,
  .portfolio-envelope,
  .portfolio-envelope-preview,
  .project-title {
    transition-duration: .01ms;
    transition-delay: 0s;
  }
}




.portfolio-envelope-paper{

    animation:paper-bounce 3s ease-in-out infinite;

}

@keyframes paper-bounce{

    0%,85%,100%{
        transform:translateY(0);
    }

    88%{
        transform:translateY(-4px);
    }

    90%{
        transform:translateY(0);
    }

    92%{
        transform:translateY(-2px);
    }

    94%{
        transform:translateY(0);
    }

}

.portfolio-gallery-note{
    width:100%;

    margin:28px auto 18px;

    text-align:center;

    font-size:.9rem;
    letter-spacing:.04em;

    color:rgba(25,35,55,.55);
}