/* ============================================================
   BASE — shared across every page (home + case studies)
   ============================================================ */

@font-face{
  font-family:'SF Pro Display';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/sf-pro-display/SFPRODISPLAYREGULAR.OTF') format('opentype');
}
@font-face{
  font-family:'SF Pro Display';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/sf-pro-display/SFPRODISPLAYMEDIUM.OTF') format('opentype');
}
@font-face{
  font-family:'SF Pro Display';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/sf-pro-display/sf-pro-display-semibold.otf') format('opentype');
}
@font-face{
  font-family:'SF Pro Display';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/sf-pro-display/SFPRODISPLAYBOLD.OTF') format('opentype');
}

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --bg: #FBFAF8;
  --bg-alt: #F3F1EC;
  --ink: #0B0C0D;
  --ink-soft: #46484C;
  --ink-faint: #85888C;
  --border: rgba(11,12,13,0.11);
  --border-strong: rgba(11,12,13,0.18);
  --accent: #297EFF;
  --accent-dark: #1C63D6;
  --accent-tint: rgba(41,126,255,0.08);
  --dark-bg: #0A0B0D;
  --dark-bg-alt: #131418;
  --dark-text: #F3F3F1;
  --dark-text-soft: #9A9CA1;
  --dark-border: rgba(255,255,255,0.12);
  --green: #35C46A;

  --container: 1320px;
  --gutter: clamp(20px, 5vw, 48px);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 56px;
  --space-6: 80px;
  --space-7: 120px;
  --space-8: 160px;

  --ease: cubic-bezier(.22,.9,.24,1);
  --dur-sm: .3s;
  --dur-md: .7s;

  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-body: 'Inter', sans-serif;
}

/* ============================================================
   RESET
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}
body{
  font-family:var(--font-body);
  font-optical-sizing:auto;
  background:var(--bg);
  color:var(--ink);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;transition:color var(--dur-sm) var(--ease);}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
ul{list-style:none;}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}
section{position:relative;}

/* type scale — SF Pro Display for headings, Inter for body/UI */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  font-optical-sizing:auto;
  font-feature-settings:"ss01","cv05";
  text-rendering:optimizeLegibility;
  font-stretch:normal;
  font-synthesis:none;
}
h1{font-size:clamp(48px, 32px + 4vw, 88px); font-weight:700; line-height:0.88; letter-spacing:-0.055em;}
h2{font-size:clamp(36px, 24.8px + 2.8vw, 64px); font-weight:600; line-height:0.92; letter-spacing:-0.045em;}
h3{font-size:clamp(28px, 23.2px + 1.2vw, 40px); font-weight:600; line-height:0.98; letter-spacing:-0.035em;}
h4{font-size:clamp(22px, 19.6px + 0.6vw, 28px); font-weight:600; line-height:1.2; letter-spacing:-0.02em;}
h5{font-size:clamp(18px, 16.4px + 0.4vw, 22px); font-weight:600; line-height:1.2;}
h6{font-size:clamp(16px, 15.2px + 0.2vw, 18px); font-weight:600; line-height:1.2;}
.eyebrow{
  font-size:14px;
  font-weight:500;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
p{font-size:clamp(16px, 15.2px + 0.2vw, 18px);line-height:1.6;color:var(--ink-soft);}
.h1{font-size:clamp(48px, 32px + 4vw, 88px); line-height:0.88; letter-spacing:-0.055em; font-weight:700;}
.h2{font-size:clamp(36px, 24.8px + 2.8vw, 64px); line-height:0.92; letter-spacing:-0.045em; font-weight:600;}
.h3{font-size:clamp(28px, 23.2px + 1.2vw, 40px); line-height:0.98; letter-spacing:-0.035em; font-weight:600;}

:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;
  border-radius:var(--radius-pill);
  font-size:16px;font-weight:600;
  transition:transform var(--dur-sm) var(--ease), background var(--dur-sm) var(--ease), border-color var(--dur-sm) var(--ease), color var(--dur-sm) var(--ease), box-shadow var(--dur-sm) var(--ease);
  white-space:nowrap;
}
.btn svg{transition:transform var(--dur-sm) var(--ease);}
.btn:hover svg{transform:translate(3px,-3px);}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent-dark); transform:translateY(-1px); box-shadow:0 10px 24px -8px rgba(41,126,255,0.45);}
.btn-secondary{background:transparent;border:1.5px solid var(--border-strong);color:var(--ink);}
.btn-secondary:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-1px);}
.btn-secondary-dark{background:transparent;border:1.5px solid var(--dark-border);color:var(--dark-text);}
.btn-secondary-dark:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-1px);}

