:root{
    --paper:#F6F4EF;        /* Warm sand */
    --paper-2:#EBE7DD;      /* Slightly darker sand */
    --ink:#111111;          /* Black for better readability */
    --ink-soft:#4A443E;     /* Darker warm grey */
    --line:#E3DED5;         /* Soft stone */
    --line-strong:#D0CABC;  /* Stronger stone */
    --pine:#5A6233;         /* Dark Olive - brand primary */
    --pine-2:#3F4523;       /* Darker Olive */
    --pine-soft:#79834A;    /* Soft Olive */
    --brass:#8C4A3A;        /* Terracotta - warm signal */
    --brass-soft:#C16854;   /* Soft Terracotta */
    --panel:#EBE7DD;        /* dark umber surface for the signature */
    --panel-line:rgba(17,17,17,.14);

    --display:"Fraunces", Georgia, "Times New Roman", serif;
    --body:"Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

    --maxw:1180px;
    --gutter:clamp(20px,5vw,72px);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth; scroll-padding-top: 80px;}
  body{padding-top: 72px;}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

  
/* ---------- Ornaments ---------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.08;
  mix-blend-mode: overlay;
}

.hero::after {
  content: "";
  position: absolute;
  width: 40vw;
  height: 40vw;
  background: var(--pine-soft);
  filter: blur(100px);
  opacity: 0.15;
  border-radius: 50%;
  top: -10vw;
  right: -5vw;
  z-index: -1;
  animation: floatOrb 10s ease-in-out infinite alternate;
}

@keyframes floatOrb {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-30px, 30px) scale(1.1); }
}

@keyframes floatHero {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-12px); }
}

/* ---------- custom scrollbar ---------- */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--paper);
}
::-webkit-scrollbar-thumb {
  background: var(--pine);
  border: 3px solid var(--paper);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--brass-soft);
}
html {
  scrollbar-width: thin;
  scrollbar-color: var(--pine) var(--paper);
}

