/* ═══════════════════════════════════════════════════════════════
   SAMAGRAM TECHNOLOGIES — site styles
   Dark editorial · smooth scroll · scrub animations
   ═══════════════════════════════════════════════════════════════ */

:root{
  --bg:        #050507;
  --bg-soft:   #0b0b0f;
  --ink:       #f4efe6;
  --ink-dim:   rgba(244,239,230,.58);
  --ink-faint: rgba(244,239,230,.3);
  --line:      rgba(244,239,230,.14);
  --accent:    #c4763a;
  --accent-2:  #e9a86f;
  --paper:     #f2f1ec;
  --paper-2:   #d8d7d2;
  --mono:      "JetBrains Mono", ui-monospace, monospace;
  --sans:      "Familjen Grotesk", Inter, system-ui, sans-serif;
  --serif:     "Instrument Serif", Georgia, serif;
  --ease-out:  cubic-bezier(.19,1,.22,1);
  --pad-x:     clamp(16px, 4vw, 64px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--accent);color:#050507}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,svg{display:block;max-width:100%}
h1,h2,h3{font-weight:600;line-height:.96;letter-spacing:-.03em}
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase}

/* film grain over everything */
body::after{
  content:"";position:fixed;inset:-50%;z-index:2000;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.05;mix-blend-mode:overlay;animation:grain 8s steps(10) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 20%{transform:translate(-6%,4%)}
  40%{transform:translate(4%,-7%)} 60%{transform:translate(-3%,-5%)}
  80%{transform:translate(5%,6%)}
}

/* chars / words produced by JS */
.char{display:inline-block;will-change:transform}
.word{display:inline-block}

