/* =========================================================================
   Vahan — Homepage (Light, Desktop)
   Figma: SkZlY6SRTTisFlKok443kh  ·  node 1:207  ·  1920 × 6470
   ========================================================================= */

/* ---- Display typeface ---------------------------------------------------
   The design sets every heading in "Season Mix" (Figma reports it as
   Season_Mix-TRIAL). The family ships in assets/fonts/season-mix/; only the
   weights the design actually uses are declared here — Regular for card
   titles and tab labels, Medium for headings, SemiBold for the stat numbers,
   Bold, and the Regular/Medium italics.
   Body copy stays on Open Sans, loaded from Google Fonts in each page head.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:"Season Mix";
  src:url("../assets/fonts/season-mix/SeasonMix-TRIAL-Regular.otf") format("opentype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Season Mix";
  src:url("../assets/fonts/season-mix/SeasonMix-TRIAL-Medium.otf") format("opentype");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Season Mix";
  src:url("../assets/fonts/season-mix/SeasonMix-TRIAL-SemiBold.otf") format("opentype");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Season Mix";
  src:url("../assets/fonts/season-mix/SeasonMix-TRIAL-Bold.otf") format("opentype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Season Mix";
  src:url("../assets/fonts/season-mix/SeasonMix-TRIAL-RegularItalic.otf") format("opentype");
  font-weight:400;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:"Season Mix";
  src:url("../assets/fonts/season-mix/SeasonMix-TRIAL-MediumItalic.otf") format("opentype");
  font-weight:500;
  font-style:italic;
  font-display:swap;
}

:root{
  --display: "Season Mix", "Season Mix TRIAL", Georgia, "Times New Roman", serif;
  --body:    "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ui:      "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --helv:    "Helvetica Neue", Helvetica, Arial, sans-serif;

  --brown:      #2b180a;
  --page-bg:    #fcf6f0;
  --peach:      #ffeee0;
  --nav-text:   #313944;
  --orange:     #f97316;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ background:var(--page-bg); }

body{
  background:var(--page-bg);
  font-family:var(--body);
  font-variation-settings:"wdth" 100;
  color:#000;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; }
ul{ list-style:none; }

/* The design is a fixed 1920 px canvas — every element is placed at its
   exact Figma coordinate inside this stage. */
.page{
  position:relative;
  width:1920px;
  height:5308px;
  margin:0 auto;
  overflow:hidden;
  background:var(--page-bg);
}

/* ===================== shared button ===================== */
.btn{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:0;
  border-radius:10px;
  cursor:pointer;
  filter:drop-shadow(0 0 1px rgba(128,115,115,.23));
  font-family:var(--body);
  font-weight:600;
  font-size:20px;
  letter-spacing:-.38px;
  color:#fff;
  text-decoration:none;
  padding:12px 24px;
  background-repeat:no-repeat;
  background-size:100% 100%;
}
.btn > span{ white-space:nowrap; }
.btn .arrow{ position:relative; width:20px; height:20px; flex:none; }
.btn .arrow img{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:12.5px; height:12.5px; }
.btn .inter-medium{ font-family:var(--ui); font-weight:500; }
.btn .os-medium{ font-family:var(--body); font-weight:500; }
.btn .os-semibold{ font-family:var(--body); font-weight:600; }

/* Figma "Vahan gradient" — radial, rendered per-button so the geometry
   matches the design exactly. */
.btn-grad{
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 178 44' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%25' width='100%25' fill='url(%23g)'/><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(0 -8.35 12.203 0 89 53.5)'><stop stop-color='rgb(255,156,56)' offset='0'/><stop stop-color='rgb(249,118,25)' offset='1'/></radialGradient></defs></svg>");
}