body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--body);
    font-size:17px;
    line-height:1.62;
  }
  a{color:inherit;text-decoration:none;touch-action:manipulation;}
  button, .nav-toggle{touch-action:manipulation;}
  img{max-width:100%;display:block;}
  ::selection{background:var(--pine);color:var(--paper);}
  strong {
    font-weight: 600;
    color: var(--ink);
  }
  em {
    font-style: italic;
  }

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

  .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);}

  /* ---------- utility label (mono) ---------- */
  .kicker{
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:.14em;
    text-transform:uppercase;
    font-weight:500;
    color:var(--ink-soft);
    display:inline-flex;align-items:center;gap:8px;
  }
  .kicker .no{color:var(--pine);}
  .kicker .bar{display:inline-block;width:22px;height:1px;background:var(--line-strong);}

  /* ---------- top bar ---------- */
  header.nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    background:color-mix(in srgb, var(--paper) 86%, transparent);
    backdrop-filter:saturate(120%) blur(9px);
    border-bottom:1px solid transparent;
    transition:border-color .35s ease, box-shadow .35s ease, background .35s ease, transform .4s cubic-bezier(.4,0,.2,1);
  }
  header.nav.scrolled{
    background:color-mix(in srgb, var(--paper) 94%, transparent);
    border-bottom:1px solid var(--line);
    box-shadow:0 12px 40px rgba(20,37,31,.05);
  }
  header.nav.nav-hidden{
    transform:translateY(-105%);
  }
  .nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px;}
  .brand{display:inline-flex;align-items:center;}
  .brand-logo{height:36px;width:auto;object-fit:contain;}
  .nav-mid{display:flex;gap:28px;align-items:center;transition:opacity .3s ease;}
  .nav-mid:has(a:hover) a:not(:hover){opacity:0.4;}
  .nav-mid a{font-size:14px;font-weight:500;color:var(--ink-soft);position:relative;padding:4px 0;transition:color .25s ease, opacity .25s ease;}
  .nav-mid a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--pine);transition:width .28s ease;}
  .nav-mid a:hover{color:var(--ink);}
  .nav-mid a:hover::after,.nav-mid a.active::after{width:100%;}
  .nav-mid a.active{color:var(--ink);}
  .nav-right{display:flex;align-items:center;gap:18px;}
  .lang-switch{font-size:13px;font-weight:600;letter-spacing:0.04em;display:flex;align-items:center;gap:6px;}
  .lang-switch a{color:var(--ink);text-decoration:none;opacity:0.4;transition:opacity 0.2s;}
  .lang-switch a.active{opacity:1;}
  .lang-switch a:hover{opacity:0.8;}
  .lang-switch .sep{opacity:0.2;}
  .nav-clock{font-family:var(--mono);font-size:12px;color:var(--ink-soft);letter-spacing:.04em;display:inline-flex;align-items:center;gap:7px;}
  .nav-clock .pip{width:7px;height:7px;border-radius:50%;background:var(--pine-soft);box-shadow:0 0 0 3px rgba(62,112,98,.18);}
  .nav-cta{
    font-size:14px;font-weight:600;color:var(--paper);background:var(--ink);
    border-radius:999px;padding:9px 20px;transition:background .2s ease,transform .2s ease;
  }
  .nav-cta:hover{background:var(--pine);transform:translateY(-1px);}
  .nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;}
  .nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);margin:4px 0;transition:.25s;}

  /* ---------- section scaffolding ---------- */
  .section{padding-block:clamp(44px,6vw,80px);}
  /* make sure anchored sections land with heading visible, not buried */
  #hero, #about, #services, #process, #work, #experience, #contact {
    scroll-margin-top: 80px;
  }
  .section.ruled{border-top:1px solid var(--line);}
  .section-head{margin-bottom:clamp(36px,5vw,60px);max-width:60ch;}
  .section-head h2{
    font-family:var(--display);font-weight:600;
    font-size:clamp(34px,6vw,60px);line-height:1.03;letter-spacing:-0.015em;margin:14px 0 0;
  }
  .section-head h2 strong{color:var(--pine);}
  .section-head p{max-width:58ch;color:var(--ink-soft);margin:16px 0 0;font-size:16.5px;}

  .hook{
    padding-top:clamp(32px,5vw,60px);
    padding-bottom:clamp(32px,5vw,60px);
    text-align: center;
    max-width: 860px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    min-height: calc(100svh - 72px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .hook::before {
    content: "";
    position: absolute;
    inset: -60px -50vw; /* expand beyond max-width */
    background-image: 
      linear-gradient(to right, rgba(23,43,36,0.04) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(23,43,36,0.04) 1px, transparent 1px);
    background-size: 32px 32px;
    z-index: -1;
    pointer-events: none;
    mask-image: radial-gradient(circle at center, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(circle at center, black 20%, transparent 70%);
  }
  /* stagger delays for hook children via data-delay */
  .hook .reveal-child[data-delay="0"]{transition-delay:0s;}
  .hook .reveal-child[data-delay="1"]{transition-delay:0.18s;}
  .hook .reveal-child[data-delay="2"]{transition-delay:0.32s;}
  .hook h1{
    font-family:var(--display);font-weight:600;
    font-size:clamp(40px,7.5vw,86px);line-height:1.05;letter-spacing:-0.02em;margin:0 0 24px;
    color: var(--pine);
  }
  .hook h1 strong{color:var(--brass-soft);}
  .hook-lead{
    font-size:clamp(17px,2vw,21px);line-height:1.6;margin:0 auto 36px;
    color:var(--ink);
    max-width: 65ch;
  }
  .hook .btn-solid {
    background:var(--pine);color:var(--paper);font-weight:600;font-size:16px;
    padding:16px 32px;border-radius:999px;transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
    display: inline-block;
  }
  .hook .btn-solid:hover{transform:translateY(-2px);background:var(--pine-2);box-shadow:0 10px 24px rgba(17,17,17,.08);}
  /* ---- hook-hero divider ---- */
  .hook-hero-divider{
    display:flex;align-items:center;gap:14px;
    max-width:280px;margin:0 auto;
    padding-bottom:clamp(20px,4vw,44px);
  }
  .divider-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line-strong),transparent);}
  .divider-dot{
    width:6px;height:6px;border-radius:50%;background:var(--pine-soft);opacity:.55;
    flex-shrink:0;
  }

  /* ---------- hero ---------- */
  .hero{
    padding-top:clamp(40px,6vw,90px);
    padding-bottom:clamp(60px,10vw,140px);
    position: relative;
    overflow: hidden;
  }.hero-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(28px,5vw,64px);align-items:center;}
  .hero h2{
    font-family:var(--display);font-weight:600;
    font-size:clamp(46px,8.4vw,96px);line-height:.98;letter-spacing:-0.02em;margin:20px 0 0;
  }
  .hero h2 strong{color:var(--pine);}
  .hero-lead{font-size:clamp(17px,1.9vw,20px);line-height:1.55;margin:26px 0 0;max-width:44ch;color:var(--ink);}
  .hero-lead strong{font-weight:600;}
  .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px;align-items:center;}
  .btn-solid{
    background:var(--pine);color:var(--paper);font-weight:600;font-size:15px;
    padding:15px 28px;border-radius:999px;transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
    box-shadow:0 8px 24px rgba(40,86,74,.20);
  }
  .btn-solid:hover{background:var(--pine-2);transform:translateY(-2px);box-shadow:0 12px 30px rgba(40,86,74,.28);}
  .btn-ghost{font-weight:600;font-size:15px;color:var(--ink);padding:15px 8px;position:relative;}
  .btn-ghost::after{content:"";position:absolute;left:8px;right:8px;bottom:9px;height:1.5px;background:var(--brass);transform:scaleX(1);transform-origin:left;transition:transform .28s ease;}
  .btn-ghost:hover::after{transform:scaleX(.35);}
  .avail{display:inline-flex;align-items:center;gap:10px;margin-top:26px;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--ink-soft);}
  .avail .pip{width:9px;height:9px;border-radius:50%;background:#3f8f5f;box-shadow:0 0 0 4px rgba(63,143,95,.16);}

  /* portrait */
  .portrait{position:relative;}
  .portrait .frame{animation: floatHero 6s ease-in-out infinite alternate;
    position:relative;aspect-ratio:4/5;width:100%;border-radius:14px;overflow:hidden;
    background:linear-gradient(150deg,var(--paper-2),#DEDCD2);border:1px solid var(--line-strong);
  }
  .portrait .frame img{width:100%;height:120%;object-fit:cover;}
  .portrait .ph{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:var(--ink-soft);padding:24px;font-family:var(--mono);font-size:12px;line-height:1.7;letter-spacing:.03em;}
  .portrait .ph b{display:block;color:var(--pine);font-weight:600;margin-bottom:6px;letter-spacing:.08em;}
  .portrait .cap{
    position:absolute;left:16px;bottom:16px;right:16px;
    background:color-mix(in srgb,var(--panel) 92%,transparent);color:var(--ink);
    border-radius:10px;padding:12px 14px;display:flex;justify-content:space-between;gap:12px;align-items:center;
    font-family:var(--mono);font-size:11px;letter-spacing:.05em;backdrop-filter:blur(4px);
  }
  .portrait .cap b{color:var(--brass-soft);font-weight:500;}

  /* ---------- signature: overnight handoff ---------- */
  .handoff{background:var(--panel);color:var(--ink);}
  .handoff-inner{padding-block:clamp(40px,6vw,72px);}
  .handoff .kicker{color:rgba(17,17,17,.62);}
  .handoff .kicker .no{color:var(--brass-soft);}
  .handoff .kicker .bar{background:var(--panel-line);}
  .handoff h2{
    font-family:var(--display);font-weight:500;font-size:clamp(26px,3.6vw,42px);
    line-height:1.08;letter-spacing:-.01em;margin:14px 0 0;max-width:20ch;
  }
  .handoff h2 strong{color:var(--brass-soft);}
  .handoff-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,5vw,60px);align-items:center;margin-top:clamp(28px,4vw,44px);}
  .clocks{display:flex;gap:14px;flex-wrap:wrap;}
  .clock{flex:1 1 160px;border:1px solid var(--panel-line);border-radius:12px;padding:16px 18px;background:rgba(17,17,17,.02);}
  .clock .who{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(17,17,17,.55);}
  .clock .time{font-family:var(--display);font-weight:500;font-size:clamp(30px,4.6vw,44px);line-height:1;margin-top:8px;font-variant-numeric:tabular-nums;}
  .clock .zone{font-family:var(--mono);font-size:11px;color:rgba(17,17,17,.5);margin-top:6px;letter-spacing:.05em;}
  .clock.me{border-color:rgba(176,134,63,.4);}
  .clock.me .who{color:var(--brass-soft);}

  .overlap{display:flex;flex-direction:column;gap:12px;}
  .overlap .lead{font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:rgba(17,17,17,.7);line-height:1.6;}
  .overlap .lead b{color:var(--ink);font-weight:600;}
  .track-wrap{position:relative;}
  .track{position:relative;height:44px;border-radius:9px;background:rgba(17,17,17,.06);overflow:hidden;border:1px solid var(--panel-line);}
  .track .desk{position:absolute;top:0;bottom:0;background:linear-gradient(180deg,rgba(176,134,63,.55),rgba(176,134,63,.32));border-left:1px solid var(--brass-soft);border-right:1px solid var(--brass-soft);}
  .track .now{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--pine);box-shadow:0 0 10px rgba(17,17,17,.2);}
  .track .now::after{content:"";position:absolute;top:-4px;left:-3px;width:8px;height:8px;border-radius:50%;background:var(--pine);}
  .axis{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:rgba(17,17,17,.4);letter-spacing:.04em;margin-top:2px;}
  .track-legend{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;color:rgba(17,17,17,.6);margin-top:4px;}
  .track-legend span{display:inline-flex;align-items:center;gap:7px;}
  .track-legend i{width:12px;height:12px;border-radius:3px;display:inline-block;}
  .track-legend .k-desk{background:rgba(176,134,63,.5);}
  .track-legend .k-now{width:2px;height:12px;border-radius:0;background:var(--pine);}
  .status-line{font-family:var(--mono);font-size:12.5px;color:var(--brass-soft);margin-top:2px;letter-spacing:.02em;}

  /* ---------- proof stats ---------- */
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-block:1px solid var(--line);}
  .stat{background:var(--paper);padding:clamp(24px,3vw,34px) clamp(18px,2.4vw,28px);}
  .stat .fig{font-family:var(--display);font-weight:600;font-size:clamp(34px,4.4vw,52px);line-height:1;letter-spacing:-.02em;color:var(--pine);}
  .stat .lbl{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--ink-soft);margin-top:12px;line-height:1.5;text-transform:uppercase;}

  /* ---------- about ---------- */
  .about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,68px);align-items:start;}
  .about-copy p{font-size:17.5px;line-height:1.66;margin:0 0 18px;}
  .about-copy p:last-child{margin-bottom:0;}
  .about-copy .pull{font-family:var(--display);font-weight:500;font-size:clamp(22px,2.6vw,28px);line-height:1.28;letter-spacing:-.01em;color:var(--ink);border-left:2px solid var(--pine);padding-left:20px;margin:8px 0 24px;}
  .about-copy .pull strong{color:var(--pine);}
  .about-side{position:sticky;top:96px;}
  .about-card{border:1px solid var(--line-strong);border-radius:14px;padding:26px;background:var(--paper);}
  .about-card h4{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 16px;font-weight:500;}
  .about-card dl{margin:0;display:grid;gap:14px;}
  .about-card dt{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--pine);text-transform:uppercase;}
  .about-card dd{margin:2px 0 0;font-size:15px;color:var(--ink);}

  
  /* Interactive Hover Animations */
  .svc:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(17,17,17,.04);
  }
  .stat {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .stat:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 12px 30px rgba(17,17,17,.04);
    z-index: 2;
  }
  .work-visual {
    overflow: hidden;
  }
  .work-visual img {
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .work:hover .work-visual img {
    transform: scale(1.03);
  }
  .about-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .about-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(17,17,17,.05);
  }

  /* ---------- services ---------- */
  .services{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;}
  .svc{background:var(--paper);padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;gap:14px;transition:background .25s ease;}
  .svc:hover{background:#FCFCF9;}
  .svc-num{font-family:var(--mono);font-size:12px;color:var(--pine);font-weight:500;letter-spacing:.08em;}
  .svc h3{font-family:var(--display);font-weight:600;font-size:25px;line-height:1.12;margin:0;letter-spacing:-.01em;}
  .svc ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
  .svc li{font-size:13px;color:var(--ink-soft);border:1px solid var(--line-strong);border-radius:999px;padding:5px 12px;background:var(--paper);}

  /* ---------- process ---------- */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,36px);counter-reset:step;}
  .step{position:relative;padding-top:26px;border-top:2px solid var(--pine);}
  .step .n{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--pine);}
  .step h4{font-family:var(--display);font-weight:600;font-size:22px;line-height:1.14;margin:12px 0 10px;letter-spacing:-.01em;}
  .step p{margin:0;font-size:15px;color:var(--ink-soft);line-height:1.55;}

  /* ---------- selected work (carousel) ---------- */
  .carousel-wrapper {
    position: relative;
    width: 100%;
  }
  .carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
    display: grid;
    place-content: center;
    transition: all 0.3s ease;
    z-index: 10;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15); /* Stronger shadow since it overlays the cards */
  }
  .carousel-btn.prev {
    left: 16px; /* Moved inside */
  }
  .carousel-btn.next {
    right: 16px; /* Moved inside */
  }
  .carousel-btn:hover, .carousel-btn:focus-visible {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
  }

  .work-list {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 24px;
    padding-bottom: 32px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .work-list::-webkit-scrollbar {
    display: none;
  }

  .work {
    flex: 0 0 calc(100% - 40px); /* peek effect */
    scroll-snap-align: start;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    padding: clamp(24px, 3.4vw, 36px);
    display: grid;
    grid-template-columns: 56px 1.12fr .88fr;
    gap: clamp(18px, 3vw, 44px);
    align-items: start;
    background: var(--paper);
  }
  .work-idx{font-family:var(--mono);font-size:14px;color:var(--ink-soft);font-weight:500;padding-top:6px;letter-spacing:.05em;}
  .work-main .tag{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;padding:5px 11px;border-radius:999px;margin-bottom:14px;}
  .tag.concept{background:var(--paper-2);color:var(--ink-soft);border:1px solid var(--line-strong);}
  .tag.real{background:var(--pine);color:var(--paper);}
  .tag.sample{background:transparent;color:var(--brass);border:1px solid var(--brass);}
  .work h3{font-family:var(--display);font-weight:600;font-size:clamp(24px,3.2vw,32px);line-height:1.08;margin:0 0 10px;letter-spacing:-.01em;}
  .work .scenario{color:var(--ink-soft);font-size:15.5px;margin:0 0 18px;max-width:52ch;}
  .work dl{margin:0;display:grid;gap:14px;}
  .work dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--pine);margin-bottom:4px;}
  .work dd{margin:0;font-size:15px;line-height:1.56;}
  .work dd em{font-style:italic;color:var(--ink-soft);}
  .work-visual{aspect-ratio:16/11;border-radius:11px;overflow:hidden;border:1px solid var(--line-strong);background:linear-gradient(140deg,#FCFCF9,var(--paper-2));display:grid;place-content:center;text-align:center;color:var(--ink-soft);font-family:var(--mono);font-size:11px;line-height:1.7;padding:20px;letter-spacing:.03em;}
  .work-visual img{width:100%;height:100%;object-fit:cover;}
  .work-visual b{display:block;color:var(--pine);font-weight:600;margin-bottom:5px;letter-spacing:.06em;}

  /* ---------- tools (bento grid) ---------- */
  .tools-bento {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
  }
  .tool-card {
    background: linear-gradient(135deg, var(--paper), var(--paper-2));
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    padding: clamp(24px, 3vw, 32px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
  }
  .tool-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.06);
    border-color: var(--pine-soft);
  }
  .tool-card h4 {
    font-family: var(--display);
    font-size: 22px;
    font-weight: 500;
    color: var(--ink);
    margin: 0 0 10px;
    letter-spacing: -0.01em;
  }
  .tool-desc {
    font-size: 14.5px;
    color: var(--ink-soft);
    line-height: 1.5;
    margin: 0 0 24px;
    max-width: 90%;
  }
  .tool-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .stack-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid var(--line-strong);
    padding: 6px 14px 6px 10px;
    border-radius: 99px;
    font-size: 13px;
    font-family: var(--mono);
    color: var(--ink);
    transition: all 0.3s ease;
  }
  .stack-tag:hover {
    background: var(--paper-2);
    border-color: var(--pine-soft);
  }
  .stack-tag .si {
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: var(--ink-soft);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition: background-color 0.3s;
  }
  .stack-tag:hover .si {
    background: radial-gradient(circle at 15% 10%, #697439 0%, var(--pine) 50%, #353a1d 100%);
  position: relative;
  }
  /* Simple Icons Masks */
  .si-todoist { -webkit-mask-image: url('https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/todoist.svg'); }
  .si-trello { -webkit-mask-image: url('https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/trello.svg'); }
  .si-notion { -webkit-mask-image: url('https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/notion.svg'); }
  .si-clockify { -webkit-mask-image: url('https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/clockify.svg'); }
  .si-google { -webkit-mask-image: url('https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/google.svg'); }
  .si-microsoftoutlook { -webkit-mask-image: url('https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/microsoftoutlook.svg'); }
  .si-calendly { -webkit-mask-image: url('https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/calendly.svg'); }
  .si-googlesheets { -webkit-mask-image: url('https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/googlesheets.svg'); }
  .si-microsoftexcel { -webkit-mask-image: url('https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/microsoftexcel.svg'); }
  .si-googledrive { -webkit-mask-image: url('https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/googledrive.svg'); }
  .si-slack { -webkit-mask-image: url('https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/slack.svg'); }
  .si-zoom { -webkit-mask-image: url('https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/zoom.svg'); }
  .si-googlemeet { -webkit-mask-image: url('https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/googlemeet.svg'); }
  .si-canva { -webkit-mask-image: url('https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/canva.svg'); }
  .si-meta { -webkit-mask-image: url('https://cdn.jsdelivr.net/npm/simple-icons@v11/icons/meta.svg'); }

  /* ---------- experience ---------- */
  .xp{display:flex;flex-direction:column;}
  .xp-row{display:grid;grid-template-columns:.95fr 1.55fr .6fr;gap:clamp(14px,2.4vw,40px);padding-block:26px;border-top:1px solid var(--line);align-items:baseline;}
  .xp-row:first-child{border-top:0;}
  .xp-role{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.01em;}
  .xp-org{color:var(--pine);font-size:13.5px;font-weight:600;margin-top:4px;}
  .xp-desc{color:var(--ink-soft);font-size:15px;}
  .xp-date{font-family:var(--mono);font-size:12px;color:var(--ink-soft);text-align:right;font-variant-numeric:tabular-nums;letter-spacing:.02em;}

  /* ---------- contact ---------- */
  #contact{background:var(--panel);color:var(--ink);}
  #contact .kicker{color:rgba(17,17,17,.6);}
  #contact .kicker .no{color:var(--brass-soft);}
  #contact .kicker .bar{background:var(--panel-line);}
  .contact-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(30px,5vw,80px);align-items:center;}
  .contact-grid h2{font-family:var(--display);font-weight:500;font-size:clamp(40px,7vw,78px);line-height:1;letter-spacing:-.02em;margin:16px 0 0;}
  .contact-grid h2 strong{color:var(--brass-soft);}
  .contact-copy{color:rgba(17,17,17,.76);margin-top:22px;max-width:46ch;font-size:16.5px;}
  .contact-copy b{color:var(--ink);font-weight:600;}
  .contact-links{display:flex;flex-direction:column;gap:2px;}
  .contact-links a{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;border-top:1px solid var(--panel-line);font-size:16px;font-weight:500;transition:padding .25s ease,color .2s ease;}
  .contact-links a:last-child{border-bottom:1px solid var(--panel-line);}
  .contact-links a:hover{padding-left:10px;color:var(--ink);}
  .contact-links .lbl{font-family:var(--mono);color:rgba(17,17,17,.55);font-size:11px;letter-spacing:.12em;text-transform:uppercase;}
  .contact-links .arw{color:var(--brass-soft);font-size:18px;}

  /* ---------- footer ---------- */
  footer{background:var(--panel);color:rgba(17,17,17,.5);padding-block:34px;border-top:1px solid var(--panel-line);}
  .foot-inner{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;}
  .foot-inner a{color:rgba(17,17,17,.7);}
  .foot-inner a:hover{color:var(--brass-soft);}

  /* ========================================
     ✦ ORNAMEN & DESIGN ENHANCEMENTS
     ======================================== */

  /* --- 1. Marquee ticker band --- */
  .marquee-band {
    background: var(--pine);
    color: var(--paper);
    overflow: hidden;
    white-space: nowrap;
    padding: 11px 0;
    position: relative;
    z-index: 1;
  }
  .marquee-inner {
    display: inline-flex;
    gap: 0;
    animation: marquee 30s linear infinite;
    will-change: transform;
  }
  .marquee-band:hover .marquee-inner { animation-play-state: paused; }
  .marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    padding-right: 40px;
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: rgba(246,244,239,.85);
  }
  .marquee-item .dot {
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--brass-soft); flex-shrink: 0;
  }
  @keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .marquee-inner { animation: none; }
  }

  /* --- 2. Section number decorative background text --- */
  .section-head {
    position: relative;
    overflow: visible;
  }
  .section-head::before {
    content: attr(data-num);
    position: absolute;
    top: -0.18em;
    left: -0.04em;
    font-family: var(--display);
    font-size: clamp(72px, 11vw, 148px);
    font-weight: 700;
    color: var(--line);
    opacity: 0.55;
    line-height: 1;
    pointer-events: none;
    z-index: 0;
    letter-spacing: -0.04em;
    user-select: none;
  }
  .section-head > * { position: relative; z-index: 1; }

  /* --- 3. Gradient glow — About section --- */
  #about {
    position: relative;
    overflow: hidden;
  }
  #about::after {
    content: "";
    position: absolute;
    width: 55vw; height: 55vw;
    background: radial-gradient(circle, color-mix(in srgb, var(--pine) 7%, transparent), transparent 65%);
    top: -20%; right: -20%;
    pointer-events: none; z-index: 0;
  }
  #about .wrap { position: relative; z-index: 1; }

  /* --- 4. Gradient glow — Contact section --- */
  #contact {
    position: relative;
    overflow: hidden;
  }
  #contact::before {
    content: "";
    position: absolute;
    width: 45vw; height: 45vw;
    background: radial-gradient(circle, color-mix(in srgb, var(--brass-soft) 9%, transparent), transparent 65%);
    bottom: -10%; left: -8%;
    pointer-events: none; z-index: 0;
  }
  #contact .wrap { position: relative; z-index: 1; }

  /* --- 5. Ornamental diamond dividers --- */
  .section.ruled {
    border-top: none;
    position: relative;
  }
  .section.ruled::before {
    content: "◆";
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--line-strong);
    font-size: 7px;
    letter-spacing: 0;
    padding-top: clamp(44px, 6vw, 80px);
    margin-bottom: clamp(44px, 6vw, 80px);
    border-top: 1px solid var(--line);
    position: relative;
  }
  .section.ruled::before::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    height: 1px;
    background: var(--line);
  }

  /* --- 6. Service card shimmer hover glow --- */
  .svc {
    position: relative;
    isolation: isolate;
  }
  .svc::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
      color-mix(in srgb, var(--pine) 8%, transparent) 0%,
      transparent 60%
    );
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    z-index: 0;
  }
  .svc:hover::after { opacity: 1; }
  .svc > * { position: relative; z-index: 1; }

  /* --- 7. Step connector horizontal line --- */
  .steps {
    position: relative;
  }
  .steps::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
      var(--pine) 0%,
      var(--pine-soft) 40%,
      var(--brass-soft) 75%,
      transparent 100%
    );
    pointer-events: none;
    opacity: 0.4;
  }

  /* --- 8. Contact link micro-animation upgrade --- */
  .contact-links a {
    position: relative;
  }
  .contact-links a::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--pine);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
  }
  .contact-links a:hover::before { transform: scaleX(1); }
  .contact-links a .arw {
    transition: transform 0.25s ease, color 0.25s ease;
  }
  .contact-links a:hover .arw {
    transform: translateX(5px);
    color: var(--pine);
  }

  /* --- 9. Sticky section progress dots (right side) --- */
  .progress-dots {
    position: fixed;
    right: clamp(14px, 2vw, 28px);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 90;
    pointer-events: none;
  }
  .progress-dots a {
    display: block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--line-strong);
    transition: background 0.3s ease, transform 0.3s ease, height 0.3s ease;
    pointer-events: all;
    opacity: 0.5;
  }
  .progress-dots a.active {
    background: var(--pine);
    transform: scaleX(1);
    height: 20px;
    border-radius: 3px;
    opacity: 1;
  }
  .progress-dots a:hover {
    background: var(--pine-soft);
    opacity: 0.85;
  }
  @media (max-width: 900px) {
    .progress-dots { display: none; }
  }

  /* --- 10. Stat counter — flash-in animation for .fig --- */
  .stat .fig {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .stat.counted .fig {
    opacity: 1;
    transform: translateY(0);
  }

  /* ---------- motion & smooth scroll ---------- */
  html.lenis, html.lenis body {
    height: auto;
  }
  .lenis.lenis-smooth {
    scroll-behavior: auto !important;
  }
  .lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
  }
  .lenis.lenis-stopped {
    overflow: hidden;
  }
  .lenis.lenis-scrolling iframe {
    pointer-events: none;
  }

  /* SplitType overflow wrappers */
  .line-wrapper {
    overflow: hidden;
    padding-bottom: 0.1em;
  }
  footer.wrap { padding-top: 40px; padding-bottom: 40px; }

  /* ----- Scroll Progress Line ----- */
  .progress-line {
    position: fixed;
    top: 0;
    right: 0;
    width: 4px;
    height: 100vh;
    background: var(--pine);
    transform-origin: top;
    transform: scaleY(0);
    z-index: 9999;
    pointer-events: none;
    opacity: 0.6;
  }
  /* Pre-hide elements for GSAP to reveal */
  .gsap-reveal {
    visibility: hidden;
  }

  .stats-section{padding-block:clamp(40px,6vw,72px);}
  .stats-head{margin-bottom:clamp(24px,3vw,36px);}
  .stats-subtitle{
    font-family:var(--display);font-style:italic;
    font-size:clamp(20px,2.4vw,28px);
    font-weight:500;color:var(--ink);margin:10px 0 0;
    letter-spacing:-0.01em;
  }

  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1;transform:none;transition:none;}
    .reveal-child{opacity:1;transform:none;transition:none;}
    .hero .kicker,.hero-title .line,.hero-lead,.hero-actions,.hero .avail,.portrait{animation:none;opacity:1;transform:none;clip-path:none;}
  }

  /* ---------- responsive ---------- */
  @media (max-width:960px){
    .hero-grid{grid-template-columns:1fr;}
    .portrait{max-width:380px;order:-1;}
    .handoff-grid{grid-template-columns:1fr;gap:34px;}
    .about-grid{grid-template-columns:1fr;}
    .about-side{position:static;}
    .steps{grid-template-columns:repeat(2,1fr);row-gap:34px;}
    .services{grid-template-columns:1fr;}
    .work{grid-template-columns:40px 1fr;}
    .work-visual{grid-column:1 / -1;margin-top:6px;}
    .tools-bento{grid-template-columns:1fr; gap:16px;}
    .xp-row{grid-template-columns:1fr;gap:6px;}
    .xp-date{text-align:left;}
    .contact-grid{grid-template-columns:1fr;align-items:start;}
    .stats{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:680px){
    .nav-mid{display:none;}
    .nav-mid.open{
      display:flex;position:fixed;inset:70px 0 auto 0;background:var(--paper);
      flex-direction:column;align-items:flex-start;gap:0;border-bottom:1px solid var(--line);padding:8px var(--gutter) 18px;
    }
    .nav-mid.open a{padding:13px 0;width:100%;border-bottom:1px solid var(--line);}
    .nav-clock{display:none;}
    .nav-toggle{display:block;}
    .stats{grid-template-columns:1fr;}
    .clocks{flex-direction:row;}
  }

/* ---------- lightbox ---------- */
.lightbox {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(59, 54, 47, 0.85); /* var(--ink) with opacity */
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.lightbox.show {
  display: flex;
  opacity: 1;
  justify-content: center;
  align-items: center;
}
.lightbox-content {
  max-width: 90%;
  max-height: 90%;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.lightbox.show .lightbox-content {
  transform: scale(1);
}
.lightbox-close {
  position: absolute;
  top: 30px;
  right: 40px;
  color: var(--paper);
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.2s ease;
}
.lightbox-close:hover, .lightbox-close:focus-visible {
  color: var(--brass-soft);
  outline: none;
}
.work-visual {
  cursor: zoom-in; /* indicates it's clickable */
}

/* ---------- animations & ornaments ---------- */
.ambient-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.blob {
  position: absolute;
  filter: blur(80px);
  opacity: 0.4;
  border-radius: 50%;
  animation: float-blob 18s ease-in-out infinite alternate;
  will-change: transform;
}
.blob-1 {
  width: 40vw;
  height: 40vw;
  background: color-mix(in srgb, var(--pine) 20%, transparent);
  top: -10vw;
  left: -10vw;
}
.blob-2 {
  width: 35vw;
  height: 35vw;
  background: color-mix(in srgb, var(--brass) 15%, transparent);
  bottom: -5vw;
  right: -5vw;
  animation-delay: -5s;
  animation-direction: alternate-reverse;
}

@keyframes float-blob {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(5vw, 5vh) scale(1.1); }
  100% { transform: translate(-3vw, 8vh) scale(0.9); }
}

/* Micro-interaction updates */
.btn-solid, .btn-ghost {
  overflow: hidden;
  position: relative;
}
.btn-solid::after, .btn-ghost::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  height: 150%;
  background: rgba(255, 255, 255, 0.1);
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  transition: transform 0.4s ease-out;
}
.btn-solid:hover::after, .btn-ghost:hover::after {
  transform: translate(-50%, -50%) scale(1);
}

/* ---------- Cursor glow ---------- */
.cursor-glow {
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--pine) 8%, transparent), transparent 70%);
  transform: translate(-50%, -50%);
  transition: left 0.06s linear, top 0.06s linear;
  will-change: left, top;
}