/* ═══════════════ CUSTOM CURSOR ═══════════════ */
.cursor,.cursor-ring{
  position:fixed;top:0;left:0;z-index:4000;pointer-events:none;
  border-radius:999px;mix-blend-mode:difference;opacity:0;
}
.cursor{
  width:10px;height:10px;background:#fff;
  display:flex;align-items:center;justify-content:center;
  transform:translate(-50%,-50%);
}
.cursor-label{font:500 10px/1 var(--mono);letter-spacing:.08em;color:#000;opacity:0;white-space:nowrap}
.cursor-ring{width:36px;height:36px;border:1px solid #fff;transform:translate(-50%,-50%)}
.has-anim .cursor,.has-anim .cursor-ring{opacity:1}
body.cursor-hover .cursor{transform:translate(-50%,-50%) scale(2.2)}
body.cursor-hover .cursor-ring{transform:translate(-50%,-50%) scale(1.6)}
body.cursor-view .cursor{width:72px;height:72px;mix-blend-mode:normal;background:#fff}
body.cursor-view .cursor-label{opacity:1;color:#000}
body.cursor-view .cursor-ring{opacity:0}
@media (pointer:coarse){.cursor,.cursor-ring{display:none}}

/* ═══════════════ PRELOADER ═══════════════ */
.pl-white-overlay{position:fixed;inset:0;z-index:9000;background:#e9e9e6;transform:translateY(0)}
.pl-overlay{position:fixed;inset:0;z-index:9010;background:#050507;display:block}
.pl-grid{position:absolute;inset:0;display:flex}
.pl-belt{flex:1;background:#050507;border-right:1px solid rgba(236,236,232,.05)}

.pl-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px}
.pl-logo-wrap{position:relative;width:96px;height:96px}
.pl-logo-box{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.pl-mono{font-family:var(--serif);font-style:italic;font-size:64px;color:var(--ink);transform:translateY(-2px)}
.pl-mono i{color:var(--accent);font-style:normal;font-size:.55em;vertical-align:super}
.pl-logo-box .pl-corner{position:absolute;font-size:13px;color:#6f6f76;line-height:1}
.pl-corner.tl{top:-7px;left:-8px}.pl-corner.tr{top:-7px;right:-9px}
.pl-corner.bl{bottom:-7px;left:-8px}.pl-corner.br{bottom:-7px;right:-9px}
.pl-box-frame{position:absolute;inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px)}
.pl-page-label{overflow:hidden}
.pl-page-label span{display:inline-block;font:400 11px var(--mono);letter-spacing:.3em;text-transform:uppercase;color:#8f8f96}

.pl-tagline{position:absolute;bottom:26vh;left:0;right:0;display:flex;justify-content:center;gap:14px}
.pl-tag-word{font-family:var(--serif);font-style:italic;font-size:clamp(16px,2vw,22px);color:#9a9aa2}
.pl-tag-dot{color:#5c5c64}

.pl-counter{position:absolute;bottom:24px;left:24px;font:500 clamp(40px,9vw,120px)/1 var(--mono);letter-spacing:-.06em;color:var(--ink)}

.pl-plus{position:absolute;color:#3a3a42;font-size:20px;opacity:.7}
.pl-plus--f1{top:24%;left:18%}.pl-plus--f2{top:66%;left:26%}.pl-plus--f3{top:38%;left:78%}

/* ═══════════════ HEADER ═══════════════ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:120;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--pad-x);mix-blend-mode:difference;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:22px;letter-spacing:-.02em}
.brand-mark{font-size:15px;transform:translateY(-1px)}
.brand-word sup{font-size:.34em;font-weight:400;margin-left:2px}
.header-right{display:flex;align-items:center;gap:26px}
.header-clock{color:#fff}

.menu-btn{
  position:relative;display:block;overflow:hidden;
  border:1px solid rgba(255,255,255,.4);border-radius:999px;
  padding:10px 8px;width:76px;height:38px;background:transparent;
}
.menu-btn-track{position:relative;display:block;width:100%;height:100%}
.menu-btn-line{
  position:absolute;left:0;top:0;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  transition:transform .5s var(--ease-out),opacity .4s;
}
.menu-btn-line:last-child{transform:translateY(42px)}
body.menu-open .menu-btn-line:first-child{transform:translateY(-42px)}
body.menu-open .menu-btn-line:last-child{transform:translateY(0)}

/* hover-lift char effect containers */
.hl{position:relative;display:inline-flex}
.hl .layer{display:inline-flex;white-space:pre}

/* ═══════════════ MENU OVERLAY ═══════════════ */
.menu-wrapper{position:fixed;inset:0;z-index:150;pointer-events:none;visibility:hidden;transition:visibility 0s .8s}
.menu-scrim{position:absolute;inset:0;background:rgba(0,0,0,.35);opacity:0;transition:opacity .5s}
.menu-panel{
  position:absolute;top:10px;right:10px;bottom:10px;width:min(460px,calc(100% - 20px));
  background:#f4f3ef;color:#101014;border-radius:14px;overflow:hidden;
  clip-path:circle(0% at calc(100% - 34px) 48px);
  pointer-events:auto;
}
.menu-inner{display:flex;flex-direction:column;justify-content:space-between;height:100%;padding:96px 34px 26px;overflow-y:auto;overscroll-behavior:contain}
.menu-list{display:flex;flex-direction:column;gap:6px;margin:auto 0;list-style:none}
.menu-list li{list-style:none}
.menu-list a{display:flex;justify-content:space-between;align-items:center}
.menu-link .hl{font-size:clamp(38px,5vw,54px);font-weight:600;letter-spacing:-.03em;color:#101014}
.menu-arrow{font-size:20px;opacity:0;transform:translateX(-12px);transition:.45s var(--ease-out) .12s}
.menu-list a:hover .menu-arrow{opacity:1;transform:none}
.menu-plus-row{display:flex;justify-content:center;padding:18px 0;border-top:1px solid rgba(16,16,20,.14);border-bottom:1px solid rgba(16,16,20,.14);margin:26px 0}
.menu-plus{font-size:16px;color:#494950}
.menu-bottom{display:flex;flex-direction:column;gap:22px}
.menu-kicker{color:#8a8a90;margin-bottom:10px;display:block}
.menu-mail{font-size:16px;font-weight:600;margin-bottom:4px;display:inline-block}
.menu-socials{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#3c3c42}
.menu-est{display:flex;gap:12px;align-items:flex-start;border:1px solid rgba(16,16,20,.18);border-radius:8px;padding:14px 16px;max-width:290px}
.est-mark{font-size:18px;color:#101014}
.est-copy{color:#5a5a61;text-transform:none;letter-spacing:.02em;line-height:1.35}

body.menu-open{overflow:hidden}
body.menu-open .menu-wrapper{visibility:visible;pointer-events:auto;transition:visibility 0s 0s}
body.menu-open .site-header{z-index:170}
body.menu-open .menu-scrim{opacity:1}

/* mobile full-screen menu variant */
@media (max-width:768px){
  .menu-panel{top:0;right:0;bottom:0;left:0;width:100%;border-radius:0;background:#050507;color:var(--ink)}
  .menu-link .hl{color:var(--ink)}
  .menu-plus-row,.menu-est{border-color:rgba(236,236,232,.16)}
  .menu-socials,.menu-mail{color:var(--ink)}
  .menu-kicker{color:var(--ink-dim)}
  .est-copy{color:var(--ink-dim)}
  .menu-inner{padding:110px 24px 60px;justify-content:flex-start;gap:60px}
  .menu-list{gap:14px}
}

/* ═══════════════ SHARED ═══════════════ */
section{position:relative}
.section-kicker{
  display:flex;justify-content:space-between;align-items:center;
  color:var(--ink-dim);border-top:1px solid var(--line);
  padding:14px 0 0;margin:0 var(--pad-x) clamp(40px,6vw,90px);
}
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;overflow:hidden;isolation:isolate;
  font-size:15px;font-weight:600;padding:16px 30px;transition:color .35s;
}
.btn--solid{background:var(--ink);color:#0b0b0f}
.btn--ghost{border:1px solid var(--line);color:var(--ink)}
.btn--ghost b{font-weight:400;margin-left:6px;transition:transform .35s var(--ease-out)}
.btn::after{
  content:"";position:absolute;inset:-2px;z-index:-1;border-radius:inherit;
  background:var(--accent);transform:translateY(105%);transition:transform .45s var(--ease-out);
}
.btn:hover{color:#0b0b0f}
.btn:hover::after{transform:translateY(0)}
.btn--ghost:hover{border-color:var(--accent)}
.btn--ghost:hover b{transform:translateY(3px)}
.btn--big{font-size:17px;padding:22px 42px}
.btn-inner{display:inline-block;pointer-events:none}

/* ═══════════════ HERO ═══════════════ */
.hero{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:110px var(--pad-x) 90px;
}
.hero-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:clamp(24px,4vh,48px)}
.chip{
  display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);
  border-radius:999px;padding:9px 16px;color:var(--ink-dim);
}
.chip-dot{width:8px;height:8px;border-radius:50%;background:var(--accent-2);animation:pulse 2.2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
.hero-est{color:var(--ink-faint)}

.hero-title{font-size:clamp(44px,7.4vw,128px);text-transform:uppercase;font-weight:600}
.hero-title em{font-weight:400;text-transform:none;color:var(--accent-2)}
.hero-title .line{display:block;overflow:hidden;padding:.05em 0}
.hero-title .line-inner{display:inline-block}
.title-star{color:var(--accent);font-size:.5em;vertical-align:.5em;display:inline-block;transform-origin:center}

.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:34px;margin-top:clamp(28px,5vh,64px)}
.hero-sub{max-width:380px;color:var(--ink-dim);font-size:17px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-strip{
  display:flex;gap:18px;align-items:center;color:var(--ink-faint);
  border-top:1px solid var(--line);margin-top:clamp(26px,5vh,60px);padding-top:18px;
}
.hero-strip i{color:var(--accent);font-style:normal}

.scroll-badge{position:absolute;right:var(--pad-x);top:42%;width:110px;height:110px;opacity:.9}
.scroll-ring{width:100%;height:100%;animation:spin 14s linear infinite}
.scroll-ring text{fill:#8f8f96;font:500 10.5px var(--mono);letter-spacing:.24em}
.scroll-cross{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--ink-dim)}
@keyframes spin{to{transform:rotate(360deg)}}

.plus-deco{position:absolute;color:#2e2e36;font-size:26px;user-select:none}
.plus-deco--1{top:24%;right:12%}
.plus-deco--2{top:58%;right:30%;font-size:16px;color:var(--accent);opacity:.7}
.plus-deco--3{top:80%;right:6%;font-size:40px;color:#24242c}

/* ═══════════════ MARQUEE ═══════════════ */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0}
.marquee-track{display:flex;width:max-content;will-change:transform}
.marquee-item{display:flex;align-items:center;gap:34px;padding-right:34px;white-space:nowrap}
.marquee-item span{font-size:clamp(28px,4vw,52px);font-weight:600;letter-spacing:-.02em;text-transform:uppercase}
.marquee-item b{color:var(--accent);font-weight:400;font-size:.8em}
.marquee .logos span{font-family:var(--mono);font-size:clamp(16px,2vw,24px);letter-spacing:.12em;color:var(--ink-dim)}
.marquee .logos b{color:#3c3c44}

/* ═══════════════ ABOUT ═══════════════ */
.about{padding:clamp(90px,14vw,180px) var(--pad-x) clamp(60px,9vw,130px)}
.about-title{font-size:clamp(40px,6.4vw,96px);margin-bottom:clamp(40px,6vw,80px)}
.about-title .line{display:block;overflow:hidden;padding:.06em 0}
.about-title .line-inner{display:inline-block}
.about-title em{color:var(--ink)}
.about-copy{
  font-size:clamp(22px,2.6vw,34px);line-height:1.34;font-weight:500;
  letter-spacing:-.015em;max-width:1180px;
}
.about-copy .word{opacity:.14;will-change:opacity}
.about-copy em{color:var(--accent-2)}
.about-tags{display:flex;gap:26px;flex-wrap:wrap;margin-top:44px;color:var(--ink-faint)}

/* per-card generated art (placeholder visuals) */
.art-1{background:radial-gradient(circle at 82% 18%, #c4763a40 0 30%, transparent 60%),linear-gradient(150deg,#16273b,#0a111c)}
.art-2{background:radial-gradient(circle at 20% 80%, #e9a86f33 0 36%, transparent 64%),linear-gradient(200deg,#1d2a3c,#0b1018)}
.art-3{background:radial-gradient(circle at 70% 70%, #c4763a38 0 30%, transparent 58%),linear-gradient(160deg,#2a2018,#0f0b08)}
.art-4{background:radial-gradient(circle at 30% 25%, #f4efe61f 0 34%, transparent 62%),linear-gradient(190deg,#33465c,#0e1b2c)}
.art-5{background:radial-gradient(circle at 60% 40%, #b0672f33 0 28%, transparent 56%),linear-gradient(140deg,#16273b,#0b0f16)}
.art-6{background:radial-gradient(circle at 75% 75%, #e9a86f2a 0 30%, transparent 60%),linear-gradient(210deg,#1a2230,#0b0b0f)}
.wcard-art::after{
  content:"";position:absolute;inset:auto 0 0 0;height:38%;
  background:linear-gradient(0deg, rgba(0,0,0,.35), transparent);
}

/* ═══════════════ CLIENTS ═══════════════ */
.clients{padding:clamp(60px,8vw,110px) 0}
.clients-kicker{text-align:center;color:var(--ink-faint);margin-bottom:34px}

/* ═══════════════ CTA ═══════════════ */
.cta{padding:clamp(100px,14vw,190px) var(--pad-x) clamp(80px,11vw,150px)}
.cta-kicker{margin-bottom:clamp(30px,4vw,56px)}
.cta-title{font-size:clamp(44px,7.4vw,120px);text-transform:uppercase}
.cta-title em{text-transform:none;color:var(--accent-2)}
.cta-title .line{display:block;overflow:hidden;padding:.05em 0}
.cta-title .line-inner{display:inline-block}
.cta-bar{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:clamp(36px,5vw,64px)}
.cta-phone{color:var(--ink-dim);font-size:14px}

/* ═══════════════ FOOTER ═══════════════ */
.footer{border-top:1px solid var(--line);padding:clamp(56px,8vw,100px) var(--pad-x) 26px;overflow:hidden}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;max-width:1200px}
.footer-col{display:flex;flex-direction:column;gap:10px;font-size:15px;color:var(--ink-dim)}
.footer-col a{width:max-content}
.footer-col a:hover{color:var(--ink)}
.footer-head{color:var(--ink-faint);margin-bottom:8px}
.footer-col--clock p{font-size:14px}
.footer-clock{font-size:20px!important;color:var(--ink)}
.dim{color:var(--ink-faint)}
.top-btn{
  margin-top:14px;width:max-content;border:1px solid var(--line);border-radius:999px;
  padding:12px 22px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  position:relative;overflow:hidden;isolation:isolate;transition:color .35s;
}
.top-btn::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:translateY(102%);transition:transform .4s var(--ease-out)}
.top-btn:hover{color:#0b0b0f}
.top-btn:hover::after{transform:translateY(0)}

.footer-word{
  display:flex;justify-content:space-between;align-items:baseline;
  font-weight:700;letter-spacing:-.05em;line-height:.8;
  margin:clamp(50px,7vw,90px) 0 clamp(26px,4vw,48px);
  user-select:none;
}
.footer-word span{font-size:clamp(56px,13vw,230px);display:inline-block;transition:color .3s}
.footer-word span:hover{color:var(--accent)}
.footer-word .reg{font-size:clamp(20px,3vw,48px);align-self:flex-start;color:var(--ink-dim)}

.footer-bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--ink-faint);border-top:1px solid var(--line);padding-top:22px}
.footer-bar a:hover{color:var(--ink)}

/* ═══════════════ LIGHT-SECTION OVERRIDES (cursor blend) ═══════════════ */
@media (max-width:1024px){
  .scroll-badge{display:none}
  .hero-foot{flex-direction:column;align-items:flex-start}
}
@media (max-width:768px){
  body{font-size:16px}
  .header-clock{display:none}
  .hero{padding-top:130px}
  .hero-strip{gap:10px;flex-wrap:wrap}
  .hero-title{font-size:clamp(44px,12.5vw,72px)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-word span{font-size:clamp(48px,16vw,96px)}
  .menu-btn{background:rgba(255,255,255,.06)}
}

/* respect reduced motion */
@media (prefers-reduced-motion:reduce){
  body::after,.scroll-ring,.pl-plus{animation:none!important}
}

/* ═══════════════════════════════════════════════════════════════
   MOTION UPGRADE — reels, nav roll, hero lines, hold-burst,
   values flip, velocity marquee, contact form
   ═══════════════════════════════════════════════════════════════ */

/* slot-machine reels (preloader counter + key facts) */
.reels{display:inline-flex;align-items:flex-start;overflow:hidden;line-height:1}
.reel{display:inline-block;height:1em;overflow:hidden;position:relative}
.reel-strip{display:flex;flex-direction:column;will-change:transform}
.reel-strip span{display:block;height:1em;line-height:1em;text-align:center}
.reel-static{display:inline-block;height:1em;line-height:1em}
.pl-counter.reels{display:flex}
.pl-plus--f4{top:18%;left:62%}

/* inline header nav + talk pill */
.site-header{gap:24px}
.header-nav{display:flex;gap:clamp(18px,2.4vw,34px);margin-left:auto;margin-right:clamp(10px,2vw,30px)}
.nav-link{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.talk-pill{
  display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,.45);border-radius:999px;
  padding:9px 16px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#fff;
  transition:border-color .3s;
}
.talk-pill:hover{border-color:#fff}
@media (max-width:1024px){.header-nav,.talk-pill{display:none}}

/* char-roll hover: two stacked layers, chars blur in/out */
[data-hover-lift]{position:relative;display:inline-flex;vertical-align:top}
[data-hover-lift] .layer{display:inline-flex;white-space:pre}
[data-hover-lift] .layer--clone{position:absolute;left:0;top:0;pointer-events:none}
[data-hover-lift] .char{will-change:transform,opacity,filter}

/* hero interactive line field */
.hero{overflow:hidden;isolation:isolate}
.hero-lines{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.2s}
.has-anim .hero-lines{opacity:1}
.hero-play{display:flex;align-items:center;gap:18px}
.hero-hint{color:var(--ink-faint)}
.hold-btn{
  position:relative;display:inline-flex;align-items:center;gap:12px;color:var(--ink);
  padding:4px 16px 4px 4px;border:1px solid var(--line);border-radius:999px;
  user-select:none;-webkit-user-select:none;touch-action:none;transition:border-color .3s,transform .3s var(--ease-out);
}
.hold-btn:hover{border-color:var(--ink-faint)}
.hold-btn.is-holding{transform:scale(.96);border-color:var(--accent)}
.hold-ring{width:36px;height:36px;transform:rotate(-90deg)}
.hold-ring circle{fill:none;stroke:var(--line);stroke-width:2}
.hold-ring .hold-fill{stroke:var(--accent);stroke-dasharray:1;stroke-dashoffset:1}
.hold-label{font-size:11px}
.burst-bit{position:absolute;z-index:3;pointer-events:none;color:var(--accent);font-size:18px;line-height:1;will-change:transform,opacity}
@media (max-width:768px){.hero-hint{display:none}.hero-head{gap:12px;flex-wrap:wrap}}

/* contact form */
.cform{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3vw,44px) clamp(20px,3vw,48px);margin-top:clamp(44px,6vw,80px);max-width:1100px}
.cfield{position:relative;padding-top:18px}
.cfield--wide{grid-column:1/-1}
.cfield input,.cfield select,.cfield textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;
  color:var(--ink);font:500 clamp(18px,1.6vw,22px)/1.4 var(--sans);padding:10px 0 12px;outline:none;
  -webkit-appearance:none;appearance:none;resize:vertical;
}
.cfield select{cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--ink-dim) 50%),linear-gradient(-45deg,transparent 50%,var(--ink-dim) 50%);
  background-position:calc(100% - 12px) 55%,calc(100% - 6px) 55%;background-size:6px 6px;background-repeat:no-repeat}
.cfield select option{background:#111116;color:var(--ink)}
.cfield label{
  position:absolute;left:0;top:30px;color:var(--ink-dim);pointer-events:none;
  font-size:clamp(17px,1.5vw,20px);transform-origin:left top;
  transition:transform .45s var(--ease-out),color .3s;
}
.cfield input:focus + label,.cfield input:not(:placeholder-shown) + label,
.cfield textarea:focus + label,.cfield textarea:not(:placeholder-shown) + label,
.cfield select:focus + label,.cfield select:valid + label{transform:translateY(-26px) scale(.68);color:var(--ink-faint)}
.cline{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-out)}
.cfield:focus-within .cline{transform:scaleX(1)}
.cfield.is-error .cline{background:#ff3b3b;transform:scaleX(1)}
.cfield.is-error label{color:#ff6b6b}
.ccount{position:absolute;right:0;bottom:-24px;color:var(--ink-faint);transition:color .3s}
.ccount.is-ok{color:var(--accent-2)}
.cform-foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;margin-top:10px}
.cform-alt{display:flex;gap:18px;flex-wrap:wrap;align-items:center;color:var(--ink-faint)}
.cform-alt a{color:var(--ink-dim)}
.cform-status{grid-column:1/-1;min-height:1.4em;color:var(--accent-2)}
@media (max-width:768px){.cform{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){.hero-lines{transition:none}}

/* ═══════════════════════════════════════════════════════════════
   SECTION REBUILD — values band, blinds wipes, 3D mark, fanned
   fact cards, 3D ring carousel, services monolith orbit
   ═══════════════════════════════════════════════════════════════ */
:root{
  --light-a:#d2d2d0;   /* top of facts gradient (blinds out of values) */
  --light-b:#c9c9c7;   /* bottom of work section (blinds into services) */
}

/* blinds — horizontal bars that wipe one section into the next */
.blinds{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;pointer-events:none}
.blinds i{flex:1;display:block;transform:scaleY(0);will-change:transform;margin-bottom:-1px}
.blinds--light i{background:var(--light-a);transform-origin:50% 100%}
.blinds--paper i{background:var(--light-b);transform-origin:50% 0%}

/* ── VALUES BAND ── */
.values{background:var(--bg)}
.values-pin{position:relative;height:100svh;min-height:620px;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.values-kicker{position:absolute;top:clamp(100px,16vh,170px);left:clamp(24px,10vw,200px);font-weight:600;font-size:clamp(15px,1.3vw,19px);line-height:1.15;text-transform:uppercase;letter-spacing:-.01em;z-index:3}
.values-kicker .line{display:block;overflow:hidden}
.values-kicker .line-inner{display:inline-block}
.values-side{position:absolute;top:clamp(100px,16vh,170px);right:var(--pad-x);color:var(--ink-faint);z-index:3}
.values-sub{position:absolute;bottom:clamp(40px,9vh,90px);right:var(--pad-x);max-width:380px;color:var(--ink-dim);font-size:17px;z-index:3}
.values-sub em{color:var(--accent-2)}

.values-band{position:relative;z-index:2;overflow:hidden;padding:.04em 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(5,5,7,.3)}
.values-track{display:flex;align-items:center;width:max-content;will-change:transform}
.values-track span{font-size:clamp(80px,13vw,230px);font-weight:600;letter-spacing:-.045em;line-height:.9;text-transform:uppercase;padding:0 .12em}
.values-track i{position:relative;width:clamp(30px,3.4vw,60px);height:clamp(30px,3.4vw,60px);margin:0 clamp(24px,4vw,70px);flex-shrink:0}
.values-track i::before,.values-track i::after{content:"";position:absolute;background:var(--ink)}
.values-track i::before{left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%)}
.values-track i::after{top:50%;left:0;right:0;height:2px;transform:translateY(-50%)}

/* 3D extruded "+" mark (layers stacked on Z by JS) */
.mark3d{position:absolute;inset:0;margin:auto;width:clamp(260px,32vw,520px);height:clamp(260px,32vw,520px);perspective:1400px;z-index:1;pointer-events:none}
.mark3d-rot{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(18deg) rotateY(-28deg)}
.m3-layer{position:absolute;inset:0;transform-style:preserve-3d}
.m3-layer::before,.m3-layer::after{content:"";position:absolute;border-radius:6px;background:var(--m3c)}
.m3-layer::before{left:37%;right:37%;top:0;bottom:0}
.m3-layer::after{top:37%;bottom:37%;left:0;right:0}
.m3-layer--front::before,.m3-layer--front::after{
  background:linear-gradient(135deg,#3a3f55 0%,#191b26 45%,#0d0e14 100%);
  box-shadow:inset 0 0 0 1px rgba(160,170,255,.16),inset 8px 8px 30px rgba(255,255,255,.06);
}

/* ── KEY FACTS ── */
.facts{background:linear-gradient(180deg,var(--light-a) 0%,#ffffff 100%);color:#101014;padding:clamp(110px,16vh,190px) var(--pad-x) clamp(90px,12vw,170px);overflow:hidden}
.facts-head{text-align:center;margin-bottom:clamp(60px,9vw,130px)}
.facts-title{font-size:clamp(64px,9vw,150px);font-weight:500;letter-spacing:-.055em;line-height:.95;color:#2a2a2e}
.facts-sub{margin-top:22px;font-size:clamp(17px,1.4vw,21px);color:#2e2e33;line-height:1.3}
.facts-stage{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,30px);max-width:1500px;margin:0 auto;perspective:1600px}
.fcard{position:relative;min-height:clamp(420px,46vw,620px);border-radius:10px;padding:clamp(24px,2.6vw,44px);display:flex;flex-direction:column;overflow:hidden;will-change:transform}
.fcard-label{font-size:clamp(15px,1.2vw,19px);font-weight:600;text-transform:uppercase;letter-spacing:-.005em}
.fcard--left{background:linear-gradient(170deg,#4a4a50 0%,#1a1a1e 70%);color:#f2f2ee;transform-origin:100% 50%}
.fcard-glyph{font-size:clamp(80px,8vw,140px);line-height:1;color:var(--accent);margin:auto 0 20px;text-shadow:0 30px 60px rgba(0,0,0,.45)}
.fcard-list{list-style:none;display:flex;flex-direction:column;gap:10px;color:rgba(242,242,238,.75)}
.fcard-list li{display:flex;justify-content:space-between;gap:12px;border-top:1px solid rgba(242,242,238,.14);padding-top:10px}
.fcard-list b{color:#fff;font-weight:500}
.fcard--mid{background:#e9e9e7;align-items:center;text-align:center;color:#55555b}
.fcard-circle{margin:auto 0;width:clamp(220px,22vw,340px);aspect-ratio:1;border-radius:50%;background:#f7f7f5;display:flex;align-items:center;justify-content:center;box-shadow:0 30px 60px rgba(0,0,0,.06)}
.fcard-circle .fact-num{font-size:clamp(66px,7vw,118px);font-weight:500;letter-spacing:-.06em;color:#2a2a2e}
.fcard-foot{color:#88888e}
.fcard--right{background:linear-gradient(200deg,#9a9a9e 0%,#5d5d63 100%);color:#fff;transform-origin:0% 50%;justify-content:space-between}
.fcard-stat{display:flex;flex-direction:column;gap:6px;border-top:1px solid rgba(255,255,255,.25);padding-top:14px}
.fcard-stat .fact-num{font-size:clamp(46px,4.6vw,78px);font-weight:500;letter-spacing:-.05em;line-height:1}
.fcard-stat .mono{color:rgba(255,255,255,.75)}
.fact-num.reels{display:inline-flex}

/* ── WORK — 3D ring ── */
.work{background:linear-gradient(180deg,#ffffff 0%,#e4e4e2 30%,var(--light-b) 100%);color:#151518}
.work-pin{position:relative;height:100svh;min-height:640px;overflow:hidden}
.work-bigword{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;pointer-events:none;z-index:0}
.bw{font-size:clamp(90px,15vw,270px);font-weight:500;letter-spacing:-.06em;line-height:.85;text-transform:uppercase;color:#3a3a3e;white-space:nowrap;will-change:transform}
.bw--1{padding-left:38%}
.bw--2{padding-left:20%}
.work-orbits{position:absolute;left:4%;top:14%;width:92%;height:72%;z-index:1;transform:rotate(9deg);overflow:visible;pointer-events:none}
.work-orbits ellipse{fill:none;stroke:rgba(20,20,24,.32);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.ring-stage{position:absolute;inset:0;z-index:2;perspective:2000px;perspective-origin:50% 45%;display:flex;align-items:center;justify-content:center}
.ring{position:relative;width:var(--cw,440px);height:var(--ch,300px);transform-style:preserve-3d;transform:rotateZ(8deg) rotateX(-4deg)}
.rcard{position:absolute;inset:0;transform-style:preserve-3d;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.rcard-art{position:absolute;inset:0;border-radius:6px;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.28);display:flex;align-items:flex-end;padding:22px;color:#fff;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.rcard-art::after{content:"";position:absolute;inset:auto 0 0 0;height:50%;background:linear-gradient(0deg,rgba(0,0,0,.45),transparent)}
.rcard-ui{position:relative;z-index:2}
.rcard-ui h3{font-size:clamp(24px,2.2vw,34px);margin-bottom:6px}
.rcard-ui .mono{color:rgba(255,255,255,.72)}
.rcard .wcard-idx{position:absolute;top:18px;right:20px;z-index:2;color:rgba(255,255,255,.75);font-size:40px;font-weight:500;letter-spacing:-.04em}
.work-note{position:absolute;left:var(--pad-x);bottom:clamp(40px,8vh,90px);max-width:360px;font-size:clamp(17px,1.4vw,21px);line-height:1.25;color:#2a2a2e;z-index:3}
.work-link{position:absolute;right:var(--pad-x);bottom:clamp(40px,8vh,90px);display:flex;gap:40px;align-items:center;color:#2a2a2e;border-bottom:1px solid #2a2a2e;padding-bottom:8px;font-size:14px;z-index:3}
.work-link b{font-weight:400}

/* ── SERVICES — monolith + orbit ── */
.services{background:radial-gradient(ellipse at 50% 55%,#1a1b22 0%,#0a0a0d 60%,#050507 100%);color:var(--ink)}
.services-pin{position:relative;height:100svh;min-height:680px;overflow:hidden}
.svc-label{position:absolute;top:clamp(96px,14vh,150px);left:50%;transform:translateX(-50%);font-size:14px;letter-spacing:.06em;color:#fff;z-index:3}
.monolith{position:absolute;left:50%;top:52%;width:var(--mw,300px);height:var(--mh,340px);margin:calc(var(--mh,340px) / -2) 0 0 calc(var(--mw,300px) / -2);perspective:1600px;z-index:1}
.mono-cube{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(-8deg) rotateY(-18deg)}
.face{position:absolute;backface-visibility:hidden;
  background:
    radial-gradient(circle at 30% 20%,rgba(255,255,255,.10),transparent 45%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .52 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(160deg,#4a4a4f,#232327 55%,#111114);
  box-shadow:inset 0 0 40px rgba(0,0,0,.6)}
.f-front,.f-back{inset:0}
.f-front{transform:translateZ(36px);display:flex;align-items:center;justify-content:center}
.f-back{transform:rotateY(180deg) translateZ(36px)}
.f-left,.f-right{top:0;bottom:0;width:72px;left:calc(50% - 36px)}
.f-left{transform:rotateY(-90deg) translateZ(calc(var(--mw,300px) / 2))}
.f-right{transform:rotateY(90deg) translateZ(calc(var(--mw,300px) / 2))}
.f-top,.f-bottom{left:0;right:0;height:72px;top:calc(50% - 36px)}
.f-top{transform:rotateX(90deg) translateZ(calc(var(--mh,340px) / 2))}
.f-bottom{transform:rotateX(-90deg) translateZ(calc(var(--mh,340px) / 2))}
.mono-mark{font-family:var(--serif);font-style:italic;font-size:calc(var(--mh,340px) * .62);line-height:1;color:#1a1a1d;
  text-shadow:-2px -2px 1px rgba(0,0,0,.75),2px 2px 1px rgba(255,255,255,.14),0 0 30px rgba(0,0,0,.4)}
.mono-mark i{font-style:normal;font-size:.5em;vertical-align:super;color:var(--accent);text-shadow:none;opacity:.85}

.svc{position:absolute;z-index:2;width:clamp(230px,23vw,360px)}
.svc h3{font-size:clamp(22px,2.1vw,34px);font-weight:600;letter-spacing:-.03em;line-height:1.02;margin-bottom:clamp(16px,2vw,28px);max-width:9em}
.svc p{color:rgba(244,239,230,.8);font-size:clamp(14px,1.05vw,16px);line-height:1.35;max-width:22em}
.svc-deco{position:absolute;width:clamp(80px,7.5vw,124px);height:clamp(80px,7.5vw,124px);overflow:visible}
.svc-deco path,.svc-deco circle{fill:none;stroke:rgba(236,236,232,.85);stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:1}
.svc--1,.svc--2,.svc--3{left:4%}
.svc--4,.svc--5,.svc--6{right:4%;text-align:right}
.svc--4 p,.svc--5 p,.svc--6 p,.svc--4 h3,.svc--5 h3,.svc--6 h3{margin-left:auto}
.svc--1,.svc--4{top:20%}
.svc--2,.svc--5{top:46%}
.svc--3,.svc--6{top:72%}
.svc--1 .svc-deco,.svc--2 .svc-deco,.svc--3 .svc-deco{left:calc(100% + 26px);top:0}
.svc--4 .svc-deco,.svc--5 .svc-deco,.svc--6 .svc-deco{right:calc(100% + 26px);top:0}
.svc-deco rect{fill:none;stroke:rgba(244,239,230,.85);stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:1}
@media (max-width:1200px){.svc-deco{display:none}}
.svc-foot{position:absolute;left:50%;bottom:clamp(20px,4vh,44px);transform:translateX(-50%);display:flex;gap:clamp(30px,8vw,180px);align-items:center;z-index:3;white-space:nowrap}
.svc-foot .mono{color:#fff;font-size:12px}
.svc-foot a{border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:6px}

/* ── responsive fallbacks: stack instead of 3D orbit ── */
@media (max-width:900px){
  .values-track span{font-size:clamp(70px,20vw,140px)}
  .values-kicker{left:var(--pad-x)}
  .values-side{display:none}
  .values-sub{left:var(--pad-x);right:var(--pad-x)}
  .facts-stage{grid-template-columns:1fr;perspective:none}
  .fcard{min-height:380px}
  .bw--1{padding-left:10%}.bw--2{padding-left:4%}
  .work-note{right:var(--pad-x);bottom:110px;font-size:16px}
  .work-link{bottom:50px}
  .services-pin{height:auto;min-height:0;padding:120px var(--pad-x) 80px;display:flex;flex-direction:column;gap:56px}
  .svc-label,.monolith,.svc,.svc-foot{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;margin:0}
  .svc--4,.svc--5,.svc--6{text-align:left}
  .monolith{margin:0 auto}
  .svc{width:100%}
  .svc-deco{display:none}
  .svc-foot{flex-direction:column;gap:18px;white-space:normal;align-items:flex-start}
  .services .blinds{display:none}
}

/* ═══════════════ SAMAGRAM BRAND ═══════════════ */
.brand-logo{height:clamp(30px,2.8vw,40px);width:auto;display:block}
.pl-mono--img{width:64px;height:64px;transform:none}
.mono-logo{width:58%;height:auto;opacity:.92;filter:drop-shadow(-2px -2px 1px rgba(0,0,0,.7)) drop-shadow(2px 2px 1px rgba(255,255,255,.12)) saturate(.9)}
.rcard-ui{max-width:92%}
.rcard-tag{display:block;color:var(--accent-2)!important;margin-bottom:10px}
.rcard-ui p{font-size:clamp(13px,1vw,15px);line-height:1.35;color:rgba(255,255,255,.82);margin-bottom:10px;max-width:30em}
.rcard-ui h3{font-size:clamp(22px,1.9vw,30px)}
.fcard-list{gap:8px}
.fcard-list li{font-size:11px}
.fcard-list b{color:var(--accent-2)}
.fcard-foot{max-width:22em;line-height:1.5}
.cta-sub{max-width:520px;color:var(--ink-dim);margin-top:clamp(20px,3vw,34px);font-size:clamp(16px,1.3vw,19px)}
.est-copy{text-transform:none}
@media (max-width:768px){.brand-logo{height:28px}}

/* brand sits outside the blended header so the logo keeps its true colours;
   JS flips body.on-light while a light section is under it */
.brand-fixed{position:fixed;top:22px;left:var(--pad-x);z-index:125;display:grid}
.brand-fixed .brand-logo{grid-area:1/1;transition:opacity .4s}
.brand-logo--on-light{opacity:0}
body.on-light .brand-logo--on-dark{opacity:0}
body.on-light .brand-logo--on-light{opacity:1}
body.menu-open .brand-fixed{z-index:175}
.brand-spacer{width:clamp(115px,11vw,155px);height:1px}