/* per-button gradient geometry (matches each instance in Figma) */
.grad-221{ background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 221 58' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%25' width='100%25' fill='url(%23g)'/><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(0 -11.007 15.151 0 110.5 70.523)'><stop stop-color='rgb(255,156,56)' offset='0'/><stop stop-color='rgb(249,118,25)' offset='1'/></radialGradient></defs></svg>"); }
.grad-285{ background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 285 58' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%25' width='100%25' fill='url(%23g)'/><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(0 -11.007 19.539 0 142.5 70.523)'><stop stop-color='rgb(255,156,56)' offset='0'/><stop stop-color='rgb(249,118,25)' offset='1'/></radialGradient></defs></svg>"); }
.grad-290{ background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 290 58' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%25' width='100%25' fill='url(%23g)'/><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(0 -11.007 19.882 0 145 70.523)'><stop stop-color='rgb(255,156,56)' offset='0'/><stop stop-color='rgb(249,118,25)' offset='1'/></radialGradient></defs></svg>"); }
.grad-309{ background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 309 58' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%25' width='100%25' fill='url(%23g)'/><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(0 -11.007 21.184 0 154.5 70.523)'><stop stop-color='rgb(255,156,56)' offset='0'/><stop stop-color='rgb(249,118,25)' offset='1'/></radialGradient></defs></svg>"); }
.grad-262{ background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 262 58' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%25' width='100%25' fill='url(%23g)'/><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(0 -11.007 17.962 0 131 70.523)'><stop stop-color='rgb(255,156,56)' offset='0'/><stop stop-color='rgb(249,118,25)' offset='1'/></radialGradient></defs></svg>"); }
.grad-264{ background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 264 58' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%25' width='100%25' fill='url(%23g)'/><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(0 -11.007 18.099 0 132 70.523)'><stop stop-color='rgb(255,156,56)' offset='0'/><stop stop-color='rgb(249,118,25)' offset='1'/></radialGradient></defs></svg>"); }

/* ===================== background art ===================== */
.glow{ position:absolute; width:2514px; height:2514px; top:-1179px; pointer-events:none; }
.glow-left { left:-1216px; }
.glow-right{ left:668px; }

.header-bg{
  position:absolute;
  left:0; top:148px;
  width:1920px; height:737px;
  pointer-events:none;
}

/* Rectangle 4447 — band behind the stat cards */
.stats-band{
  position:absolute;
  left:-3px; top:1030px;
  width:1920px; height:454px;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 1920 454' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%25' width='100%25' fill='url(%23g)'/><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(0 -112 171.11 0 960 786.18)'><stop stop-color='rgb(255,164,97)' offset='0'/><stop stop-color='rgb(255,187,136)' offset='0.25'/><stop stop-color='rgb(255,210,176)' offset='0.5'/><stop stop-color='rgb(255,232,215)' offset='0.75'/><stop stop-color='rgb(255,255,255)' offset='1'/></radialGradient></defs></svg>");
  background-size:100% 100%;
}

/* ===================== NAV ===================== */
.nav{
  position:absolute;
  left:0; top:0;
  width:1920px; height:88px;
  background:#fff;
  z-index:20;
}
.nav-logo{
  position:absolute;
  left:231px; top:18.0669px;
  width:152.3958px; height:51.8663px;
  display:flex; align-items:center; justify-content:center;
}
.nav-logo img{ width:152.3958px; height:51.8663px; }

.nav-links{
  position:absolute;
  left:631.3958px; top:17.3521px;
  height:53.2958px;
  display:flex; align-items:center; gap:9.69px;
}
.nav-item{
  height:53.2958px;
  display:flex; align-items:center; justify-content:center; gap:9.69px;
  padding:9.69px 24.225px;
  border-radius:9.69px;
  cursor:pointer;
  text-decoration:none;
}
.nav-item span{
  font-family:var(--body);
  font-weight:500;
  font-size:18px;
  line-height:1.5;
  letter-spacing:-.342px;
  color:var(--nav-text);
  white-space:nowrap;
}
.nav-item .chev{ width:12.1127px; height:8.4789px; flex:none; transition:transform .3s ease; }

/* ---- nav dropdown ---- */
.nav-item.has-dropdown{ position:relative; }

.dropdown{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%) translateY(8px);
  min-width:220px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  padding:10px 0;
  list-style:none;
  box-shadow:0 12px 40px rgba(43,24,10,.10), 0 2px 8px rgba(0,0,0,.04);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s ease, visibility .25s ease, transform .25s ease;
  z-index:100;
}

/* invisible bridge so mouse can travel from nav-item to dropdown */
.dropdown::before{
  content:"";
  position:absolute;
  top:-12px;
  left:0;
  width:100%;
  height:12px;
}

.nav-item.has-dropdown:hover .dropdown{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

.nav-item.has-dropdown:hover .chev{
  transform:rotate(180deg);
}

.dropdown li{
  width:auto;
  height:auto;
}

.dropdown li a{
  display:flex;
  align-items:center;
  padding:10px 22px;
  font-family:var(--body);
  font-weight:500;
  font-size:15px;
  line-height:1.5;
  letter-spacing:-.28px;
  color:var(--nav-text);
  text-decoration:none;
  white-space:nowrap;
  border-left:3px solid transparent;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}

.dropdown li a:hover{
  background:rgba(249,115,22,.07);
  color:var(--orange);
  border-left-color:var(--orange);
}

.nav-cta{
  left:1501.6775px; top:22px;
  width:178px; height:44px;
}

/* ===================== NAV — language picker ===================== */
.nav-lang{
  position:absolute;
  left:1338.6775px; top:22px;
  width:146px; height:44px;
  z-index:30;
}
.nav-lang-btn{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  gap:12px;
  padding:12px 24px;
  border:1px solid #f97619;
  border-radius:10px;
  background:#fff;
  cursor:pointer;
  filter:drop-shadow(0 0 1px rgba(128,115,115,.23));
  transition:background .2s ease;
}
.nav-lang-btn:hover{ background:#fff6ef; }
.nav-lang-globe{ width:26px; height:26px; flex:none; }
.nav-lang-label{
  font-family:var(--body);
  font-weight:600;
  font-size:20px;
  line-height:normal;
  letter-spacing:-.38px;
  color:#f97619;
  white-space:nowrap;
}
.nav-lang-chev{ width:12px; height:12px; flex:none; transition:transform .3s ease; }
.nav-lang.is-open .nav-lang-chev{ transform:rotate(180deg); }

.nav-lang-menu{
  position:absolute;
  top:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%) translateY(8px);
  min-width:100%;
  padding:8px 0;
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 12px 40px rgba(43,24,10,.10), 0 2px 8px rgba(0,0,0,.04);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s ease, visibility .25s ease, transform .25s ease;
}
.nav-lang.is-open .nav-lang-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.nav-lang-menu button{
  width:100%;
  padding:9px 20px;
  border:0;
  background:none;
  font-family:var(--body);
  font-weight:500;
  font-size:15px;
  color:var(--nav-text);
  text-align:left;
  white-space:nowrap;
  cursor:pointer;
  border-left:3px solid transparent;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.nav-lang-menu button:hover,
.nav-lang-menu button[aria-selected="true"]{
  background:rgba(249,115,22,.07);
  color:var(--orange);
  border-left-color:var(--orange);
}

/* ===================== HERO ===================== */
.hero-title{
  position:absolute;
  left:366px; top:259px;
  width:1189px; height:198px;
  font-family:var(--display);
  font-weight:500;
  font-size:86px;
  line-height:99px;
  text-align:center;
  color:var(--brown);
}
.hero-sub{
  position:absolute;
  left:516px; top:497px;
  width:889px; height:36px;
  font-size:24px;
  line-height:1.5;
  letter-spacing:-.456px;
  text-align:center;
  color:#000;
}
.hero-field{
  position:absolute;
  left:728px; top:605px;
  width:325px; height:58px;
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  font-family:var(--ui);
  font-size:18px;
  line-height:normal;
  letter-spacing:-.72px;
  display:flex;
  align-items:center;
}
.hero-cc{ position:absolute; left:33.5px; top:17px; transform:translateX(-50%); color:#565050; pointer-events:none; }
.hero-input{
  position:absolute;
  left:60px; top:0;
  width:250px; height:100%;
  border:none;
  outline:none;
  background:transparent;
  font-family:var(--ui);
  font-size:18px;
  letter-spacing:-.72px;
  color:#000;
}
.hero-input::placeholder{ color:#b8b8b8; }

.hero-cta{
  left:1029px; top:605px;
  width:162.6364px; height:58px;
  gap:8.909px;
  padding:13.364px 26.727px;
  border-radius:12px;
  font-size:22.27px;
  letter-spacing:-.4231px;
  filter:drop-shadow(0 0 1.114px rgba(128,115,115,.23));
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 162.64 58' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%25' width='100%25' fill='url(%23g)'/><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(0 -11.007 11.15 0 81.318 70.523)'><stop stop-color='rgb(255,156,56)' offset='0'/><stop stop-color='rgb(249,118,25)' offset='1'/></radialGradient></defs></svg>");
}
.hero-cta .arrow{ width:22.273px; height:22.273px; }
.hero-cta .arrow img{ width:13.92px; height:13.92px; }

.hero-note{
  position:absolute;
  left:553px; top:699px;
  width:815px; height:32px;
  font-size:21px;
  line-height:1.5;
  letter-spacing:-.462px;
  text-align:center;
  color:#000;
}

/* ===================== LOGO STRIP MARQUEE ===================== */
@keyframes logo-scroll {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

.logo-strip {
  position: absolute;
  left: 361px; top: 854px;
  width: 1200px;
  height: 92px;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* subtle fade-out on edges matching original SVG bleed */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}

.logo-strip-track {
  display: flex;
  align-items: center;
  gap: 56px;
  white-space: nowrap;
  animation: logo-scroll 20s linear infinite;
  will-change: transform;
}

.logo-strip-track img {
  height: 26px;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
  filter: sepia(1) saturate(0.5) brightness(0.7);
  opacity: 0.85;
  transition: opacity 0.3s, filter 0.3s;
}

.logo-strip-track img:hover {
  opacity: 1;
  filter: none;
}

/* ===================== STATS ===================== */
.stat-card{
  position:absolute;
  top:1125px;
  width:342.8055px; height:264px;
  background:rgba(255,255,255,.36);
  border-radius:24px;
}
.stat-body{
  position:absolute;
  top:1200px;
  width:243.301px;
  display:flex; flex-direction:column; gap:11.155px;
  text-align:center;
}
.stat-num{
  font-family:var(--display);
  font-weight:600;
  font-size:52.987px;
  line-height:normal;
  letter-spacing:-.5829px;
  color:var(--brown);
}
.stat-label{
  font-size:24px;
  line-height:30.488px;
  letter-spacing:-.813px;
  color:#000;
}

/* ===================== ONE AI ENGINE ===================== */
.engine-title{
  position:absolute;
  left:493px; top:1568px;
  width:913px; height:140px;
  font-family:var(--display);
  font-weight:500;
  font-size:56px;
  line-height:70px;
  text-align:center;
  color:var(--brown);
}
.engine-sub{
  position:absolute;
  left:479px; top:1732px;
  width:963px; height:36px;
  font-size:24px;
  line-height:1.5;
  letter-spacing:-.456px;
  text-align:center;
  color:var(--brown);
}

.tabbar{
  position:absolute;
  left:240px; top:1826px;
  width:1440px; height:54px;
  display:flex;
}
.tab{
  width:480px;
  display:flex; flex-direction:column; align-items:center; gap:16px;
  padding-top:10px;
}
.tab-label{
  font-family:var(--display);
  font-weight:400;
  font-size:24px;
  line-height:27px;
  color:rgba(43,24,10,.7);
  white-space:nowrap;
}
.tab-active .tab-label{ color:var(--brown); }
.tab-rule{ width:100%; height:1px; background:rgba(43,24,10,.34); }
.tab-active .tab-rule{ background:var(--orange); }

/* --- product panels --- */
.panel{
  position:absolute;
  left:0; top:1962px;
  width:1920px; height:485px;
  display:none;
}
.panel.panel-active{ display:block; }

/* 667.54 = 485 x 629/457 — the card is cut to the artwork's own aspect ratio
   so the corporate and job-seeker panels, which ship as finished 629 x 457
   cards, are shown whole rather than cropped to fit a wider frame. */
.panel .panel-card{
  position:absolute;
  left:240px; top:0;
  width:667.538px; height:485px;
  background:var(--peach);
  border-radius:24px;
  overflow:hidden;
}
.panel .panel-card img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:contain;
}
/* those two fill the frame edge to edge; the recruitment artwork is
   transparent, so it stays floating on the peach */
.panel .panel-card-bleed{ background:none; }

.panel .panel-text{
  position:absolute;
  left:1031px; top:77.5px;
  width:596px; height:330px;
  display:flex; flex-direction:column; align-items:flex-start;
}
.panel-title{
  width:596px;
  font-size:38px;
  line-height:1.22;
  letter-spacing:-.722px;
  color:var(--brown);
  /* Figma: text-box-trim (cap / alphabetic) */
  text-box-trim:trim-both;
  text-box-edge:cap alphabetic;
}
/* same optical trim for engines without text-box-trim support */
@supports not (text-box-trim: trim-both){
  .panel-title{ margin-top:-10.8px; margin-bottom:-8.43px; }
}
.panel-title b{ font-weight:600; }
.panel-title .light{ font-weight:300; }

.panel-desc{
  margin-top:24px;
  width:596px; height:149px;
  display:flex; flex-direction:column; justify-content:center;
}
.panel-desc p{
  font-size:24px;
  line-height:1.5;
  letter-spacing:-.264px;
  color:rgba(43,24,10,.8);
}
.panel-stat{
  margin-top:12px;
  font-weight:600;
  font-size:24px;
  line-height:1.5;
  letter-spacing:-.264px;
  color:rgba(43,24,10,.8);
  white-space:nowrap;
}
.panel-text .btn{ position:relative; margin-top:24px; }

/* ===================== CASE STUDIES ===================== */
.case-band{
  position:absolute;
  left:0; top:2567px;
  width:1920px; height:844px;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 1920 844' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%25' width='100%25' fill='url(%23g)'/><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(0 -208.21 171.11 0 960 1461.5)'><stop stop-color='rgb(255,164,97)' offset='0'/><stop stop-color='rgb(255,187,136)' offset='0.25'/><stop stop-color='rgb(255,210,176)' offset='0.5'/><stop stop-color='rgb(255,232,215)' offset='0.75'/><stop stop-color='rgb(255,255,255)' offset='1'/></radialGradient></defs></svg>");
  background-size:100% 100%;
}
.case-title{
  position:absolute;
  left:507px; top:2647px;
  width:906px; height:140px;
  font-family:var(--display);
  font-weight:500;
  font-size:56px;
  line-height:70px;
  text-align:center;
  color:var(--brown);
}
.case-slider{
  position:absolute;
  left:240px; top:2835px;
  width:1440px; height:449px;
  overflow:hidden;
  border-radius:24px;
}
/* three slides wide; sized in % so the track follows the slider at any
   viewport — one slide is always exactly 100%/3 of the track */
.case-track{
  display:flex;
  width:300%;
  height:449px;
  transition:transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.case-card{
  position:relative;
  top:0; left:0;
  width:calc(100% / 3); height:449px;
  flex:none;
  background:var(--peach);
  border-radius:24px;
  padding:32px 42px;
  display:flex; align-items:center; justify-content:space-between;
}
.case-left{
  width:696px; height:385px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.case-logo{
  width:213px; height:64px;
  display:flex; flex-direction:column; justify-content:center;
}
.case-logo img{ width:213px; height:64px; }

.case-quote-block{ display:flex; flex-direction:column; gap:28px; }
.case-quote{
  width:603px;
  font-size:24px;
  line-height:normal;
  color:#000;
}
.case-person{ display:flex; align-items:center; gap:22px; }
.case-avatar{ width:61px; height:61px; border-radius:50%; background:#979797; object-fit:cover; }
.case-person-text{ width:209px; }
.case-person-name{
  font-weight:600;
  font-size:18px;
  line-height:1.5;
  letter-spacing:-.198px;
  color:rgba(0,0,0,.8);
}
.case-person-role{
  font-size:16px;
  line-height:31.247px;
  color:#000;
}
.case-left .btn{ position:relative; }

.case-image{
  position:relative;
  width:637px; height:385px;
  border-radius:19.989px;
  overflow:hidden;
  background:#fff;
}
.case-image img{ width:637px; height:385px; }

.case-dots{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:3320px;
  display:flex;
  align-items:center;
  gap:12px;
  height:11px;
  z-index:10;
}
.case-dot{
  width:10.69px;
  height:10.69px;
  border-radius:10.69px;
  background:#fff;
  opacity:0.7;
  cursor:pointer;
  transition:width 0.35s ease, border-radius 0.35s ease, opacity 0.35s ease, background 0.35s ease;
}
.case-dot.active{
  width:88.22px;
  border-radius:132px;
  opacity:1;
}
.case-dot:hover{
  opacity:1;
}

/* ===================== NEWSROOM ===================== */
.news-title{
  position:absolute;
  left:484px; top:3497px;
  width:952px; height:70px;
  font-family:var(--display);
  font-weight:500;
  font-size:56px;
  line-height:70px;
  text-align:center;
  color:var(--brown);
}
.news-card{
  position:absolute;
  top:3615px;
  width:460px; height:477px;
  background:var(--peach);
  border-radius:24px;
  padding:19.411px 24px;
  display:flex; flex-direction:column; justify-content:center; gap:34px;
  cursor:pointer;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.news-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 16px 36px rgba(249, 118, 25, 0.28), 0 4px 14px rgba(255, 156, 56, 0.2);
}
.news-text{ display:flex; flex-direction:column; gap:38px; width:100%; }
.news-headline{
  height:47.037px;
  font-size:24px;
  line-height:normal;
  letter-spacing:-.456px;
  color:#000;
}
.news-meta{
  height:17.842px;
  font-size:14px;
  line-height:normal;
  letter-spacing:-.266px;
  color:#000;
}
.news-img{ width:412px; overflow:hidden; flex:none; }
.news-img img{ width:100%; height:100%; object-fit:cover; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.news-card:hover .news-img img{ transform: scale(1.03); }

/* ===================== CTA ===================== */
.cta{
  position:absolute;
  left:240px; top:4176px;
  width:1440px; height:448px;
}
.cta-bg{
  position:absolute; inset:0;
  width:1440px; height:448px;
  border-radius:36px;
}
.cta-text{
  position:absolute;
  left:300px; top:104px;          /* 5442 - 5338 */
  width:841px;
  font-family:var(--display);
  font-weight:500;
  font-size:60px;
  line-height:68px;
  text-align:center;
  color:#fff;
}
.cta-btn{
  position:absolute;
  left:610.5px; top:301px;
  width:221.6363px; height:73px;
  display:flex; align-items:center; justify-content:center;
  border:0;
  border-radius:10px;
  background:#fff;
  cursor:pointer;
  filter:drop-shadow(0 0 1.659px rgba(128,115,115,.23));
  font-family:var(--body);
  font-weight:600;
  font-size:28px;
  letter-spacing:-.532px;
  color:#000;
  text-decoration:none;
  white-space:nowrap;
}


/* ===================== FOOTER ===================== */
.footer{
  position:absolute;
  left:0; top:4708px;
  width:1920px; height:600px;
  background:var(--brown);
}
.footer-logo{
  position:absolute;
  left:361px; top:64.8516px;      /* 5934.8516 - 5870 */
  width:84.5px; height:84.5px;
  display:block;
}
.footer-logo img{ display:block; width:100%; height:100%; }
.footer-desc{
  position:absolute;
  left:361.5px; top:160.8516px;   /* 6030.8516 - 5870 */
  width:214px; height:100px;
  font-family:var(--ui);
  font-size:14px;
  line-height:20px;
  letter-spacing:-.14px;
  color:rgba(255,255,255,.7);
}
.footer-col{ position:absolute; }
.footer-col-title{
  margin-top:16px;
  height:24px;
  font-family:var(--ui);
  font-size:16px;
  line-height:24px;
  letter-spacing:-.16px;
  color:rgba(255,255,255,.5);
  white-space:nowrap;
}
.footer-list{
  margin-top:16px;
  display:flex; flex-direction:column; gap:16px;
}
.footer-list li{
  height:20px;
  width:184.66px;
  font-family:var(--ui);
  font-size:14px;
  line-height:20px;
  letter-spacing:-.14px;
  color:rgba(255,255,255,.7);
  white-space:nowrap;
}
.footer-list li a{
  color:inherit;
  text-decoration:none;
  transition:color .2s ease;
}
.footer-list li a:hover{ color:#fff; }
.footer-copy{
  position:absolute;
  left:360px; top:530.5850px;     /* 6400.5850 - 5870 */
  height:19.1235px;
  font-family:var(--ui);
  font-size:14px;
  line-height:20px;
  letter-spacing:-.14px;
  color:rgba(255,255,255,.7);
  white-space:nowrap;
}
.footer-legal{
  position:absolute;
  top:529.4463px;                 /* 6399.4463 - 5870 */
  height:16px;
  font-family:var(--helv);
  font-size:12px;
  line-height:16px;
  color:rgba(255,255,255,.5);
  white-space:nowrap;
}
.social{ position:absolute; display:block; overflow:hidden; opacity:.5; }
.social img{ position:absolute; left:2px; top:2px; }

/* =========================================================================
   VIDEO LIGHTBOX
   Built and appended to <body> by js/site.js, deliberately outside `.page`:
   the 1024–1919 px breakpoint puts `zoom` on `.page`, which would scale a
   fixed-position descendant along with the canvas.
   ========================================================================= */
.vbox{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:5vmin;
  background:rgba(43,24,10,.86);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.vbox.is-open{ opacity:1; visibility:visible; }

.vbox-frame{
  position:relative;
  width:min(1100px, 100%);
  aspect-ratio:16 / 9;
  max-height:90vh;
  border-radius:18px;
  overflow:hidden;
  background:#000;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  transform:translateY(18px) scale(.98);
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.vbox.is-open .vbox-frame{ transform:none; }

.vbox-frame iframe{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  border:0;
}

.vbox-close{
  position:absolute;
  right:0; top:-54px;
  width:42px; height:42px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.14);
  color:#fff;
  font-size:26px;
  line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, transform .2s ease;
}
.vbox-close:hover{ background:var(--orange); transform:scale(1.08); }

/* on short or narrow screens the button sits inside the frame instead */
@media (max-width:640px), (max-height:520px){
  .vbox-close{
    right:8px; top:8px;
    width:34px; height:34px;
    font-size:21px;
    background:rgba(0,0,0,.55);
  }
}

/* the whole site's play affordances read as buttons once they are wired */
[data-video]{ cursor:pointer; }

/* shown in place of the player when the page is opened from disk, where
   YouTube's referrer check cannot pass (its "Error 153") */
.vbox-note{
  position:absolute;
  inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px;
  padding:32px;
  text-align:center;
  background:var(--brown);
}
.vbox-note p{
  max-width:460px;
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  color:rgba(255,255,255,.85);
}
.vbox-note code{
  padding:9px 16px;
  border-radius:8px;
  background:rgba(255,255,255,.12);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:15px;
  color:#ffd3b3;
}
.vbox-note-btn{
  padding:12px 26px;
  border-radius:10px;
  background:var(--orange);
  font-family:var(--body);
  font-weight:600;
  font-size:16px;
  color:#fff;
  text-decoration:none;
  transition:transform .2s ease;
}
.vbox-note-btn:hover{ transform:translateY(-2px); }