/* ---------- Pip pulse ---------- */
@keyframes pip-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(63,143,95,.55); }
  50%  { box-shadow: 0 0 0 6px rgba(63,143,95,.0); }
  100% { box-shadow: 0 0 0 0   rgba(63,143,95,0); }
}
.avail .pip {
  animation: pip-pulse 2.2s ease-out infinite;
}

/* ---------- Decorative hero grid ornament ---------- */
.hero-ornament {
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.07;
}
.hero-ornament svg {
  width: 100%;
  height: 100%;
}

/* ---------- Staggered reveal for service cards ---------- */
.svc-wrap .svc:nth-child(1) { transition-delay: 0s; }
.svc-wrap .svc:nth-child(2) { transition-delay: 0.1s; }
.svc-wrap .svc:nth-child(3) { transition-delay: 0.2s; }
.svc-wrap .svc:nth-child(4) { transition-delay: 0.3s; }

/* ---------- Animated underline on section h2 ---------- */
.section-head h2 {
  position: relative;
  display: inline-block;
}
.section-head h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--pine);
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.section-head.in h2::after {
  width: 100%;
}

/* ---------- Stat figure count-up flash ---------- */
.stat .fig {
  transition: color 0.4s ease;
}
.stat.counting .fig {
  color: var(--brass-soft);
}

