/* ════════════════════════════════════════════════════════
   KAIMAK CREVANTO — Global Stylesheet  v3.0
   Use this file across all pages of the website.
   ════════════════════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
   /* Brand */
   --m: #9E1E1D;
   /* maroon primary        */
   --m-hi: #C22322;
   /* maroon bright         */
   --m-deep: #6B1110;
   /* maroon deep           */
   --o: #E57917;
   /* orange primary        */
   --o-hi: #F08C2A;
   /* orange bright         */
   --o-dim: #8A4A0A;
   /* orange dim            */

   /* Backgrounds (darkest → slightly lighter) */
   --bk: #000000;
   --bk2: #080808;
   --bk3: #0F0F0F;
   --bk4: #161616;
   --bk5: #1E1E1E;

   /* Text — ALL clearly readable on dark bg */
   --tx: #FFFFFF;
   /* primary — pure white       */
   --tx2: #D6D0C8;
   /* secondary — warm light     */
   --tx3: #A89F94;
   /* tertiary — mid warm grey   */
   --tx4: #6E6660;
   /* quaternary — subdued       */
   --tx5: #3A3530;
   /* faint — decorative only    */

   /* Gradients */
   --grad: linear-gradient(120deg, var(--m) 0%, var(--o) 100%);
   --gtext: linear-gradient(90deg, #C22322 0%, #E57917 100%);
   --gtext-v: linear-gradient(180deg, #C22322 0%, #E57917 100%);

   /* Borders */
   --bd: rgba(158, 30, 29, 0.2);
   --bd2: rgba(229, 121, 23, 0.25);
   --bd-dim: rgba(158, 30, 29, 0.1);

   /* Typography */
   --f: 'Poppins', sans-serif;

   /* Spacing scale */
   --sp-xs: 8px;
   --sp-sm: 16px;
   --sp-md: 32px;
   --sp-lg: 64px;
   --sp-xl: 128px;
}

/* ── RESET ──────────────────────────────────────────────── */
*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

html {
   scroll-behavior: smooth;
   font-size: 16px;
}

body {
   background: var(--bk);
   color: var(--tx);
   font-family: var(--f);
   font-weight: 300;
   overflow-x: hidden;
   cursor: none;
   -webkit-font-smoothing: antialiased;
}

img {
   display: block;
   max-width: 100%;
}

a {
   cursor: none;
}

/* ── CUSTOM CURSOR ──────────────────────────────────────── */
#cur {
   position: fixed;
   z-index: 9999;
   pointer-events: none;
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: var(--o);
   transform: translate(-50%, -50%);
   transition: width .25s, height .25s, background .25s;
   mix-blend-mode: normal;
}

#curR {
   position: fixed;
   z-index: 9998;
   pointer-events: none;
   width: 34px;
   height: 34px;
   border: 1.5px solid rgba(229, 121, 23, .45);
   border-radius: 50%;
   transform: translate(-50%, -50%);
   transition: width .4s cubic-bezier(.23, 1, .32, 1),
      height .4s cubic-bezier(.23, 1, .32, 1),
      opacity .3s;
}

#cur.hover {
   width: 18px;
   height: 18px;
   background: var(--m);
}

#curR.hover {
   width: 60px;
   height: 60px;
   opacity: .3;
}

/* ── NOISE TEXTURE OVERLAY ───────────────────────────────── */
body::after {
   content: '';
   position: fixed;
   inset: 0;
   z-index: 1;
   pointer-events: none;
   opacity: .022;
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── PAGE LOADER ─────────────────────────────────────────── */
#loader {
   position: fixed;
   inset: 0;
   z-index: 9000;
   background: var(--bk);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   gap: 28px;
   transition: opacity .7s .2s, visibility .7s .2s;
}

#loader.done {
   opacity: 0;
   visibility: hidden;
}

.loader-logo {
   height: 34px;
   width: auto;
   opacity: 0;
   animation: fadeIn .6s .1s forwards;
}

.loader-bar-wrap {
   width: 200px;
   height: 1px;
   background: rgba(158, 30, 29, .2);
   overflow: hidden;
}

.loader-bar {
   height: 100%;
   width: 0%;
   background: var(--grad);
   animation: loaderFill 1.4s cubic-bezier(.23, 1, .32, 1) forwards;
}

.loader-pct {
   font-size: 11px;
   letter-spacing: .22em;
   text-transform: uppercase;
   font-weight: 400;
   color: var(--tx4);
}

/* ── NAVIGATION ─────────────────────────────────────────── */
nav {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 200;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 30px 68px;
   border-bottom: 1px solid transparent;
   transition: padding .4s, background .4s, border-color .4s;
}

nav.sc {
   padding: 16px 68px;
   background: rgba(0, 0, 0, .94);
   backdrop-filter: blur(24px) saturate(1.5);
   -webkit-backdrop-filter: blur(24px) saturate(1.5);
   border-color: var(--bd);
}

.nav-logo img {
   height: 36px;
   object-fit: contain;
}

.nav-links {
   display: flex;
   gap: 44px;
   list-style: none;
}

.nav-links a {
   font-size: 11px;
   letter-spacing: .2em;
   text-transform: uppercase;
   font-weight: 400;
   color: var(--tx3);
   text-decoration: none;
   transition: color .3s;
   position: relative;
}

.nav-links a::after {
   content: '';
   position: absolute;
   bottom: -4px;
   left: 0;
   width: 0;
   height: 1px;
   background: var(--o);
   transition: width .35s cubic-bezier(.23, 1, .32, 1);
}

.nav-links a:hover {
   color: var(--tx);
}

.nav-links a:hover::after {
   width: 100%;
}

.nav-btn {
   font-size: 10px;
   letter-spacing: .18em;
   text-transform: uppercase;
   font-weight: 500;
   color: var(--tx);
   text-decoration: none;
   padding: 11px 30px;
   border: 1px solid rgba(229, 121, 23, .4);
   position: relative;
   overflow: hidden;
   transition: color .3s, border-color .35s;
}

.nav-btn::before {
   content: '';
   position: absolute;
   inset: 0;
   background: var(--grad);
   transform: translateX(-100%);
   transition: transform .4s cubic-bezier(.23, 1, .32, 1);
   z-index: -1;
}

.nav-btn:hover {
   border-color: transparent;
}

.nav-btn:hover::before {
   transform: none;
}

/* ── REUSABLE SECTION SHELL ──────────────────────────────── */
.sec {
   padding: 130px 68px;
}

.sec-inner {
   max-width: 1260px;
   margin: 0 auto;
}

.slabel {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-size: 10px;
   letter-spacing: .3em;
   text-transform: uppercase;
   font-weight: 400;
   color: var(--o);
   margin-bottom: 20px;
}

.slabel::before {
   content: '';
   width: 22px;
   height: 1px;
   background: var(--o-dim);
}

/* ── SHARED HEADINGS ─────────────────────────────────────── */
.h-display {
   font-size: clamp(34px, 3.6vw, 58px);
   font-weight: 600;
   line-height: 1.05;
   letter-spacing: -.025em;
}

.h-display em {
   font-style: italic;
   font-weight: 300;
   color: var(--o);
}

.h-xl {
   font-size: clamp(52px, 8vw, 116px);
   font-weight: 600;
   line-height: .94;
   letter-spacing: -.04em;
}

