/* =========================================================
   PORTFOLIO MG — visual system
   Editorial · cinematic · warm minimalism
   ========================================================= */

:root{
  --paper: #efe9dd;          /* warm cream — primary bg */
  --paper-2:#e6dfcf;         /* slightly cooler */
  --paper-3:#dfd6c2;
  --ink:   #14110d;          /* near black */
  --ink-2: #2a2520;
  --mid:   #5a544a;          /* muted brown-gray */
  --dim:   #8a8378;
  --rule:  rgba(20,17,13,.14);
  --rule-strong: rgba(20,17,13,.45);
  --accent:#b8956a;           /* champagne */
  --accent-2:#7a5a35;

  --stage: #14110d;
  --stage-2:#1c1814;
  --paper-on-stage: #efe9dd;
  --rule-on-stage: rgba(239,233,221,.16);

  --gutter: clamp(20px, 3.6vw, 56px);
  --col: clamp(28px, 4.4vw, 88px);
  --section-y: clamp(80px, 12vw, 168px);

  --f-display: "Archivo Black", "Helvetica Neue", system-ui, sans-serif;
  --f-sub: "Inter Tight", "Inter", system-ui, sans-serif;
  --f-body: "Inter", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --f-serif: "Instrument Serif", "Times New Roman", serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0;}

::selection{background:var(--ink);color:var(--paper);}

/* =========================================================
   Type primitives
   ========================================================= */
.display{
  font-family:var(--f-display);
  font-weight:400;
  letter-spacing:-0.02em;
  line-height:.92;
  text-transform:none;
}
.display-xxl{ font-size:clamp(64px, 12vw, 220px); letter-spacing:-0.035em; line-height:.86; }
.display-xl { font-size:clamp(54px, 9.4vw, 168px); letter-spacing:-0.03em;  line-height:.88; }
.display-lg { font-size:clamp(40px, 7vw, 120px);   letter-spacing:-0.025em; line-height:.92; }
.display-md { font-size:clamp(34px, 5vw,  84px);   letter-spacing:-0.02em;  line-height:.94; }
.display-sm { font-size:clamp(24px, 3.4vw, 56px);  letter-spacing:-0.015em; line-height:1;   }

.serif-it{
  font-family:var(--f-serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:-0.005em;
}

.mono{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mid);
  font-weight:400;
}
.mono.lg{font-size:12px;}
.mono.sm{font-size:10px;letter-spacing:.22em;}
.mono.on-stage{color:rgba(239,233,221,.62);}
.mono.accent{color:var(--accent-2);}

.lede{
  font-family:var(--f-sub);
  font-size:clamp(17px, 1.5vw, 22px);
  line-height:1.45;
  color:var(--ink-2);
  font-weight:400;
  letter-spacing:-0.005em;
  max-width:50ch;
}

.body{
  font-family:var(--f-body);
  font-size:15px;
  line-height:1.65;
  color:var(--ink-2);
  max-width:62ch;
}
.body.lg{font-size:16.5px;}

/* =========================================================
   Layout
   ========================================================= */
.wrap{
  width:100%;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
  margin:0 auto;
  max-width:1680px;
}
section{
  position:relative;
  padding-top:var(--section-y);
  padding-bottom:var(--section-y);
}
section.stage{background:var(--stage);color:var(--paper-on-stage);}
section + section{ border-top:1px solid var(--rule); }
section.stage + section, section + section.stage{ border-top:none; }

.rule{height:1px;background:var(--rule);border:0;margin:0;}
.rule.strong{background:var(--rule-strong);}
.rule.on-stage{background:rgba(239,233,221,.18);}

.section-tag{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-bottom:24px;
}
.section-tag .num{font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mid);}
.section-tag .end{font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mid);}

/* =========================================================
   Sticky Nav
   ========================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;
  padding:22px var(--gutter);
  color:var(--paper-on-stage);
  transition:background .35s ease, color .35s ease, padding .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
.nav.solid{
  background:rgba(239,233,221,.92);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  color:var(--ink);
  border-bottom-color:var(--rule);
  padding-top:14px;padding-bottom:14px;
}
.nav .wordmark{
  font-family:var(--f-display);
  font-size:clamp(20px,1.8vw,26px);
  letter-spacing:-0.02em;
  line-height:1;
  margin-right:auto;
}
.nav .wordmark .dot{display:inline-block;width:8px;height:8px;background:var(--accent);border-radius:50%;margin-left:6px;transform:translateY(-1px);}
.nav .links{
  display:flex;align-items:center;gap:clamp(14px,1.8vw,28px);
}
.nav .links a{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  position:relative;padding:6px 0;
}
.nav .links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;background:currentColor;transition:right .35s ease;
}
.nav .links a:hover::after{right:0;}
.nav .cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border:1px solid currentColor;border-radius:999px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  transition:background .25s ease, color .25s ease;
}
.nav .cta:hover{background:currentColor;color:var(--paper);}
.nav.solid .cta:hover{background:var(--ink);color:var(--paper);}

@media (max-width: 760px){
  .nav .links a:not(.cta){display:none;}
}

/* =========================================================
   HERO — variant C off-axis with stat ribbon
   ========================================================= */
.hero{
  position:relative;height:100vh;min-height:620px;
  background:var(--stage);color:var(--paper-on-stage);
  overflow:hidden;
  padding-top:0;padding-bottom:0;
}
.hero .video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.9) contrast(1.02) brightness(.86);
  z-index:1;
}
.hero .veil{
  position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(180deg, rgba(20,17,13,.45) 0%, rgba(20,17,13,.05) 22%, rgba(20,17,13,.05) 55%, rgba(20,17,13,.75) 100%),
    radial-gradient(900px 600px at 70% 110%, rgba(20,17,13,.55), transparent 60%);
}
.hero .grain{
  position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.18;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.hero .frame{
  position:relative;z-index:4;height:100%;
  padding:96px var(--gutter) 0;
  display:grid;grid-template-rows:auto 1fr auto auto;
  gap:24px;
}
.hero .frame .top{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
}
.hero .frame .top .mono{color:rgba(239,233,221,.62);}
.hero .frame .top .lang{display:flex;gap:14px;}
.hero .frame .top .lang span{position:relative;}
.hero .frame .top .lang span + span::before{
  content:"·";position:absolute;left:-9px;top:0;
}

.hero .composition{
  align-self:end;
  display:grid;grid-template-columns:1.5fr 1fr;gap:48px;align-items:end;
  padding-bottom:32px;
}
.hero h1.headline{
  margin:0;color:var(--paper-on-stage);
  max-width:18ch;
  font-size:clamp(34px, 5vw, 80px);
  line-height:.96;
  letter-spacing:-0.025em;
  text-wrap:balance;
}
.hero h1.headline br{display:inline;}
.hero h1.headline .accent{ color:var(--accent); }
.hero h1.headline .serif{ font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-0.01em; }

.hero .ctaBlock{
  display:flex;flex-direction:column;gap:18px;align-items:flex-end;text-align:right;
}
.hero .ctaBlock .pills{
  display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;
}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;border-radius:999px;border:1px solid var(--paper);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--paper);
  transition:background .25s ease,color .25s ease,transform .25s ease;
}
.btn:hover{background:var(--paper);color:var(--ink);transform:translateY(-1px);}
.btn.primary{background:var(--paper);color:var(--ink);}
.btn.primary:hover{background:var(--accent);border-color:var(--accent);color:var(--ink);}
.btn.dark{border-color:var(--ink);color:var(--ink);}
.btn.dark:hover{background:var(--ink);color:var(--paper);}
.btn.dark.primary{background:var(--ink);color:var(--paper);}
.btn.dark.primary:hover{background:var(--accent-2);border-color:var(--accent-2);color:var(--paper);}
.btn .arrow{display:inline-block;transition:transform .3s ease;}
.btn:hover .arrow{transform:translateX(4px);}

.hero .ribbon{
  border-top:1px solid rgba(239,233,221,.2);
  padding:16px 0 18px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.hero .ribbon .cell{display:flex;flex-direction:column;gap:2px;}
.hero .ribbon .cell .k{font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(239,233,221,.55);}
.hero .ribbon .cell .v{font-family:var(--f-sub);font-size:15px;font-weight:500;color:var(--paper);}

.hero .scroll-cue{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;z-index:5;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(239,233,221,.6);
}
.hero .scroll-cue .line{width:1px;height:38px;background:rgba(239,233,221,.5);animation:scrollPulse 2.4s ease-in-out infinite;}
@keyframes scrollPulse{
  0%,100%{transform:scaleY(.2);transform-origin:top;opacity:.4;}
  50%{transform:scaleY(1);transform-origin:top;opacity:1;}
}

@media (max-width:900px){
  .hero .composition{grid-template-columns:1fr;gap:20px;}
  .hero .ctaBlock{align-items:flex-start;text-align:left;}
  .hero .ctaBlock .pills{justify-content:flex-start;}
}

/* =========================================================
   ABOUT — manifesto + horizontal year-line + index
   ========================================================= */
.about-grid{
  display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:start;
  margin-top:32px;margin-bottom:48px;
}
.about-grid h2.manifesto{margin:0;}
.about-grid .copy{display:flex;flex-direction:column;gap:18px;padding-top:18px;}
.about-grid .copy .pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.pill{
  display:inline-flex;align-items:center;
  padding:6px 12px;border:1px solid var(--rule-strong);border-radius:999px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);
}
.pill.accent{background:var(--accent);color:var(--ink);border-color:var(--accent);}
.pill.solid{background:var(--ink);color:var(--paper);border-color:var(--ink);}

