/*
 * Studio342 — modern glass design exploration
 * Loaded after style.css so the original design remains easy to restore.
 */

:root{
  --glass-bg:#eef5f6;
  --glass-ink:#102124;
  --glass-muted:#53696c;
  --glass-blue:#1d87a4;
  --glass-cyan:#65d7e8;
  --glass-lime:#dcef36;
  --glass-line:rgba(17,53,59,.13);
  --glass-panel:rgba(255,255,255,.62);
  --glass-panel-strong:rgba(255,255,255,.82);
  --glass-shadow:0 24px 70px rgba(38,82,89,.13);
  --glass-shadow-hover:0 32px 90px rgba(38,82,89,.2);
  --glass-radius:24px;
}

html{background:#e9f2f3}
body{
  background:
    radial-gradient(circle at 8% 12%,rgba(101,215,232,.32),transparent 30rem),
    radial-gradient(circle at 92% 28%,rgba(220,239,54,.2),transparent 27rem),
    radial-gradient(circle at 55% 78%,rgba(97,148,255,.15),transparent 34rem),
    var(--glass-bg);
  color:var(--glass-ink);
}
body:before,body:after{content:"";position:fixed;z-index:-2;width:34rem;height:34rem;border-radius:50%;filter:blur(85px);opacity:.34;pointer-events:none;will-change:transform}
body:before{left:-15rem;top:16%;background:var(--glass-cyan);animation:aurora-one 18s ease-in-out infinite alternate}
body:after{right:-17rem;bottom:2%;background:var(--glass-lime);animation:aurora-two 22s ease-in-out infinite alternate}
.noise{opacity:.01;mix-blend-mode:multiply}

@keyframes aurora-one{to{transform:translate3d(7rem,14rem,0) scale(1.14)}}
@keyframes aurora-two{to{transform:translate3d(-9rem,-11rem,0) scale(.88)}}
@keyframes float-soft{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes pulse-line{0%,100%{opacity:.45;transform:scaleX(.75)}50%{opacity:1;transform:scaleX(1)}}
@keyframes sheen{0%{transform:translateX(-160%) rotate(18deg)}100%{transform:translateX(360%) rotate(18deg)}}

/* Frosted navigation */
.header{
  top:14px;left:max(14px,calc((100vw - 1280px)/2));right:max(14px,calc((100vw - 1280px)/2));
  height:68px;border:1px solid rgba(255,255,255,.72);border-radius:18px;
  background:rgba(255,255,255,.68);backdrop-filter:blur(20px) saturate(145%);-webkit-backdrop-filter:blur(20px) saturate(145%);
  box-shadow:0 12px 35px rgba(44,80,87,.1);padding:0 1.35rem;transition:background .3s,box-shadow .3s,transform .3s;
}
.header.scrolled{background:rgba(255,255,255,.86);box-shadow:0 16px 45px rgba(44,80,87,.16);transform:translateY(-4px)}
.brand{width:148px;height:auto}
.header nav{gap:.35rem}
.header nav>a{color:#3e5559;padding:.55rem .78rem;border-radius:999px;transition:color .2s,background .2s,transform .2s}
.header nav>a:hover{color:var(--glass-ink);background:rgba(255,255,255,.72);transform:translateY(-1px)}
.header nav .active{color:#fff;background:linear-gradient(135deg,#247f99,#135e72)}
.header .nav-contact{border:0!important;border-radius:999px;background:var(--glass-lime);color:#1e2b14;padding:.6rem .9rem!important;box-shadow:0 8px 18px rgba(145,160,33,.2)}
.header .nav-contact:hover{background:#e7f65c}

/* Shared glass language */
.section{position:relative;border:0}
.section-tag,.kicker,.overline,.detail-label{color:#397e90}
.section-tag{display:inline-flex;width:max-content;max-width:100%;min-height:2rem;align-items:center;justify-content:center;align-self:flex-start;justify-self:start;padding:.5rem .75rem;border:1px solid rgba(29,135,164,.16);border-radius:999px;background:rgba(255,255,255,.52);backdrop-filter:blur(12px);line-height:1;text-align:center;white-space:nowrap}
.kicker i{width:34px;background:linear-gradient(90deg,var(--glass-blue),var(--glass-lime));transform-origin:left;animation:pulse-line 3s ease-in-out infinite}
.hero h1 em,.page-hero h1 em,.contact-page h1 em{color:#288da7}
.hero-lead,.page-lead,.work-introduction>p{color:var(--glass-muted)}
.text-link,.project-link,.primary-action{position:relative;overflow:hidden;border:1px solid rgba(29,135,164,.22);border-radius:999px;background:rgba(255,255,255,.67);backdrop-filter:blur(12px);box-shadow:0 12px 30px rgba(38,82,89,.1);padding:.85rem 1.05rem;transition:transform .25s,box-shadow .25s,background .25s}
.text-link:hover,.project-link:hover,.primary-action:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(38,82,89,.18);background:#fff}
.text-link:before,.project-link:before,.primary-action:before{content:"";position:absolute;inset:-40% auto -40% -35%;width:20%;background:rgba(255,255,255,.75);filter:blur(7px);transform:rotate(18deg)}
.text-link:hover:before,.project-link:hover:before,.primary-action:hover:before{animation:sheen .8s ease-out}

/* Heroes */
.hero,.page-hero,.work-introduction,.contact-page,.about-opening{position:relative;isolation:isolate;background:transparent;border:0;overflow:hidden}
.hero:before,.page-hero:before,.work-introduction:before,.contact-page:before,.about-opening:before{content:"";position:absolute;z-index:-2;width:42rem;height:42rem;right:-15rem;top:7rem;border-radius:50%;background:linear-gradient(135deg,rgba(101,215,232,.42),rgba(97,148,255,.13));filter:blur(2px);box-shadow:inset 0 0 90px rgba(255,255,255,.65);animation:float-soft 9s ease-in-out infinite}
.hero:after,.page-hero:after,.work-introduction:after,.contact-page:after,.about-opening:after{content:"";display:block;position:absolute;z-index:-1;width:22rem;height:22rem;right:8%;bottom:-10rem;border-radius:42% 58% 65% 35%;background:linear-gradient(145deg,rgba(220,239,54,.34),rgba(255,255,255,.16));filter:blur(1px);animation:float-soft 12s ease-in-out infinite reverse}
.hero{min-height:800px;align-items:center;padding-top:150px}
.hero-number{display:block;position:absolute;z-index:-1;right:3%;top:17%;font-size:clamp(12rem,30vw,28rem);line-height:.75;font-weight:500;color:rgba(255,255,255,.3);text-shadow:0 1px 0 rgba(255,255,255,.8);pointer-events:none}
.hero h1{font-size:clamp(3.6rem,6.6vw,6.5rem);line-height:.96;max-width:890px}
.home-hero h1 em,.page-hero h1 em,.contact-page h1 em{display:block;margin-top:.2em}
.hero-lead{max-width:690px;padding:1.25rem 1.4rem;border:1px solid rgba(255,255,255,.7);border-radius:18px;background:rgba(255,255,255,.44);backdrop-filter:blur(16px);box-shadow:0 16px 45px rgba(38,82,89,.08)}
.home-hero{grid-template-columns:minmax(0,1fr) 320px}
.home-hero .hero-aside{display:block;align-self:center;border:1px solid rgba(255,255,255,.76);border-radius:var(--glass-radius);background:rgba(255,255,255,.54);backdrop-filter:blur(18px) saturate(140%);box-shadow:var(--glass-shadow);padding:2rem;animation:float-soft 7s ease-in-out infinite}
.home-hero .hero-aside>span{color:#257f96}
.home-hero .hero-aside p{color:#34585e}
.page-hero{min-height:620px;justify-content:center;padding-top:160px}
.page-hero h1{font-size:clamp(3.3rem,6.2vw,6.2rem);line-height:.94}
.page-lead{max-width:780px;padding:1.25rem 1.4rem;border:1px solid rgba(255,255,255,.72);border-radius:18px;background:rgba(255,255,255,.47);backdrop-filter:blur(14px);box-shadow:0 18px 46px rgba(38,82,89,.09)}

/* Cards */
.home-paths,.approach,.fit,.services-range,.working-principles,.brief-context{background:rgba(255,255,255,.17)}
.path-grid,.proof-row,.service-grid,.services-grid,.principles-grid,.context-columns,.feature-grid{gap:1.25rem}
.path-card,.proof-row>div,.service-grid article,.services-grid article,.principles-grid article,.context-card,.feature-grid>div{
  border:1px solid rgba(255,255,255,.72);border-radius:var(--glass-radius);background:var(--glass-panel);
  backdrop-filter:blur(18px) saturate(135%);-webkit-backdrop-filter:blur(18px) saturate(135%);
  box-shadow:var(--glass-shadow);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s,background .35s;
}
.path-card:hover,.proof-row>div:hover,.service-grid article:hover,.services-grid article:hover,.principles-grid article:hover,.context-card:hover,.feature-grid>div:hover{transform:translateY(-9px);box-shadow:var(--glass-shadow-hover);border-color:rgba(255,255,255,.95);background:rgba(255,255,255,.78)}
.path-card{min-height:330px;padding:2rem}
.path-accent{color:var(--glass-ink);background:linear-gradient(145deg,rgba(226,245,67,.76),rgba(255,255,255,.53))}
.path-accent p,.path-accent>span{color:#52601b}
.proof-row>div:nth-child(2){background:linear-gradient(145deg,rgba(255,255,255,.7),rgba(101,215,232,.22))}
.proof-row>div:nth-child(3){background:linear-gradient(145deg,rgba(255,255,255,.7),rgba(220,239,54,.2))}
.service-grid article,.services-grid article{min-height:260px}
.next-page,.requirements-cta,.work-close{background:linear-gradient(120deg,rgba(220,239,54,.9),rgba(101,215,232,.52));color:var(--glass-ink)}

/* Image and product presentation */
.home-success{background:transparent}
.home-success-visual img,.collaboration-visual img,.founder-headshot img{border:1px solid rgba(255,255,255,.8);border-radius:30px;box-shadow:var(--glass-shadow);transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s;animation:float-soft 9s ease-in-out infinite}
.home-success-visual img:hover,.collaboration-visual img:hover,.founder-headshot img:hover{transform:translateY(-8px) rotate(-.5deg) scale(1.012);box-shadow:var(--glass-shadow-hover);animation-play-state:paused}
.founder-copy{border:1px solid rgba(255,255,255,.74);border-radius:var(--glass-radius);background:var(--glass-panel);backdrop-filter:blur(18px);box-shadow:var(--glass-shadow);padding:clamp(1.5rem,3vw,2.5rem)}
.founder-copy p+p{border-color:var(--glass-line)}
.app-case{border:1px solid rgba(255,255,255,.78);border-radius:30px;background:rgba(255,255,255,.5);backdrop-filter:blur(20px);box-shadow:var(--glass-shadow)}
.app-vault,.app-pen,.app-aud{color:var(--glass-ink)}
.screen-window,.platform-strip{border:1px solid rgba(255,255,255,.84);border-radius:20px;box-shadow:var(--glass-shadow);transition:transform .45s,box-shadow .45s}
.screen-window:hover{transform:translateY(-7px) scale(1.008);box-shadow:var(--glass-shadow-hover)}
.gallery-brand{padding:1rem 1.2rem;border:1px solid rgba(255,255,255,.72);border-radius:18px;background:rgba(255,255,255,.48);backdrop-filter:blur(14px)}
.primary-action{background:linear-gradient(135deg,#dcef36,#c9df24);color:#1b2b1f;border:0}

/* Process, requirements and services */
.process-list,.service-standards-list{border-top-color:var(--glass-line)}
.process-list article,.service-standards-list>div{border-bottom-color:var(--glass-line);transition:padding-left .3s,background .3s,border-radius .3s}
.process-list article:hover,.service-standards-list>div:hover{padding-left:1rem;background:rgba(255,255,255,.4);border-radius:16px}
.process-list article>span,.principles-grid article>span,.service-standards-list span{color:var(--glass-blue)}
.brief-prompts{gap:1rem}
.brief-prompts article{border:1px solid rgba(255,255,255,.74);border-radius:var(--glass-radius);background:var(--glass-panel);backdrop-filter:blur(18px);box-shadow:var(--glass-shadow);transition:transform .3s,box-shadow .3s}
.brief-prompts article:hover{transform:translateX(8px);box-shadow:var(--glass-shadow-hover)}
.context-card-soft{background:rgba(229,242,243,.65)}
.contact-notes{border:1px solid rgba(255,255,255,.78);border-radius:var(--glass-radius);background:linear-gradient(145deg,rgba(220,239,54,.64),rgba(255,255,255,.57));backdrop-filter:blur(18px);box-shadow:var(--glass-shadow);animation:float-soft 8s ease-in-out infinite}

/* Work index */
.work-introduction{min-height:600px;padding-top:155px;position:relative;isolation:isolate;background:transparent;border:0;overflow:hidden}
.work-index{gap:1.25rem}
.work-card{border:1px solid rgba(255,255,255,.78);border-radius:var(--glass-radius);background:var(--glass-panel);backdrop-filter:blur(18px);box-shadow:var(--glass-shadow);transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.work-card-pen{background:linear-gradient(145deg,rgba(255,255,255,.68),rgba(229,224,212,.6))}
.work-card-aud{background:linear-gradient(145deg,rgba(255,255,255,.68),rgba(255,205,193,.32))}
.work-card:hover{transform:translateY(-10px) rotate(.35deg);box-shadow:var(--glass-shadow-hover)}
.work-card-logo img{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.work-card:hover .work-card-logo img{transform:scale(1.07)}
.case-pagination{border:1px solid rgba(255,255,255,.8);border-radius:22px;background:rgba(255,255,255,.56);backdrop-filter:blur(16px);box-shadow:var(--glass-shadow)}

/* Legal, cookie panel and footer */
.legal-page{background:transparent}
.legal-hero{background:transparent}
.legal-content{padding-inline:clamp(1rem,2vw,2rem);border:1px solid rgba(255,255,255,.75);border-radius:var(--glass-radius);background:rgba(255,255,255,.52);backdrop-filter:blur(18px);box-shadow:var(--glass-shadow);margin-bottom:5rem}
.legal-content section{border-color:var(--glass-line)}
.legal-action{border:0;border-radius:999px;background:var(--glass-lime);color:var(--glass-ink);box-shadow:0 10px 25px rgba(120,142,32,.16)}
.cookie-banner{border:1px solid rgba(255,255,255,.82);border-radius:var(--glass-radius);background:rgba(255,255,255,.78);backdrop-filter:blur(22px);box-shadow:0 28px 90px rgba(29,67,74,.22)}
.cookie-actions button{border-color:var(--glass-line);border-radius:999px}
.cookie-actions .cookie-accept{background:linear-gradient(135deg,#2b94ad,#17677b);border:0}
footer{background:rgba(255,255,255,.42);backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,.72)}
.footer-brand>a{padding:.45rem;border-radius:12px;background:rgba(255,255,255,.55)}
.footer-heading{color:#267f95}
.footer-menu a,.footer-menu button{transition:color .2s,transform .2s}
.footer-menu a:hover,.footer-menu button:hover{color:var(--glass-blue);transform:translateX(4px)}
.footer-bottom{border-color:var(--glass-line)}

/* More expressive reveal motion */
.reveal{opacity:0;filter:blur(7px);transform:translateY(30px) scale(.985);transition:opacity .75s cubic-bezier(.2,.8,.2,1),transform .75s cubic-bezier(.2,.8,.2,1),filter .75s}
.reveal.in-view{opacity:1;filter:blur(0);transform:none}
.path-grid .reveal,.proof-row .reveal,.service-grid .reveal,.services-grid .reveal,.principles-grid .reveal,.work-index .reveal{transition-delay:var(--reveal-delay,0ms)}

@media(max-width:1000px){
  .header nav{gap:.1rem}.header nav>a{padding:.5rem .55rem;font-size:.68rem}
  .home-hero{grid-template-columns:minmax(0,1fr) 270px}
}

@media(max-width:860px){
  .header{top:10px;left:10px;right:10px;height:64px;background:#f8fbfb;backdrop-filter:none;-webkit-backdrop-filter:none}
  .brand,.menu-toggle{position:relative;z-index:2}
  .menu-toggle{display:block;border:1px solid var(--glass-line);border-radius:12px;background:#fff;padding:.55rem}
  .header nav{position:fixed;z-index:1;top:88px;right:10px;bottom:auto;left:10px;border:1px solid rgba(28,74,82,.14);border-radius:5px;background:rgba(255,255,255,.9);backdrop-filter:none;-webkit-backdrop-filter:none;padding:10px;justify-content:flex-start;align-items:stretch;gap:0;overflow-y:auto;max-height:calc(100dvh - 100px);box-shadow:0 20px 55px rgba(24,61,68,.2)}
  .header nav>a{width:100%;min-height:54px;display:flex;align-items:center;padding:.85rem 1rem;font-size:1rem;color:#243b3f;background:transparent;border:0;border-bottom:1px solid rgba(28,74,82,.12);border-radius:0}
  .header nav>a:first-child{border-radius:0}
  .header nav>a+a{border-top:0}
  .header nav>a:nth-last-child(2){border-bottom:0}
  .header nav>a:hover{color:#102124;background:#e6f2f3;transform:none}
  .header nav .active{color:#fff;background:linear-gradient(135deg,#247f99,#135e72);border-color:transparent}
  .header .nav-contact{color:#1e2b14;background:var(--glass-lime);border:0!important;border-radius:5px;margin-top:6px}
  .home-hero{grid-template-columns:1fr}.home-hero .hero-aside{display:block;max-width:500px;animation:none}
  .hero-number{font-size:16rem;right:-3rem;top:20%}
}

@media(max-width:560px){
  body:before,body:after{width:22rem;height:22rem}
  .hero,.page-hero,.work-introduction,.contact-page,.about-opening{padding-top:118px}
  .hero{min-height:auto}
  .hero h1,.page-hero h1,.contact-page h1{font-size:clamp(2.9rem,14vw,4.25rem)}
  .hero:before,.page-hero:before,.work-introduction:before,.contact-page:before,.about-opening:before{width:25rem;height:25rem;right:-16rem;top:7rem}
  .path-card,.proof-row>div,.service-grid article,.services-grid article,.principles-grid article,.context-card,.brief-prompts article{border-radius:20px}
  .home-success-visual img,.collaboration-visual img,.founder-headshot img{animation:none;border-radius:22px}
  .legal-content{width:calc(100% - 2rem);border-radius:20px}
}

@media(prefers-reduced-motion:reduce){
  body:before,body:after,.kicker i,.home-hero .hero-aside,.home-success-visual img,.collaboration-visual img,.founder-headshot img,.contact-notes,.hero:before,.page-hero:before,.work-introduction:before,.contact-page:before,.about-opening:before,.hero:after,.page-hero:after,.work-introduction:after,.contact-page:after,.about-opening:after{animation:none!important}
  .reveal{opacity:1;filter:none;transform:none;transition:none}
  .path-card,.proof-row>div,.service-grid article,.services-grid article,.principles-grid article,.context-card,.feature-grid>div,.work-card,.screen-window{transition:none}
}