.h-xl em {
   font-style: italic;
   font-weight: 300;
   background: var(--gtext);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

.grad-text {
   background: var(--gtext);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn-grad {
   display: inline-block;
   font-size: 11px;
   letter-spacing: .18em;
   text-transform: uppercase;
   font-weight: 500;
   background: var(--grad);
   color: var(--tx);
   padding: 15px 42px;
   text-decoration: none;
   transition: opacity .3s, transform .3s;
}

.btn-grad:hover {
   opacity: .85;
   transform: translateY(-2px);
}

.btn-ghost {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-size: 11px;
   letter-spacing: .18em;
   text-transform: uppercase;
   font-weight: 400;
   color: var(--tx3);
   text-decoration: none;
   transition: color .3s;
}

.btn-ghost::after {
   content: '↓';
}

.btn-ghost:hover {
   color: var(--o);
}

/* ── MARQUEE ─────────────────────────────────────────────── */
.mq-wrap {
   background: var(--bk3);
   border-top: 1px solid var(--bd);
   border-bottom: 1px solid var(--bd);
   padding: 16px 0;
   overflow: hidden;
}

.mq-track {
   display: flex;
   width: max-content;
   /* fits all items naturally */
   white-space: nowrap;
   animation: marquee 18s linear infinite;
}

@keyframes marquee {
   0% {
      transform: translateX(50%);
   }

   /* start from right edge */
   100% {
      transform: translateX(-50%);
   }

   /* scroll to left edge */
}

.mq-item {
   display: inline-flex;
   align-items: center;
   gap: 28px;
   padding: 0 28px;
   font-size: 10px;
   letter-spacing: .28em;
   text-transform: uppercase;
   font-weight: 400;
   color: var(--tx4);
}

.mq-dot {
   width: 3px;
   height: 3px;
   border-radius: 50%;
   background: var(--m);
}

/* ── SCROLL REVEAL ──────────────────────────────────────── */
.rv {
   opacity: 0;
   transform: translateY(44px);
   transition: opacity .9s cubic-bezier(.23, 1, .32, 1),
      transform .9s cubic-bezier(.23, 1, .32, 1);
}

.rv.on {
   opacity: 1;
   transform: none;
}

.rv-left {
   opacity: 0;
   transform: translateX(-40px);
   transition: opacity .9s cubic-bezier(.23, 1, .32, 1),
      transform .9s cubic-bezier(.23, 1, .32, 1);
}

.rv-left.on {
   opacity: 1;
   transform: none;
}

.rv-right {
   opacity: 0;
   transform: translateX(40px);
   transition: opacity .9s cubic-bezier(.23, 1, .32, 1),
      transform .9s cubic-bezier(.23, 1, .32, 1);
}

.rv-right.on {
   opacity: 1;
   transform: none;
}

.rv-scale {
   opacity: 0;
   transform: scale(.94);
   transition: opacity .9s cubic-bezier(.23, 1, .32, 1),
      transform .9s cubic-bezier(.23, 1, .32, 1);
}

.rv-scale.on {
   opacity: 1;
   transform: none;
}

.d1 {
   transition-delay: .1s;
}

.d2 {
   transition-delay: .2s;
}

.d3 {
   transition-delay: .3s;
}

.d4 {
   transition-delay: .4s;
}

.d5 {
   transition-delay: .5s;
}

/* ── CARD SHARED ─────────────────────────────────────────── */
.card-bordered {
   border: 1px solid var(--bd);
   background: var(--bk2);
   position: relative;
   overflow: hidden;
}

.card-top-bar {
   position: absolute;
   top: 0;
   left: 0;
   height: 2px;
   width: 0;
   background: var(--grad);
   transition: width .5s cubic-bezier(.23, 1, .32, 1);
}

.card-bordered:hover .card-top-bar {
   width: 100%;
}

/* ── FOOTER ──────────────────────────────────────────────── */
footer {
   padding: 52px 68px;
   border-top: 1px solid var(--bd);
   display: flex;
   justify-content: space-between;
   align-items: center;
   background: var(--bk);
}

.f-logo img {
   height: 30px;
   object-fit: contain;
}

.f-links {
   display: flex;
   gap: 36px;
}

.f-links a {
   font-size: 10px;
   letter-spacing: .2em;
   text-transform: uppercase;
   font-weight: 400;
   color: var(--tx4);
   text-decoration: none;
   transition: color .3s;
}

.f-links a:hover {
   color: var(--o);
}

.f-copy {
   font-size: 11px;
   color: var(--tx5);
   font-weight: 300;
}

/* ── KEYFRAME LIBRARY ────────────────────────────────────── */
@keyframes fadeUp {
   from {
      opacity: 0;
      transform: translateY(28px)
   }

   to {
      opacity: 1;
      transform: none
   }
}

@keyframes fadeIn {
   from {
      opacity: 0
   }

   to {
      opacity: 1
   }
}

@keyframes fadeLeft {
   from {
      opacity: 0;
      transform: translateX(24px)
   }

   to {
      opacity: 1;
      transform: none
   }
}

@keyframes marquee {
   to {
      transform: translateX(-50%)
   }
}

@keyframes pulse {

   0%,
   100% {
      opacity: 1;
      transform: scaleY(1)
   }

   50% {
      opacity: .4;
      transform: scaleY(.55)
   }
}

@keyframes spinSlow {
   to {
      transform: rotate(360deg)
   }
}

@keyframes loaderFill {
   0% {
      width: 0%
   }

   100% {
      width: 100%
   }
}

@keyframes drawLine {
   from {
      stroke-dashoffset: 1000
   }

   to {
      stroke-dashoffset: 0
   }
}

@keyframes shimmer {
   0% {
      background-position: -400px 0;
   }

   100% {
      background-position: 400px 0;
   }
}

@keyframes floatY {

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

   50% {
      transform: translateY(-12px);
   }
}

@keyframes scaleIn {
   from {
      opacity: 0;
      transform: scale(.88);
   }

   to {
      opacity: 1;
      transform: none;
   }
}

@keyframes glowPulse {

   0%,
   100% {
      opacity: .5;
   }

   50% {
      opacity: 1;
   }
}

@keyframes borderSpin {
   to {
      --angle: 360deg;
   }
}

/* ── UTILITY ─────────────────────────────────────────────── */
.text-o {
   color: var(--o);
}

.text-m {
   color: var(--m);
}

.text-dim {
   color: var(--tx3);
}

.divider-grad {
   width: 44px;
   height: 2px;
   background: var(--grad);
}

.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
}

/* ── RESPONSIVE BASE ──────────────────────────────────────── */
@media (max-width: 900px) {
   .sec {
      padding: 80px 24px;
   }

   nav {
      padding: 18px 24px;
   }

   nav.sc {
      padding: 14px 24px;
   }

   .nav-links {
      display: none;
   }

   footer {
      flex-direction: column;
      gap: 20px;
      text-align: center;
      padding: 40px 24px;
   }

   .f-links {
      gap: 20px;
   }

   body {
      cursor: auto;
   }

   #cur,
   #curR {
      display: none;
   }
}

/*******************************************************************/
/******************* A B O U T   U S   P A G E   C S S *************/
/*******************************************************************/
/* ── PAGE LOADER ─────────────────────────────────────── */
#loader {
   position: fixed;
   inset: 0;
   z-index: 9000;
   background: var(--bk);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   gap: 28px;
   transition: opacity .7s .2s, visibility .7s .2s;
}

#loader.done {
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
}

.loader-logo {
   height: 34px;
   width: auto;
   opacity: 0;
   animation: fadeIn .6s .1s forwards;
}

.loader-bar-wrap {
   width: 200px;
   height: 1px;
   background: rgba(158, 30, 29, .2);
   overflow: hidden;
}

.loader-bar {
   height: 100%;
   width: 0%;
   background: var(--grad);
   animation: loaderFill 1.4s cubic-bezier(.23, 1, .32, 1) .3s forwards;
}

.loader-pct {
   font-size: 11px;
   letter-spacing: .22em;
   text-transform: uppercase;
   font-weight: 400;
   color: var(--tx4);
}

/* ── HERO ─────────────────────────────────────────────── */
#hero {
   min-height: 100vh;
   display: grid;
   grid-template-columns: 1fr 1fr;
   position: relative;
   overflow: hidden;
}

.hero-grid {
   position: absolute;
   inset: 0;
   z-index: 0;
   background:
      repeating-linear-gradient(0deg, rgba(158, 30, 29, .028) 0, rgba(158, 30, 29, .028) 1px, transparent 1px, transparent 88px),
      repeating-linear-gradient(90deg, rgba(158, 30, 29, .028) 0, rgba(158, 30, 29, .028) 1px, transparent 1px, transparent 88px);
   animation: gridDrift 25s linear infinite;
   background-size: 88px 88px;
}

@keyframes gridDrift {
   0% {
      background-position: 0 0, 0 0
   }

   100% {
      background-position: 88px 88px, 88px 88px
   }
}

/* left — photo panel */
.hero-photo-side {
   position: relative;
   overflow: hidden;
   min-height: 100vh;
}

.hero-photo-side img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center top;
   filter: contrast(1.05) saturate(0.82);
   transition: transform 1.2s cubic-bezier(.23, 1, .32, 1);
   display: block;
}

.hero-photo-side:hover img {
   transform: scale(1.03);
}

/* dark overlay — gradient from right so text side stays dark */
.hero-photo-side::after {
   content: '';
   position: absolute;
   inset: 0;
   background:
      linear-gradient(to right, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .45) 100%),
      linear-gradient(to top, rgba(0, 0, 0, .6) 0%, transparent 55%);
}

/* maroon accent border right */
.hero-photo-vline {
   position: absolute;
   right: 0;
   top: 0;
   bottom: 0;
   width: 1px;
   background: linear-gradient(to bottom, transparent, var(--m) 40%, var(--o) 60%, transparent);
   z-index: 2;
}

/* maroon corner accents */
.hero-corner-tl {
   position: absolute;
   top: 28px;
   left: 28px;
   z-index: 3;
   width: 52px;
   height: 52px;
   border-top: 2px solid var(--m);
   border-left: 2px solid var(--m);
}

.hero-corner-br {
   position: absolute;
   bottom: 28px;
   right: 28px;
   z-index: 3;
   width: 52px;
   height: 52px;
   border-bottom: 2px solid var(--o);
   border-right: 2px solid var(--o);
}

/* name plate anchored to bottom */
.hero-nameplate {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 3;
   padding: 28px 36px;
   background: linear-gradient(to top, rgba(0, 0, 0, .92) 0%, transparent 100%);
}

.hero-nameplate-name {
   font-size: 22px;
   font-weight: 600;
   color: var(--tx);
   letter-spacing: -.015em;
   line-height: 1.2;
}

.hero-nameplate-role {
   font-size: 10px;
   letter-spacing: .25em;
   text-transform: uppercase;
   font-weight: 400;
   color: var(--o);
   margin-top: 6px;
}

/* right — hero copy */
.hero-copy-side {
   position: relative;
   z-index: 2;
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 140px 72px 140px 80px;
   background: var(--bk);
}

.hero-orb {
   position: absolute;
   top: 20%;
   right: -100px;
   width: 500px;
   height: 500px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(158, 30, 29, .08) 0%, transparent 65%);
   pointer-events: none;
   animation: glowPulse 6s ease-in-out infinite;
}

.hero-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 14px;
   font-size: 10px;
   letter-spacing: .38em;
   text-transform: uppercase;
   font-weight: 400;
   color: var(--o);
   margin-bottom: 28px;
   opacity: 0;
   animation: fadeUp .9s .7s forwards;
}

.hero-eyebrow-line {
   width: 34px;
   height: 1px;
   background: var(--o-dim);
}

.hero-h1 {
   font-size: clamp(44px, 4.8vw, 80px);
   font-weight: 600;
   line-height: .97;
   letter-spacing: -.03em;
   margin-bottom: 32px;
   opacity: 0;
   animation: fadeUp 1.1s .9s forwards;
}