/* timeline */
.timeline-wrap{margin-top:60px;}
.timeline-head{
  display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:28px;
}
.timeline{
  position:relative;padding-top:80px;padding-bottom:8px;
  border-bottom:1px solid var(--rule-strong);
}
.timeline-track{position:relative;height:1px;background:var(--rule-strong);}
.timeline-node{
  position:absolute;top:-6px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  transform:translateX(-50%);
}
.timeline-node .dot{
  width:13px;height:13px;border-radius:50%;background:var(--ink);
  border:2px solid var(--paper);box-shadow:0 0 0 1px var(--ink);
  transition:transform .25s ease;
}
.timeline-node:hover .dot{transform:scale(1.4);}
.timeline-node.active .dot{background:var(--accent);box-shadow:0 0 0 1px var(--accent-2);}
.timeline-node .stem{position:absolute;left:50%;top:13px;width:1px;background:var(--ink-2);opacity:.45;}
.timeline-node .year{
  position:absolute;left:50%;transform:translateX(-50%);
  font-family:var(--f-display);letter-spacing:-0.03em;
  font-size:clamp(28px, 3.6vw, 56px);line-height:.9;color:var(--ink);
  white-space:nowrap;
}
.timeline-node .role{
  position:absolute;left:50%;transform:translateX(-50%);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mid);
  white-space:nowrap;
}
/* alternating top/bottom labels */
.timeline-node.top .year{ bottom:32px; }
.timeline-node.top .role{ bottom:18px; }
.timeline-node.top .stem{ bottom:13px; height:32px; top:auto;}

.timeline-node.bottom .year{ top:24px; }
.timeline-node.bottom .role{ top:84px; }
.timeline-node.bottom .stem{ top:13px; height:22px; }

.timeline-detail{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:32px;margin-top:80px;
}
.timeline-detail .col h4{
  margin:0 0 12px;font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mid);
}
.timeline-detail .col p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.65;}
.timeline-detail .col p + p{margin-top:8px;}
.timeline-detail .col strong{font-weight:600;color:var(--ink);}

/* index grid (skills/tools/langs) */
.about-index{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;
  border-top:1px solid var(--rule-strong);padding-top:48px;margin-top:80px;
}
.about-index .col h4{
  margin:0 0 16px;font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mid);
}
.about-index .col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;}
.about-index .col li{font-family:var(--f-sub);font-size:15px;color:var(--ink);line-height:1.5;display:flex;justify-content:space-between;gap:8px;}
.about-index .col li .level{font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;color:var(--mid);text-transform:uppercase;}

@media (max-width: 900px){
  .about-grid{grid-template-columns:1fr;gap:24px;}
  .timeline-detail{grid-template-columns:1fr;}
  .about-index{grid-template-columns:1fr 1fr;}
}

/* =========================================================
   SERVICES — horizontal hover-expand
   ========================================================= */
.services{background:var(--paper);}
#services{padding-top:48px;}

.services-head{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:56px;}
.services-row{
  display:flex;width:100%;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
  height:clamp(560px, 70vh, 780px);
  overflow:hidden;
}
.svc{
  flex:1 1 0;min-width:0;
  position:relative;border-right:1px solid var(--ink);
  padding:36px 28px;display:flex;flex-direction:column;justify-content:space-between;gap:18px;
  transition:flex-grow .55s cubic-bezier(.22,.61,.36,1), background .35s ease, color .35s ease;
  cursor:pointer;overflow:hidden;
}
.svc:last-child{border-right:none;}
.svc .num{font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mid);}
.svc .title{
  font-family:var(--f-display);
  font-size:clamp(32px, 3.4vw, 56px);
  letter-spacing:-0.02em;line-height:.95;
  writing-mode:vertical-rl;transform:rotate(180deg);
  transition:writing-mode .35s ease, transform .35s ease, font-size .35s ease;
  align-self:flex-start;
}
/* In the collapsed vertical state, shrink the title font so long names fit */
.svc:not(:hover):not(.is-open) .title{
  font-size:clamp(22px, 2.2vw, 30px);
  letter-spacing:-0.01em;
}
.svc .reveal{
  opacity:0;transform:translateY(8px);transition:opacity .35s ease .05s, transform .4s ease .05s;
  display:flex;flex-direction:column;gap:14px;
  max-width:46ch;
}
.svc .reveal .lede{color:var(--ink-2);font-size:17px;line-height:1.5;}
.svc .reveal .value{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-2);
}
.svc .reveal .emotion{
  font-family:var(--f-serif);font-style:italic;font-size:18px;color:var(--ink);
}
.svc .reveal ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;}
.svc .reveal ul li{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mid);
  padding:5px 10px;border:1px solid var(--rule-strong);border-radius:999px;
}
.svc-row .svc.is-open,
.svc:hover{
  flex:3.2 1 0;background:var(--paper-2);
}
.svc:hover .title,.svc.is-open .title{
  writing-mode:horizontal-tb;transform:rotate(0deg);
}
.svc:hover .reveal,.svc.is-open .reveal{opacity:1;transform:translateY(0);}

.svc.dark{background:var(--stage);color:var(--paper-on-stage);}
.svc.dark .num,.svc.dark .reveal .lede{color:rgba(239,233,221,.7);}
.svc.dark:hover,.svc.dark.is-open{background:var(--stage-2);}
.svc.dark .reveal .emotion{color:var(--paper);}
.svc.dark .reveal ul li{border-color:rgba(239,233,221,.3);color:rgba(239,233,221,.75);}
.svc.dark .reveal .value{color:var(--accent);}

/* Services → portfolio cross-link */
.svc .reveal .svc-link{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;margin-top:2px;
  padding-top:12px;border-top:1px solid var(--rule-strong);
  align-self:flex-start;transition:gap .25s ease,color .25s ease;
}
.svc .reveal .svc-link .arrow{transition:transform .25s ease;}
.svc .reveal .svc-link:hover{color:var(--accent-2);gap:12px;}
.svc .reveal .svc-link:hover .arrow{transform:translate(2px,-2px);}
.svc.dark .reveal .svc-link{color:var(--paper);border-color:rgba(239,233,221,.3);}
.svc.dark .reveal .svc-link:hover{color:var(--accent);}
/* the Design link points into draft-only content — hide it for public */
html:not(.show-draft) .svc-link--draft{display:none;}

/* Draft / hidden-from-public content.
   [data-draft] starts with the [hidden] attr; the visibility script
   removes [hidden] only when the site is in draft mode. */
.draft-flag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-2);border:1px dashed var(--accent-2);border-radius:999px;
  padding:6px 14px;margin-bottom:20px;
}

/* Services — closing CTA */
.services-cta{
  display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;
  padding:48px 0 8px;
}
.services-cta .services-cta-line{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mid);
}
@media (max-width:560px){
  .services-cta{flex-direction:column;gap:18px;}
}

@media (max-width: 900px){
  .services-row{
    flex-direction:column;
    height:auto;
    overflow:visible;       /* don't clip column content */
  }
  .svc{
    flex:0 0 auto;          /* size to content, not flex ratio */
    height:auto;
    overflow:visible;
    border-right:none;
    border-bottom:1px solid var(--ink);
    padding:28px 22px;
  }
  .svc:last-child{border-bottom:none;}
  .svc .title{
    writing-mode:horizontal-tb;
    transform:none;
    font-size:clamp(28px, 7vw, 42px);
  }
  /* always show content on mobile — no hover needed */
  .svc .reveal{
    opacity:1 !important;
    transform:none !important;
    height:auto;
    overflow:visible;
  }
  /* all items same weight on mobile */
  .svc,.svc.is-open,.svc:hover{flex:0 0 auto;background:transparent;}
  .svc.dark,.svc.dark.is-open,.svc.dark:hover{background:var(--stage);}
  .services-head{grid-template-columns:1fr;}
}

/* =========================================================
   PORTFOLIO — asymmetric grids
   ========================================================= */
