/* =====================================================================
   polish.css  -  loaded LAST on every page
   One spacing system for the whole site:
   - sections grow with their content (no more fixed 1080px frames,
     which left large empty gaps above and below short sections)
   - every section uses the same top/bottom rhythm and side gutter
   - text/graphics that were blown up to "fill the frame" are back
     on the normal type scale
   - brand wordmark in the header, About story photo, Services photos
   ===================================================================== */

:root{
  --sec-y:clamp(72px,7.5vw,112px);   /* top + bottom space of every section */
  --sec-x:clamp(20px,4vw,56px);      /* left + right gutter               */
  --head-gap:clamp(36px,3.6vw,52px); /* title block -> content            */
  --wrap:1320px;                     /* max content width                 */
}
html{scroll-snap-type:none!important}

/* ---------- 1) sections: height follows content, same rhythm everywhere ---------- */
.nums,.proj,.sol,.team,.vc,.wy,.fq,.sx,.sx.first,.sx.gal{
  height:auto!important;min-height:0!important;max-height:none!important;scroll-snap-align:none!important;
  padding:var(--sec-y) var(--sec-x)!important;
}
.sx.first{padding-top:calc(var(--sec-y) + 96px)!important}
.mood{
  height:auto!important;max-height:none!important;min-height:clamp(520px,64vh,680px)!important;
  padding:var(--sec-y) var(--sec-x)!important;gap:40px!important;scroll-snap-align:none!important;
}
.hero{scroll-snap-align:none!important}
.ft{padding-left:var(--sec-x)!important;padding-right:var(--sec-x)!important}

/* same content width on every page */
.sx-in,.nums-in,.proj-in,.sol-in,.team-in,.vc-in,.wy-in,.fq-in,.ft-in{max-width:var(--wrap)!important;margin-left:auto!important;margin-right:auto!important;width:100%}

/* title block -> content: one value */
.sx-head{margin-bottom:var(--head-gap)!important;gap:clamp(28px,5vw,72px)}
.wy-head{margin-bottom:var(--head-gap)!important}
.team-head{margin-bottom:var(--head-gap)}
.nums-head{margin-bottom:0}
.nums-grid{margin-top:var(--head-gap)!important}
.nums-cta{margin-top:var(--head-gap)!important}

/* ---------- 2) undo the "fill the 1080 frame" scale-ups ---------- */
@media (min-width:1101px){
  .step .dot{width:96px!important;height:96px!important}
  .step .dot svg{width:34px;height:34px}
  .steps::before{top:48px!important}
  .step .nn{margin-top:18px!important;font-size:4.4rem!important}
  .step h3{font-size:var(--h5)!important}
  .step p{font-size:var(--body)!important;line-height:1.75}
  .panel{padding:44px!important}
  .panel-num b{font-size:clamp(72px,6.4vw,104px)!important}
  .panel-row{margin-top:40px!important}
  .chips{margin-top:32px!important}
  .chip{min-height:40px!important;padding:0 18px!important;font-size:var(--cap)!important}
  .checks{margin:30px 0 36px!important;gap:16px 28px!important}
  .mv-c{min-height:0!important;padding:40px 36px!important}
  .mv-c .big{font-size:6rem!important}
  .mv-c h3{font-size:var(--h4)!important}
  .mv-c p{font-size:var(--body)!important;line-height:1.8!important}
  .vals div{padding:28px 32px!important}
  .crew .ph{aspect-ratio:4/5!important}
  .wy-grid{grid-template-rows:auto!important}
  .wy-c{min-height:240px}
  .wy-cta{margin-top:28px!important}
  .fq{display:block!important}
}
.quote-band{margin-top:56px!important;padding-top:40px!important}
.crew-note{margin-top:32px!important}
.sx-cta{margin-top:var(--head-gap)!important}
.bignums{margin-top:var(--head-gap)}
.marq{margin-top:32px}
/* hero: a little more air between the intro and the stats bar */
@media (min-width:1101px){.hero>div[style*="height:56px"]{height:40px!important}}