.hero-h1 em {
   display: block;
   font-style: italic;
   font-weight: 300;
   background: var(--gtext);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

.hero-lead {
   font-size: 15px;
   line-height: 1.88;
   color: var(--tx2);
   font-weight: 300;
   max-width: 480px;
   opacity: 0;
   animation: fadeUp .9s 1.1s forwards;
   margin-bottom: 52px;
}

/* three small philosophy pills */
.hero-pills {
   display: flex;
   flex-direction: column;
   gap: 12px;
   opacity: 0;
   animation: fadeUp .9s 1.3s forwards;
}

.hero-pill {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 14px 20px;
   border: 1px solid var(--bd);
   background: rgba(158, 30, 29, .04);
   transition: border-color .3s, background .3s;
}

.hero-pill:hover {
   border-color: rgba(229, 121, 23, .35);
   background: rgba(229, 121, 23, .04);
}

.hero-pill-dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--grad);
   flex-shrink: 0;
}

.hero-pill-text {
   font-size: 13px;
   font-weight: 300;
   color: var(--tx2);
   line-height: 1.5;
}

/* ── STORY SECTION ────────────────────────────────────── */
#story {
   background: var(--bk2);
}

.story-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 100px;
   align-items: center;
}

.story-h2 {
   margin-bottom: 28px;
}

.story-p {
   font-size: 14px;
   line-height: 1.9;
   color: var(--tx2);
   margin-bottom: 18px;
   font-weight: 300;
}

/* maroon stat strip */
.story-strip {
   display: flex;
   gap: 0;
   margin-top: 48px;
   border: 1px solid var(--bd);
}

.strip-item {
   flex: 1;
   padding: 24px 28px;
   border-right: 1px solid var(--bd);
   text-align: center;
   transition: background .3s;
}

.strip-item:last-child {
   border-right: none;
}

.strip-item:hover {
   background: rgba(158, 30, 29, .06);
}

.strip-num {
   display: block;
   font-size: 36px;
   font-weight: 600;
   line-height: 1;
   background: var(--gtext);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

.strip-lbl {
   font-size: 10px;
   letter-spacing: .18em;
   text-transform: uppercase;
   font-weight: 400;
   color: var(--tx3);
   margin-top: 6px;
   display: block;
}

/* story right — full body photo */
.story-photo-wrap {
   position: relative;
}

.story-photo-frame {
   position: relative;
   overflow: hidden;
   border: 1px solid var(--bd);
   aspect-ratio: 3/4;
}

.story-photo-frame img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center top;
   filter: contrast(1.05) saturate(0.82);
   transition: transform .8s cubic-bezier(.23, 1, .32, 1);
   display: block;
}

.story-photo-frame:hover img {
   transform: scale(1.03);
}

.story-photo-frame::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(0, 0, 0, .5) 0%, transparent 55%);
}

.story-corner-tl {
   position: absolute;
   top: -1px;
   left: -1px;
   width: 56px;
   height: 56px;
   border-top: 2px solid var(--m);
   border-left: 2px solid var(--m);
   z-index: 2;
}

.story-corner-br {
   position: absolute;
   bottom: -1px;
   right: -1px;
   width: 56px;
   height: 56px;
   border-bottom: 2px solid var(--o);
   border-right: 2px solid var(--o);
   z-index: 2;
}

/* years badge */
.story-badge {
   position: absolute;
   top: 28px;
   right: -20px;
   z-index: 3;
   width: 96px;
   height: 96px;
   background: var(--grad);
   border-radius: 50%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 2px;
}

.story-badge-num {
   font-size: 28px;
   font-weight: 700;
   color: var(--tx);
   line-height: 1;
}

.story-badge-lbl {
   font-size: 8px;
   letter-spacing: .15em;
   text-transform: uppercase;
   font-weight: 400;
   color: rgba(255, 255, 255, .8);
}

/* ── PHILOSOPHY / MANIFESTO ───────────────────────────── */
#philosophy {
   background: var(--bk);
}

.phil-head {
   text-align: center;
   max-width: 680px;
   margin: 0 auto 80px;
}

.phil-head .slabel {
   justify-content: center;
}

.phil-head .slabel::before {
   display: none;
}

.phil-h2 {
   font-size: clamp(34px, 3.6vw, 58px);
   font-weight: 600;
   line-height: 1.05;
   letter-spacing: -.025em;
   margin-bottom: 20px;
}

.phil-h2 em {
   font-style: italic;
   font-weight: 300;
   color: var(--o);
}

.phil-sub {
   font-size: 14px;
   line-height: 1.85;
   color: var(--tx2);
   font-weight: 300;
}

/* manifesto statements — full width editorial */
.manifesto {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1px;
   background: var(--bd);
   border: 1px solid var(--bd);
   margin-bottom: 80px;
}

.mf-item {
   background: var(--bk);
   padding: 52px 48px;
   position: relative;
   overflow: hidden;
   transition: background .35s;
   cursor: default;
}

.mf-item:hover {
   background: var(--bk3);
}

.mf-bar {
   position: absolute;
   top: 0;
   left: 0;
   height: 2px;
   width: 0;
   background: var(--grad);
   transition: width .5s cubic-bezier(.23, 1, .32, 1);
}

.mf-item:hover .mf-bar {
   width: 100%;
}

/* hover glow */
.mf-item::after {
   content: '';
   position: absolute;
   bottom: -80px;
   left: -80px;
   width: 200px;
   height: 200px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(158, 30, 29, .09) 0%, transparent 70%);
   opacity: 0;
   transition: opacity .4s;
   pointer-events: none;
}

.mf-item:hover::after {
   opacity: 1;
}

.mf-num {
   font-size: 11px;
   letter-spacing: .25em;
   color: var(--tx4);
   font-weight: 400;
   margin-bottom: 28px;
   display: block;
}

.mf-quote {
   font-size: clamp(18px, 2vw, 26px);
   font-weight: 300;
   font-style: italic;
   line-height: 1.55;
   color: var(--tx);
   margin-bottom: 20px;
}

.mf-quote strong {
   font-weight: 600;
   font-style: normal;
   background: var(--gtext);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

.mf-body {
   font-size: 13px;
   line-height: 1.8;
   color: var(--tx2);
   font-weight: 300;
}

/* personal letter block */
.letter-wrap {
   max-width: 860px;
   margin: 0 auto;
   border: 1px solid var(--bd);
   background: rgba(158, 30, 29, .03);
   position: relative;
   overflow: hidden;
}

.letter-wrap::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   height: 2px;
   width: 100%;
   background: var(--grad);
}

.letter-inner {
   padding: 64px 72px;
}

.letter-tag {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-size: 10px;
   letter-spacing: .3em;
   text-transform: uppercase;
   font-weight: 400;
   color: var(--o);
   margin-bottom: 36px;
}

.letter-tag::before {
   content: '';
   width: 22px;
   height: 1px;
   background: var(--o-dim);
}

.letter-body {
   font-size: clamp(16px, 1.6vw, 20px);
   font-weight: 300;
   line-height: 1.9;
   color: var(--tx2);
   font-style: italic;
   margin-bottom: 48px;
}

.letter-body strong {
   font-weight: 500;
   font-style: normal;
   color: var(--tx);
}

.letter-sig {
   display: flex;
   align-items: center;
   gap: 24px;
   padding-top: 36px;
   border-top: 1px solid var(--bd);
}

.letter-sig-bar {
   width: 40px;
   height: 2px;
   background: var(--grad);
   flex-shrink: 0;
}

.letter-sig-name {
   font-size: 15px;
   font-weight: 600;
   color: var(--tx);
   letter-spacing: -.01em;
}

.letter-sig-role {
   font-size: 10px;
   letter-spacing: .2em;
   text-transform: uppercase;
   color: var(--o);
   margin-top: 4px;
   font-weight: 400;
}

/* ── VALUES ──────────────────────────────────────────── */
#values {
   background: var(--bk2);
}

.values-head {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   margin-bottom: 64px;
}

.values-desc {
   max-width: 320px;
   font-size: 13px;
   line-height: 1.75;
   color: var(--tx2);
   text-align: right;
   font-weight: 300;
}

.values-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1px;
   background: var(--bd);
   border: 1px solid var(--bd);
}

.val-card {
   background: var(--bk2);
   padding: 44px 32px;
   position: relative;
   overflow: hidden;
   transition: background .35s;
}

.val-card:hover {
   background: var(--bk4);
}

.val-bar {
   position: absolute;
   top: 0;
   left: 0;
   height: 2px;
   width: 0;
   background: var(--grad);
   transition: width .5s cubic-bezier(.23, 1, .32, 1);
}

.val-card:hover .val-bar {
   width: 100%;
}

.val-icon {
   width: 48px;
   height: 48px;
   margin-bottom: 28px;
   border: 1px solid rgba(158, 30, 29, .3);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: border-color .3s, background .3s, transform .35s;
}

.val-card:hover .val-icon {
   border-color: var(--o);
   background: rgba(229, 121, 23, .07);
   transform: scale(1.08);
}

.val-icon svg {
   width: 22px;
   height: 22px;
   stroke: var(--m);
   fill: none;
   stroke-width: 1.3;
   transition: stroke .3s;
}

.val-card:hover .val-icon svg {
   stroke: var(--o);
}

.val-name {
   font-size: 18px;
   font-weight: 600;
   color: var(--tx);
   margin-bottom: 12px;
   letter-spacing: -.01em;
}

.val-text {
   font-size: 13px;
   line-height: 1.78;
   color: var(--tx2);
   font-weight: 300;
}

