/* ============================================================
   URBAN CAMEL — website styles
   Palette, voice & imagery rules from Website Brand Guidelines, Edition 01
   ============================================================ */
:root{
  --paper:#F5F5F3;        /* primary surface, ~90% */
  --paper-deep:#EFEFEC;   /* cards, hover, inset fills */
  --cool-gray:#D9D9D7;    /* structure, panels, dividers ~8% */
  --ink:#131312;          /* body copy on light / dark sections */
  --black:#000000;        /* type, wordmark */
  --ash:#6B6B65;          /* secondary text, captions */
  --gold:#F0B923;         /* accent — rare punctuation ~2% */

  --font-display:"Poppins", sans-serif;
  --font-body:"Hanken Grotesk", sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --edge:clamp(28px, 5.2vw, 100px);   /* page margin — never fill to the edge */
  --rail:clamp(44px, 5vw, 80px);      /* right rail width */
  --ease:cubic-bezier(.22,.61,.36,1);

  /* tweakable — headline scale (default = Medium) */
  --h1:clamp(40px,5.4vw,86px);
  /* tweakable — section rhythm (default = Generous) */
  --sec-pad-top:clamp(80px,11vh,140px);
  --sec-pad-bottom:clamp(64px,9vh,120px);
  --stack-gap:clamp(54px,8vh,96px);
}
html[data-headline="sm"]{--h1:clamp(34px,4.3vw,64px);}
html[data-headline="md"]{--h1:clamp(40px,5.4vw,86px);}
html[data-headline="lg"]{--h1:clamp(48px,6.8vw,112px);}
html[data-rhythm="tight"]{--sec-pad-top:clamp(56px,7vh,92px);--sec-pad-bottom:clamp(48px,6vh,80px);--stack-gap:clamp(34px,5vh,60px);}
html[data-rhythm="generous"]{--sec-pad-top:clamp(80px,11vh,140px);--sec-pad-bottom:clamp(64px,9vh,120px);--stack-gap:clamp(54px,8vh,96px);}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
}
::selection{background:var(--ink);color:var(--paper);}
input,textarea,button{font-family:inherit;}

/* ---------- scroll spine ---------- */
.scroller{
  height:100vh;
  overflow-y:scroll;
  scroll-snap-type:y mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.scroller::-webkit-scrollbar{display:none;}
.chapter,.panorama{
  position:relative;
  min-height:100vh;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  display:flex;
  overflow:hidden;
}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--font-body);
  font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ash);
}
.mono{font-family:var(--font-mono);font-size:11px;letter-spacing:.02em;color:var(--ash);}

/* per-WORD reveal + fade-up.
   Animates TRANSFORM ONLY (opacity stays 1) so a paused animation in a
   hidden/throttled iframe or PDF capture only offsets content, never hides it.
   Base state is fully visible for reduced-motion / no-JS. */
.reveal-line{display:block;}
.reveal-line .word{display:inline-block;white-space:nowrap;margin-right:.15em;}
.reveal-line .word:last-child{margin-right:0;}
.reveal-line .ch{display:inline-block;will-change:transform;}
@media (prefers-reduced-motion: no-preference){
  .is-active .reveal-line .ch{animation:chIn 1.0s var(--ease) backwards;animation-delay:var(--chd,0s);}
  .is-active .rise{animation:riseIn 1.1s var(--ease) backwards;animation-delay:var(--d,0s);}
}
@keyframes chIn{from{transform:translateY(.46em);}to{transform:translateY(0);}}
@keyframes riseIn{from{transform:translateY(30px);}to{transform:translateY(0);}}

/* ---------- image placeholders (drop-in slots) ---------- */
.placeholder{
  position:relative;overflow:hidden;
  background:repeating-linear-gradient(135deg, var(--paper-deep) 0 11px, var(--cool-gray) 11px 12px);
}
.placeholder.on-dark{
  background:repeating-linear-gradient(135deg, #1c1b1a 0 11px, #262523 11px 12px);
}
.placeholder .ph-file{
  position:absolute;left:16px;top:16px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.02em;
  color:var(--ash);background:var(--paper);padding:5px 9px;max-width:80%;
}
.placeholder.on-dark .ph-file{color:rgba(245,245,243,.7);background:#131312;}
.placeholder .ph-ratio{
  position:absolute;right:16px;top:16px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--ash);background:var(--paper);padding:5px 8px;
}
.placeholder.on-dark .ph-ratio{color:rgba(245,245,243,.6);background:#131312;}

/* real photography — cool & monochrome treatment (imagery guide) */
.slot-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.22) contrast(1.02);}