/* ---------- Hook title shimmer ornament ---------- */
.hook-title-wrap {
  position: relative;
  display: inline-block;
}
.hook-ornament {
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(60px, 12vw, 120px);
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brass-soft), transparent);
  opacity: 0.7;
  border-radius: 2px;
  animation: shimmer-line 3s ease-in-out infinite;
}
@keyframes shimmer-line {
  0%   { opacity: 0.3; width: clamp(40px,6vw,80px); }
  50%  { opacity: 0.8; width: clamp(80px,14vw,140px); }
  100% { opacity: 0.3; width: clamp(40px,6vw,80px); }
}



/* =========================================
   EARTH TONE COLOR BLOCKS OVERRIDES
   ========================================= */

:root {
  --pine-bright: #9eb55b;
  --pink-accent: #e88d78; /* A balanced pink/terracotta for good contrast */
}

/* Hero Section */
.hero-bg {
  background-color: var(--paper-dim);
}
.hero-bg .hero {
  border-top: none;
}

/* Handoff Section (Dark Green) */
.handoff {
  background: radial-gradient(circle at 15% 10%, #697439 0%, var(--pine) 50%, #353a1d 100%);
  position: relative;
  color: var(--paper);
}
.handoff .kicker {
  color: rgba(246, 244, 239, 0.7) !important;
}
.handoff .kicker .no, 
.handoff h2 strong, 
.handoff .overlap .kicker /* My desk Surabaya */ {
  color: var(--pink-accent) !important; 
}
.handoff .kicker .bar {
  background: rgba(246, 244, 239, 0.2) !important;
}
.handoff .track {
  border-bottom-color: rgba(246, 244, 239, 0.2) !important;
}
.handoff .status-line {
  border-top-color: rgba(246, 244, 239, 0.2) !important;
  color: rgba(246, 244, 239, 0.6) !important;
}
.handoff .time {
  color: var(--paper) !important;
}
.handoff .zone {
  color: rgba(246, 244, 239, 0.8) !important;
}


.handoff .lead, .handoff .lead b {
  color: var(--paper) !important;
}
.handoff .axis span {
  color: rgba(246, 244, 239, 0.6) !important;
}
.handoff .track-legend span {
  color: rgba(246, 244, 239, 0.8) !important;
}

.handoff .clock {
  border-color: rgba(255,255,255,0.15) !important;
  background: rgba(255,255,255,0.02) !important;
}
.handoff .clock .who {
  color: rgba(255,255,255,0.6) !important;
}
.handoff .clock.me {
  border-color: rgba(214, 125, 105, 0.5) !important;
}
.handoff .clock.me .who {
  color: var(--pink-accent) !important;
}

/* Fixed Track Bar */
.handoff .track {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.1) !important;
}
.handoff .track .desk {
  background: rgba(232, 141, 120, 0.25) !important;
  border-left: 1px solid var(--pink-accent) !important;
  border-right: 1px solid var(--pink-accent) !important;
}
.handoff .track .now {
  background: var(--paper) !important;
}
.handoff .track .now::after {
  background: var(--paper) !important;
}
.handoff .track-legend .k-desk {
  background: var(--pink-accent) !important;
}
.handoff .track-legend .k-now {
  background: var(--paper) !important;
}