/* ── LEADERSHIP APPROACH ─────────────────────────────── */
#leadership {
   background: var(--bk);
}

.lead-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 0;
   border: 1px solid var(--bd);
   overflow: hidden;
}

/* left — large editorial text */
.lead-left {
   padding: 72px 64px;
   border-right: 1px solid var(--bd);
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.lead-h2 {
   margin-bottom: 28px;
}

.lead-p {
   font-size: 14px;
   line-height: 1.9;
   color: var(--tx2);
   font-weight: 300;
   margin-bottom: 18px;
}

/* approach list */
.lead-list {
   margin-top: 40px;
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.lead-list-item {
   display: flex;
   gap: 20px;
   align-items: flex-start;
   padding: 20px 24px;
   border: 1px solid var(--bd);
   transition: border-color .3s, background .3s;
}

.lead-list-item:hover {
   border-color: rgba(229, 121, 23, .35);
   background: rgba(158, 30, 29, .04);
}

.lead-list-num {
   font-size: 12px;
   font-weight: 600;
   color: var(--o);
   letter-spacing: .1em;
   flex-shrink: 0;
   padding-top: 2px;
}

.lead-list-title {
   font-size: 15px;
   font-weight: 500;
   color: var(--tx);
   margin-bottom: 6px;
   letter-spacing: -.01em;
}

.lead-list-text {
   font-size: 13px;
   line-height: 1.75;
   color: var(--tx2);
   font-weight: 300;
}

/* right — pull quote panel */
.lead-right {
   background: var(--bk2);
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 72px 64px;
   position: relative;
   overflow: hidden;
}

.lead-right::before {
   content: '';
   position: absolute;
   top: -100px;
   right: -100px;
   width: 400px;
   height: 400px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(158, 30, 29, .07) 0%, transparent 65%);
   pointer-events: none;
}

.lead-qm {
   font-size: 80px;
   font-weight: 700;
   line-height: .5;
   background: var(--gtext);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   display: block;
   margin-bottom: 28px;
}

.lead-quote {
   font-size: clamp(17px, 1.7vw, 22px);
   font-weight: 300;
   font-style: italic;
   line-height: 1.65;
   color: var(--tx2);
   margin-bottom: 32px;
}

.lead-quote strong {
   font-weight: 500;
   font-style: normal;
   color: var(--tx);
}

.lead-divider {
   width: 36px;
   height: 2px;
   background: var(--grad);
   margin-bottom: 20px;
}

.lead-attr-name {
   font-size: 13px;
   font-weight: 600;
   color: var(--tx);
   letter-spacing: -.01em;
}

.lead-attr-role {
   font-size: 10px;
   letter-spacing: .2em;
   text-transform: uppercase;
   color: var(--o);
   margin-top: 5px;
   font-weight: 400;
}

/* upgrade advice highlight */
.lead-upgrade {
   margin-top: 40px;
   padding: 24px 28px;
   border-left: 3px solid var(--m);
   background: rgba(158, 30, 29, .05);
}

.lead-upgrade-tag {
   font-size: 9px;
   letter-spacing: .25em;
   text-transform: uppercase;
   font-weight: 500;
   color: var(--o);
   margin-bottom: 10px;
   display: block;
}

.lead-upgrade-text {
   font-size: 13px;
   line-height: 1.75;
   color: var(--tx2);
   font-weight: 300;
}

/* ── WHY US ──────────────────────────────────────────── */
#why {
   background: var(--bk2);
   padding: 80px 68px;
}

.why-inner {
   max-width: 1260px;
   margin: 0 auto;
}

.why-track {
   display: flex;
   gap: 1px;
   background: var(--bd);
   border: 1px solid var(--bd);
}

.why-item {
   flex: 1;
   padding: 36px 32px;
   background: var(--bk2);
   display: flex;
   align-items: center;
   gap: 20px;
   transition: background .3s;
}

.why-item:hover {
   background: var(--bk4);
}

.why-icon {
   width: 44px;
   height: 44px;
   flex-shrink: 0;
   border: 1px solid var(--bd);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: border-color .3s;
}

.why-item:hover .why-icon {
   border-color: var(--o);
}

.why-icon svg {
   width: 18px;
   height: 18px;
   stroke: var(--m);
   fill: none;
   stroke-width: 1.3;
   transition: stroke .3s;
}

.why-item:hover .why-icon svg {
   stroke: var(--o);
}

.why-title {
   font-size: 13px;
   font-weight: 600;
   color: var(--tx);
   margin-bottom: 4px;
   letter-spacing: -.01em;
}

.why-text {
   font-size: 12px;
   line-height: 1.65;
   color: var(--tx3);
   font-weight: 300;
}

/* ── CTA ─────────────────────────────────────────────── */
#cta {
   padding: 152px 68px;
   text-align: center;
   position: relative;
   overflow: hidden;
   background: var(--bk);
}

.cta-orb {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 880px;
   height: 380px;
   background: radial-gradient(ellipse, rgba(158, 30, 29, .08) 0%, transparent 65%);
   pointer-events: none;
   animation: glowPulse 6s ease-in-out infinite;
}

.cta-lbl {
   font-size: 10px;
   letter-spacing: .35em;
   text-transform: uppercase;
   font-weight: 400;
   color: var(--o);
   margin-bottom: 24px;
}

.cta-h2 {
   font-size: clamp(52px, 8vw, 116px);
   font-weight: 600;
   line-height: .94;
   letter-spacing: -.04em;
   margin-bottom: 48px;
}

.cta-h2 em {
   font-style: italic;
   font-weight: 300;
   background: var(--gtext);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

.cta-div {
   width: 44px;
   height: 2px;
   background: var(--grad);
   margin: 0 auto 36px;
}

.cta-mail {
   font-size: 18px;
   font-weight: 300;
   font-style: italic;
   color: var(--tx2);
   text-decoration: none;
   border-bottom: 1px solid rgba(229, 121, 23, .3);
   padding-bottom: 3px;
   transition: color .3s, border-color .3s;
}

.cta-mail:hover {
   color: var(--o);
   border-color: var(--o);
}

/* ── MOBILE ──────────────────────────────────────────── */
@media(max-width:900px) {
   #hero {
      grid-template-columns: 1fr;
   }

   .hero-photo-side {
      min-height: 60vh;
   }

   .hero-copy-side {
      padding: 60px 24px;
   }

   .story-grid {
      grid-template-columns: 1fr;
      gap: 52px;
   }

   .story-badge {
      right: 16px;
   }

   .manifesto {
      grid-template-columns: 1fr;
   }

   .letter-inner {
      padding: 40px 28px;
   }

   .values-grid {
      grid-template-columns: 1fr 1fr;
   }

   .values-head {
      flex-direction: column;
      gap: 16px;
   }

   .values-desc {
      text-align: left;
   }

   .lead-grid {
      grid-template-columns: 1fr;
   }

   .lead-left,
   .lead-right {
      padding: 52px 28px;
   }

   .lead-left {
      border-right: none;
      border-bottom: 1px solid var(--bd);
   }

   .why-track {
      flex-direction: column;
   }

   #cta {
      padding: 80px 24px;
   }

   #why {
      padding: 60px 24px;
   }
}

/* ════════════════════════════════════════════════════════
   KAIMAK CREVANTO — Pages CSS  v1.0
   Styles for: /services · /work · /process
   Appended to style.css — do not remove existing content.
   ════════════════════════════════════════════════════════ */


/* ╔══════════════════════════════════════════════════════
   ║  SHARED PAGE UTILITIES
   ╚══════════════════════════════════════════════════════ */

/* Shared hero eyebrow label used across all 3 pages */
.page-eyebrow {
   display: flex;
   align-items: center;
   gap: 14px;
   font-size: 10px;
   letter-spacing: .3em;
   text-transform: uppercase;
   color: var(--o);
   font-weight: 400;
   margin-bottom: 28px;
}

.page-eyebrow::before {
   content: '';
   display: block;
   width: 36px;
   height: 1px;
   background: var(--o);
}

/* Shared italic gradient heading em used across pages */
.page-hero h1 em,
.svc-hero h1 em,
.work-hero h1 em,
.proc-page-hero h1 em {
   font-style: italic;
   font-weight: 300;
   background: var(--gtext);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}


/* ╔══════════════════════════════════════════════════════
   ║  SERVICES PAGE  (/services)
   ╚══════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────── */
.svc-hero {
   padding: 160px 68px 100px;
   background: var(--bk);
   position: relative;
   overflow: hidden;
}

.svc-hero::before {
   content: '';
   position: absolute;
   top: -200px;
   right: -200px;
   width: 600px;
   height: 600px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(158, 30, 29, .07) 0%, transparent 65%);
   pointer-events: none;
}

.svc-hero-inner {
   max-width: 1260px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 80px;
   align-items: end;
}

.svc-hero-eyebrow {
   display: flex;
   align-items: center;
   gap: 14px;
   font-size: 10px;
   letter-spacing: .3em;
   text-transform: uppercase;
   color: var(--o);
   font-weight: 400;
   margin-bottom: 28px;
}

.svc-hero-eyebrow::before {
   content: '';
   display: block;
   width: 36px;
   height: 1px;
   background: var(--o);
}

.svc-hero h1 {
   font-size: clamp(44px, 5.5vw, 72px);
   font-weight: 600;
   line-height: 1.08;
   letter-spacing: -.03em;
   color: var(--tx);
   margin-bottom: 0;
}

.svc-hero-lead {
   font-size: 15px;
   line-height: 1.9;
   color: var(--tx2);
   font-weight: 300;
   margin-bottom: 40px;
}