.portfolio-intro{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:64px;}
.cat-head{
  display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:24px;
  border-bottom:1px solid var(--rule-strong);padding-bottom:18px;margin:32px 0 56px;
}
.cat-head .cat-num{
  font-family:var(--f-display);font-size:clamp(32px,4vw,64px);letter-spacing:-0.02em;line-height:.9;color:var(--ink);
}
.cat-head .cat-name{
  font-family:var(--f-display);font-size:clamp(32px,4vw,64px);letter-spacing:-0.02em;line-height:.9;
}
.cat-head .cat-meta{font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mid);text-align:right;}

.case{
  margin-bottom:120px;display:grid;grid-template-columns:1fr 1.4fr;gap:0;
  container-type:inline-size;
}
.case .left{
  border-right:1px solid var(--rule-strong);padding:24px 36px 24px 0;
  display:flex;flex-direction:column;justify-content:space-between;gap:36px;
}
.case .left h3.case-title{
  margin:0;
}
.case .left .case-body{display:flex;flex-direction:column;gap:14px;}
.case .left .case-body .label{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mid);}
.case .left .case-body p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.65;}
.case .left .case-chapters{display:flex;flex-direction:column;gap:6px;align-items:flex-start;margin-top:auto;}

.case .right{
  padding-left:36px;
  display:grid;grid-template-columns:repeat(6, 1fr);
  /* Rows AND gap scale together against the .case container's inline size
     (cqi resolves to the nearest container ancestor — which is .case).
     .right is ~58% of .case, so 6.25cqi @ caseW=1280 → row ≈80px @ rightW≈745px.
     Keeps tile aspect ratios constant across screen widths. */
  grid-auto-rows:clamp(42px, 6.25cqi, 80px);
  gap:clamp(4.2px, 0.625cqi, 8px);
}

/* image / video placeholders */
.tile{
  position:relative;overflow:hidden;background:var(--paper-3);
  display:flex;align-items:flex-end;justify-content:flex-start;color:var(--mid);
  border-radius:1px;
}
.tile::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(135deg, rgba(20,17,13,.06), rgba(20,17,13,0) 60%),
    repeating-linear-gradient(45deg, rgba(20,17,13,.06) 0 1px, transparent 1px 8px);
}
.tile .label{
  position:relative;z-index:2;padding:10px 12px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mid);
  background:linear-gradient(0deg, rgba(239,233,221,.85), transparent);width:100%;
}
.tile.warm::before{background:repeating-linear-gradient(45deg, rgba(184,149,106,.18) 0 1px, transparent 1px 8px), linear-gradient(135deg, #c9a880, #b8956a);}
.tile.warm .label{color:var(--ink-2);}
.tile.dark{background:#22201c;color:rgba(239,233,221,.7);}
.tile.dark::before{background:repeating-linear-gradient(45deg, rgba(239,233,221,.06) 0 1px, transparent 1px 8px);}
.tile.dark .label{background:linear-gradient(0deg, rgba(20,17,13,.85), transparent);color:rgba(239,233,221,.7);}
.tile.olive{background:#5e5b4a;color:rgba(239,233,221,.7);}
.tile.olive::before{background:repeating-linear-gradient(45deg, rgba(239,233,221,.06) 0 1px, transparent 1px 8px);}
.tile.olive .label{background:linear-gradient(0deg, rgba(20,17,13,.55), transparent);color:rgba(239,233,221,.7);}
.tile.rose{background:#c6a094;color:var(--ink-2);}
.tile.rose::before{background:repeating-linear-gradient(45deg, rgba(20,17,13,.06) 0 1px, transparent 1px 8px);}
.tile.video::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:0;height:0;border-style:solid;border-width:14px 0 14px 22px;
  border-color:transparent transparent transparent currentColor;opacity:.85;
}

.case .right .tile{ grid-column:span 3; grid-row:span 3; }
.case .right .tile.tall{ grid-column:span 2; grid-row:span 4; }
.case .right .tile.wide{ grid-column:span 6; grid-row:span 2; }
.case .right .tile.square{ grid-column:span 2; grid-row:span 2; }
.case .right .tile.lead{ grid-column:span 4; grid-row:span 4; }
.case .right .tile.small{ grid-column:span 2; grid-row:span 2; }

/* Chapter ticks */
.chapter-list{display:flex;flex-direction:column;gap:4px;width:100%;}
.chapter-list .chap{
  display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mid);
  padding:6px 0;border-top:1px solid var(--rule);
}
.chapter-list .chap:last-child{border-bottom:1px solid var(--rule);}
.chapter-list .chap .n{color:var(--ink);}
.chapter-list .chap .v{color:var(--accent-2);text-align:right;}

.case .results{
  margin-top:16px;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
  border-top:1px solid var(--rule-strong);padding-top:14px;
}
.case .results .stat{display:flex;flex-direction:column;gap:2px;}
.case .results .stat .k{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mid);}
.case .results .stat .v{font-family:var(--f-display);font-size:clamp(22px,2.4vw,36px);letter-spacing:-0.02em;color:var(--ink);line-height:1;}

@media (max-width: 900px){
  .case{grid-template-columns:1fr;}
  .case .left{border-right:none;border-bottom:1px solid var(--rule-strong);padding:0 0 24px;}
  .case .right{padding-left:0;margin-top:24px;}
  .portfolio-intro{grid-template-columns:1fr;}
}

/* ---- Tenerife: fullscreen film treatment ---- */
.film{
  background:var(--stage);color:var(--paper-on-stage);
  margin:0 calc(-1 * var(--gutter));margin-bottom:120px;
  padding:0;
}
.film-inner{padding:80px var(--gutter) 80px;}
.film-head{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:64px;}
.film-head h3.case-title{margin:0;color:var(--paper);}
.film-head .meta{display:flex;flex-direction:column;gap:8px;align-items:flex-end;}
.film-head .meta .mono{color:rgba(239,233,221,.62);}
.film-shots{display:flex;flex-direction:column;gap:18px;}
.shot{
  position:relative;height:78vh;min-height:520px;
  border:1px solid rgba(239,233,221,.14);
  display:grid;grid-template-rows:auto 1fr auto;
  padding:28px 32px;overflow:hidden;
}
.shot.image-shot{background:linear-gradient(135deg,#2a2520,#14110d);}
.shot.statement-shot{background:var(--stage);text-align:center;display:flex;align-items:center;justify-content:center;padding:80px 8%;}
.shot.statement-shot blockquote{margin:0;font-family:var(--f-display);font-size:clamp(40px,6.4vw,108px);letter-spacing:-0.025em;line-height:.95;color:var(--paper);max-width:18ch;}
.shot.statement-shot blockquote .it{font-family:var(--f-serif);font-style:italic;letter-spacing:-0.01em;}
.shot.video-shot{background:#22201c;}
.shot .shot-meta{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(239,233,221,.55);}
.shot .shot-caption{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;}
.shot .shot-caption .ttl{font-family:var(--f-sub);font-size:18px;color:var(--paper);max-width:50ch;line-height:1.4;}
.shot .shot-caption .pull{font-family:var(--f-serif);font-style:italic;font-size:22px;color:rgba(239,233,221,.85);max-width:24ch;text-align:right;}
.shot.image-shot::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(800px 500px at 30% 40%, rgba(184,149,106,.12), transparent 60%),
    repeating-linear-gradient(45deg, rgba(239,233,221,.045) 0 1px, transparent 1px 11px);
}
.film-results{
  margin-top:48px;display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;
  border-top:1px solid rgba(239,233,221,.14);padding-top:24px;
}
.film-results .big{font-family:var(--f-display);font-size:clamp(48px,6vw,108px);letter-spacing:-0.03em;line-height:.9;color:var(--accent);}
.film-results .label{font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(239,233,221,.6);}
.film-results .note{font-family:var(--f-serif);font-style:italic;font-size:20px;color:rgba(239,233,221,.85);text-align:right;max-width:28ch;}

/* small portfolio gallery for design/social */
.mini-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;}
.mini-grid .item{position:relative;}
.mini-grid .item.s{grid-column:span 3;aspect-ratio:1/1;}
.mini-grid .item.m{grid-column:span 4;aspect-ratio:4/5;}
.mini-grid .item.w{grid-column:span 6;aspect-ratio:3/2;}
.mini-grid .item.t{grid-column:span 3;aspect-ratio:3/4;}
.mini-grid .item.f{grid-column:span 12;aspect-ratio:16/7;}
.mini-grid .item .caption{
  position:absolute;left:14px;bottom:12px;font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--paper);
  text-shadow:0 1px 6px rgba(0,0,0,.4);z-index:2;
}
@media (max-width: 900px){
  .mini-grid .item.s,.mini-grid .item.m,.mini-grid .item.w,.mini-grid .item.t{grid-column:span 6;}
  .mini-grid .item.f{grid-column:span 12;}
}

/* =========================================================
   REVIEWS — dark pull-quote carousel
   ========================================================= */
.reviews{background:var(--stage);color:var(--paper-on-stage);}
.reviews .section-tag .num,.reviews .section-tag .end{color:rgba(239,233,221,.55);}
.reviews-stage{
  position:relative;min-height:60vh;padding-top:48px;padding-bottom:48px;
  display:grid;grid-template-rows:1fr auto auto;gap:40px;
}
.reviews-track{
  position:relative;min-height:62vh;
  display:flex;align-items:center;
  /* leave breathing room so the polaroid can spill into corners
     without crashing into the section-tag or the foot */
  padding: 24px clamp(0px, 6vw, 80px) 24px 0;
}
.reviews-track .slide{
  position:absolute;inset:0;opacity:0;pointer-events:none;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  gap:clamp(16px, 3vh, 32px);
  padding: 3% 0;
  overflow:hidden;
  transition:opacity .6s ease, transform .6s ease;
  transform:translateY(14px);
}
.reviews-track .slide.on{opacity:1;pointer-events:auto;transform:translateY(0);}
.reviews-track .slide blockquote{
  margin:0;width:auto;flex:0 0 auto;
  font-family:var(--f-display);
  /* Starting size — JS auto-fit will shrink if it overflows the slide */
  font-size:clamp(30px, 4.6vw, 72px);
  letter-spacing:-0.025em;line-height:1.1;
  color:var(--paper);
  text-wrap:pretty;
}
.reviews-track .slide blockquote .it{font-family:var(--f-serif);font-style:italic;letter-spacing:-0.01em;}
.reviews-track .slide blockquote .ac{color:var(--accent);}

/* Foot — clean tripartite layout: identity · counter · controls */
.reviews-foot{
  display:grid;grid-template-columns:1fr auto auto;
  column-gap:32px;align-items:end;
  padding-top:28px;border-top:1px solid rgba(239,233,221,.16);
}
.reviews-foot .attrib{display:flex;flex-direction:column;gap:6px;min-width:0;}
.reviews-foot .attrib .name{
  font-family:var(--f-sub);font-size:18px;color:var(--paper);font-weight:500;
  letter-spacing:-0.005em;
}
.reviews-foot .attrib .role{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(239,233,221,.55);
}
.reviews-foot .attrib .insta{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(239,233,221,.78);text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;width:fit-content;
  padding-top:6px;margin-top:2px;border-top:1px solid rgba(239,233,221,.14);
  transition:color .2s ease;
}
.reviews-foot .attrib .insta:hover{color:var(--accent);}
.reviews-foot .attrib .insta svg{opacity:.7;}
.reviews-foot .count{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(239,233,221,.55);align-self:end;padding-bottom:11px;
}
.reviews-foot .nav-btns{display:flex;gap:8px;}
.reviews-foot .nav-btns button{
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(239,233,221,.4);
  display:inline-flex;align-items:center;justify-content:center;color:var(--paper);
  background:transparent;cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.reviews-foot .nav-btns button:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);}
.reviews-progress{
  position:relative;height:1px;background:rgba(239,233,221,.18);
  margin-top:8px;
}
.reviews-progress .bar{height:100%;background:var(--accent);width:0;transition:width .2s linear;}

/* =========================================================
   CONTACT — conversational stepped
   ========================================================= */
.contact{background:var(--paper);}
.contact-stage{
  position:relative;background:var(--stage);color:var(--paper-on-stage);
  border-radius:2px;padding:80px clamp(28px,5vw,80px);overflow:hidden;
}
.contact-stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(700px 500px at 8% 10%, rgba(184,149,106,.12), transparent 55%),
    radial-gradient(900px 600px at 92% 100%, rgba(20,17,13,.5), transparent 55%);
}
.contact-stage .grain{
  position:absolute;inset:0;pointer-events:none;opacity:.12;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.contact-stage .layout{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:stretch;
}
.contact-side{display:flex;flex-direction:column;gap:24px;}
.contact-side h2.statement{margin:0;color:var(--paper);}
.contact-side .lede{color:rgba(239,233,221,.78);max-width:42ch;}
.contact-side .info{display:flex;flex-direction:column;gap:6px;margin-top:auto;}
.contact-side .info a, .contact-side .info span{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(239,233,221,.7);}
.contact-side .info a:hover{color:var(--paper);}

.questionnaire{
  display:flex;flex-direction:column;justify-content:center;gap:28px;min-height:520px;
  padding:8px 0;
}
.q-meta{display:flex;justify-content:space-between;align-items:center;}
.q-meta .step{font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);}
.q-meta .of{font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(239,233,221,.55);}
.q-prompt{
  font-family:var(--f-display);font-size:clamp(30px,3.6vw,56px);
  letter-spacing:-0.02em;line-height:1;color:var(--paper);margin:0;min-height:1.2em;
}
.q-prompt .it{font-family:var(--f-serif);font-style:italic;}
.q-help{font-family:var(--f-serif);font-style:italic;font-size:18px;color:rgba(239,233,221,.65);margin:0;}