/* Services Section */
#services {
  background: radial-gradient(circle at 85% 15%, #9bad57 0%, var(--pine-soft) 40%, #51592c 100%);
  position: relative;
  color: var(--paper); 
  border-top-color: transparent;
}
#services .section-head h2 {
  color: var(--paper) !important;
}
#services .section-head p {
  color: var(--paper) !important;
}
#services .section-head p strong {
  color: var(--pink-accent) !important; /* Reclaim your time is pink */
}
#services .section-head h2 strong {
  color: var(--paper) !important; 
}

/* The cards inside services should be white with dark text */
#services .svc {
  background: var(--paper) !important;
  border-color: rgba(17,17,17,0.05) !important;
}
#services .svc h3, #services .svc p, #services .svc li {
  color: var(--ink) !important; /* Black text */
}
#services .svc li {
  background-color: transparent !important;
  border-color: rgba(17,17,17,0.1) !important;
}
#services .services {
  background: transparent !important;
  border: none !important;
}
#services .kicker, #services .kicker .no {
  color: rgba(255,255,255,0.7) !important;
}
#services .kicker .bar {
  background: rgba(255,255,255,0.2) !important;
}

/* Tools Section */
#tools {
  background: radial-gradient(circle at 15% 10%, #db7c66 0%, var(--brass-soft) 50%, #874837 100%);
  position: relative; /* This is the pink background */
  color: var(--paper) !important;
  border-top-color: transparent;
}
#tools h2, #tools p {
  color: var(--paper) !important;
}
#tools .section-head h2 strong {
  color: var(--pine) !important; /* Standard Green accent on pink background */
}
#tools .tool-card {
  background-color: var(--paper) !important;
  border-color: rgba(17,17,17,0.05) !important;
}
#tools .tool-card h4, #tools .tool-card p {
  color: var(--ink) !important; /* Dark text inside cards */
}
#tools .kicker, #tools .kicker .no {
  color: rgba(255,255,255,0.7) !important;
}
#tools .kicker .bar {
  background: rgba(255,255,255,0.2) !important;
}