.svc-hero-stats {
   display: flex;
   gap: 40px;
}

.svc-hero-stat-n {
   font-size: 32px;
   font-weight: 600;
   color: var(--tx);
   letter-spacing: -.02em;
   display: block;
   line-height: 1;
   margin-bottom: 4px;
}

.svc-hero-stat-l {
   font-size: 10px;
   letter-spacing: .18em;
   text-transform: uppercase;
   color: var(--tx4);
   font-weight: 400;
}

/* ── Services Main Grid ───────────────────────────────── */
.svc-page-section {
   background: var(--bk2);
   padding: 100px 68px;
}

.svc-page-inner {
   max-width: 1260px;
   margin: 0 auto;
}

.svc-page-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1px;
   background: var(--bd);
   border: 1px solid var(--bd);
}

.svc-pg-card {
   background: var(--bk2);
   padding: 52px 40px;
   position: relative;
   overflow: hidden;
   transition: background .35s;
   cursor: default;
}

.svc-pg-card:hover {
   background: var(--bk4);
}

.svc-pg-bar {
   position: absolute;
   top: 0;
   left: 0;
   width: 0;
   height: 2px;
   background: var(--grad);
   transition: width .55s cubic-bezier(.23, 1, .32, 1);
}

.svc-pg-card:hover .svc-pg-bar {
   width: 100%;
}

.svc-pg-n {
   font-size: 72px;
   font-weight: 700;
   color: rgba(158, 30, 29, .05);
   line-height: 1;
   position: absolute;
   top: 24px;
   right: 24px;
   letter-spacing: -.04em;
   transition: color .35s;
}

.svc-pg-card:hover .svc-pg-n {
   color: rgba(158, 30, 29, .1);
}

.svc-pg-icon {
   width: 52px;
   height: 52px;
   border: 1px solid var(--bd);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 28px;
   transition: border-color .3s;
}

.svc-pg-icon svg {
   width: 22px;
   height: 22px;
   stroke: var(--m);
   fill: none;
   stroke-width: 1.3;
}

.svc-pg-card:hover .svc-pg-icon {
   border-color: var(--m);
}

.svc-pg-name {
   font-size: 20px;
   font-weight: 600;
   color: var(--tx);
   margin-bottom: 16px;
   letter-spacing: -.015em;
   line-height: 1.25;
}

.svc-pg-text {
   font-size: 13px;
   line-height: 1.85;
   color: var(--tx3);
   font-weight: 300;
   margin-bottom: 32px;
}

.svc-pg-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   margin-bottom: 32px;
}

.svc-pg-tag {
   font-size: 9px;
   letter-spacing: .18em;
   text-transform: uppercase;
   color: var(--tx4);
   padding: 5px 12px;
   border: 1px solid var(--bd);
   font-weight: 400;
   transition: border-color .3s, color .3s;
}

.svc-pg-card:hover .svc-pg-tag {
   border-color: rgba(158, 30, 29, .3);
   color: var(--o);
}

.svc-pg-link {
   font-size: 10px;
   letter-spacing: .22em;
   text-transform: uppercase;
   font-weight: 500;
   color: var(--o);
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   transition: gap .3s, color .3s;
}

.svc-pg-link:hover {
   gap: 14px;
   color: var(--tx);
}

/* ── Approach ─────────────────────────────────────────── */
.svc-approach {
   background: var(--bk);
   padding: 100px 68px;
}

.svc-approach-inner {
   max-width: 1260px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 360px 1fr;
   gap: 96px;
   align-items: start;
}

.svc-approach-left h2 {
   font-size: clamp(32px, 3.5vw, 48px);
   font-weight: 600;
   color: var(--tx);
   letter-spacing: -.025em;
   line-height: 1.15;
   margin-bottom: 24px;
}

.svc-approach-left h2 em {
   font-style: italic;
   font-weight: 300;
   color: var(--tx3);
}

.svc-approach-left p {
   font-size: 13px;
   line-height: 1.9;
   color: var(--tx3);
   font-weight: 300;
}

.svc-approach-right {
   display: flex;
   flex-direction: column;
   gap: 1px;
   background: var(--bd);
   border: 1px solid var(--bd);
}

.svc-approach-item {
   background: var(--bk);
   padding: 32px 36px;
   display: grid;
   grid-template-columns: 48px 1fr;
   gap: 24px;
   align-items: start;
   transition: background .3s;
}

.svc-approach-item:hover {
   background: var(--bk3);
}

.svc-approach-num {
   font-size: 11px;
   letter-spacing: .2em;
   color: var(--m);
   font-weight: 600;
   padding-top: 3px;
}

.svc-approach-title {
   font-size: 15px;
   font-weight: 600;
   color: var(--tx);
   margin-bottom: 8px;
   letter-spacing: -.01em;
}

.svc-approach-desc {
   font-size: 12px;
   line-height: 1.78;
   color: var(--tx3);
   font-weight: 300;
}

/* ── CTA Banner ───────────────────────────────────────── */
.svc-cta {
   background: var(--bk2);
   padding: 100px 68px;
}

.svc-cta-inner {
   max-width: 1260px;
   margin: 0 auto;
   border: 1px solid var(--bd);
   padding: 80px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 60px;
   position: relative;
   overflow: hidden;
}

.svc-cta-inner::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: var(--grad);
}

.svc-cta-inner::after {
   content: '';
   position: absolute;
   bottom: -120px;
   right: -120px;
   width: 400px;
   height: 400px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(158, 30, 29, .06) 0%, transparent 65%);
   pointer-events: none;
}

.svc-cta h2 {
   font-size: clamp(28px, 3vw, 42px);
   font-weight: 600;
   color: var(--tx);
   letter-spacing: -.025em;
   line-height: 1.2;
   margin-bottom: 16px;
}

.svc-cta h2 em {
   font-style: italic;
   font-weight: 300;
   color: var(--tx3);
}

.svc-cta p {
   font-size: 13px;
   color: var(--tx3);
   font-weight: 300;
   line-height: 1.8;
   max-width: 480px;
}

.svc-cta-actions {
   display: flex;
   gap: 16px;
   flex-shrink: 0;
}

/* ── Services Responsive ──────────────────────────────── */
@media (max-width: 1024px) {
   .svc-page-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .svc-hero-inner {
      grid-template-columns: 1fr;
      gap: 40px;
   }

   .svc-approach-inner {
      grid-template-columns: 1fr;
      gap: 48px;
   }

   .svc-cta-inner {
      flex-direction: column;
      padding: 48px;
   }
}

@media (max-width: 768px) {
   .svc-hero {
      padding: 140px 24px 72px;
   }

   .svc-page-section,
   .svc-approach,
   .svc-cta {
      padding: 72px 24px;
   }

   .svc-page-grid {
      grid-template-columns: 1fr;
   }

   .svc-cta-actions {
      flex-direction: column;
      width: 100%;
   }
}


/* ╔══════════════════════════════════════════════════════
   ║  WORK PAGE  (/work)
   ╚══════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────── */
.work-hero {
   padding: 160px 68px 100px;
   background: var(--bk);
   position: relative;
   overflow: hidden;
}

.work-hero-inner {
   max-width: 1260px;
   margin: 0 auto;
   position: relative;
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   gap: 60px;
}

.work-hero-eyebrow {
   display: flex;
   align-items: center;
   gap: 14px;
   font-size: 10px;
   letter-spacing: .3em;
   text-transform: uppercase;
   color: var(--o);
   font-weight: 400;
   margin-bottom: 28px;
}

.work-hero-eyebrow::before {
   content: '';
   display: block;
   width: 36px;
   height: 1px;
   background: var(--o);
}

.work-hero h1 {
   font-size: clamp(44px, 5.5vw, 72px);
   font-weight: 600;
   line-height: 1.08;
   letter-spacing: -.03em;
   color: var(--tx);
}

.work-hero-right {
   max-width: 380px;
   flex-shrink: 0;
   padding-bottom: 8px;
}

.work-hero-right p {
   font-size: 14px;
   line-height: 1.9;
   color: var(--tx3);
   font-weight: 300;
   margin-bottom: 24px;
}

/* ── Filter Bar ───────────────────────────────────────── */
.work-filters {
   background: var(--bk2);
   border-bottom: 1px solid var(--bd);
   padding: 0 68px;
   position: sticky;
   top: 60px;
   z-index: 10;
}

.work-filters-inner {
   max-width: 1260px;
   margin: 0 auto;
   display: flex;
   overflow-x: auto;
   -ms-overflow-style: none;
   scrollbar-width: none;
}

.work-filters-inner::-webkit-scrollbar {
   display: none;
}

.wf-btn {
   padding: 20px 28px;
   font-size: 10px;
   letter-spacing: .2em;
   text-transform: uppercase;
   font-weight: 500;
   color: var(--tx4);
   background: none;
   border: none;
   border-bottom: 2px solid transparent;
   cursor: pointer;
   transition: color .25s, border-color .25s;
   white-space: nowrap;
}

.wf-btn:hover {
   color: var(--tx2);
}

.wf-btn.active {
   color: var(--tx);
   border-bottom-color: var(--m);
}

/* ── Projects Grid ────────────────────────────────────── */
.work-page-section {
   background: var(--bk);
   padding: 80px 68px 100px;
}

.work-page-inner {
   max-width: 1260px;
   margin: 0 auto;
}

.work-page-grid {
   columns: 3;
   column-gap: 1px;
   background: var(--bd);
   border: 1px solid var(--bd);
}

.work-page-grid .wp-item {
   background: var(--bk);
   break-inside: avoid;
   position: relative;
   overflow: hidden;
   cursor: pointer;
   display: block;
}