.q-input{
  background:transparent;border:0;border-bottom:1px solid rgba(239,233,221,.4);
  padding:14px 2px;font-family:var(--f-sub);font-size:22px;color:var(--paper);
  width:100%;outline:none;transition:border-color .2s ease;
}
.q-input::placeholder{color:rgba(239,233,221,.35);}
.q-input:focus{border-color:var(--accent);}
textarea.q-input{resize:none;line-height:1.5;font-size:18px;min-height:84px;}

.q-choices{display:flex;flex-wrap:wrap;gap:10px;}
.q-choice{
  padding:11px 16px;border-radius:999px;border:1px solid rgba(239,233,221,.45);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--paper);
  transition:all .2s ease;
}
.q-choice:hover{background:rgba(239,233,221,.1);}
.q-choice.on{background:var(--accent);border-color:var(--accent);color:var(--ink);}

.q-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:24px;border-top:1px solid rgba(239,233,221,.16);}
.q-dots{display:flex;gap:6px;align-items:center;}
.q-dots i{width:8px;height:8px;border:1px solid rgba(239,233,221,.45);border-radius:50%;display:inline-block;background:transparent;}
.q-dots i.done{background:rgba(239,233,221,.45);border-color:rgba(239,233,221,.45);}
.q-dots i.cur{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px rgba(184,149,106,.15);}

.q-actions{display:flex;gap:10px;}
.q-actions .btn{padding:11px 18px;font-size:10.5px;}

.q-end{
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px;
}
.q-end .seal{
  font-family:var(--f-display);font-size:clamp(36px,4vw,72px);letter-spacing:-0.025em;line-height:.95;color:var(--paper);max-width:18ch;
}
.q-end .summary{display:flex;flex-direction:column;gap:6px;font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(239,233,221,.65);}

@media (max-width:900px){
  .contact-stage .layout{grid-template-columns:1fr;gap:32px;}
}

/* =========================================================
   FOOTER
   ========================================================= */
footer.site{
  background:var(--paper);color:var(--ink);padding:80px var(--gutter) 40px;border-top:1px solid var(--rule);
}
footer.site .top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;align-items:start;margin-bottom:80px;}
footer.site .wordmark{font-family:var(--f-display);font-size:clamp(48px,6vw,96px);letter-spacing:-0.025em;line-height:.92;margin:0;}
footer.site .col h4{margin:0 0 14px;font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mid);}
footer.site .col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
footer.site .col li{font-family:var(--f-sub);font-size:15px;word-break:break-word;}
footer.site .col li a:hover{color:var(--accent-2);}
footer.site .bot{display:flex;justify-content:space-between;align-items:center;gap:24px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mid);}

@media (max-width:900px){
  footer.site .top{grid-template-columns:1fr 1fr;}
  footer.site .wordmark{grid-column:1/3;}
}

/* =========================================================
   Reveal on scroll — no-op safety class (content always visible).
   We let the section dark/light contrast and big type carry the
   cinematic feel rather than per-element fades that risk hiding
   content when JS or animations don't fire.
   ========================================================= */
.reveal-up{ opacity:1; transform:none; }

/* Utility */
.flex{display:flex;}
.flex-col{display:flex;flex-direction:column;}
.gap-sm{gap:8px;}.gap-md{gap:16px;}.gap-lg{gap:32px;}
.spacer{display:block;}
.spacer.md{height:48px;}
.spacer.lg{height:96px;}

/* Accent inline */
.acc-dot{display:inline-block;width:.45em;height:.45em;background:var(--accent);border-radius:50%;vertical-align:.18em;margin:0 .12em;}