/* ============================================================
   NAV
   ============================================================ */
.nav-wrap{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:24px var(--gutter) 0;
  pointer-events:none;
}
.nav-shell{
  max-width:1220px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px 12px 24px;
  background:rgba(251,250,248,0.78);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  box-shadow:0 8px 30px rgba(11,12,13,0.04);
  pointer-events:auto;
  transition:background var(--dur-sm) var(--ease), box-shadow var(--dur-sm) var(--ease);
}
.nav-logo{font-family:var(--font-display);font-weight:900;font-size:18px;letter-spacing:-0.03em;transition:color var(--dur-sm) var(--ease);}
.nav-logo:hover{color:var(--accent);}
.nav-links{display:flex;align-items:center;gap:36px;}
.nav-link{
  position:relative;font-size:16px;font-weight:500;color:var(--ink-soft);
  padding:4px 0;
}
.nav-link::after{
  content:'';position:absolute;left:50%;bottom:-2px;width:100%;height:1.5px;
  background:var(--accent);transform:translateX(-50%) scaleX(0);transform-origin:center;
  transition:transform .28s var(--ease);
}
.nav-link:hover{color:var(--accent);}
.nav-link:hover::after{transform:translateX(-50%) scaleX(1);}
.nav-cta{font-size:15px;padding:11px 22px;}
.nav-cta:hover{box-shadow:0 10px 24px -8px rgba(41,126,255,0.5);}
/* mobile nav — the hamburger and its dropdown are inert above the 860px
   breakpoint, and on pages that don't carry the markup they never render,
   so the desktop nav is untouched. */
.nav-mobile-toggle{display:none;}
.nav-mobile-menu{display:none;}
@media (max-width:860px){
  .nav-links > *:not(.nav-cta):not(.nav-mobile-toggle){display:none;}
  .nav-links{gap:10px;}
  .nav-cta{padding:10px 18px;font-size:14px;}

  .nav-mobile-toggle{
    display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    width:42px;height:42px;flex-shrink:0;padding:0;
    background:transparent;border:1px solid var(--border-strong);border-radius:50%;
    cursor:pointer;
  }
  .nav-mobile-toggle span{
    display:block;width:16px;height:1.6px;border-radius:2px;background:var(--ink);
    transition:transform var(--dur-sm) var(--ease), opacity var(--dur-sm) var(--ease);
  }
  .nav-mobile-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.6px) rotate(45deg);}
  .nav-mobile-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .nav-mobile-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.6px) rotate(-45deg);}

  /* dropdown panel — mirrors the nav pill's blur, border and shadow */
  .nav-mobile-menu.is-open{
    display:block;
    max-width:1220px;margin:10px auto 0;padding:8px;
    background:rgba(251,250,248,0.94);
    backdrop-filter:blur(16px) saturate(1.4);
    -webkit-backdrop-filter:blur(16px) saturate(1.4);
    border:1px solid var(--border);
    border-radius:22px;
    box-shadow:0 8px 30px rgba(11,12,13,0.06);
    pointer-events:auto;
  }
  .nav-mobile-link{
    display:block;padding:13px 16px;border-radius:16px;
    font-size:16px;font-weight:500;color:var(--ink-soft);
    transition:color var(--dur-sm) var(--ease), background var(--dur-sm) var(--ease);
  }
  .nav-mobile-link:hover{color:var(--accent);background:rgba(11,12,13,0.04);}
}

/* ============================================================
   REVEAL SYSTEM
   ============================================================ */
.reveal{opacity:0; transform:translateY(32px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal.is-visible{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}

/* ============================================================
   AVAILABILITY PULSE DOT (hero + case study CTA panels)
   ============================================================ */
.pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--green);position:relative;flex-shrink:0;}
.pulse-dot::after{
  content:'';position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--green);
  opacity:.6; animation:pulse 2.2s ease-out infinite;
}
@keyframes pulse{0%{transform:scale(.6);opacity:.7;}100%{transform:scale(1.9);opacity:0;}}
@media (prefers-reduced-motion: reduce){.pulse-dot::after{animation:none;display:none;}}

/* ============================================================
   SHARED THUMBNAIL PALETTE (product-mockup gradients reused
   by the homepage gallery and the case study visuals)
   ============================================================ */