/* ============================================================
   CHAPTER 01 — INDEX (hero)
   ============================================================ */
.hero{padding:clamp(96px,12vh,150px) var(--rail) clamp(40px,7vh,90px) var(--edge);}
.hero-grid{
  flex:1;display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  gap:clamp(32px,5vw,80px);align-items:center;
}
.hero-copy{max-width:none;}
.hero-eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:clamp(26px,5vh,46px);}
.hero-eyebrow .seq{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--ink);}
.hero-eyebrow .bar{width:34px;height:1px;background:var(--cool-gray);}
.hero-eyebrow .gdot{width:7px;height:7px;border-radius:50%;background:var(--gold);display:none;}

h1.hero-title{
  font-family:var(--font-display);font-weight:400;
  font-size:var(--h1);line-height:.98;letter-spacing:-0.035em;color:var(--black);
}
h1.hero-title .soft{color:var(--ash);font-weight:300;}
.hero-sub{
  margin-top:clamp(26px,4vh,42px);max-width:40ch;
  font-size:clamp(15px,1.15vw,18px);line-height:1.62;color:var(--ash);font-weight:400;
}
.hero-meta{margin-top:clamp(30px,5vh,52px);display:flex;gap:clamp(28px,4vw,56px);flex-wrap:wrap;}
.hero-meta .item .k{display:block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ash);margin-bottom:7px;}
.hero-meta .item .v{font-family:var(--font-display);font-weight:500;font-size:15px;color:var(--ink);letter-spacing:-0.01em;}

.hero-frame{
  position:relative;align-self:stretch;
  margin:clamp(8px,3vh,28px) calc(-1 * var(--rail)) calc(-1 * clamp(40px,7vh,90px)) 0;
  min-height:0;
}
.hero-frame .placeholder{position:absolute;inset:0;}

.cue{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(30px,5vh,52px);
  font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ash);}
.cue .line{width:46px;height:1px;background:var(--cool-gray);position:relative;overflow:hidden;}
.cue .line::after{content:"";position:absolute;inset:0;background:var(--ink);transform:translateX(-100%);animation:sweep 2.6s var(--ease) infinite;}
@keyframes sweep{0%{transform:translateX(-100%);}55%{transform:translateX(0);}100%{transform:translateX(100%);}}

/* ============================================================
   CHAPTER 02 — APPROACH (dark)
   ============================================================ */
.approach{
  background:var(--ink);color:var(--paper);
  padding:var(--sec-pad-top) var(--rail) var(--sec-pad-bottom) var(--edge);
  flex-direction:column;justify-content:center;
}
.approach ::selection{background:var(--paper);color:var(--ink);}
.approach .bg-slot{position:absolute;inset:0;z-index:0;overflow:hidden;}
.approach .bg-slot .slot-img{filter:grayscale(.3) brightness(.92);object-position:center right;}
.approach .bg-slot::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 0%, rgba(19,19,18,.84) 40%, rgba(19,19,18,.4) 100%);}
.approach > *{position:relative;z-index:1;}
.approach .eyebrow{color:rgba(245,245,243,.55);}
.approach .lead{
  font-family:var(--font-display);font-weight:300;
  font-size:var(--h1);line-height:1.02;letter-spacing:-0.03em;
  max-width:17ch;margin:clamp(24px,4vh,40px) 0 var(--stack-gap);color:var(--paper);
}
.principle-row{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,48px);
  border-top:1px solid rgba(245,245,243,.16);padding-top:clamp(22px,3vh,34px);
}
.principle{max-width:30ch;}
.principle .num{font-family:var(--font-mono);font-size:11px;color:rgba(245,245,243,.5);letter-spacing:.05em;}
.principle h3{font-family:var(--font-display);font-weight:500;font-size:clamp(17px,1.5vw,22px);margin:14px 0 10px;letter-spacing:-0.01em;}
.principle p{font-size:13.5px;line-height:1.6;color:rgba(245,245,243,.6);}