/* Contact Section (Dark Ink) */
#contact {
  background: radial-gradient(circle at 50% 0%, #111111 0%, #050505 50%, #000000 100%);
  position: relative;
  color: var(--paper);
  padding-bottom: 60px;
  border-top-color: transparent;
}
#contact .kicker {
  color: rgba(246, 244, 239, 0.6) !important;
}
#contact .kicker .no, #contact h2 strong {
  color: var(--pink-accent) !important;
}
#contact .kicker .bar {
  background: rgba(246, 244, 239, 0.2) !important;
}
#contact p.contact-copy {
  color: rgba(246, 244, 239, 0.85) !important;
}
#contact p.contact-copy strong {
  color: var(--pink-accent) !important;
}
#contact .contact-links a {
  border-top-color: rgba(246, 244, 239, 0.15) !important;
  color: var(--paper) !important;
}
#contact .contact-links a .lbl {
  color: rgba(246, 244, 239, 0.5) !important;
}
#contact .contact-links a:hover {
  background: rgba(246, 244, 239, 0.03) !important;
}

footer {
  background: radial-gradient(circle at 50% 0%, #111111 0%, #050505 50%, #000000 100%);
  position: relative;
  color: rgba(246, 244, 239, 0.5);
  border-top: 1px solid rgba(246, 244, 239, 0.1) !important;
}
footer a {
  color: rgba(246, 244, 239, 0.5) !important;
}
footer a:hover {
  color: var(--paper) !important;
}


/* =========================================
   SECTION TEXTURES (LEATHER + RADIAL LIGHT)
   ========================================= */
.handoff::before,
#services::before,
#tools::before,
#contact::before,
footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noise"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch"/%3E%3CfeColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 0.45 0" /%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noise)"/%3E%3C/svg%3E');
  opacity: 0.05;
  mix-blend-mode: overlay;
}