.work-page-grid .wp-item:hover .wp-overlay {
   opacity: 1;
}

.work-page-grid .wp-item:hover .wp-info {
   transform: none;
   opacity: 1;
}

.work-page-grid .wp-item:hover .wp-accent {
   height: 40%;
}

.wp-thumb {
   width: 100%;
   aspect-ratio: 4/3;
   object-fit: cover;
   display: block;
   transition: transform .6s cubic-bezier(.23, 1, .32, 1);
}

.work-page-grid .wp-item:hover .wp-thumb {
   transform: scale(1.04);
}

.wp-placeholder {
   width: 100%;
   aspect-ratio: 4/3;
   display: flex;
   align-items: center;
   justify-content: center;
}

.wp-placeholder-inner {
   font-size: 48px;
   font-weight: 700;
   letter-spacing: -.04em;
   opacity: .06;
   color: var(--tx);
}

.wp-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .2) 60%, transparent 100%);
   opacity: 0;
   transition: opacity .42s;
}

.wp-accent {
   position: absolute;
   top: 0;
   left: 0;
   width: 2px;
   height: 0;
   background: linear-gradient(to bottom, var(--m), var(--o));
   transition: height .55s cubic-bezier(.23, 1, .32, 1);
   z-index: 2;
}

.wp-n {
   position: absolute;
   top: 16px;
   right: 16px;
   font-size: 9px;
   letter-spacing: .18em;
   color: rgba(255, 255, 255, .15);
   z-index: 2;
}

.wp-info {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   padding: 28px;
   transform: translateY(8px);
   opacity: 0;
   transition: transform .42s cubic-bezier(.23, 1, .32, 1), opacity .42s;
   z-index: 3;
}

.wp-platform {
   font-size: 9px;
   letter-spacing: .26em;
   text-transform: uppercase;
   color: var(--o);
   margin-bottom: 6px;
   font-weight: 400;
}

.wp-name {
   font-size: 18px;
   font-weight: 600;
   color: #fff;
   letter-spacing: -.015em;
   line-height: 1.2;
   margin-bottom: 14px;
}

.wp-link {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: 10px;
   letter-spacing: .2em;
   text-transform: uppercase;
   font-weight: 500;
   color: #fff;
   text-decoration: none;
   padding: 7px 14px;
   border: 1px solid rgba(255, 255, 255, .2);
   background: rgba(255, 255, 255, .07);
   backdrop-filter: blur(6px);
   transition: background .3s, border-color .3s;
}

.wp-link:hover {
   background: var(--m);
   border-color: var(--m);
}

/* Colour fallback palettes */
.wp-p1 {
   background: linear-gradient(135deg, #090000 0%, #160400 60%, #0c0707 100%);
}

.wp-p2 {
   background: linear-gradient(135deg, #000000 0%, #0d0900 100%);
}

.wp-p3 {
   background: linear-gradient(135deg, #000407 0%, #07040e 100%);
}

.wp-p4 {
   background: linear-gradient(135deg, #040000 0%, #110606 100%);
}

.wp-p5 {
   background: linear-gradient(135deg, #020203 0%, #080408 100%);
}

/* Empty state */
.work-page-empty {
   grid-column: 1/-1;
   padding: 120px 40px;
   text-align: center;
   color: var(--tx4);
   font-size: 13px;
   letter-spacing: .08em;
}

/* Bottom CTA */
.work-cta {
   margin-top: 80px;
   border: 1px solid var(--bd);
   padding: 72px 80px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 48px;
   position: relative;
   overflow: hidden;
}

.work-cta::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: var(--grad);
}

.work-cta h2 {
   font-size: clamp(24px, 2.5vw, 36px);
   font-weight: 600;
   color: var(--tx);
   letter-spacing: -.02em;
   line-height: 1.2;
   margin-bottom: 12px;
}

.work-cta h2 em {
   font-style: italic;
   font-weight: 300;
   color: var(--tx3);
}

.work-cta p {
   font-size: 13px;
   color: var(--tx3);
   font-weight: 300;
   line-height: 1.8;
}

/* ── Work Responsive ──────────────────────────────────── */
@media (max-width: 1024px) {
   .work-page-grid {
      columns: 2;
   }

   .work-hero-inner {
      flex-direction: column;
      align-items: flex-start;
      gap: 32px;
   }
}

@media (max-width: 768px) {
   .work-hero {
      padding: 140px 24px 72px;
   }

   .work-page-section {
      padding: 60px 24px 80px;
   }

   .work-filters {
      padding: 0 24px;
   }

   .work-page-grid {
      columns: 1;
   }

   .work-cta {
      flex-direction: column;
      padding: 48px 32px;
   }
}


/* ╔══════════════════════════════════════════════════════
   ║  PROCESS PAGE  (/process)
   ╚══════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────── */
.proc-page-hero {
   padding: 160px 68px 100px;
   background: var(--bk);
   position: relative;
   overflow: hidden;
}

.proc-page-hero::before {
   content: '';
   position: absolute;
   top: -200px;
   left: -100px;
   width: 600px;
   height: 600px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(158, 30, 29, .06) 0%, transparent 65%);
   pointer-events: none;
}

.proc-page-hero-inner {
   max-width: 1260px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 80px;
   align-items: end;
   position: relative;
}

.proc-page-eyebrow {
   display: flex;
   align-items: center;
   gap: 14px;
   font-size: 10px;
   letter-spacing: .3em;
   text-transform: uppercase;
   color: var(--o);
   font-weight: 400;
   margin-bottom: 28px;
}

.proc-page-eyebrow::before {
   content: '';
   display: block;
   width: 36px;
   height: 1px;
   background: var(--o);
}

.proc-page-hero h1 {
   font-size: clamp(44px, 5.5vw, 72px);
   font-weight: 600;
   line-height: 1.08;
   letter-spacing: -.03em;
   color: var(--tx);
}

.proc-hero-right {
   padding-bottom: 8px;
}

.proc-hero-lead {
   font-size: 15px;
   line-height: 1.9;
   color: var(--tx2);
   font-weight: 300;
   margin-bottom: 36px;
}

.proc-hero-metrics {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1px;
   background: var(--bd);
   border: 1px solid var(--bd);
}

.proc-metric {
   background: var(--bk);
   padding: 24px 20px;
   text-align: center;
}

.proc-metric-n {
   font-size: 28px;
   font-weight: 600;
   color: var(--tx);
   letter-spacing: -.02em;
   display: block;
   line-height: 1;
   margin-bottom: 6px;
}

.proc-metric-l {
   font-size: 9px;
   letter-spacing: .18em;
   text-transform: uppercase;
   color: var(--tx4);
   font-weight: 400;
}

/* ── Timeline ─────────────────────────────────────────── */
.proc-timeline-section {
   background: var(--bk2);
   padding: 100px 68px;
}

.proc-timeline-inner {
   max-width: 1260px;
   margin: 0 auto;
}

.proc-timeline-head {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 80px;
   margin-bottom: 80px;
}

.proc-timeline-head h2 {
   font-size: clamp(30px, 3.5vw, 48px);
   font-weight: 600;
   color: var(--tx);
   letter-spacing: -.025em;
   line-height: 1.15;
   flex-shrink: 0;
}

.proc-timeline-head h2 em {
   font-style: italic;
   font-weight: 300;
   color: var(--tx3);
}

.proc-timeline-head p {
   font-size: 13px;
   line-height: 1.9;
   color: var(--tx3);
   font-weight: 300;
   max-width: 440px;
   padding-top: 4px;
}

.proc-steps-list {
   position: relative;
}

.proc-steps-list::before {
   content: '';
   position: absolute;
   left: 32px;
   top: 0;
   bottom: 0;
   width: 1px;
   background: linear-gradient(to bottom, var(--m) 0%, transparent 100%);
   opacity: .25;
}

.proc-step {
   display: grid;
   grid-template-columns: 64px 1fr;
   gap: 40px;
   margin-bottom: 1px;
   background: var(--bk2);
   border: 1px solid var(--bd);
   border-top: none;
   position: relative;
   transition: background .3s;
}

.proc-step:first-child {
   border-top: 1px solid var(--bd);
}

.proc-step:hover {
   background: var(--bk4);
}

.proc-step-bar {
   position: absolute;
   top: 0;
   left: 0;
   height: 2px;
   width: 0;
   background: var(--grad);
   transition: width .55s cubic-bezier(.23, 1, .32, 1);
}

.proc-step:hover .proc-step-bar {
   width: 100%;
}

.proc-step-num-col {
   padding: 44px 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   border-right: 1px solid var(--bd);
}

.proc-step-circle {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   border: 1px solid var(--bd);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 10px;
   font-weight: 600;
   color: var(--tx3);
   letter-spacing: .05em;
   background: var(--bk2);
   transition: border-color .3s, color .3s, background .3s;
   position: relative;
   z-index: 1;
}

.proc-step:hover .proc-step-circle {
   border-color: var(--m);
   color: var(--m);
   background: rgba(158, 30, 29, .08);
}

.proc-step-body {
   padding: 44px 52px 44px 0;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 48px;
   align-items: start;
}

.proc-step-tag {
   font-size: 9px;
   letter-spacing: .28em;
   text-transform: uppercase;
   color: var(--o);
   font-weight: 400;
}

.proc-step-name {
   font-size: 22px;
   font-weight: 600;
   color: var(--tx);
   letter-spacing: -.015em;
   line-height: 1.2;
}

.proc-step-duration {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 9px;
   letter-spacing: .18em;
   text-transform: uppercase;
   color: var(--tx4);
   padding: 5px 12px;
   border: 1px solid var(--bd);
   width: fit-content;
}

.proc-step-duration::before {
   content: '';
   display: block;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--m);
   opacity: .6;
}

.proc-step-desc {
   font-size: 13px;
   line-height: 1.88;
   color: var(--tx3);
   font-weight: 300;
   margin-bottom: 20px;
}

.proc-step-deliverables {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
}

.proc-step-del {
   font-size: 9px;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--tx4);
   padding: 4px 10px;
   border: 1px solid var(--bd);
   font-weight: 400;
   transition: border-color .3s, color .3s;
}

.proc-step:hover .proc-step-del {
   border-color: rgba(158, 30, 29, .25);
   color: var(--o);
}

/* ── Guarantees ───────────────────────────────────────── */
.proc-guarantees {
   background: var(--bk);
   padding: 80px 68px;
}

.proc-guarantees-inner {
   max-width: 1260px;
   margin: 0 auto;
}

.proc-g-label {
   font-size: 10px;
   letter-spacing: .3em;
   text-transform: uppercase;
   color: var(--tx4);
   text-align: center;
   margin-bottom: 48px;
   font-weight: 400;
}

.proc-g-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1px;
   background: var(--bd);
   border: 1px solid var(--bd);
}

