.hero{
    position:relative;
    padding-top:var(--nav-h-desktop);
    min-height:100vh;
    display:flex;
    flex-direction:column;
  }
  .hero-split{
    position:relative; display:flex; flex:1;
    min-height:calc(100vh - var(--nav-h-desktop));
    overflow:hidden;
  }
  .hero-text{
    position:relative; z-index:2; width:56%;
    display:flex; flex-direction:column; justify-content:center; gap:26px;
    padding:64px clamp(24px, 6vw, 96px) 64px clamp(24px, 6vw, 80px);
  }
  h1{
    font-size:clamp(34px, 4vw, 56px); line-height:1.08; font-weight:600;
    letter-spacing:-0.025em; color:var(--ink-900); perspective:600px;
    text-wrap:balance;
  }
  h1 .word{ display:inline-block; overflow:hidden; padding-bottom:4px; }
  h1 .word span{ display:inline-block; will-change:transform, opacity; }
  h1 em{ font-style:normal; color:var(--teal-500); }
  .hero-sub{ font-size:17px; line-height:1.65; color:var(--neutral-700); max-width:460px; }
  .hero-actions{ display:flex; gap:16px; align-items:center; margin-top:4px; flex-wrap:wrap; text-decoration:none; }

/* here trimmed*/

  .hero-visual{
    position:absolute; top:0; right:0; bottom:0; width:52%; z-index:1;
    clip-path:polygon(10% 0, 100% 0, 100% 100%, 0 100%);
    background:var(--ink-900); overflow:hidden;
  }
  .hero-visual::before{
    content:''; position:absolute; top:0; left:-4px; right:0; bottom:0;
    background:var(--teal-500);
    clip-path:polygon(10% 0, 100% 0, 100% 100%, 0 100%);
    z-index:-1;
  }
  .hero-visual video{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.02);
  }
  .hero-visual-scrim{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(4,33,30,0) 55%, rgba(4,33,30,0.55) 100%);
  }

  @media (max-width:1023px){
    .hero{ padding-top:var(--nav-h-mobile); }
    .hero-split{ flex-direction:column; min-height:auto; }
    .hero-text{ width:100%; padding:48px 24px 32px; }
    .hero-visual{
      position:relative; width:100%; height:46vh; min-height:280px;
      clip-path:none; order:-1;
    }
    .hero-visual::before{ display:none; }
  }
  @media (max-width:600px){
    .hero-actions{ flex-direction:column; align-items:stretch; }
    .hero-sub{ max-width:100%; }
    /* trimmed here */
  }

  /* =========================================================
     SERVICES — "What We Do" — card-based hierarchy
     ========================================================= */
  .services{
    padding:128px clamp(24px, 6vw, 64px);
  }
  .services-inner{
    max-width:var(--container);
    margin:0 auto;
  }
  .services-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:32px;
    margin-bottom:56px;
  }
  .services-heading h2{
    font-size:clamp(30px, 3.4vw, 44px);
    font-weight:600;
    letter-spacing:-0.02em;
    line-height:1.15;
    margin-top:14px;
  }
  .services-link{
    display:inline-flex; 
    align-items:center;
    width: fit-content; 
    gap: 5px;
    font-size:15px; 
    font-weight:600; 
    color:var(--teal-700);
    text-decoration:none;
    white-space:nowrap;
    padding-bottom:4px;
    border-bottom:1px solid var(--neutral-200);
    transition: border-color 200ms ease, gap 200ms ease;
  }
  .services-link:hover{ 
    border-color:var(--teal-500); 
    gap: 8px;
  }
  .services-link svg{ 
    width:16px; 
    height:16px; 
    flex-shrink:0;
    transform: rotate(-45deg) translateX(0);
    transition: transform 450ms cubic-bezier(0.4, 0, 0.2, 1); 
  }
  
  .services-link:hover svg{
    transform: rotate(0deg) translateX(2px);
  }

  .services-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:24px;
  }
  .service-card{
    background:var(--white);
    border:1px solid var(--neutral-200);
    border-radius:12px;
    padding:32px 28px;
    display:flex;
    flex-direction:column;
    gap:20px;
    box-shadow:0 1px 2px rgba(4,33,30,0.06);
    transition:box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
  }
  .service-card:hover{
    box-shadow:0 4px 12px rgba(4,33,30,0.08);
    transform:translateY(-4px);
    border-color:var(--neutral-400);
  }
  .service-icon{
    width:44px; height:44px;
    display:flex; align-items:center; justify-content:center;
    border-radius:6px;
    background:var(--teal-100);
    color:var(--teal-700);
  }
  .service-icon svg{ width:22px; height:22px; stroke-width:1.5; }
  .service-index{
    font-size:12px; font-weight:500; color:var(--neutral-400); letter-spacing:0.04em;
  }
  .service-card h3{
    font-size:19px; font-weight:600; letter-spacing:-0.01em; line-height:1.3;
  }
  .service-card p{
    font-size:14.5px; line-height:1.6; color:var(--neutral-700);
  }

  @media (max-width:1023px){
    .services{ padding:96px 24px; }
    .services-grid{ grid-template-columns:repeat(2, 1fr); }
    .services-header{ flex-direction:column; align-items:flex-start; gap:16px; }
  }
  @media (max-width:600px){
    .services-grid{ grid-template-columns:1fr; }
  }

  /* =========================================================
     CAREERS TEASER — "Why Talented Graduates Choose Us"
     Full-bleed split, tone shift to the ink-navy surface to mark
     the one section addressing the secondary audience.
     ========================================================= */
  .careers-split{
    display:flex;
    min-height:600px;
  }
  .careers-text{
    width:50%;
    background:var(--white);
    color:var(--ink-900);
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:20px;
    padding:clamp(48px, 6vw, 96px);
  }
  .careers-text h2{
    font-size:clamp(28px, 3vw, 40px);
    font-weight:600;
    letter-spacing:-0.02em;
    line-height:1.2;
    color:var(--ink-900);
    text-wrap: balance;
  }
  .careers-text p{
    font-size:16.5px;
    line-height:1.7;
    color:var(--neutral-700);
    max-width:440px;
  }
  .careers-link{
    display:inline-flex; 
    align-items:center; 
    gap:5px;
    font-size:15px; 
    font-weight:600; 
    color:var(--teal-700);
    text-decoration:none; 
    width:fit-content;
    padding-bottom:4px;
    border-bottom:1px solid var(--neutral-200);
    transition: gap 200ms ease, border-color 200ms ease;
    margin-top:6px;
  }
  .careers-link:hover{ gap:8px; border-color:var(--teal-500); }
  .careers-link svg{ 
    width:16px; 
    height:16px; 
    flex-shrink:0; 
    transform: rotate(-45deg) translateX(0);
    transition: transform 450ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .careers-link:hover svg{ transform: rotate(0deg) translateX(2px); }
  

  .careers-visual{
    width:50%;
    position:relative;
    overflow:hidden;
    background:var(--paper-50);
  }
  .careers-visual img{
    width:100%; height:100%; object-fit:cover;
  }
  .careers-visual .img-fallback{
    position:absolute; inset:0;
    display:none;
    flex-direction:column; align-items:center; justify-content:center;
    gap:10px;
    background:var(--teal-100);
    color:var(--teal-700);
    text-align:center;
    padding:24px;
  }
  .careers-visual .img-fallback svg{ width:40px; height:40px; }
  .careers-visual .img-fallback span{ font-size:13px; font-weight:500; max-width:240px; }

  @media (max-width:1023px){
    .careers-split{ flex-direction:column; min-height:auto; }
    .careers-text{ width:100%; padding:64px clamp(24px, 6vw, 48px); }
    .careers-visual{ width:100%; height:320px; order:-1; }
  }

  /* =========================================================
     CLOSING SECTION — "Ready to build what's next?"
     A photo-backed, glassmorphic card, docked to the LEFT so the
     empty-desk illustration reads clearly on the right. Kept INSET
     (max-width frame with rounded corners + page background
     showing around it) rather than a full-bleed hero — Careers
     just before this and the Footer right after are both solid,
     edge-to-edge blocks, so a full-width photo here would read as
     a third slab stacked against two flat ones.
     ========================================================= */
  .closing{
    padding:80px clamp(24px, 6vw, 64px);
    background:var(--paper-50);
  }
  .closing-frame{
    position:relative;
    max-width:1240px;
    margin:0 auto;
    min-height:480px;
    border-radius:32px;
    overflow:hidden;
    isolation:isolate;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    background:linear-gradient(135deg, var(--ink-900), var(--teal-700));
  }
  .closing-frame img{
    position:absolute; inset:0; z-index:0;
    width:100%; height:100%; object-fit:cover;
    object-position:center;
  }
  @media (min-width:901px){
    .closing-frame img{ object-position:72% center; }
  }
  .closing-frame .img-fallback{
    position:absolute; inset:0; z-index:0;
    display:none; flex-direction:column; align-items:center; justify-content:center;
    gap:10px; color:var(--teal-100); text-align:center; padding:24px;
  }
  .closing-frame .img-fallback svg{ width:40px; height:40px; }
  .closing-frame .img-fallback span{ font-size:13px; font-weight:500; max-width:240px; }

  /* Liquid-glass card — much more transparent than a standard
     frosted panel (0.14–0.4 vs a flat 0.6+ fill) so the illustration
     behind stays readable through it — a diagonal sheen plus a bright
     top inset line stand in for a specular highlight. Docked left with
     a margin so the desk illustration on the right stays uncovered. */
  .closing-card{
    position:relative; z-index:2;
    width:100%; max-width:400px;
    margin:clamp(28px, 5vw, 48px);
    background:
      linear-gradient(135deg, rgba(255,255,255,0.42), rgba(255,255,255,0.08) 55%, rgba(255,255,255,0.2)),
      rgba(255,255,255,0.14);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    border:1px solid rgba(255,255,255,0.5);
    border-radius:24px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.65),
      inset 0 -1px 0 rgba(255,255,255,0.08),
      0 24px 64px rgba(4,33,30,0.35);
    padding:40px clamp(28px, 4vw, 40px);
    text-align:left;
  }
  .closing-card h2, .closing-sub{
    text-shadow:0 1px 3px rgba(255,255,255,0.35);
  }
  .closing-icon{
    width:48px; height:48px; border-radius:50%;
    background:var(--white); color:var(--teal-700);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:20px;
    box-shadow:0 6px 18px rgba(4,33,30,0.14);
  }
  .closing-icon svg{ width:22px; height:22px; transform: rotate(-45deg); }
  .closing-card h2{
    font-size:clamp(26px, 3vw, 38px);
    font-weight:600; letter-spacing:-0.02em; line-height:1.15;
    margin-bottom:14px;
  }
  .closing-card h2 em{ font-style:normal; color:var(--teal-500); }
  .closing-sub{
    font-size:16px; line-height:1.6; color:var(--neutral-700);
    max-width:360px; margin:0 0 28px;
  }

  @media (max-width:900px){
    .closing-frame{
      flex-direction:column; justify-content:center; align-items:center;
      min-height:auto; padding:56px 0;
    }
    .closing-frame img{ object-position:center; }
    .closing-card{
      max-width:480px; margin:0 20px;
      text-align:center;
    }
    .closing-icon{ margin:0 auto 18px; }
    .closing-sub{ margin:0 auto 24px; }
  }
  @media (max-width:768px){
    .closing{ padding:64px 16px; }
    .closing-frame{ border-radius:24px; padding:40px 20px; }
    .closing-card{ padding:36px 24px; margin:0 16px; }
  }