:root{
  --pf-ink:#2f211b;
  --pf-brown:#3a2922;
  --pf-deep:#211714;
  --pf-cocoa:#50362b;
  --pf-copper:#bc7858;
  --pf-copper-soft:#d99d7b;
  --pf-rose:#c98370;
  --pf-champagne:#ead7c7;
  --pf-cream:#fbf7f2;
  --pf-ivory:#fffdf9;
  --pf-line:#e8dcd2;
  --pf-muted:#7d6a60;
  --pf-soft:#f3e9e1;
  --pf-shadow:0 26px 80px rgba(57,37,28,.10);
  --pf-radius:30px;
}

html{scroll-behavior:smooth}
.marketing-body{
  margin:0;
  min-height:100vh;
  background:var(--pf-cream);
  color:var(--pf-ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  overflow-x:hidden
}
.marketing-body *{box-sizing:border-box}
.marketing-body a{text-decoration:none;color:inherit}
.marketing-body button,.marketing-body input,.marketing-body textarea,.marketing-body select{font:inherit}
.marketing-body ::selection{background:#dca384;color:#2d1d17}
.portfolio-main{overflow:hidden}
.portfolio-section-shell{width:min(1220px,calc(100% - 48px));margin:0 auto}
.portfolio-kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:#a96548;
  font-size:10px;
  font-weight:900;
  letter-spacing:.19em;
  text-transform:uppercase
}
.portfolio-kicker:before{
  content:"";
  width:30px;
  height:1px;
  background:currentColor;
  opacity:.65
}
.portfolio-kicker.light{color:#dca381}
.portfolio-header{
  position:fixed;
  z-index:9000;
  left:0;right:0;top:0;
  padding:14px 0;
  transition:.25s
}
.portfolio-header.is-scrolled{
  padding:8px 0;
  background:rgba(251,247,242,.90);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(110,78,63,.08)
}
.portfolio-nav-shell{
  width:min(1320px,calc(100% - 40px));
  margin:0 auto;
  min-height:68px;
  padding:8px 10px 8px 18px;
  display:flex;
  align-items:center;
  gap:24px;
  border:1px solid rgba(91,62,49,.10);
  border-radius:23px;
  background:rgba(255,253,249,.80);
  box-shadow:0 10px 36px rgba(55,36,28,.06);
  backdrop-filter:blur(15px)
}
.portfolio-header.is-scrolled .portfolio-nav-shell{
  min-height:58px;
  box-shadow:none;
  border-color:transparent;
  background:transparent
}
.portfolio-brand{display:flex;align-items:center;flex:0 0 auto}
.portfolio-brand img{display:block;width:160px;height:58px;object-fit:contain}
.portfolio-header.is-scrolled .portfolio-brand img{height:50px}
.portfolio-nav{
  margin-left:auto;
  display:flex;
  gap:5px;
  align-items:center
}
.portfolio-nav a{
  padding:11px 12px;
  border-radius:999px;
  color:#735e54;
  font-size:10px;
  font-weight:750;
  transition:.18s
}
.portfolio-nav a:hover,.portfolio-nav a.active{
  background:#f2e6de;
  color:#643f30
}
.portfolio-nav-cta{
  flex:0 0 auto;
  padding:12px 17px;
  border-radius:999px;
  background:#2f231d;
  color:#fff!important;
  font-size:10px;
  font-weight:850;
  box-shadow:0 10px 26px rgba(48,31,24,.13);
  transition:.18s
}
.portfolio-nav-cta:hover{transform:translateY(-1px);background:#4a3329}
.portfolio-menu-toggle{
  display:none;
  width:42px;height:42px;
  border:0;border-radius:50%;
  background:#f1e6df;
  cursor:pointer
}
.portfolio-menu-toggle span{
  display:block;width:17px;height:1.5px;margin:4px auto;background:#6b4b3c
}

/* HERO */
.portfolio-hero{
  position:relative;
  min-height:860px;
  padding:150px 0 88px;
  display:grid;
  align-items:center;
  background:
    radial-gradient(circle at 8% 12%,rgba(229,188,161,.26),transparent 29%),
    radial-gradient(circle at 88% 30%,rgba(218,155,122,.15),transparent 32%),
    linear-gradient(180deg,#fffdf9,#f7eee7 72%,#fbf7f2);
  isolation:isolate
}
.portfolio-hero:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.28;
  background-image:radial-gradient(#a97b64 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.4),transparent 75%)
}
.portfolio-hero-grid{
  width:min(1220px,calc(100% - 48px));
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,.93fr) minmax(470px,.87fr);
  gap:80px;
  align-items:center
}
.portfolio-hero-copy{position:relative;z-index:3}
.portfolio-hero-copy h1{
  max-width:720px;
  margin:15px 0 21px;
  color:#39271f;
  font:400 clamp(54px,6vw,83px)/.96 Georgia,serif;
  letter-spacing:-.055em
}
.portfolio-hero-lead{
  max-width:710px;
  margin:0;
  color:#766259;
  font-size:16px;
  line-height:1.78
}
.portfolio-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:29px}
.portfolio-btn{
  min-height:47px;
  padding:13px 20px;
  border:1px solid transparent;
  border-radius:999px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  cursor:pointer;
  font-size:10px;
  font-weight:850;
  transition:.2s
}
.portfolio-btn:hover{transform:translateY(-2px)}
.portfolio-btn-primary{
  background:linear-gradient(135deg,#a96345,#c68162);
  color:#fff!important;
  box-shadow:0 14px 36px rgba(170,98,67,.19)
}
.portfolio-btn-secondary{
  background:rgba(255,253,249,.78);
  border-color:#e5d6cb;
  color:#634b40!important
}
.portfolio-btn-light{
  background:#fff7f1;
  color:#5c3829!important;
  box-shadow:0 12px 32px rgba(0,0,0,.12)
}
.portfolio-hero-proof{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:42px;
  padding-top:22px;
  border-top:1px solid rgba(104,75,62,.11)
}
.portfolio-hero-proof>div{display:grid;grid-template-columns:25px 1fr;gap:8px}
.portfolio-hero-proof span{
  color:#bd7658;
  font:500 18px/1 Georgia,serif
}
.portfolio-hero-proof p{
  margin:0;
  color:#907c72;
  font-size:9px;
  line-height:1.6
}
.portfolio-hero-proof strong{color:#654a3e}
.portfolio-hero-art{
  position:relative;
  min-height:590px;
  display:grid;
  place-items:center
}
.portfolio-echo-orbit{
  position:absolute;
  border:1px solid rgba(183,111,79,.18);
  border-radius:50%;
  animation:portfolioPulse 6s ease-in-out infinite
}
.orbit-one{width:540px;height:540px}
.orbit-two{width:420px;height:420px;animation-delay:-2s}
.orbit-three{width:300px;height:300px;animation-delay:-4s}
.portfolio-memory-card{
  position:relative;
  z-index:4;
  width:min(430px,85%);
  min-height:390px;
  padding:27px;
  border:1px solid rgba(102,70,55,.11);
  border-radius:35px;
  background:linear-gradient(150deg,rgba(255,255,255,.96),rgba(247,235,226,.94));
  box-shadow:0 44px 110px rgba(65,41,30,.18);
  transform:rotate(-2.6deg)
}
.portfolio-memory-card:after{
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid rgba(196,128,95,.11);
  border-radius:27px;
  pointer-events:none
}
.portfolio-memory-card-top{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:42px 1fr 8px;
  gap:10px;
  align-items:center;
  color:#8f786b;
  font-size:9px;
  font-weight:750;
  letter-spacing:.07em;
  text-transform:uppercase
}
.portfolio-memory-card-top img{
  width:42px;height:42px;
  object-fit:contain;
  opacity:.87
}
.portfolio-memory-card-top i{
  width:7px;height:7px;border-radius:50%;background:#82a68a;
  box-shadow:0 0 0 5px rgba(130,166,138,.12)
}
.portfolio-memory-quote{
  position:relative;z-index:2;
  margin:47px 0 36px;
  color:#583f34;
  font:400 26px/1.34 Georgia,serif;
  letter-spacing:-.022em
}
.portfolio-wave{
  position:relative;z-index:2;
  height:74px;
  display:flex;
  gap:4px;
  align-items:center
}
.portfolio-wave i,.film-screen-wave i{
  flex:1;
  max-width:7px;
  height:var(--h);
  min-height:5px;
  border-radius:999px;
  background:linear-gradient(180deg,#d79675,#a9684b);
  animation:portfolioWave 1.8s ease-in-out infinite alternate
}
.portfolio-wave i:nth-child(3n){animation-delay:-.4s}
.portfolio-wave i:nth-child(4n){animation-delay:-.8s}
.portfolio-memory-meta{
  position:relative;z-index:2;
  display:flex;justify-content:space-between;gap:10px;
  margin-top:21px;
  padding-top:15px;
  border-top:1px solid #e8d8cd;
  color:#a08c81;
  font-size:8px
}
.portfolio-memory-meta strong{color:#775b4f}
.portfolio-floating-card{
  position:absolute;z-index:6;
  display:flex;align-items:center;gap:10px;
  min-width:205px;
  padding:13px 14px;
  border:1px solid rgba(99,68,53,.10);
  border-radius:17px;
  background:rgba(255,253,249,.94);
  box-shadow:0 18px 48px rgba(56,36,28,.12);
  backdrop-filter:blur(12px)
}
.portfolio-floating-card strong,.portfolio-floating-card small{display:block}
.portfolio-floating-card strong{font-size:10px;color:#63483b}
.portfolio-floating-card small{margin-top:2px;font-size:8px;color:#a28b7f}
.portfolio-mini-icon{
  display:grid;place-items:center;
  width:35px;height:35px;border-radius:11px;
  background:#f2e2d8;color:#ad6749
}
.portfolio-mini-icon svg{
  width:18px;height:18px;
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round
}
.portfolio-floating-qr{left:-8px;top:92px;transform:rotate(2deg)}
.portfolio-floating-film{right:-35px;bottom:105px;transform:rotate(2.4deg)}
.portfolio-hero-scroll{
  position:absolute;
  left:50%;bottom:24px;
  transform:translateX(-50%);
  display:flex;flex-direction:column;gap:7px;align-items:center;
  color:#b29788
}
.portfolio-hero-scroll span{
  width:1px;height:34px;background:linear-gradient(#aa7055,transparent)
}
.portfolio-hero-scroll small{
  font-size:7px;font-weight:750;letter-spacing:.18em;text-transform:uppercase
}

/* EDITORIAL INTRO */
.portfolio-intro{padding:130px 0 70px}
.portfolio-two-col{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,.8fr);
  gap:100px;
  align-items:start
}
.portfolio-section-heading h2{
  max-width:780px;
  margin:11px 0 13px;
  color:#3e2b23;
  font:400 clamp(39px,4.6vw,62px)/1.04 Georgia,serif;
  letter-spacing:-.045em
}
.portfolio-section-heading>p{
  max-width:650px;
  margin:0;color:#836f65;font-size:13px;line-height:1.75
}
.portfolio-section-heading-center{text-align:center;margin:0 auto 44px}
.portfolio-section-heading-center h2,.portfolio-section-heading-center>p{margin-left:auto;margin-right:auto}
.portfolio-section-heading-center .portfolio-kicker{justify-content:center}
.portfolio-editorial-copy{padding-top:32px}
.portfolio-editorial-copy>p{
  margin:0 0 19px;
  color:#745f55;
  font-size:15px;
  line-height:1.9
}
.portfolio-signature-line{
  display:flex;gap:14px;align-items:center;margin-top:31px;color:#9d7f70
}
.portfolio-signature-line span{width:55px;height:1px;background:#bf7a58}
.portfolio-signature-line em{font:italic 17px/1.4 Georgia,serif}

/* CARDS */
.portfolio-experience-cards{padding:45px 0 120px}
.portfolio-card-grid{display:grid;gap:16px}
.portfolio-card-grid-3{grid-template-columns:repeat(3,1fr)}
.portfolio-feature-card{
  position:relative;
  min-height:290px;
  padding:29px;
  border:1px solid #eadfd7;
  border-radius:27px;
  background:#fffdf9;
  box-shadow:0 16px 50px rgba(58,37,28,.05);
  transition:.25s
}
.portfolio-feature-card:hover{transform:translateY(-5px);box-shadow:var(--pf-shadow)}
.portfolio-card-number{
  position:absolute;right:23px;top:23px;
  color:#d0b5a6;
  font:500 18px/1 Georgia,serif
}
.portfolio-card-icon{
  width:52px;height:52px;margin-bottom:42px;
  display:grid;place-items:center;
  border-radius:16px;background:#f4e7df;color:#ae6a4c
}
.portfolio-card-icon svg{
  width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round
}
.portfolio-feature-card h3{
  margin:0 0 10px;color:#4b342a;font:500 25px/1.1 Georgia,serif
}
.portfolio-feature-card p{margin:0;color:#8e786d;font-size:10px;line-height:1.72}

/* PROCESS */
.portfolio-process{
  padding:120px 0;
  background:#fffdf9;
  border-top:1px solid #eee4dd;
  border-bottom:1px solid #eee4dd
}
.portfolio-process-line{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
  margin-top:56px
}
.portfolio-process-line:before{
  content:"";position:absolute;left:7%;right:7%;top:27px;height:1px;background:#ddc8bc
}
.portfolio-process-step{
  position:relative;z-index:1;
  padding:0 11px;text-align:center
}
.portfolio-process-step>span{
  width:58px;height:58px;margin:0 auto 25px;
  display:grid;place-items:center;
  border:1px solid #d9bba9;border-radius:50%;
  background:#fffdf9;color:#a66649;
  font-size:8px;font-weight:900;letter-spacing:.08em;text-transform:uppercase
}
.portfolio-process-step strong{
  display:block;margin-bottom:8px;color:#60473b;font:500 20px/1.22 Georgia,serif
}
.portfolio-process-step p{margin:0;color:#927e73;font-size:9px;line-height:1.68}

/* DELIVERIES */
.portfolio-deliveries{padding:130px 0}
.portfolio-delivery-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:46px
}
.portfolio-delivery-card{
  overflow:hidden;
  border:1px solid #e9ddd4;
  border-radius:30px;
  background:#fffdf9;
  box-shadow:0 17px 55px rgba(56,36,28,.05)
}
.portfolio-delivery-card-wide{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}
.portfolio-delivery-visual{
  position:relative;
  height:340px;
  overflow:hidden;
  background:linear-gradient(145deg,#f0dfd3,#fbf6f1)
}
.portfolio-delivery-copy{padding:27px 29px 31px}
.portfolio-delivery-copy>span{
  color:#b06d4e;font-size:8px;font-weight:900;letter-spacing:.13em;text-transform:uppercase
}
.portfolio-delivery-copy h3{margin:6px 0 8px;color:#50372d;font:500 28px/1.1 Georgia,serif}
.portfolio-delivery-copy p{margin:0;color:#8d786e;font-size:10px;line-height:1.72}
.delivery-album{padding:30px 27px}
.delivery-browser-dot{
  display:inline-block;width:7px;height:7px;margin-right:3px;border-radius:50%;background:#c8aa9a
}
.delivery-album-cover{
  position:absolute;left:35px;top:75px;width:150px;height:200px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:15px;background:#2d211c;color:#efd7c9;
  box-shadow:0 22px 45px rgba(49,31,23,.20);
  transform:rotate(-4deg)
}
.delivery-album-cover img{width:70px;filter:brightness(0) invert(1);opacity:.85}
.delivery-album-cover span{margin-top:12px;font:400 13px Georgia,serif}
.delivery-track{
  position:absolute;right:35px;left:210px;top:100px;
  display:grid;grid-template-columns:36px 1fr 25px;gap:10px;align-items:center;
  padding:13px;border-radius:15px;background:#fff;
  box-shadow:0 10px 32px rgba(62,40,31,.08)
}
.delivery-track.faded{top:177px;opacity:.72}
.delivery-track>i{width:36px;height:36px;border-radius:50%;background:#ead1c2}
.delivery-track strong,.delivery-track small{display:block}
.delivery-track strong{font-size:9px;color:#684b3e}
.delivery-track small{font-size:7px;color:#a28e83;margin-top:3px}
.delivery-track b{color:#aa684b}
.delivery-book{
  display:flex;align-items:center;justify-content:center;
  padding:35px;
  background:linear-gradient(145deg,#e9d7ca,#f8ede6)
}
.delivery-book-page{
  width:43%;height:245px;padding:24px;
  background:#fffdf8;
  border:1px solid #dfcfc4;
  box-shadow:0 20px 46px rgba(59,39,31,.10)
}
.page-left{border-radius:9px 0 0 9px;transform:perspective(500px) rotateY(4deg);transform-origin:right}
.page-right{border-radius:0 9px 9px 0;transform:perspective(500px) rotateY(-4deg);transform-origin:left}
.delivery-book-page small{font-size:7px;letter-spacing:.18em;color:#bc7857}
.delivery-book-page strong{display:block;margin-top:44px;color:#51382e;font:400 23px/1.2 Georgia,serif}
.delivery-book-page span{display:block;width:40px;height:1px;background:#c97f5d;margin-top:18px}
.delivery-book-page blockquote{margin:45px 0 18px;color:#695046;font:italic 17px/1.45 Georgia,serif}
.delivery-sharing{
  min-height:100%;height:auto;
  display:flex;justify-content:center;align-items:center;gap:13px;
  background:#2c211c;color:#fff
}
.sharing-lock{
  position:absolute;top:55px;left:50%;transform:translateX(-50%);
  width:64px;height:64px;border:1px solid rgba(225,158,124,.35);border-radius:50%
}
.sharing-lock:before{
  content:"";position:absolute;width:21px;height:18px;left:21px;top:23px;border:2px solid #df9c78;border-radius:5px
}
.sharing-lock span:before{
  content:"";position:absolute;width:13px;height:13px;left:25px;top:14px;border:2px solid #df9c78;border-bottom:0;border-radius:10px 10px 0 0
}
.sharing-lines{
  position:absolute;top:125px;left:20%;right:20%;display:flex;justify-content:center;gap:55px
}
.sharing-lines i{width:75px;height:1px;background:rgba(219,155,122,.27);transform:rotate(12deg)}
.sharing-lines i:nth-child(2){transform:rotate(-12deg)}
.sharing-person{position:relative;z-index:2;margin-top:90px;text-align:center}
.sharing-person b{
  display:grid;place-items:center;width:62px;height:62px;margin:0 auto 9px;border-radius:50%;
  background:#f6e9e0;color:#755143;font:500 19px Georgia,serif
}
.sharing-person span{font-size:8px;color:#d1b8aa}

/* FILM */
.portfolio-film{
  position:relative;
  padding:135px 0;
  overflow:hidden;
  background:linear-gradient(145deg,#221814,#35251f 55%,#492f26);
  color:#fff
}
.portfolio-film-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.portfolio-film-orbit{position:absolute;border:1px solid rgba(219,148,110,.10);border-radius:50%}
.film-orbit-a{width:800px;height:800px;right:-280px;top:-340px}
.film-orbit-b{width:600px;height:600px;left:-330px;bottom:-340px}
.portfolio-film-grid{display:grid;grid-template-columns:.82fr 1fr;gap:85px;align-items:center}
.portfolio-film-copy h2{
  margin:12px 0 18px;
  color:#fff7f2;
  font:400 clamp(43px,4.8vw,68px)/1 Georgia,serif;
  letter-spacing:-.045em
}
.portfolio-film-copy>p{max-width:610px;margin:0;color:#d6c1b5;font-size:13px;line-height:1.8}
.portfolio-film-principle{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  margin:27px 0 22px;
  color:#f0d3c2;
  font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase
}
.portfolio-film-principle span{padding:10px 13px;border:1px solid rgba(235,181,151,.20);border-radius:999px;background:rgba(255,255,255,.04)}
.portfolio-film-principle i{color:#d58c68;font:400 22px Georgia,serif}
.portfolio-check-list{margin:0 0 30px;padding:0;list-style:none;display:grid;gap:9px}
.portfolio-check-list li{position:relative;padding-left:21px;font-size:9px;line-height:1.55}
.portfolio-check-list li:before{
  content:"";position:absolute;left:0;top:5px;width:8px;height:5px;border-left:1.5px solid #da9876;border-bottom:1.5px solid #da9876;transform:rotate(-45deg)
}
.light-list li{color:#ceb9ae}
.portfolio-film-stage{position:relative}
.portfolio-film-screen{
  position:relative;
  aspect-ratio:16/9;
  padding:44px 55px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
  border-radius:32px;
  background:
    radial-gradient(circle at 50% 35%,rgba(213,137,98,.20),transparent 32%),
    linear-gradient(150deg,#2b1e19,#604032);
  box-shadow:0 40px 100px rgba(0,0,0,.27)
}
.portfolio-film-screen:before,.portfolio-film-screen:after{
  content:"";position:absolute;border:1px solid rgba(222,151,114,.16);border-radius:50%
}
.portfolio-film-screen:before{width:390px;height:390px;left:-120px;top:-170px}
.portfolio-film-screen:after{width:310px;height:310px;right:-110px;bottom:-180px}
.film-screen-brand{position:absolute;left:30px;top:25px}
.film-screen-brand img{width:120px;filter:brightness(0) invert(1);opacity:.75}
.film-screen-wave{
  width:68%;height:80px;margin-bottom:23px;
  display:flex;gap:4px;align-items:center
}
.film-screen-wave i{background:#e1a080;opacity:.85}
.portfolio-film-screen>strong{
  position:relative;z-index:2;
  color:#fff7f2;
  font:400 27px Georgia,serif
}
.portfolio-film-screen>p{
  position:relative;z-index:2;
  width:75%;margin:10px auto 0;text-align:center;
  color:#d6c1b6;font:italic 14px/1.5 Georgia,serif
}
.film-screen-progress{
  position:absolute;left:12%;right:12%;bottom:28px;height:3px;border-radius:999px;background:rgba(255,255,255,.11);overflow:hidden
}
.film-screen-progress i{display:block;width:63%;height:100%;background:#d8906d}
.portfolio-film-badge{
  position:absolute;right:-12px;bottom:-17px;
  padding:11px 15px;border-radius:999px;background:#fff6f0;color:#6f4938;
  font-size:8px;font-weight:850;box-shadow:0 12px 35px rgba(0,0,0,.20)
}

/* TECH */
.portfolio-technology{padding:130px 0;background:#fffdf9}
.portfolio-tech-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.portfolio-tech-card{
  min-height:245px;padding:26px;
  border:1px solid #e9ddd5;border-radius:25px;background:#fbf6f1
}
.portfolio-tech-card>span{
  color:#aa674a;font-size:8px;font-weight:900;letter-spacing:.14em;text-transform:uppercase
}
.portfolio-tech-card h3{margin:42px 0 10px;color:#573d32;font:500 21px/1.2 Georgia,serif}
.portfolio-tech-card p{margin:0;color:#907b70;font-size:9px;line-height:1.68}

/* AUDIENCE */
.portfolio-audience{padding:130px 0}
.portfolio-audience-grid{display:grid;grid-template-columns:.8fr 1fr;gap:90px;align-items:center}
.portfolio-audience-copy h2{margin:11px 0 15px;color:#402c24;font:400 clamp(42px,4.7vw,62px)/1.05 Georgia,serif;letter-spacing:-.04em}
.portfolio-audience-copy p{margin:0;color:#7e6960;font-size:13px;line-height:1.8}
.portfolio-audience-list{display:grid;gap:9px}
.portfolio-audience-item{
  display:grid;grid-template-columns:14px 1fr;gap:12px;align-items:start;
  padding:18px 19px;border:1px solid #e7dbd2;border-radius:18px;background:#fffdf9
}
.portfolio-audience-item>span{width:8px;height:8px;margin-top:7px;border-radius:50%;background:#c47a58;box-shadow:0 0 0 5px #f1e2d8}
.portfolio-audience-item strong{display:block;color:#5b4136;font:500 18px Georgia,serif}
.portfolio-audience-item p{margin:4px 0 0;color:#948076;font-size:9px;line-height:1.6}

/* PACKAGES */
.portfolio-packages{padding:125px 0;background:#f1e6de}
.portfolio-package-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.portfolio-package-grid.one-package{grid-template-columns:minmax(320px,520px);justify-content:center}
.portfolio-package-card{
  position:relative;min-height:520px;padding:31px;
  display:flex;flex-direction:column;
  border:1px solid #e0cfc4;border-radius:29px;background:#fffaf6
}
.portfolio-package-card.featured{
  background:#2d211c;color:#fff;border-color:#2d211c;box-shadow:0 28px 80px rgba(48,31,24,.20);transform:translateY(-8px)
}
.portfolio-package-badge{
  position:absolute;right:22px;top:22px;padding:7px 10px;border-radius:999px;background:#f0d8c9;color:#734b3a;font-size:7px;font-weight:900;text-transform:uppercase;letter-spacing:.08em
}
.portfolio-package-index{color:#c38a6d;font:500 20px Georgia,serif}
.portfolio-package-card h3{margin:37px 0 11px;color:#51382d;font:500 31px Georgia,serif}
.portfolio-package-card.featured h3{color:#fff7f1}
.portfolio-package-card>p{margin:0 0 19px;color:#8f796f;font-size:10px;line-height:1.7}
.portfolio-package-card.featured>p{color:#cfb9ad}
.portfolio-package-card ul{padding:0;margin:10px 0 25px;list-style:none;display:grid;gap:9px}
.portfolio-package-card li{position:relative;padding-left:18px;color:#755f55;font-size:9px;line-height:1.5}
.portfolio-package-card li:before{content:"+";position:absolute;left:0;color:#bd7353;font-weight:900}
.portfolio-package-card.featured li{color:#d2bdb2}
.portfolio-package-price{margin:auto 0 18px}
.portfolio-package-price small,.portfolio-package-price strong{display:block}
.portfolio-package-price small{color:#a28d82;font-size:8px;text-transform:uppercase;letter-spacing:.1em}
.portfolio-package-price strong{margin-top:3px;color:#5a4034;font:500 26px Georgia,serif}
.portfolio-package-card.featured .portfolio-package-price strong{color:#fff}

/* DETAILS */
.portfolio-details{padding:130px 0;background:#fffdf9}
.portfolio-details-grid{display:grid;grid-template-columns:.72fr 1fr;gap:90px;align-items:center}
.portfolio-details-statement{
  min-height:430px;padding:55px;
  display:flex;flex-direction:column;justify-content:center;
  border-radius:35px;
  background:linear-gradient(145deg,#efe0d6,#f9f2ed)
}
.portfolio-details-statement img{width:90px;opacity:.75}
.portfolio-details-statement blockquote{margin:50px 0 12px;color:#5b4035;font:400 36px/1.25 Georgia,serif}
.portfolio-details-statement p{margin:0;color:#a07d6a;font:italic 15px Georgia,serif}
.portfolio-details-copy h2{margin:11px 0 14px;color:#432f27;font:400 45px/1.08 Georgia,serif;letter-spacing:-.035em}
.portfolio-details-copy>p{margin:0;color:#816d63;font-size:12px;line-height:1.8}
.portfolio-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:28px}
.portfolio-mini-grid>div{padding:14px;border:1px solid #e9ddd5;border-radius:14px;background:#fbf7f3}
.portfolio-mini-grid strong,.portfolio-mini-grid span{display:block}
.portfolio-mini-grid strong{font-size:10px;color:#684c40}
.portfolio-mini-grid span{margin-top:4px;font-size:8px;line-height:1.5;color:#9c887e}

/* FAQ */
.portfolio-faq{padding:130px 0;background:#f7efe9}
.portfolio-faq-grid{display:grid;grid-template-columns:.75fr 1fr;gap:90px;align-items:start}
.portfolio-faq-list{display:grid;gap:8px}
.portfolio-faq-list details{border:1px solid #e3d4ca;border-radius:17px;background:#fffaf6;overflow:hidden}
.portfolio-faq-list summary{
  position:relative;
  padding:20px 50px 20px 20px;
  color:#61463a;font:500 17px/1.3 Georgia,serif;
  cursor:pointer;list-style:none
}
.portfolio-faq-list summary::-webkit-details-marker{display:none}
.portfolio-faq-list summary:after{
  content:"+";
  position:absolute;right:20px;top:50%;transform:translateY(-50%);
  color:#b16b4d;font:400 24px Georgia,serif
}
.portfolio-faq-list details[open] summary:after{content:"−"}
.portfolio-faq-list details p{margin:0;padding:0 20px 20px;color:#8d786d;font-size:10px;line-height:1.75}

/* CONTACT */
.portfolio-contact{
  position:relative;
  padding:135px 0;
  overflow:hidden;
  background:linear-gradient(145deg,#211814,#35251e 55%,#4a3026);
  color:#fff
}
.portfolio-contact-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.contact-orbit{position:absolute;border:1px solid rgba(225,156,121,.10);border-radius:50%}
.contact-orbit.c1{width:720px;height:720px;left:-390px;top:-220px}
.contact-orbit.c2{width:580px;height:580px;right:-280px;bottom:-330px}
.portfolio-contact-grid{position:relative;z-index:2;display:grid;grid-template-columns:.73fr 1fr;gap:80px;align-items:start}
.portfolio-contact-copy{padding-top:40px}
.portfolio-contact-copy h2{margin:12px 0 16px;color:#fff6f1;font:400 clamp(44px,5vw,65px)/1 Georgia,serif;letter-spacing:-.045em}
.portfolio-contact-copy>p{max-width:520px;margin:0;color:#d3bdb1;font-size:12px;line-height:1.8}
.portfolio-contact-direct{display:grid;gap:8px;margin-top:30px;max-width:430px}
.portfolio-contact-direct a,.portfolio-contact-direct>div{
  padding:13px 15px;
  display:flex;justify-content:space-between;gap:16px;
  border:1px solid rgba(255,255,255,.10);border-radius:14px;background:rgba(255,255,255,.04)
}
.portfolio-contact-direct span{color:#bfa99e;font-size:8px;text-transform:uppercase;letter-spacing:.08em}
.portfolio-contact-direct strong{color:#f2dace;font-size:9px;text-align:right}
.portfolio-contact-form{
  position:relative;
  padding:31px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:31px;
  background:#fffaf6;
  color:#402d25;
  box-shadow:0 35px 90px rgba(0,0,0,.20)
}
.portfolio-form-heading{margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid #eaded6}
.portfolio-form-heading span{display:block;color:#b76d4e;font-size:8px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.portfolio-form-heading strong{display:block;margin-top:5px;color:#563c31;font:500 28px Georgia,serif}
.portfolio-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.portfolio-form-grid .span-2{grid-column:1/-1}
.portfolio-form-grid label{display:grid;gap:7px;color:#755e53;font-size:9px;font-weight:750}
.portfolio-form-grid input,.portfolio-form-grid select,.portfolio-form-grid textarea{
  width:100%;
  border:1px solid #e3d5cc;
  border-radius:13px;
  background:#fff;
  color:#4d382f;
  outline:none;
  padding:12px 13px;
  font-size:10px;
  transition:.16s
}
.portfolio-form-grid input:focus,.portfolio-form-grid select:focus,.portfolio-form-grid textarea:focus{
  border-color:#c68b70;box-shadow:0 0 0 3px rgba(198,139,112,.10)
}
.portfolio-form-grid textarea{resize:vertical;min-height:110px}
.portfolio-consent{display:flex!important;grid-template-columns:18px 1fr!important;align-items:start!important;gap:8px!important}
.portfolio-consent input{width:16px;height:16px;margin:1px 0 0;accent-color:#b36c4d}
.portfolio-consent span{font-weight:500;line-height:1.5;color:#8c786e}
.portfolio-form-submit{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:3px}
.portfolio-form-submit small{color:#9a877d;font-size:8px;line-height:1.5}
.portfolio-honeypot{position:absolute!important;left:-99999px!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* FOOTER */
.portfolio-footer{padding:65px 0 18px;background:#17110f;color:#d7c1b5}
.portfolio-footer-main{
  width:min(1220px,calc(100% - 48px));margin:0 auto;
  display:grid;grid-template-columns:1.4fr .55fr .75fr;gap:65px;
  padding-bottom:48px
}
.portfolio-footer-brand img{width:190px;filter:brightness(0) invert(1);opacity:.85}
.portfolio-footer-brand p{max-width:320px;margin:18px 0 0;color:#917f76;font:italic 16px/1.5 Georgia,serif}
.portfolio-footer-links{display:grid;align-content:start;gap:9px}
.portfolio-footer-links strong{margin-bottom:7px;color:#e8cab9;font-size:8px;letter-spacing:.14em;text-transform:uppercase}
.portfolio-footer-links a,.portfolio-footer-links span{color:#9f8d83;font-size:9px;line-height:1.45;transition:.16s}
.portfolio-footer-links a:hover{color:#e1a888}
.portfolio-footer-bottom{
  width:min(1220px,calc(100% - 48px));margin:0 auto;
  padding-top:16px;border-top:1px solid rgba(255,255,255,.07);
  display:flex;justify-content:space-between;gap:20px;color:#74665f;font-size:8px
}

/* REVEAL */
.portfolio-reveal{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease}
.portfolio-reveal.is-visible{opacity:1;transform:none}
@keyframes portfolioPulse{0%,100%{transform:scale(.98);opacity:.7}50%{transform:scale(1.04);opacity:1}}
@keyframes portfolioWave{from{transform:scaleY(.7);opacity:.7}to{transform:scaleY(1.05);opacity:1}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .portfolio-reveal{opacity:1;transform:none;transition:none}
  .portfolio-echo-orbit,.portfolio-wave i,.film-screen-wave i{animation:none}
  .portfolio-btn:hover,.portfolio-feature-card:hover{transform:none}
}
@media(max-width:1120px){
  .portfolio-nav{gap:0}.portfolio-nav a{padding:10px 8px;font-size:9px}
  .portfolio-hero-grid{grid-template-columns:1fr 470px;gap:38px}
  .portfolio-hero-proof{grid-template-columns:1fr}
  .portfolio-film-grid{gap:45px}
  .portfolio-tech-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:930px){
  .portfolio-header{padding:9px 0}
  .portfolio-nav-shell{min-height:62px;padding:6px 8px 6px 14px}
  .portfolio-brand img{width:145px;height:50px}
  .portfolio-menu-toggle{display:block;margin-left:auto}
  .portfolio-nav-cta{display:none}
  .portfolio-nav{
    position:absolute;top:78px;left:20px;right:20px;
    margin:0;padding:10px;
    display:none;flex-direction:column;align-items:stretch;
    border:1px solid #e7d8cf;border-radius:20px;background:#fffaf6;
    box-shadow:0 22px 60px rgba(55,35,27,.14)
  }
  .portfolio-nav.is-open{display:flex}
  .portfolio-nav a{padding:12px 14px}
  .portfolio-hero{min-height:auto;padding-top:140px}
  .portfolio-hero-grid{grid-template-columns:1fr;gap:55px}
  .portfolio-hero-copy{text-align:center}
  .portfolio-hero-copy h1,.portfolio-hero-lead{margin-left:auto;margin-right:auto}
  .portfolio-hero-actions,.portfolio-hero-proof{justify-content:center}
  .portfolio-hero-proof{text-align:left}
  .portfolio-hero-art{min-height:520px}
  .portfolio-floating-qr{left:4%}.portfolio-floating-film{right:2%}
  .portfolio-two-col,.portfolio-film-grid,.portfolio-audience-grid,.portfolio-details-grid,.portfolio-faq-grid,.portfolio-contact-grid{grid-template-columns:1fr;gap:45px}
  .portfolio-card-grid-3{grid-template-columns:1fr 1fr}
  .portfolio-process-line{grid-template-columns:1fr 1fr;gap:36px 15px}
  .portfolio-process-line:before{display:none}
  .portfolio-delivery-card-wide{display:block}
  .delivery-sharing{height:300px}
  .portfolio-package-grid{grid-template-columns:1fr 1fr}
  .portfolio-package-card.featured{transform:none}
  .portfolio-footer-main{grid-template-columns:1fr 1fr}
  .portfolio-footer-brand{grid-column:1/-1}
}
@media(max-width:650px){
  .portfolio-section-shell,.portfolio-hero-grid,.portfolio-footer-main,.portfolio-footer-bottom{width:min(100% - 28px,1220px)}
  .portfolio-nav-shell{width:calc(100% - 20px)}
  .portfolio-brand img{width:125px}
  .portfolio-hero{padding:125px 0 75px}
  .portfolio-hero-copy h1{font-size:48px}
  .portfolio-hero-lead{font-size:13px}
  .portfolio-hero-actions{display:grid}
  .portfolio-btn{width:100%}
  .portfolio-hero-proof{margin-top:30px}
  .portfolio-hero-art{min-height:450px}
  .orbit-one{width:390px;height:390px}.orbit-two{width:310px;height:310px}.orbit-three{width:230px;height:230px}
  .portfolio-memory-card{width:89%;min-height:340px;padding:22px}
  .portfolio-memory-quote{margin:34px 0 28px;font-size:21px}
  .portfolio-wave{height:62px}
  .portfolio-floating-card{min-width:170px;padding:10px}
  .portfolio-floating-qr{left:-3px;top:35px}.portfolio-floating-film{right:-4px;bottom:45px}
  .portfolio-intro,.portfolio-process,.portfolio-deliveries,.portfolio-technology,.portfolio-audience,.portfolio-packages,.portfolio-details,.portfolio-faq,.portfolio-contact{padding:88px 0}
  .portfolio-section-heading h2,.portfolio-audience-copy h2{font-size:39px}
  .portfolio-card-grid-3,.portfolio-tech-grid,.portfolio-package-grid{grid-template-columns:1fr}
  .portfolio-feature-card{min-height:250px}
  .portfolio-process-line{grid-template-columns:1fr}
  .portfolio-delivery-grid{grid-template-columns:1fr}
  .portfolio-delivery-card-wide{grid-column:auto}
  .portfolio-delivery-visual{height:300px}
  .delivery-album-cover{left:22px;width:125px;height:175px}
  .delivery-track{left:160px;right:20px}
  .delivery-book{padding:25px 12px}
  .delivery-book-page{width:47%;padding:17px}
  .delivery-book-page strong{font-size:18px}
  .delivery-book-page blockquote{font-size:14px}
  .portfolio-film{padding:95px 0}
  .portfolio-film-copy h2{font-size:43px}
  .portfolio-film-screen{padding:30px 25px;border-radius:22px}
  .film-screen-brand img{width:85px}
  .portfolio-film-screen>strong{font-size:19px}
  .portfolio-film-screen>p{font-size:11px}
  .film-screen-wave{height:55px}
  .portfolio-details-statement{min-height:350px;padding:35px}
  .portfolio-details-statement blockquote{font-size:29px}
  .portfolio-details-copy h2{font-size:38px}
  .portfolio-mini-grid{grid-template-columns:1fr}
  .portfolio-form-grid{grid-template-columns:1fr}
  .portfolio-form-grid .span-2{grid-column:auto}
  .portfolio-contact-form{padding:22px 17px;border-radius:23px}
  .portfolio-contact-copy{padding-top:0}
  .portfolio-footer-main{grid-template-columns:1fr}
  .portfolio-footer-brand{grid-column:auto}
  .portfolio-footer-bottom{flex-direction:column}
}