/* ============================================================
   CHAPTER 03 — WORK (light)
   ============================================================ */
.work{
  background:var(--paper);flex-direction:column;justify-content:center;
  padding:var(--sec-pad-top) var(--rail) var(--sec-pad-bottom) var(--edge);
}
.work-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:clamp(34px,5vh,64px);}
.work-head .title{font-family:var(--font-display);font-weight:400;font-size:clamp(22px,2.3vw,34px);letter-spacing:-0.02em;color:var(--ink);}
.work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,40px);align-items:start;}
.work-item{display:flex;flex-direction:column;}
.work-item .frame{position:relative;width:100%;}
.work-item .frame .placeholder{position:absolute;inset:0;}
.work-item .r169{aspect-ratio:16/9;}
.work-item .r11{aspect-ratio:1/1;}
.work-meta{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-top:18px;}
.work-meta .type{font-family:var(--font-display);font-weight:500;font-size:clamp(15px,1.25vw,19px);color:var(--ink);letter-spacing:-0.01em;}
.work-meta .client{font-size:12.5px;color:var(--ash);margin-top:5px;letter-spacing:.01em;}
.work-meta .year{font-family:var(--font-mono);font-size:11px;color:var(--ash);white-space:nowrap;padding-top:3px;}
.work-tag{display:inline-flex;align-items:center;gap:7px;margin-bottom:13px;
  font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);}
.work-tag .gdot{width:6px;height:6px;border-radius:50%;background:var(--gold);}

/* ============================================================
   CHAPTER 04 — CAPABILITIES + ENQUIRE (split)
   ============================================================ */
.cap{padding:0;flex-direction:row;}
.cap .half{min-height:100vh;display:flex;flex-direction:column;justify-content:center;}
.cap .left{flex:1.05;background:var(--paper);padding:var(--sec-pad-top) clamp(40px,4vw,72px) var(--sec-pad-bottom) var(--edge);}
.cap .right{flex:.95;background:var(--ink);color:var(--paper);padding:var(--sec-pad-top) var(--rail) var(--sec-pad-bottom) clamp(40px,4vw,72px);}
html[data-dark="02"] .cap .right{background:var(--paper);color:var(--ink);border-left:1px solid var(--cool-gray);}
.cap .right ::selection{background:var(--paper);color:var(--ink);}

.cap-list{list-style:none;margin-top:clamp(26px,4vh,44px);}
.cap-list li{
  display:flex;align-items:baseline;gap:18px;
  padding:clamp(11px,1.5vh,18px) 0;border-top:1px solid var(--cool-gray);
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(24px,2.9vw,46px);letter-spacing:-0.025em;color:var(--ink);
}
.cap-list li:last-child{border-bottom:1px solid var(--cool-gray);}
.cap-list li .n{font-family:var(--font-mono);font-size:12px;font-weight:400;color:var(--ash);letter-spacing:0;align-self:center;}