.proc-g-item {
   background: var(--bk);
   padding: 40px 32px;
   transition: background .3s;
}

.proc-g-item:hover {
   background: var(--bk3);
}

.proc-g-icon {
   font-size: 24px;
   margin-bottom: 16px;
   display: block;
   opacity: .7;
}

.proc-g-name {
   font-size: 14px;
   font-weight: 600;
   color: var(--tx);
   margin-bottom: 10px;
   letter-spacing: -.01em;
}

.proc-g-desc {
   font-size: 12px;
   line-height: 1.75;
   color: var(--tx3);
   font-weight: 300;
}

/* ── FAQ ──────────────────────────────────────────────── */
.proc-faq {
   background: var(--bk2);
   padding: 100px 68px;
}

.proc-faq-inner {
   max-width: 1260px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 320px 1fr;
   gap: 96px;
}

.proc-faq-left h2 {
   font-size: clamp(28px, 3vw, 40px);
   font-weight: 600;
   color: var(--tx);
   letter-spacing: -.025em;
   line-height: 1.2;
   margin-bottom: 20px;
}

.proc-faq-left h2 em {
   font-style: italic;
   font-weight: 300;
   color: var(--tx3);
}

.proc-faq-left p {
   font-size: 13px;
   line-height: 1.85;
   color: var(--tx3);
   font-weight: 300;
}

.proc-faq-list {
   display: flex;
   flex-direction: column;
   gap: 1px;
   background: var(--bd);
   border: 1px solid var(--bd);
}

.proc-faq-item {
   background: var(--bk2);
   overflow: hidden;
}

.proc-faq-q {
   padding: 24px 28px;
   font-size: 14px;
   font-weight: 500;
   color: var(--tx);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   transition: color .3s;
   letter-spacing: -.01em;
}

.proc-faq-q:hover {
   color: var(--o);
}

.proc-faq-arrow {
   font-size: 16px;
   color: var(--tx4);
   transition: transform .3s, color .3s;
   flex-shrink: 0;
}

.proc-faq-item.open .proc-faq-arrow {
   transform: rotate(45deg);
   color: var(--m);
}

.proc-faq-a {
   max-height: 0;
   overflow: hidden;
   transition: max-height .4s cubic-bezier(.23, 1, .32, 1);
}

.proc-faq-item.open .proc-faq-a {
   max-height: 200px;
}

.proc-faq-a-inner {
   padding: 0 28px 24px;
   font-size: 13px;
   line-height: 1.85;
   color: var(--tx3);
   font-weight: 300;
   border-top: 1px solid var(--bd);
   padding-top: 20px;
}

/* ── Process Page CTA ─────────────────────────────────── */
.proc-cta {
   background: var(--bk);
   padding: 100px 68px;
}

.proc-cta-inner {
   max-width: 1260px;
   margin: 0 auto;
   border: 1px solid var(--bd);
   padding: 80px;
   text-align: center;
   position: relative;
   overflow: hidden;
}

.proc-cta-inner::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: var(--grad);
}

.proc-cta-tag {
   font-size: 10px;
   letter-spacing: .3em;
   text-transform: uppercase;
   color: var(--o);
   font-weight: 400;
   margin-bottom: 24px;
}

.proc-cta h2 {
   font-size: clamp(30px, 3.5vw, 52px);
   font-weight: 600;
   color: var(--tx);
   letter-spacing: -.025em;
   line-height: 1.15;
   margin-bottom: 20px;
}

.proc-cta h2 em {
   font-style: italic;
   font-weight: 300;
   color: var(--tx3);
}

.proc-cta p {
   font-size: 14px;
   color: var(--tx3);
   font-weight: 300;
   line-height: 1.8;
   max-width: 520px;
   margin: 0 auto 40px;
}

.proc-cta-btns {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 16px;
}

/* ── Process Responsive ───────────────────────────────── */
@media (max-width: 1024px) {
   .proc-page-hero-inner {
      grid-template-columns: 1fr;
      gap: 40px;
   }

   .proc-step-body {
      grid-template-columns: 1fr;
      gap: 20px;
   }

   .proc-g-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .proc-faq-inner {
      grid-template-columns: 1fr;
      gap: 48px;
   }

   .proc-timeline-head {
      flex-direction: column;
      gap: 24px;
   }
}

@media (max-width: 768px) {
   .proc-page-hero {
      padding: 140px 24px 72px;
   }

   .proc-timeline-section,
   .proc-guarantees,
   .proc-faq,
   .proc-cta {
      padding: 72px 24px;
   }

   .proc-hero-metrics {
      grid-template-columns: 1fr 1fr;
   }

   .proc-step {
      grid-template-columns: 1fr;
   }

   .proc-step-num-col {
      padding: 24px 24px 0;
      flex-direction: row;
      border-right: none;
      border-bottom: 1px solid var(--bd);
   }

   .proc-step-body {
      padding: 28px 24px;
   }

   .proc-g-grid {
      grid-template-columns: 1fr;
   }

   .proc-cta-inner {
      padding: 48px 24px;
   }

   .proc-cta-btns {
      flex-direction: column;
   }
}

/* ══ CONTACT PAGE ══════════════════════════════════════════ */

/* Hero */
.contact-hero {
   padding: 160px var(--sp-md) var(--sp-lg);
   border-bottom: 1px solid var(--bd);
}
.contact-hero-inner {
   max-width: 1200px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--sp-lg);
   align-items: center;
}
.contact-hero-eyebrow {
   font-size: 11px;
   font-weight: 500;
   letter-spacing: 3px;
   text-transform: uppercase;
   color: var(--o);
   margin-bottom: 20px;
}
.contact-hero h1 {
   font-size: clamp(36px, 5vw, 64px);
   font-weight: 600;
   line-height: 1.05;
   letter-spacing: -2px;
}
.contact-hero h1 em {
   font-style: italic;
   background: var(--gtext);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}
.contact-hero-lead {
   font-size: 15px;
   line-height: 1.75;
   color: var(--tx3);
   margin-bottom: var(--sp-md);
}
.contact-hero-stats {
   display: flex;
   gap: var(--sp-md);
}
.contact-hero-stat-n {
   display: block;
   font-size: 24px;
   font-weight: 600;
   color: var(--tx);
   letter-spacing: -1px;
}
.contact-hero-stat-l {
   font-size: 10px;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   color: var(--tx4);
}

/* Section */
.contact-section {
   padding: var(--sp-xl) var(--sp-md);
}
.contact-inner {
   max-width: 1200px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1fr 1.2fr;
   gap: 64px;
   align-items: start;
}

/* Info side */
.contact-info-head {
   font-size: 10px;
   font-weight: 600;
   letter-spacing: 3px;
   text-transform: uppercase;
   color: var(--o);
   margin-bottom: 20px;
}
.contact-info-title {
   font-size: 30px;
   font-weight: 600;
   letter-spacing: -0.5px;
   line-height: 1.2;
   margin-bottom: 40px;
}
.contact-info-title em {
   font-style: italic;
   background: var(--gtext);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}
.ci-items {
   display: flex;
   flex-direction: column;
   gap: 28px;
   margin-bottom: 40px;
}
.ci-item {
   display: flex;
   gap: 16px;
   align-items: flex-start;
}
.ci-icon {
   width: 44px;
   height: 44px;
   border-radius: 10px;
   background: rgba(158, 30, 29, 0.1);
   border: 1px solid var(--bd);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   flex-shrink: 0;
}
.ci-label {
   font-size: 9px;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--tx4);
   margin-bottom: 6px;
   font-weight: 600;
}
.ci-value {
   font-size: 14px;
   color: var(--tx2);
   line-height: 1.7;
}
.ci-value a {
   color: var(--o);
   text-decoration: none;
   transition: color .2s;
}
.ci-value a:hover {
   color: var(--o-hi);
}

/* Map */
.contact-map-wrap {
   border-radius: 14px;
   overflow: hidden;
   border: 1px solid var(--bd);
   height: 260px;
   position: relative;
}
.contact-map-wrap iframe {
   width: 100%;
   height: 100%;
   display: block;
   filter: invert(90%) hue-rotate(180deg) saturate(0.9) brightness(0.85);
}