/* Ensure content stays above the texture */
.handoff > *,
#services > *,
#tools > *,
#contact > *,
footer > * {
  position: relative;
  z-index: 1;
}

html, body {
  overflow-x: hidden;
  width: 100%;
  position: relative;
}

/* ==========================================================================
   PREMIUM AESTHETICS & MICRO-INTERACTIONS
   ========================================================================== */

/* --- 1. Film Grain Noise Overlay --- */
.noise-overlay {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.04;
  background: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
}



/* --- 3. Reveal-on-Scroll Animations --- */
.reveal {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), transform 1s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}
/* Sub-elements cascading reveal */
.reveal-child {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.reveal.active .reveal-child {
  opacity: 1;
  transform: translateY(0);
}
/* Delays for staggered animations */
.reveal.active .reveal-child[data-delay="1"] { transition-delay: 0.1s; }
.reveal.active .reveal-child[data-delay="2"] { transition-delay: 0.2s; }
.reveal.active .reveal-child[data-delay="3"] { transition-delay: 0.3s; }
.reveal.active .reveal-child[data-delay="4"] { transition-delay: 0.4s; }

/* --- 4. Animated Inline Text Links --- */
a.inline-link {
  position: relative;
  text-decoration: none;
  color: var(--pine);
  font-weight: 500;
  display: inline-block;
}
a.inline-link::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1px;
  bottom: -2px;
  left: 0;
  background-color: var(--pine);
  transform-origin: bottom right;
  transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
}
a.inline-link:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* --- 5. Intro Loader --- */
body.no-scroll {
  overflow: hidden;
}
.intro-loader {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background-color: var(--paper);
  z-index: 100000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: transform 1s cubic-bezier(0.86, 0, 0.07, 1);
  will-change: transform;
}
.intro-loader.hidden {
  transform: translateY(-100%);
}
.loader-logo {
  font-family: var(--display);
  font-size: 2.5rem;
  color: var(--pine);
  letter-spacing: -1px;
  margin-bottom: 24px;
  opacity: 0;
  animation: pulseLogo 1.5s ease-in-out forwards;
}
.loader-line {
  width: 0%;
  height: 1px;
  background-color: var(--pine);
  animation: drawLine 1.5s cubic-bezier(0.86, 0, 0.07, 1) forwards;
}
@keyframes pulseLogo {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes drawLine {
  0% { width: 0%; }
  100% { width: 120px; }
}

/* --- 6. Cookie Consent Banner --- */
.cookie-banner {
  position: fixed;
  bottom: 24px;
  right: 24px;
  max-width: 360px;
  background-color: var(--pine);
  color: var(--paper);
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(17, 17, 17, 0.2);
  z-index: 90000;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transform: translateY(150%);
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.cookie-banner.show {
  transform: translateY(0);
}
.cookie-content p {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  color: rgba(246, 244, 239, 0.85); /* paper with opacity */
}
.cookie-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}
.cookie-actions .btn-solid,
.cookie-actions .btn-ghost {
  padding: 10px 20px;
  font-size: 14px;
  font-family: var(--body);
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
}
.cookie-actions .btn-solid {
  background-color: var(--paper);
  color: var(--pine);
  border: none;
}
.cookie-actions .btn-solid:hover {
  background-color: #fff;
}
.cookie-actions .btn-ghost {
  background-color: transparent;
  color: var(--paper);
  border: 1px solid rgba(246, 244, 239, 0.4);
}
.cookie-actions .btn-ghost:hover {
  background-color: rgba(246, 244, 239, 0.1);
  border-color: var(--paper);
}
@media (max-width: 600px) {
  .cookie-banner {
    bottom: 0;
    right: 0;
    max-width: 100%;
    width: 100%;
    border-radius: 16px 16px 0 0;
  }
}


/* =========================================
   ENQUIRY FORM
   ========================================= */
.enquiry-form {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.form-group {
  position: relative;
  display: flex;
  flex-direction: column;
}
.form-group input,
.form-group textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(17, 17, 17, 0.2);
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  padding: 12px 0;
  outline: none;
  transition: border-color 0.3s;
  resize: vertical;
}
.form-group input:focus,
.form-group textarea:focus {
  border-bottom-color: var(--brass);
}
.form-group label {
  position: absolute;
  top: 12px;
  left: 0;
  color: rgba(17, 17, 17, 0.5);
  font-size: 16px;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Floating label logic */
.form-group input:focus ~ label,
.form-group input:not(:placeholder-shown) ~ label,
.form-group textarea:focus ~ label,
.form-group textarea:not(:placeholder-shown) ~ label {
  top: -16px;
  font-size: 12px;
  color: var(--brass-soft);
}
.enquiry-form button {
  align-self: flex-start;
  margin-top: 8px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
}

@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* ---------- editorial illustrations styling ---------- */
img[src*="editorial-"] {
  opacity: 0.65;
  mix-blend-mode: darken;
  transition: opacity 0.4s ease, filter 0.4s ease;
  filter: contrast(1.1) sepia(0.1);
}
img[src*="editorial-"]:hover {
  opacity: 1;
  mix-blend-mode: normal;
  filter: none;
}