.enq-eyebrow{color:rgba(245,245,243,.55);}
html[data-dark="02"] .cap .right .enq-eyebrow{color:var(--ash);}
.enq-title{font-family:var(--font-display);font-weight:300;font-size:clamp(26px,3vw,44px);letter-spacing:-0.03em;margin:clamp(16px,2.5vh,26px) 0 clamp(28px,4vh,44px);line-height:1.05;}
.enq-form{display:flex;flex-direction:column;gap:clamp(18px,2.6vh,28px);max-width:440px;}
.field{display:flex;flex-direction:column;gap:9px;}
.field label{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,245,243,.5);}
html[data-dark="02"] .cap .right .field label{color:var(--ash);}
.field input,.field textarea{
  background:transparent;border:0;border-bottom:1px solid rgba(245,245,243,.28);
  color:var(--paper);font-size:16px;padding:9px 0;line-height:1.45;
  transition:border-color .35s var(--ease);
}
html[data-dark="02"] .cap .right .field input,html[data-dark="02"] .cap .right .field textarea{color:var(--ink);border-bottom-color:var(--cool-gray);}
.field textarea{resize:none;min-height:74px;}
.field input::placeholder,.field textarea::placeholder{color:rgba(245,245,243,.32);}
html[data-dark="02"] .cap .right .field input::placeholder,html[data-dark="02"] .cap .right .field textarea::placeholder{color:var(--cool-gray);}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--paper);}
html[data-dark="02"] .cap .right .field input:focus,html[data-dark="02"] .cap .right .field textarea:focus{border-bottom-color:var(--ink);}
.btn-send{
  align-self:flex-start;margin-top:6px;
  background:var(--black);color:var(--paper);
  border:1px solid rgba(245,245,243,.22);
  padding:15px 30px;border-radius:999px;cursor:pointer;
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:12px;
  transition:background .4s var(--ease),color .4s var(--ease),gap .4s var(--ease);
}
.btn-send:hover{background:var(--paper);color:var(--ink);gap:18px;}
.btn-send svg{width:15px;height:15px;}
.enq-done{font-size:14px;color:rgba(245,245,243,.7);line-height:1.6;}
html[data-dark="02"] .cap .right .enq-done{color:var(--ash);}

/* ============================================================
   GLOBAL PANORAMA — dubai-aerial.jpeg (full-bleed interstitial)
   ============================================================ */
.panorama{position:relative;align-items:flex-end;color:var(--paper);overflow:hidden;}
.panorama .slot-img{filter:grayscale(.28) brightness(.82) contrast(1.03);z-index:0;}
.panorama::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(10,10,12,.42) 0%, rgba(10,10,12,.12) 42%, rgba(10,10,12,.74) 100%);}
.panorama ::selection{background:var(--paper);color:var(--ink);}
.panorama .pano-inner{position:relative;z-index:2;width:100%;
  padding:0 var(--rail) clamp(90px,16vh,200px) var(--edge);}
.panorama .eyebrow{color:rgba(245,245,243,.62);}
.panorama .pano-title{font-family:var(--font-display);font-weight:300;
  font-size:var(--h1);line-height:1.0;letter-spacing:-0.03em;max-width:20ch;
  margin-top:clamp(16px,2.5vh,28px);color:var(--paper);}
.panorama .pano-meta{display:flex;gap:clamp(28px,4vw,60px);margin-top:clamp(24px,4vh,44px);flex-wrap:wrap;}
.panorama .pano-meta .k{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,245,243,.5);margin-bottom:7px;}
.panorama .pano-meta .v{font-family:var(--font-display);font-weight:500;font-size:15px;color:var(--paper);letter-spacing:-0.01em;}

/* ============================================================
   FIXED CHROME — topbar, nav, rail, vertical label, wipe
   ============================================================ */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(22px,3.4vh,34px) var(--edge);pointer-events:none;
}
.topbar > *{pointer-events:auto;}
.wordmark{font-family:var(--font-display);font-weight:600;font-size:18px;letter-spacing:-0.02em;color:var(--ink);text-decoration:none;transition:color .6s var(--ease);}
.topbar .util{display:flex;align-items:center;gap:26px;}
.topbar .util a{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ash);text-decoration:none;transition:color .35s var(--ease);}
.topbar .util a:hover{color:var(--ink);}

body.on-dark .wordmark{color:var(--paper);}
body.on-dark .topbar .util a{color:rgba(245,245,243,.55);}
body.on-dark .topbar .util a:hover{color:var(--paper);}
body.on-dark .v-label{color:var(--paper);}
body.on-dark .v-label .tick{background:rgba(245,245,243,.3);}
body.on-dark .scroll-btn{color:var(--paper);border-color:rgba(245,245,243,.22);}
body.on-dark .pill-nav{background:rgba(20,19,18,.55);border-color:rgba(245,245,243,.14);}
body.on-dark .pill-nav a{color:rgba(245,245,243,.55);}
body.on-dark .pill-nav a:hover,body.on-dark .pill-nav a.active{color:var(--paper);}
body.on-dark .rail .count{color:rgba(245,245,243,.5);}
body.on-dark .rail .count .cur{color:var(--paper);}