.thumb-fintech{background:linear-gradient(160deg,#0B0C0D,#1c2027);}
.thumb-enterprise{background:linear-gradient(160deg,#eef2f8,#dbe3ef);}
.thumb-brand{background:linear-gradient(160deg,#0f1522,#1c2b45);}
.thumb-analytics{background:linear-gradient(160deg,#0B0C0D,#20242c);}

/* ============================================================
   SHARED MEDIA FRAME (real product screenshots)

   One presentation for a screenshot wherever it appears: the frame
   takes the image's own aspect ratio (--media-ratio, set per image in
   the markup) instead of a fixed viewport height, so the UI renders at
   full size inside a thin surround rather than letterboxed or cropped.

   Lives here, not in case-study.css, because the homepage work cards
   use it too — the Forma card and the Forma case study hero are the
   same component at the same container width, so they render at an
   identical scale.

   The doubled class raises specificity to (0,2,0) so it beats the fixed
   heights on .case-hero-visual / .moment-visual (case-study.css) and
   .work-feature-thumb (home.css) regardless of stylesheet order — both
   of those load after base.css.
   ============================================================ */
.media-frame.media-frame{
  height:auto;min-height:0;aspect-ratio:var(--media-ratio,3/2);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(10px,2.2%,26px);
}
.case-media{display:block;width:100%;height:100%;object-fit:contain;object-position:center;border-radius:10px;}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{padding:var(--space-7) 0 var(--space-4);}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:60px;padding-bottom:var(--space-6);}
.footer-brand{font-family:var(--font-display);font-size:22px;font-weight:900;letter-spacing:-0.03em;margin-bottom:16px;}
.footer-tagline{max-width:280px;}
.footer-col h4{font-family:var(--font-body);font-size:14px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.06em;margin-bottom:20px;}
.footer-col a, .footer-col p{display:block;font-size:16px;margin-bottom:14px;color:var(--ink-soft);}
.footer-col a:hover{color:var(--accent);}
/* social row — inline brand SVGs inheriting currentColor, so they pick up
   the same --ink-soft -> --accent hover the text links used. Height is fixed
   and width left auto: the X and LinkedIn marks are square while the Behance
   mark is wider, and forcing them all square would squash it. */
.footer-social{display:flex;align-items:center;gap:18px;margin-top:6px;}
.footer-social a{
  display:inline-flex;align-items:center;justify-content:center;height:20px;
  color:var(--ink-soft);
  transition:color var(--dur-sm) var(--ease), transform var(--dur-sm) var(--ease);
}
/* the display above is an author rule, so it would beat the UA stylesheet's
   [hidden]{display:none} — pending items need this to actually stay hidden */
.footer-social a[hidden]{display:none;}
.footer-social a:hover{color:var(--accent);transform:translateY(-1px);}
.footer-social svg{display:block;height:17px;width:auto;fill:currentColor;}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;padding-top:var(--space-4);
  border-top:1px solid var(--border);font-size:14px;color:var(--ink-faint);
}
@media (max-width:860px){
  .footer-top{grid-template-columns:1fr;gap:36px;}
  .footer-bottom{flex-direction:column;gap:10px;align-items:flex-start;}
}

/* ============================================================
   CONTENT PROTECTION
   Paired with the contentProtection block in common.js. Kept in
   its own section, touching nothing above, so the whole feature
   can be lifted out by deleting this block and that one.

   Selection is off page-wide and opted back IN for form controls
   — the contact form has to stay usable, so anything a visitor
   types stays selectable, copyable and pasteable.
   ============================================================ */
body{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
input, textarea, select, option, [contenteditable="true"]{
  -webkit-user-select:text;
  user-select:text;
}
img, svg, canvas{-webkit-user-drag:none;}

/* toast — dark pill above the bottom edge. pointer-events:none is load
   bearing: it can never intercept a click, scroll or tap meant for the
   page underneath. z-index clears the nav (100) and enquiry modal (200). */
.protect-toast{
  position:fixed;left:50%;bottom:28px;z-index:300;
  max-width:min(92vw, 420px);
  padding:11px 18px;
  background:var(--dark-bg);color:var(--dark-text);
  border:1px solid var(--dark-border);
  border-radius:var(--radius-pill);
  font-family:var(--font-body);
  font-size:14px;font-weight:500;line-height:1.45;text-align:center;
  box-shadow:0 14px 38px rgba(11,12,13,0.32);
  opacity:0;pointer-events:none;
  transform:translateX(-50%) translateY(8px);
  transition:opacity var(--dur-sm) var(--ease), transform var(--dur-sm) var(--ease);
}
.protect-toast.is-visible{opacity:1;transform:translateX(-50%) translateY(0);}
@media (max-width:480px){
  .protect-toast{
    left:14px;right:14px;bottom:20px;
    max-width:none;
    padding:12px 14px;
    transform:translateY(8px);
  }
  .protect-toast.is-visible{transform:translateY(0);}
}