/* Pink word accent — hero headline */
.pink{ color:#f382a7; }

/* =========================================================
   v2 — Updated nav cta, timeline, capabilities, portraits,
   tenerife reels, etc.
   ========================================================= */

/* --- Nav Contact button: wider, fix hover text color --- */
.nav .links a.cta{
  padding:11px 22px;             /* widen for breathing room */
  gap:10px;
  line-height:1;
}
/* Transparent state: bg goes paper, text goes ink */
.nav:not(.solid) .cta:hover{
  background:var(--paper);
  color:var(--ink);
  border-color:var(--paper);
}
.nav.solid .cta:hover{
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink);
}

/* --- Capabilities (moved up, all bubbles) --- */
.capabilities{
  margin:0 0 64px;
  padding-top:12px;
}
.cap-head{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  border-bottom:1px solid var(--rule-strong);padding-bottom:14px;margin-bottom:22px;
}
.cap-pills{
  display:flex;flex-wrap:wrap;gap:8px;
}
.cap-pills .pill{
  padding:10px 16px;
  font-size:11px;
  letter-spacing:.16em;
  border-color:var(--rule-strong);
  background:transparent;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.cap-pills .pill:hover{
  background:var(--ink);color:var(--paper);border-color:var(--ink);
}
.cap-pills .pill.accent{
  background:var(--accent);color:var(--ink);border-color:var(--accent);
}
.cap-pills .pill.accent:hover{
  background:var(--accent-2);color:var(--paper);border-color:var(--accent-2);
}

/* --- About index (now only 2 cols: Languages + Education) --- */
.about-index{
  grid-template-columns:1fr 1fr !important;
  gap:64px;
  margin-top:0;
  padding-top:32px;
  margin-bottom:80px;
}

/* --- Cleaner horizontal timeline --- */
.timeline-wrap{margin-top:40px;}
.tl{
  list-style:none;margin:32px 0 56px;padding:0;
  display:grid;grid-template-columns:repeat(6,1fr);gap:0;
  position:relative;
}
.tl::before{
  /* horizontal connector line through the dots */
  content:"";position:absolute;left:0;right:0;
  top:calc(var(--tl-year-h, 88px) + 12px);
  height:1px;background:var(--rule-strong);
  z-index:0;
}
.tl-item{
  position:relative;
  display:flex;flex-direction:column;align-items:flex-start;
  padding:0 16px 0 0;
  text-align:left;
}
.tl-item + .tl-item{
  border-left:1px solid var(--rule);
  padding-left:18px;
}
.tl-year{
  font-family:var(--f-display);
  font-size:clamp(28px,2.8vw,42px);
  letter-spacing:-0.025em;line-height:.96;
  color:var(--ink);
  white-space:nowrap;
  height:var(--tl-year-h, 88px);
  display:flex;align-items:flex-start;
}
.tl-year .dash{color:var(--mid);font-weight:400;margin:0 .04em;}
.tl-dot{
  position:relative;z-index:1;
  width:13px;height:13px;border-radius:50%;
  background:var(--ink);border:2px solid var(--paper);box-shadow:0 0 0 1px var(--ink);
  margin:12px 0 18px;
}
.tl-item.active .tl-dot{
  background:var(--accent);box-shadow:0 0 0 1px var(--accent-2);
}
.tl-item.active .tl-year{color:var(--accent-2);}
.tl-role{
  font-family:var(--f-mono);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);
  line-height:1.55;
}
.tl-role .sub{
  display:block;color:var(--mid);letter-spacing:.16em;font-size:10.5px;
  margin-top:4px;
}

.timeline-detail{
  margin-top:32px;       /* tighter — was 80px */
  border-top:1px solid var(--rule);padding-top:32px;
}

@media (max-width:900px){
  .tl{grid-template-columns:repeat(2,1fr);}
  .tl::before{display:none;}
  .tl-item{border-left:none !important;border-top:1px solid var(--rule);padding:18px 12px 18px 0;}
  .tl-year{height:auto;}
  .tl-dot{margin:10px 0;}
  .about-index{grid-template-columns:1fr !important;}
}

/* --- Portrait strip (in About) --- */
.portrait-strip{
  display:grid;grid-template-columns:1fr 1fr 1fr 1.2fr;
  gap:16px;margin:24px 0 80px;
  align-items:stretch;
}
.portrait-strip .ps-img{
  position:relative;margin:0;overflow:hidden;
  background:var(--paper-3);
  aspect-ratio:3/4;
  border-radius:2px;
}
.portrait-strip .ps-img img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.92) contrast(1.02);
  transition:transform .9s ease;
}
.portrait-strip .ps-img:hover img{transform:scale(1.04);}
.portrait-strip .ps-img.a{transform:translateY(12px);}
.portrait-strip .ps-img.b{transform:translateY(-12px);}
.portrait-strip .ps-img.c{transform:translateY(20px);}
.portrait-strip .ps-quote{
  display:flex;flex-direction:column;justify-content:center;gap:18px;
  padding:24px 8px 24px 32px;
  border-left:1px solid var(--rule-strong);
}
.portrait-strip .ps-quote p{
  margin:0;
  font-family:var(--f-serif);font-style:italic;font-weight:400;
  font-size:clamp(22px,2.2vw,32px);line-height:1.22;
  color:var(--ink);letter-spacing:-0.005em;
}
.portrait-strip .ps-quote .mono{color:var(--mid);}

@media (max-width:900px){
  .portrait-strip{grid-template-columns:1fr 1fr;}
  .portrait-strip .ps-quote{grid-column:1/3;border-left:none;border-top:1px solid var(--rule-strong);padding:24px 0 0;}
  .portrait-strip .ps-img.a,
  .portrait-strip .ps-img.b,
  .portrait-strip .ps-img.c{transform:none;}
}

/* --- Reviews: polaroid frames pinned per slide --- */
.reviews{position:relative;overflow:hidden;}
.reviews .wrap{position:relative;z-index:1;}
.reviews::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, transparent 0%, rgba(20,17,13,.55) 80%);
}

/* Polaroid frame — floats so the quote wraps around it */
.polaroid{
  width: clamp(160px, 15vw, 210px);
  padding: 12px 12px 44px;
  background: linear-gradient(180deg, #f4ede0 0%, #ece4d3 100%);
  border-radius: 3px;
  box-shadow:
    0 22px 50px -10px rgba(0,0,0,.55),
    0 6px 14px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(0,0,0,.04);
  transform: rotate(var(--rot, -4deg));
  /* shape-outside lets the rotated polaroid push the quote text away */
  shape-outside: margin-box;
  shape-margin: 18px;
  transition: opacity .9s ease .15s, transform .9s ease .15s;
  position: relative;
  z-index: 2;
  opacity: 0;
}
.reviews-track .slide.on .polaroid{ opacity: 1; }
.polaroid .polaroid-img{
  position:relative;
  width:100%;
  aspect-ratio: 1 / 1.05;
  overflow:hidden;
  background:#1f1c18;
}
.polaroid .polaroid-img img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  filter: saturate(.85) contrast(.96);
}
.polaroid figcaption{
  position:absolute;
  bottom: 14px; left: 0; right: 0;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #3a342a;
}
/* translucent washi tape */
.polaroid .tape{
  position:absolute;
  top: -14px;
  left: 50%;
  width: 84px; height: 22px;
  transform: translateX(-50%) rotate(-4deg);
  background: rgba(239, 233, 221, .42);
  box-shadow: 0 2px 4px rgba(0,0,0,.18);
  border-left: 1px dashed rgba(255,255,255,.18);
  border-right: 1px dashed rgba(255,255,255,.18);
  z-index: 3;
}
.polaroid .tape.tape-l{
  top: 18px; left: -22px;
  width: 70px;
  transform: rotate(-58deg);
}

/* Float direction + rotation per slide for visual variety */
.polaroid.pos-tr{
  float: right;
  --rot: 5.5deg;
  margin: 8px -10px 28px 40px;
}
.polaroid.pos-tl{
  float: left;
  --rot: -6deg;
  margin: 8px 40px 28px -10px;
}
/* Legacy aliases used by older markup variants */
.polaroid.pos-br{
  float: right;
  --rot: 4deg;
  margin: 60px -10px 8px 40px;
}
.polaroid.pos-bl{
  float: left;
  --rot: -7deg;
  margin: 60px 40px 8px -10px;
}

/* On narrow screens — drop it above the quote in flow */
@media (max-width: 820px){
  .reviews-track{ padding-right: 0; }
  .polaroid,
  .polaroid.pos-tr,
  .polaroid.pos-tl,
  .polaroid.pos-br,
  .polaroid.pos-bl{
    float: none;
    width: 138px;
    margin: 0 0 22px;
    transform: rotate(-4deg);
    shape-outside: none;
  }
}

/* Read more button on a slide */
.reviews-track .slide .read-more-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 22px;border-radius:999px;
  background:rgba(239,233,221,.08);border:1px solid rgba(239,233,221,.32);
  color:var(--paper);cursor:pointer;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