/* Form side */
.contact-form-wrap {
   background: var(--bk3);
   border: 1px solid var(--bd);
   border-radius: 20px;
   padding: 48px;
}
.cf-head {
   margin-bottom: 32px;
}
.cf-eyebrow {
   font-size: 10px;
   letter-spacing: 3px;
   text-transform: uppercase;
   color: var(--o);
   margin-bottom: 10px;
}
.cf-title {
   font-size: 22px;
   font-weight: 600;
   letter-spacing: -0.5px;
   color: var(--tx);
}
.cf-form {
   display: flex;
   flex-direction: column;
   gap: 20px;
}
.cf-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
}
.cf-group {
   display: flex;
   flex-direction: column;
   gap: 8px;
}
.cf-label {
   font-size: 10px;
   font-weight: 500;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   color: var(--tx4);
}
.cf-input,
.cf-textarea {
   background: var(--bk4);
   border: 1px solid rgba(158, 30, 29, 0.2);
   border-radius: 10px;
   padding: 14px 16px;
   color: var(--tx2);
   font-family: var(--f);
   font-size: 14px;
   font-weight: 300;
   outline: none;
   transition: border-color .2s, box-shadow .2s;
   width: 100%;
}
.cf-input::placeholder,
.cf-textarea::placeholder {
   color: var(--tx5);
}
.cf-input:focus,
.cf-textarea:focus {
   border-color: var(--m);
   box-shadow: 0 0 0 3px rgba(158, 30, 29, 0.1);
}
.cf-textarea {
   resize: vertical;
   min-height: 140px;
}
.cf-error {
   font-size: 11px;
   color: #e05c4b;
}
.cf-btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 16px 36px;
   background: var(--grad);
   color: #fff;
   font-family: var(--f);
   font-size: 12px;
   font-weight: 600;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   border: none;
   border-radius: 10px;
   cursor: none;
   transition: opacity .2s, transform .2s;
   align-self: flex-start;
}
.cf-btn:hover {
   opacity: .88;
   transform: translateY(-1px);
}
.cf-success {
   background: rgba(39, 174, 96, 0.1);
   border: 1px solid rgba(39, 174, 96, 0.25);
   border-radius: 10px;
   padding: 16px 20px;
   font-size: 13px;
   color: #5dca87;
   margin-bottom: 20px;
}

/* Responsive */
@media (max-width: 1024px) {
   .contact-inner {
      grid-template-columns: 1fr;
      gap: 40px;
   }
}
@media (max-width: 768px) {
   .contact-hero-inner {
      grid-template-columns: 1fr;
      gap: 32px;
   }
   .cf-row {
      grid-template-columns: 1fr;
   }
   .contact-form-wrap {
      padding: 28px 20px;
   }
   .contact-map-wrap {
      height: 220px;
   }
}

/* ╔══════════════════════════════════════════════════════
   ║  MOBILE NAVIGATION — Hamburger + Drawer
   ╚══════════════════════════════════════════════════════ */

/* Hamburger button — hidden on desktop */
.nav-ham {
   display: none;
   flex-direction: column;
   justify-content: center;
   gap: 5px;
   background: none;
   border: none;
   cursor: pointer;
   padding: 6px 4px;
   z-index: 201;
   margin-left: 12px;
}
.nav-ham span {
   display: block;
   width: 22px;
   height: 1.5px;
   background: var(--tx);
   transition: transform .35s cubic-bezier(.23,1,.32,1), opacity .25s;
   transform-origin: center;
}
.nav-ham.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-ham.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-ham.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile drawer */
.mob-nav {
   position: fixed;
   top: 0;
   right: -100%;
   width: 82%;
   max-width: 320px;
   height: 100vh;
   background: #0c0c0c;
   border-left: 1px solid var(--bd);
   z-index: 9999;
   padding: 72px 36px 48px;
   transition: right .42s cubic-bezier(.23,1,.32,1);
   display: flex;
   flex-direction: column;
   gap: 0;
}
.mob-nav.open { right: 0; }

.mob-nav-close {
   position: absolute;
   top: 22px;
   right: 22px;
   background: none;
   border: 1px solid var(--bd);
   color: var(--tx3);
   font-size: 14px;
   width: 34px;
   height: 34px;
   border-radius: 50%;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: color .2s, border-color .2s;
}
.mob-nav-close:hover { color: var(--tx); border-color: var(--o); }

.mob-nav-links {
   list-style: none;
   display: flex;
   flex-direction: column;
   flex: 1;
   margin-top: 8px;
}
.mob-nav-links li a {
   display: block;
   padding: 16px 0;
   font-size: 20px;
   font-weight: 500;
   letter-spacing: -.02em;
   color: var(--tx3);
   text-decoration: none;
   border-bottom: 1px solid var(--bd);
   transition: color .2s, padding-left .25s;
}
.mob-nav-links li a:hover,
.mob-nav-links li a.active {
   color: var(--tx);
   padding-left: 10px;
}
.mob-nav-links li a.active { color: var(--o); }

.mob-nav-cta {
   display: block;
   margin-top: 28px;
   padding: 15px 24px;
   background: linear-gradient(90deg, #9E1E1D, #E57917);
   color: #fff;
   text-align: center;
   text-decoration: none;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: .15em;
   text-transform: uppercase;
   border-radius: 2px;
   transition: opacity .2s;
}
.mob-nav-cta:hover { opacity: .88; }

/* Overlay behind drawer */
.mob-nav-overlay {
   position: fixed;
   inset: 0;
   background: rgba(0,0,0,.72);
   z-index: 9998;
   opacity: 0;
   pointer-events: none;
   transition: opacity .42s;
}
.mob-nav-overlay.open {
   opacity: 1;
   pointer-events: all;
}

@media (max-width: 900px) {
   .nav-ham { display: flex; }
   .nav-btn  { display: none; }
}

/* ╔══════════════════════════════════════════════════════
   ║  480px — Small phones
   ╚══════════════════════════════════════════════════════ */
@media (max-width: 480px) {

   /* Global section padding */
   .sec { padding: 64px 20px; }

   /* Home hero */
   .hero-h1 { font-size: clamp(36px, 10vw, 52px); }
   .hero-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
   .hero-btns { flex-direction: column; gap: 12px; }
   .hero-btns a { width: 100%; text-align: center; }
   .scroll-nav { padding: 20px; gap: 12px; }
   .scroll-nav-item { min-width: 120px; }

   /* Studio hero */
   .hero-copy-side { padding: 48px 20px; }
   .hero-photo-side { min-height: 50vh; }
   .hero-nameplate { padding: 20px; }
   .hero-nameplate-name { font-size: 17px; }

   /* Story section */
   .story-h2 { font-size: clamp(28px, 8vw, 40px); }
   .strip-item .strip-num { font-size: clamp(28px, 8vw, 44px); }

   /* Story stats strip — 2×2 grid on small phones (4-in-a-row is too cramped) */
   .story-strip { flex-wrap: wrap; }
   .strip-item  { flex: 0 0 50%; box-sizing: border-box; border-bottom: 1px solid var(--bd); }
   .strip-item:nth-child(odd)  { border-right: 1px solid var(--bd); }
   .strip-item:nth-child(even) { border-right: none; }
   .strip-item:nth-child(3),
   .strip-item:nth-child(4)    { border-bottom: none; }

   /* Philosophy section — tighten heavy desktop spacing */
   .phil-head { margin-bottom: 40px; }
   .manifesto  { margin-bottom: 40px; }
   .mf-item    { padding: 28px 22px; }

   /* Founder letter — reduce padding */
   .letter-inner { padding: 28px 20px; }

   /* Leadership — reduce list item padding */
   .lead-list-item { padding: 14px 16px; }

   /* Story badge — keep inside the photo wrap */
   .story-badge { right: 12px; top: 12px; width: 72px; height: 72px; }
   .story-badge-num { font-size: 22px; }

   /* Values — tighter header gap */
   .values-head { margin-bottom: 32px; }
   .values-grid { grid-template-columns: 1fr; }

   /* Services hero */
   .svc-hero { padding: 120px 20px 60px; }
   .svc-hero h1 { font-size: clamp(32px, 9vw, 52px); }
   .svc-hero-stats { flex-direction: column; gap: 16px; }
   .svc-page-section, .svc-approach, .svc-cta { padding: 56px 20px; }
   .svc-cta-actions { flex-direction: column; }

   /* Work page */
   .work-hero { padding: 120px 20px 56px; }
   .work-hero h1 { font-size: clamp(32px, 9vw, 52px); }
   .work-hero-inner { flex-direction: column; gap: 24px; }
   .work-hero-right { max-width: 100%; }
   .work-filters { padding: 0 20px; }
   .work-page-section { padding: 48px 20px 64px; }

   /* Process page */
   .proc-page-hero { padding: 120px 20px 56px; }
   .proc-hero-metrics { grid-template-columns: 1fr 1fr; gap: 12px; }
   .proc-timeline-section, .proc-guarantees, .proc-faq, .proc-cta { padding: 56px 20px; }

   /* Contact page */
   .contact-hero { padding: 120px 20px 56px; }
   .cf-section { padding: 56px 20px; }
   .contact-form-wrap { padding: 24px 16px; }

   /* Footer */
   footer { padding: 36px 20px; flex-direction: column; gap: 20px; text-align: center; }
   .f-links { flex-wrap: wrap; justify-content: center; gap: 16px; }
   .f-social { gap: 16px; }

   /* Typography */
   .h-display { font-size: clamp(28px, 8vw, 42px); }
   .phil-h2   { font-size: clamp(26px, 7.5vw, 38px); }
   .cta-h2    { font-size: clamp(36px, 10vw, 56px); }

   /* Why section */
   .why-track { padding: 40px 20px; gap: 24px; }
   .why-item  { gap: 16px; padding: 24px 20px; }

   /* Value cards — reduce heavy desktop padding */
   .val-card { padding: 32px 24px; }
}