.v-label{
  position:fixed;left:max(14px,calc(var(--edge) - 30px));bottom:clamp(120px,20vh,200px);z-index:35;
  writing-mode:vertical-rl;transform:rotate(180deg);
  display:flex;align-items:center;gap:14px;
  font-size:11px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--ash);
  transition:color .6s var(--ease);
}
.v-label .tick{width:1px;height:46px;background:var(--cool-gray);transition:background .6s var(--ease);}

.rail{position:fixed;right:clamp(18px,calc(var(--rail)/2 - 26px),34px);bottom:clamp(34px,6vh,60px);z-index:35;display:flex;flex-direction:column;align-items:center;gap:18px;}
.scroll-btn{
  width:52px;height:52px;border-radius:50%;border:1px solid var(--cool-gray);background:transparent;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);
  transition:background .4s var(--ease),color .4s var(--ease),transform .5s var(--ease),border-color .5s var(--ease);
}
.scroll-btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
body.on-dark .scroll-btn:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);}
.scroll-btn svg{width:16px;height:16px;display:block;transition:transform .5s var(--ease);}
.scroll-btn.to-top svg{transform:rotate(180deg);}
.rail .count{font-family:var(--font-mono);font-size:11px;color:var(--ash);letter-spacing:.05em;}
.rail .count .cur{color:var(--ink);}

.pill-nav{
  position:fixed;left:50%;bottom:clamp(22px,3.4vh,34px);transform:translateX(-50%);z-index:38;
  display:flex;align-items:center;gap:4px;padding:7px 9px;border-radius:999px;
  background:rgba(245,245,243,.72);border:1px solid var(--cool-gray);
  backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);
  transition:background .6s var(--ease),border-color .6s var(--ease);
}
.pill-nav a{position:relative;display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
  font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ash);text-decoration:none;transition:color .35s var(--ease);}
.pill-nav a .dot{width:5px;height:5px;border-radius:50%;background:transparent;transition:background .35s var(--ease),transform .35s var(--ease);transform:scale(.4);}
.pill-nav a:hover{color:var(--ink);}
.pill-nav a.active{color:var(--ink);}
/* gold nav dot — shown only when accent placement includes Nav */
html[data-accent="nav"] .pill-nav a.active .dot,
html[data-accent="both"] .pill-nav a.active .dot{background:var(--gold);transform:scale(1);}
/* gold hero marker — shown only when accent placement includes Hero */
html[data-accent="hero"] .hero-eyebrow .gdot,
html[data-accent="both"] .hero-eyebrow .gdot{display:block;}

/* fabric-transition-wipe.mp4 — placeholder slot.
   A full-viewport panel sweeps across on programmatic chapter jumps; drop the
   video in #wipe (object-fit:cover) to replace the solid sweep. */
.wipe{position:fixed;inset:0;z-index:60;pointer-events:none;transform:translateX(-101%);
  background:var(--paper) center/cover no-repeat;display:flex;align-items:center;justify-content:center;}
.wipe.cover{transition:transform .5s cubic-bezier(.7,0,.3,1);transform:translateX(0);}
.wipe.exit{transition:transform .5s cubic-bezier(.7,0,.3,1);transform:translateX(101%);}
.wipe .wipe-cap{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--ink);
  background:rgba(245,245,243,.85);padding:7px 13px;border-radius:999px;
  opacity:0;transition:opacity .25s var(--ease) .12s;}
.wipe.cover .wipe-cap{opacity:1;}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:0;align-content:center;}
  .hero-frame{display:none;}
  .principle-row{grid-template-columns:repeat(2,1fr);gap:34px 26px;}
  .work-grid{grid-template-columns:1fr;gap:34px;}
  .work-item .frame .placeholder,.work-item .r11,.work-item .r169{aspect-ratio:16/9;}
  .cap{flex-direction:column;}
  .cap .half{min-height:auto;}
}
@media(max-width:720px){
  .pill-nav a .lbl{display:none;}
  .pill-nav a.active .lbl{display:inline;}
  .pill-nav a{padding:9px 12px;}
}