/* ---------- 3) header: brand wordmark on the left ---------- */
header{justify-content:space-between!important;align-items:center!important}
.brand{display:inline-flex;align-items:center;gap:14px;color:#fff;pointer-events:auto;line-height:1;flex:none}
.brand-mark{position:relative;width:30px;height:30px;border:1.5px solid #FF9900;border-radius:8px;transform:rotate(45deg);flex:none;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.brand-mark::after{content:"";position:absolute;inset:7px;border-radius:2px;background:#FF9900}
.brand:hover .brand-mark{transform:rotate(135deg)}
.brand-txt b{display:block;font-size:1rem;font-weight:700;letter-spacing:4px}
.brand-txt small{display:block;margin-top:6px;font-size:.56rem;font-weight:500;letter-spacing:2.4px;opacity:.7}
.top-nav .brand{color:#0b0b0b}
.brand:focus-visible{outline:2px solid #FF9900;outline-offset:6px;border-radius:6px}
@media (max-width:720px){.brand{gap:11px}.brand-mark{width:24px;height:24px}.brand-mark::after{inset:5px}.brand-txt b{font-size:.86rem;letter-spacing:3px}.brand-txt small{font-size:.5rem;letter-spacing:1.8px}}

/* ---------- 4) About: story text + photo ---------- */
.story-split{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(48px,6vw,96px);align-items:center}
.story-copy .story-p{max-width:60ch}
.story-ph{position:relative;margin:0;aspect-ratio:5/6;border-radius:30px;overflow:hidden;background:#dedad6;box-shadow:0 40px 60px -36px rgba(0,0,0,.45)}
.story-ph::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);z-index:1;pointer-events:none}
.story-ph img{display:block;width:100%;height:100%;object-fit:cover}
.story-ph figcaption{position:absolute;left:22px;bottom:22px;z-index:2;display:flex;align-items:center;gap:14px;padding:14px 22px;border-radius:18px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.story-ph figcaption b{font-size:var(--h3);font-weight:500;line-height:1;color:#FF9900}
.story-ph figcaption span{font-size:var(--cap);font-weight:500;line-height:1.4;color:#3a3836}
.ceo2{gap:clamp(48px,7vw,96px)!important;max-width:var(--wrap)!important}
@media (max-width:900px){.story-split{grid-template-columns:1fr}.story-ph{max-width:480px;aspect-ratio:4/3}}

/* ---------- 5) Services: photo on top of each card ---------- */
.svc{min-height:0!important}
.svc-ph{margin:-28px -30px 8px;aspect-ratio:16/10;overflow:hidden;background:#e4e1de;border-bottom:1px solid rgba(0,0,0,.08)}
.svc-ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,.84,.3,1)}
.svc:hover .svc-ph img{transform:scale(1.05)}

/* ---------- 6) small text fixes ---------- */
.ft-bar p{letter-spacing:.2px}
@media (max-width:640px){
  .sx-head .sx-lead{padding-left:16px}
  .sc{min-height:0!important;padding-bottom:24px!important}
  .sc p{margin-bottom:28px}
  .mood{min-height:520px!important}
}

/* =====================================================================
   v8 changes
   ===================================================================== */

/* 2) hero stats: "2014 Year of establishment" moved a little right */
@media (min-width:721px){.hero .stat:first-child{padding-left:32px!important}}

/* 3) team photos (home) a little smaller */
@media (min-width:1101px){.tm-row{max-width:1040px;margin-left:auto;margin-right:auto;gap:22px!important}}
@media (min-width:641px) and (max-width:1100px){.tm-row{max-width:720px;margin-left:auto;margin-right:auto}}

/* 4) "It's so Easy to Change the Mood" banner: 1080px tall on every page (desktop) */
@media (min-width:1101px){
  .mood{height:1080px!important;min-height:1080px!important;max-height:1080px!important;justify-content:space-between!important}
}

/* 5) About: story photo card smaller */
.story-split{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)!important}
.story-ph{width:100%;max-width:380px;justify-self:end}
.story-ph figcaption{left:16px;bottom:16px;padding:10px 16px;gap:10px}
.story-ph figcaption b{font-size:var(--h4)}
@media (max-width:900px){.story-ph{justify-self:start;max-width:340px;aspect-ratio:5/6}}

/* 6) CEO photo: round and smaller */
.ceo2{grid-template-columns:minmax(220px,300px) minmax(0,1fr)!important;align-items:center}
.ceo2-ph{width:min(300px,70vw);justify-self:center;display:flex;flex-direction:column;align-items:center}
.ceo2-ph::before{inset:-12px!important;border-radius:50%!important;border:1.5px dashed rgba(255,153,0,.75)!important;animation:ceoSpin 30s linear infinite}
.ceo2-frame{width:100%;aspect-ratio:1/1!important;border-radius:50%!important;box-shadow:0 0 0 8px #f0eeee,0 30px 50px -28px rgba(0,0,0,.5)!important}
.ceo2-frame svg{padding:22% 20% 0!important}
.ceo2-ph figcaption{position:relative!important;left:auto!important;bottom:auto!important;margin-top:-26px;align-items:center;text-align:center;box-shadow:0 14px 30px -18px rgba(0,0,0,.4)}
@keyframes ceoSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ceo2-ph::before{animation:none}}
@media (max-width:900px){.ceo2-ph{margin:0 auto!important}}

/* 7) Portfolio gallery cards: entrance + hover animation */
.gi.rx{opacity:0;transform:translateY(46px) scale(.92);filter:blur(6px);
  transition:opacity .8s calc(var(--i,0)*.11s) cubic-bezier(.2,.8,.2,1),transform .9s calc(var(--i,0)*.11s) cubic-bezier(.2,.8,.2,1),filter .8s calc(var(--i,0)*.11s)}
.gi.rx.in{opacity:1;transform:none;filter:none}
.gi.rx.done{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s,border-color .4s;transition-delay:0s}
.gi{box-shadow:0 18px 34px -26px rgba(0,0,0,.45)}
.gi.done:hover,.gi.done:focus-visible{transform:translateY(-10px) rotate(-.6deg);border-color:#FF9900;box-shadow:0 32px 50px -26px rgba(255,153,0,.55)}
.gi.done:nth-child(even):hover{transform:translateY(-10px) rotate(.6deg)}
.gi img{transition:transform 1.4s cubic-bezier(.16,.84,.3,1),filter .6s}
.gi:hover img{transform:scale(1.1);filter:saturate(1.15)}
.gi-shine{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.38) 48%,transparent 66%);transform:translateX(-120%)}
.gi:hover .gi-shine{transform:translateX(120%);transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.gi-view{position:absolute;top:14px;right:14px;z-index:4;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  background:rgba(11,11,11,.7);border:1.5px solid #FF9900;color:#FF9900;opacity:0;transform:scale(.6) rotate(-45deg);transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.gi:hover .gi-view,.gi:focus-visible .gi-view{opacity:1;transform:none}
.gi-cap{transition:opacity .45s .05s,transform .5s .05s cubic-bezier(.2,.8,.2,1)!important}
@media (prefers-reduced-motion:reduce){.gi.rx{opacity:1!important;transform:none!important;filter:none!important}.gi-shine{display:none}}
@media (hover:none){.gi-view{display:none}}

/* =====================================================================
   v9 changes
   ===================================================================== */

/* company logo (header + footer) */
.brand img{display:block;height:54px;width:auto}
.brand:hover .brand-mark{transform:none}
.ft-logo{display:inline-block;margin-bottom:22px}
.ft-logo img{display:block;height:44px;width:auto}
@media (max-width:720px){.brand img{height:36px}}

/* hero stats bar ("2014 Year of establishment"): rounded 30px corners */
.hero .stats{border-radius:30px;overflow:hidden;border:1px solid rgba(255,255,255,.16)!important}
@media (max-width:720px){.hero .stats{border-radius:22px;padding:0 0 0 18px}}

/* CEO: small 60x60 round photo as a signature, message gets the full width */
.ceo2{display:block!important;max-width:900px!important}
.ceo2-body h2{max-width:none}
.ceo2-body .story-p{max-width:68ch}
.ceo-sig{display:flex;align-items:center;gap:16px;margin-top:30px}
.ceo-av{position:relative;flex:none;width:60px;height:60px;border-radius:50%;overflow:hidden;background:#dedad6;
  box-shadow:0 0 0 3px #f0eeee,0 0 0 4.5px #FF9900}
.ceo-av svg{position:absolute;inset:0;width:100%;height:100%;padding:16% 14% 0;fill:#bdb9b5}
.ceo-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.ceo-who{display:flex;flex-direction:column;gap:4px}
.ceo-who b{font-size:1.08rem;font-weight:600;letter-spacing:.2px;color:#0b0b0b}
.ceo-who span{font-size:var(--tiny);font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:#FF9900}

/* v10: hero globe a little transparent, edges fade softly into the background */
.globe-wrap{opacity:.8;transition:opacity .6s}
.globe-wrap canvas{-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 60%,rgba(0,0,0,.6) 80%,transparent 100%);mask-image:radial-gradient(circle at 50% 50%,#000 60%,rgba(0,0,0,.6) 80%,transparent 100%)}