.reviews-track .slide .read-more-btn:hover{
  background:var(--paper);color:var(--ink);border-color:var(--paper);
  transform:translateY(-1px);
}
.reviews-track .slide .read-more-btn svg{transition:transform .25s ease;}
.reviews-track .slide .read-more-btn:hover svg{transform:translateX(3px);}

/* Long-form review modal */
.review-modal{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
.review-modal.open{opacity:1;pointer-events:auto;}
.review-modal-backdrop{
  position:absolute;inset:0;
  background:rgba(20,17,13,.78);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.review-modal-panel{
  position:relative;
  width:min(720px, 100%);max-height:88vh;overflow-y:auto;
  background:var(--paper);color:var(--ink);
  border-radius:6px;padding:56px 64px 56px;
  box-shadow:0 24px 60px rgba(0,0,0,.4);
  transform:translateY(20px);opacity:0;
  transition:transform .35s ease .05s, opacity .35s ease .05s;
}
.review-modal.open .review-modal-panel{transform:translateY(0);opacity:1;}
.review-modal-close{
  position:absolute;top:18px;right:18px;
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--rule-strong);background:var(--paper);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink);cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.review-modal-close:hover{background:var(--ink);color:var(--paper);}

.review-full header{
  display:flex;flex-direction:column;gap:8px;
  padding-bottom:28px;margin-bottom:32px;
  border-bottom:1px solid var(--rule-strong);
}
.review-full header .mono{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mid);
}
.review-full header h3{margin:0;color:var(--ink);font-size:clamp(28px,3.4vw,40px);}
.review-full header .role{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mid);
}
.review-full .body{display:flex;flex-direction:column;gap:28px;}
.review-full .body .lede{
  font-family:var(--f-serif);font-style:italic;font-size:19px;line-height:1.55;
  color:var(--ink-2);margin:0;
}
.review-full .point{
  display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
}
.review-full .point .n{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;
  color:var(--accent);padding-top:5px;
}
.review-full .point h4{
  margin:0 0 8px;font-family:var(--f-sub);font-size:16px;font-weight:600;
  color:var(--ink);letter-spacing:-0.005em;
}
.review-full .point p{
  margin:0;font-size:14.5px;line-height:1.7;color:var(--ink-2);
}

@media (max-width:640px){
  .review-modal-panel{padding:48px 28px 40px;}
  .review-full .point{grid-template-columns:1fr;gap:6px;}
}

/* --- Contact: background portrait on stage --- */
.contact-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;opacity:.22;
  filter:grayscale(.3) contrast(1.05) brightness(.5) saturate(.85);
  pointer-events:none;
}
.contact-stage .grain,
.contact-stage::before{z-index:1;}
.contact-stage .layout{position:relative;z-index:2;}

/* --- Tenerife film shots with bg images --- */
.shot.has-bg{padding:28px 32px;}
.shot.has-bg .shot-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;
  filter:saturate(.9) contrast(1.05) brightness(.78);
}
.shot.has-bg::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(20,17,13,.35) 0%, rgba(20,17,13,0) 25%, rgba(20,17,13,0) 55%, rgba(20,17,13,.78) 100%);
}
.shot.has-bg .on-img{position:relative;z-index:2;}
.shot.has-bg.image-shot::before{display:none;}

/* Reels grid in Tenerife film */
.shot.reels-shot{
  display:grid;grid-template-rows:auto 1fr auto;gap:18px;
  padding:28px 32px;
}
.reels-grid{
  display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;align-items:stretch;justify-content:center;
  min-height:0;max-width:880px;margin:0 auto;width:100%;
}
.reels-grid .reel{
  position:relative;width:100%;aspect-ratio:9/16;
  background:#0d0b08;border-radius:6px;
  overflow:hidden;
}
.reels-grid .reel video{
  width:100%;height:100%;object-fit:cover;
}
/* Instagram embed — aggressive crop to hide chrome (header w/ "View profile"
   button + bottom caption/action bar). The IG embed renders header ~56px tall
   and ~220px of action/caption below the video; we shift the iframe up so only
   the 9:16 video portion is visible. */
.reels-grid .reel.ig iframe{
  position:absolute;
  top:-56px;left:0;width:100%;
  height:calc(100% + 56px + 240px);
  border:0;
}
@media (max-width:900px){
  .reels-grid{grid-template-columns:repeat(2, minmax(0, 1fr));max-width:560px;}
}
@media (max-width:520px){
  .reels-grid{grid-template-columns:1fr;max-width:320px;}
}

/* Ensure Tenerife film shots scale height a bit better on bg images */
.film .shot{min-height:520px;height:auto;}
.film .shot.image-shot.has-bg,
.film .shot.statement-shot,
.film .shot.video-shot{aspect-ratio: 16/9; min-height:520px;}
@media (max-width:760px){
  .film .shot.image-shot.has-bg,
  .film .shot.statement-shot,
  .film .shot.video-shot{aspect-ratio:auto;}
}

/* --- Tenerife: story-led video trio (vertical Vimeo embeds) --- */
.film-head .meta .film-site{
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(217,193,148,.35);
  padding-bottom: 2px;
  align-self: flex-end;
  transition: color .2s ease, border-color .2s ease;
}
.film-head .meta .film-site:hover{
  color: var(--paper);
  border-color: var(--paper);
}

.shot.story-videos{
  display:grid;grid-template-rows:auto 1fr auto;gap:22px;
  padding:32px 32px 36px;
  background:#1a1814;
  aspect-ratio: auto !important;
  min-height: 620px;
  height: auto;
}
.story-videos-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
  justify-content: center;
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
}
.vimeo-vert{
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: #0d0b08;
  overflow: hidden;
  border-radius: 4px;
}
.vimeo-vert iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Custom unmute toggle — sits over the corner of each video */
.vimeo-mute{
  position: absolute;
  bottom: 12px; right: 12px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.22);
  color: #efe9dd;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 4;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.vimeo-mute:hover{
  background: rgba(0,0,0,.78);
  border-color: rgba(255,255,255,.55);
  transform: scale(1.06);
}
.vimeo-mute .ic-sound{ display: none; }
.vimeo-mute[data-muted="false"] .ic-mute{ display: none; }
.vimeo-mute[data-muted="false"] .ic-sound{ display: block; }

@media (max-width: 760px){
  .story-videos-grid{ grid-template-columns: 1fr; max-width: 280px; gap: 16px; }
  .shot.story-videos{ min-height: 0; }
}

/* =========================================================
   v3 — video bgs, services photo blend, sm deck, tl-index
   ========================================================= */

/* --- Contact: video background (replaces img) --- */
video.contact-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;opacity:.36;
  filter:saturate(.9) contrast(1.04) brightness(.55);
  pointer-events:none;
}

/* --- Portfolio hero with video bg (Case studies, not a gallery) --- */
#portfolio{ padding-top:0; }

.portfolio-hero{
  position:relative;
  background:var(--stage);color:var(--paper-on-stage);
  min-height:88vh;overflow:hidden;
  display:flex;align-items:stretch;
  margin-bottom:80px;
}
.portfolio-hero .video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:1;
  filter:saturate(.95) contrast(1.02) brightness(.78);
}
.portfolio-hero .veil{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(20,17,13,.35) 0%, rgba(20,17,13,.15) 30%, rgba(20,17,13,.55) 100%),
    radial-gradient(900px 700px at 80% 110%, rgba(20,17,13,.55), transparent 60%);
}
.portfolio-hero .grain{
  position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.14;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.portfolio-hero .frame{
  position:relative;z-index:4;width:100%;
  padding:120px var(--gutter) 80px;
  display:flex;flex-direction:column;justify-content:space-between;gap:32px;
}
.portfolio-hero .section-tag{
  display:flex;justify-content:space-between;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(239,233,221,.7);
  border-bottom:1px solid rgba(239,233,221,.18);padding-bottom:12px;
}
.portfolio-hero .portfolio-intro{
  display:grid;grid-template-columns:1.4fr 1fr;gap:64px;align-items:end;
  margin:0;
}
.portfolio-hero .portfolio-intro h2{
  margin:0;color:var(--paper-on-stage);
}
.portfolio-hero .portfolio-intro .lede{
  color:rgba(239,233,221,.82);max-width:46ch;
}
@media (max-width:900px){
  .portfolio-hero{min-height:72vh;}
  .portfolio-hero .frame{padding:96px 22px 56px;}
  .portfolio-hero .portfolio-intro{grid-template-columns:1fr;gap:24px;}
}

/* --- Services: blended background photo --- */
.services{position:relative;overflow:hidden;}
.services-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;
  opacity:.32;
  filter:grayscale(.25) contrast(1.05) brightness(.95) saturate(.85);
  mix-blend-mode:multiply;
  pointer-events:none;
}
.services-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(247,243,235,.62) 0%, rgba(247,243,235,.38) 40%, rgba(247,243,235,.72) 100%);
}
.services .wrap{position:relative;z-index:2;}
.services .svc.dark{ /* keep dark card readable above blend */ }

/* --- About: timeline index (Education + Languages) --- */
.tl-index{
  display:grid;grid-template-columns:1fr 1fr;gap:64px;
  border-top:1px solid var(--rule-strong);
  padding:36px 0 28px;
  margin-bottom:28px;
}
.tl-index .col h4{
  margin:0 0 14px;font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mid);
}
.tl-index .col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;}
.tl-index .col li{font-family:var(--f-sub);font-size:15px;color:var(--ink);line-height:1.5;display:flex;justify-content:space-between;gap:8px;}
.tl-index .col li .level{font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;color:var(--mid);text-transform:uppercase;align-self:center;}
.tl-index .col.lang{padding-left:40px;border-left:1px solid var(--rule);}
@media (max-width:900px){
  .tl-index{grid-template-columns:1fr;gap:24px;}
  .tl-index .col.lang{padding-left:0;border-left:none;border-top:1px solid var(--rule);padding-top:20px;}
}

/* --- Compact Education + Languages inside about copy column --- */
.tl-index--compact{
  border-top:1px solid var(--rule);
  padding:18px 0 0;
  margin-top:20px;
  margin-bottom:0;
  gap:32px;
}
.tl-index--compact .col h4{
  margin-bottom:10px;
  font-size:10px;
  letter-spacing:.22em;
}
.tl-index--compact .col ul{gap:4px;}
.tl-index--compact .col li{
  font-size:12.5px;
  line-height:1.45;
  color:var(--ink-2);
}
.tl-index--compact .col.lang{
  padding-left:24px;
}
@media (max-width:900px){
  .tl-index--compact{gap:16px;}
  .tl-index--compact .col.lang{padding-left:0;border-left:none;border-top:1px solid var(--rule);padding-top:14px;}
}

/* =========================================================
   SOCIAL MEDIA DECK — 18 slides showcase
   ========================================================= */
.sm-deck{
  position:relative;
  margin:24px 0 64px;
}
.sm-stage{
  position:relative;
  border:1px solid var(--rule-strong);
  border-radius:2px;
  overflow:hidden;
  background:var(--paper-2);
  aspect-ratio:16/9;
  box-shadow:0 32px 80px -36px rgba(20,17,13,.4);
}
.sm-track{position:relative;width:100%;height:100%;}
.sm-slide{
  position:absolute;inset:0;margin:0;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  transition:opacity .55s ease;
}
.sm-slide.on{opacity:1;visibility:visible;}
.sm-slide img{
  width:100%;height:100%;object-fit:contain;
  display:block;
  background:#fff;
}
.sm-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(20,17,13,.78);color:var(--paper);
  border:1px solid rgba(239,233,221,.2);
  cursor:pointer;z-index:4;
  transition:background .2s ease, transform .2s ease;
}
.sm-arrow:hover{background:rgba(20,17,13,.95);transform:translateY(-50%) scale(1.05);}
.sm-arrow.prev{left:18px;}
.sm-arrow.next{right:18px;}

.sm-foot{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  margin-top:18px;flex-wrap:wrap;
}
.sm-meta{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;}
.sm-count{font-family:var(--f-mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);}
.sm-title{font-family:var(--f-sub);font-size:15px;color:var(--mid);}
.sm-dots{display:flex;gap:6px;flex-wrap:wrap;max-width:60%;}
.sm-dots i{
  width:8px;height:8px;border-radius:50%;
  background:transparent;border:1px solid var(--mid);
  cursor:pointer;transition:all .2s ease;display:block;
}
.sm-dots i.on{background:var(--accent);border-color:var(--accent);transform:scale(1.2);}
.sm-dots i:hover{border-color:var(--ink);}

.sm-rail{
  margin-top:18px;
  border-top:1px solid var(--rule);
  padding-top:18px;overflow:hidden;
}
.sm-thumbs{
  display:flex;gap:8px;
  overflow-x:auto;
  scrollbar-width:thin;
  padding-bottom:8px;
  scroll-behavior:smooth;
}
.sm-thumbs::-webkit-scrollbar{height:4px;}
.sm-thumbs::-webkit-scrollbar-thumb{background:var(--rule-strong);border-radius:2px;}
.sm-thumb{
  flex:0 0 auto;width:120px;aspect-ratio:16/9;
  border:1px solid var(--rule);border-radius:2px;
  overflow:hidden;cursor:pointer;
  background:var(--paper-2);
  opacity:.55;transition:opacity .2s ease, border-color .2s ease, transform .2s ease;
}
.sm-thumb img{width:100%;height:100%;object-fit:contain;display:block;background:#fff;}
.sm-thumb:hover{opacity:.9;}
.sm-thumb.on{opacity:1;border-color:var(--ink);transform:translateY(-1px);}

@media (max-width:900px){
  .sm-thumb{width:96px;}
  .sm-arrow{width:36px;height:36px;}
  .sm-arrow.prev{left:10px;}
  .sm-arrow.next{right:10px;}
}

/* =========================================================
   HOT SPOT CASE — custom media grid
   ========================================================= */
.case .right.hs-case-grid .hs-report-tile{
  grid-column:1 / -1;
  grid-row:span 9;
  min-width:0;
  position:relative;
  background:#161310;
  overflow:hidden;
  display:flex;flex-direction:column;
}
.hs-report-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:16px 18px 12px;flex:0 0 auto;
}
.hs-report-title{
  font-family:var(--f-display);font-size:18px;color:var(--paper);letter-spacing:-0.01em;
}
.hs-report-meta{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(239,233,221,.55);
}
.hs-report-strip{
  flex:1 1 auto;min-height:0;min-width:0;width:100%;
  display:flex;flex-direction:column;gap:0;align-items:stretch;
  padding:0;
  overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:rgba(239,233,221,.3) transparent;
}
.hs-report-strip::-webkit-scrollbar{width:8px;}
.hs-report-strip::-webkit-scrollbar-thumb{background:rgba(239,233,221,.28);border-radius:4px;}
.hs-report-page{
  flex:0 0 auto;width:100%;aspect-ratio:1414 / 2000;
  display:block;position:relative;
  cursor:pointer;border:0;padding:0;background:none;
}
.hs-report-page img{
  width:100%;height:auto;display:block;
}
.hs-report-page::after{
  content:attr(data-n);
  position:absolute;top:10px;right:10px;z-index:2;
  font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;
  color:#fff;background:rgba(20,17,13,.55);
  padding:3px 7px;border-radius:20px;
  opacity:0;transition:opacity .2s ease;
}
.hs-report-page:hover::after{opacity:1;}

/* Hot Spot report lightbox */
.hs-lightbox{
  position:fixed;inset:0;z-index:1000;
  display:none;align-items:center;justify-content:center;
  background:rgba(12,10,8,.94);
  padding:clamp(16px,4vw,56px);
}
.hs-lightbox.open{display:flex;}
.hs-lightbox-stage{
  height:100%;max-width:100%;
  display:flex;align-items:center;justify-content:center;
}
.hs-lightbox-stage img{
  max-height:100%;max-width:100%;
  object-fit:contain;border-radius:4px;
  box-shadow:0 20px 80px rgba(0,0,0,.6);
}
.hs-lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:54px;height:54px;border-radius:50%;
  border:1px solid rgba(239,233,221,.3);
  background:rgba(20,17,13,.6);color:var(--paper);
  font-size:30px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,border-color .2s ease;
}
.hs-lightbox-nav:hover{background:rgba(20,17,13,.9);border-color:var(--paper);}
.hs-lightbox-nav.prev{left:clamp(10px,2vw,28px);}
.hs-lightbox-nav.next{right:clamp(10px,2vw,28px);}
.hs-lightbox-close{
  position:absolute;top:20px;right:24px;
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(239,233,221,.3);
  background:rgba(20,17,13,.6);color:var(--paper);
  font-size:26px;line-height:1;cursor:pointer;z-index:2;
}
.hs-lightbox-close:hover{background:rgba(20,17,13,.9);}
.hs-lightbox-count{
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;
  color:rgba(239,233,221,.7);
}

/* Rozmownia brand-book fullscreen reader */
.rz-reader{
  position:fixed;inset:0;z-index:1000;
  display:none;
  background:rgba(12,10,8,.94);
}
.rz-reader.open{display:block;}
.rz-reader-scroll{
  position:absolute;inset:0;
  overflow-y:auto;overflow-x:hidden;
  display:flex;flex-direction:column;align-items:center;
  padding:clamp(16px,4vw,48px) 0;
  scrollbar-width:thin;scrollbar-color:rgba(239,233,221,.4) transparent;
}
.rz-reader-scroll::-webkit-scrollbar{width:10px;}
.rz-reader-scroll::-webkit-scrollbar-thumb{background:rgba(239,233,221,.35);border-radius:5px;}
.rz-reader-scroll img{
  width:min(760px, 92vw);height:auto;display:block;
  border-radius:4px;box-shadow:0 20px 80px rgba(0,0,0,.6);
}
.case .right.hs-case-grid .hs-sub-tile{
  grid-column:span 2;
  grid-row:span 6;
  position:relative;
  text-decoration:none;
  display:block;
}
.hs-sub-tile img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:1;
}
/* Fundraiser poster — wide window, fully visible, clickable */
.case .right.hs-case-grid .hs-poster-tile{
  grid-column:span 4;
  grid-row:span 6;
  position:relative;
  text-decoration:none;
  display:block;
  background:var(--paper-2);
  cursor:pointer;
}
.hs-poster-tile::before{ display:none; }
.case .right.hs-case-grid .hs-poster-tile img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;z-index:1;
}
.hs-poster-tile .label{
  position:absolute;bottom:0;left:0;right:0;z-index:2;
  background:linear-gradient(0deg, rgba(20,17,13,.82), transparent);
  color:rgba(239,233,221,.9);
  transition:color .2s ease;
}
.hs-poster-tile:hover .label{ color:var(--accent); }
/* Coffee — narrow side strip */
.case .right.hs-case-grid .hs-coffee-tile{
  grid-column:span 2;
  grid-row:span 6;
  position:relative;
}
.case .right.hs-case-grid .hs-coffee-tile img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:1;
}
.hs-coffee-tile .label{ position:absolute;bottom:0;left:0;right:0;z-index:2; }

/* Animated "scroll" hint on PDF windows */
.pdf-scroll-hint{
  position:absolute; right:14px; bottom:14px; z-index:4;
  display:flex; align-items:center; gap:8px;
  padding:7px 13px 7px 11px; border-radius:999px;
  background:rgba(20,17,13,.72); color:var(--paper);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  pointer-events:none; backdrop-filter:blur(2px);
  animation:pdfHintFloat 2.6s ease-in-out infinite;
}
.pdf-scroll-hint .chev{
  width:7px;height:7px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg);
  animation:pdfChevBounce 1.25s ease-in-out infinite;
}
@keyframes pdfChevBounce{
  0%,100%{transform:translateY(-2.5px) rotate(45deg);opacity:.45;}
  50%{transform:translateY(2.5px) rotate(45deg);opacity:1;}
}
@keyframes pdfHintFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-3px);}
}

/* =========================================================
   ROZMOWNIA CASE — custom media grid
   ========================================================= */
.case .right.rz-case-grid .rz-book-tile{
  grid-column:1 / -1;
  grid-row:span 9;
  position:relative;
  background:#2330c8;
  overflow:hidden;
  min-width:0;
}
.rz-book-scroll{
  position:absolute;inset:0;
  overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.4) transparent;
}
.rz-book-scroll::-webkit-scrollbar{width:8px;}
.rz-book-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.35);border-radius:4px;}
.rz-book-page{
  display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;
}
.case .right.rz-case-grid .rz-book-page img{
  position:static;inset:auto;
  width:100%;height:auto;object-fit:initial;display:block;
}

.case .right.rz-case-grid .rz-logo-tile,
.case .right.rz-case-grid .rz-colors-tile,
.case .right.rz-case-grid .rz-reel-tile{
  grid-column:span 2;
  grid-row:span 3;
  position:relative;
}
.rz-logo-tile img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;padding:18px;
  background:#fcf8eb;z-index:1;
}
.rz-logo-tile .label{position:absolute;bottom:0;left:0;right:0;z-index:2;}

.rz-colors-tile::before{display:none;}
.rz-colors-tile img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:1;
}
.rz-colors-tile .label{position:absolute;bottom:0;left:0;right:0;z-index:2;}

.rz-reel-tile iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1;
}
.rz-reel-tile .label{position:absolute;bottom:0;left:0;right:0;z-index:2;}

/* =========================================================
   DOBRO & DOBRO CASE — media tiles
   ========================================================= */
/* Videos fill their tile */
.case .right .tile video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
}
/* Award photo */
.case .right .tile img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
}
/* Instagram embed */
.dobro-ig-tile iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1;
}
/* Tram campaign — Vimeo embed. The source video is portrait (720×842), so we
   match the iframe to the video's aspect and scale it to COVER the wide tile
   (fills the space, crops top/bottom — no letterbox bars). */
.dobro-vimeo-tile{ overflow:hidden; }
.dobro-vimeo-tile iframe{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:100%;
  aspect-ratio:720 / 842;
  height:auto;
  min-width:100%;
  min-height:100%;
  border:0;z-index:1;
}
/* Dobro tram strip — full width, taller than default wide */
.case .right .tile.dobro-wide{
  grid-column:1 / -1;
  grid-row:span 3;
}
/* Dobro bottom squares — taller */
.case .right .tile.dobro-sq{
  grid-column:span 3;
  grid-row:span 4;
}
/* Instagram takes the remaining 3 cols */
.case .right .tile.dobro-sq--wide{
  grid-column:span 3;
}

/* =========================================================
   WOW BODY SLIM CASE — pinned cards + mini deck
   ========================================================= */

/* Pinned cards container — sits below stats in left col */
.wbs-pins{
  position:relative;
  width:100%;
  height:240px;
  margin-top:36px;
}
.wbs-pin{
  position:absolute;
  background:var(--paper);
  border:none;
  cursor:pointer;
  padding:6px 6px 20px;
  box-shadow:0 4px 20px rgba(20,17,13,.18), 0 1px 4px rgba(20,17,13,.10);
  border-radius:1px;
  width:58%;
  transition:box-shadow .25s ease, z-index 0s;
}
.wbs-pin:hover{ box-shadow:0 10px 32px rgba(20,17,13,.28); z-index:10; }
.wbs-pin img{ display:block; width:100%; height:auto; border-radius:1px; }
/* Push-pin dot */
.pin-dot{
  position:absolute;
  top:-9px; left:50%; transform:translateX(-50%);
  width:16px; height:16px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 2px 6px rgba(20,17,13,.35);
  z-index:2;
}
.wbs-pin:nth-child(1){ transform:rotate(-4deg); left:0; top:0; z-index:2; }
.wbs-pin:nth-child(2){ transform:rotate(3deg);  left:36%; top:44px; z-index:1; }
.wbs-pin:nth-child(1):hover{ transform:rotate(-4deg) scale(1.04); }
.wbs-pin:nth-child(2):hover{ transform:rotate(3deg)  scale(1.04); }

/* Lightbox */
.wbs-lightbox{
  display:none; position:fixed; inset:0; z-index:9999;
  background:rgba(20,17,13,.88);
  align-items:center; justify-content:center;
}
.wbs-lightbox.open{ display:flex; }
.wbs-lightbox-inner{ position:relative; max-width:90vw; max-height:88vh; }
.wbs-lightbox-inner img{
  display:block; max-width:100%; max-height:88vh;
  object-fit:contain; border-radius:2px;
}
.wbs-lightbox-close{
  position:absolute; top:-14px; right:-14px;
  width:34px; height:34px; border-radius:50%;
  background:var(--paper); border:none; cursor:pointer;
  font-size:22px; line-height:34px; text-align:center;
  color:var(--ink); box-shadow:0 2px 8px rgba(20,17,13,.3);
}

/* Mini slide deck tile */
[data-case="wowbody"] .right .wbs-deck-tile{
  grid-column:1 / -1;
  grid-row:span 5;
  position:relative;
  background:var(--stage);
  overflow:hidden;
}
.wbs-mini-deck{ position:absolute; inset:0; }
.wbs-slide{
  position:absolute; inset:0;
  opacity:0; transition:opacity .45s ease;
}
.wbs-slide.on{ opacity:1; }
.wbs-slide img{
  width:100%; height:100%;
  object-fit:cover !important;
  object-position:center !important;
}
.wbs-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:36px; height:36px; border-radius:50%;
  background:rgba(239,233,221,.15); border:1px solid rgba(239,233,221,.3);
  color:var(--paper); font-size:20px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .2s;
}
.wbs-arrow:hover{ background:rgba(239,233,221,.32); }
.wbs-arrow.prev{ left:14px; }
.wbs-arrow.next{ right:14px; }
.wbs-count{
  position:absolute; bottom:12px; right:16px; z-index:3;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.2em;
  color:rgba(239,233,221,.55);
}
/* Work calls strip — transparent PNG, full image visible */
.case .right .tile.wbs-wide{
  grid-column:1 / -1;
  grid-row:span 3;
}
.case .right .tile.wbs-calls-tile{
  background:transparent;
  grid-row:span 4;
}
.wbs-calls-tile img{
  object-fit:contain !important;
  object-position:center !important;
  padding:12px;
}