:root{
    --bg:#111111;
    --surface:#181818;
    --elevated:#202020;
    --border:#2A2A2A;
    --text-primary:#F7F7F7;
    --text-second:#AAAAAA;
    --text-muted:#888888;
    --accent-1:#F6C313;
    --accent-2:#F8D353;
    --green:#07E67E;
    --green-bg:#02743F;
    --ease-out:cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out:cubic-bezier(0.77, 0, 0.175, 1);
    --ease-bounce:cubic-bezier(0.34, 1.56, 0.64, 1);
    --icon-swap-dur:250ms;
    --icon-swap-blur:2px;
    --icon-swap-start-scale:0.25;
    --icon-swap-ease:ease-in-out;
    --toast-open:350ms;
    --toast-close:250ms;
    --toast-distance:16px;
    --toast-blur:2px;
    --toast-scale:0.97;
    --toast-ease:cubic-bezier(0.22, 1, 0.36, 1);
    --check-opacity-dur:500ms;
    --check-rotate-dur:500ms;
    --check-rotate-from:80deg;
    --check-bob-dur:500ms;
    --check-y-amount:40px;
    --check-blur-dur:500ms;
    --check-blur-from:10px;
    --check-path-dur:500ms;
    --check-path-delay:80ms;
    --check-ease-out:cubic-bezier(0.22, 1, 0.36, 1);
    --check-ease-opacity:cubic-bezier(0.22, 1, 0.36, 1);
    --check-ease-rotate:cubic-bezier(0.22, 1, 0.36, 1);
    --check-ease-bob:cubic-bezier(0.34, 1.35, 0.64, 1);
    --check-ease-path:cubic-bezier(0.22, 1, 0.36, 1);
    --page-slide-dur:460ms;
    --page-fade-dur:340ms;
    --page-slide-distance:14px;
    --page-blur:4px;
    --page-stagger:0ms;
    --page-exit-enabled:1;
    --page-slide-ease:cubic-bezier(0.22, 1, 0.36, 1);
    --page-fade-ease:cubic-bezier(0.22, 1, 0.36, 1);
  }
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  html,body{ margin:0; padding:0; }
  body{
    background-color:var(--bg);
    color:var(--text-primary);
    font-family:'Funnel Sans', sans-serif; font-size:14px; line-height:1.4;
    position:relative; min-height:100vh; overflow-x:hidden;
  }
  a{ color:inherit; text-decoration:none; }
  button{ font-family:inherit; cursor:pointer; border:none; background:none; }
  img{ max-width:100%; display:block; }

  .col{ max-width:776px; margin:0 auto; padding:0 52px; width:100%; }
  .col-wide{ max-width:920px; }
  .hero .col{ padding:0 92px; }

  /* ambient */
  .ambient{ position:fixed; inset:0; pointer-events:none; z-index:0;
    background:radial-gradient(650px 400px at 78% 6%, rgba(246,195,19,0.05), transparent 60%); }
  .mesh{ position:fixed; inset:0; pointer-events:none; z-index:0;
    background-image:
      linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size:72px 72px;
    -webkit-mask-image:radial-gradient(1300px 950px at 78% 6%, rgba(0,0,0,0.9), rgba(0,0,0,0.06) 75%);
    mask-image:radial-gradient(1300px 950px at 78% 6%, rgba(0,0,0,0.9), rgba(0,0,0,0.06) 75%);
  }

  /* ---------- header ---------- */
  header{
    position:sticky; top:0; z-index:30;
    display:flex; align-items:center; justify-content:space-between; gap:34px;
    width:calc(100% - 60px); max-width:1180px; margin:0 auto; padding:22px 0;
    background:transparent;
    transition:max-width 540ms var(--page-slide-ease), gap 540ms var(--page-slide-ease);
  }
  header.scrolled{ max-width:720px; gap:14px; }
  .logo{
    font-family:'Inter Tight', sans-serif; font-weight:600; font-size:16px; letter-spacing:-0.32px;
    color:var(--text-primary); text-decoration:none; transition:opacity .18s ease;
  }
  header .logo{ display:none; }
  .logo:hover{ opacity:0.8; }
  .logo .dot{ color:var(--accent-1); }
  .find-me{ display:flex; align-items:center; }
  .find-me > span{ display:none; }
  .find-me .icons{
    position:relative; isolation:isolate;
    display:flex; align-items:center; gap:12px; height:50px; padding:0 18px;
  }
  nav.bottom-nav::before,
  .find-me .icons::before{
    content:""; position:absolute; inset:0; z-index:-1;
    border:1px solid rgba(255,255,255,0.07); border-radius:999px;
    background:rgba(32,32,32,0.72);
    backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
    box-shadow:0 8px 30px rgba(0,0,0,0.32);
    opacity:0; transform:scale(0.96);
    transition:opacity 420ms var(--page-slide-ease), transform 520ms var(--page-slide-ease);
  }
  header.scrolled nav.bottom-nav::before,
  header.scrolled .find-me .icons::before{ opacity:1; transform:scale(1); }
  .find-me .icons a{ width:18px; height:18px; display:flex; align-items:center; justify-content:center; color:var(--text-second); transition:color .18s ease; }
  .find-me .icons a:hover{ color:var(--text-primary); }
  .find-me .icons svg{ width:18px; height:18px; display:block; }

  main{ position:relative; z-index:1; }

  /* ---------- hero ---------- */
  .hero{ padding:64px 0 96px; }
  .status{
    display:inline-flex; align-items:center; gap:10px; margin-bottom:24px;
    padding:10px 20px; border-radius:44px;
    background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08);
  }
  .pulse{ position:relative; width:12px; height:12px; border-radius:50%; background:var(--green-bg); display:flex; align-items:center; justify-content:center; box-shadow:0 0 5.8px rgba(7,230,126,0.2); }
  .pulse::after{ content:''; width:7px; height:7px; border-radius:50%; background:var(--green); }
  .pulse .ring{ position:absolute; inset:-6px; border-radius:50%; background:var(--green); opacity:.35; animation:ring 2.2s ease-out infinite; }
  @keyframes ring{ 0%{transform:scale(.5);opacity:.5;} 70%{transform:scale(2);opacity:0;} 100%{opacity:0;} }
  .status p{ margin:0; color:var(--text-muted); font-size:14px; letter-spacing:0.4px; text-transform:uppercase; }

  .hero-greeting{ display:flex; align-items:flex-end; gap:12px; margin-bottom:20px; }
  .hero-greeting p{ margin:0; color:var(--text-second); font-size:16px; line-height:1.4; }
  .id-block{ margin-bottom:26px; }
  .id-block h1{
    margin:0; font-family:'Inter Tight', sans-serif; font-weight:600;
    font-size:40px; line-height:1.1; letter-spacing:0.01em; text-wrap:balance;
    color:var(--text-primary);
  }
  .avatar{
    display:inline-flex; width:40px; height:40px; flex:0 0 40px;
    padding:0; overflow:hidden; border:0; border-radius:6px;
  }
  .avatar img{ width:100%; height:100%; object-fit:cover; border-radius:6px; display:block; }

  .bio-block{ max-width:66ch; }
  .bio-block p{ margin:0 0 28px; font-size:16px; font-weight:300; line-height:1.55; letter-spacing:-0.14px; color:#C2C2C2; text-wrap:pretty; }
  .bio-block p:last-child{ margin-bottom:0; }
  .bio-block a.inline-link{ color:inherit; font-weight:inherit; text-decoration:none; }

  .btn-row{ display:flex; align-items:center; gap:8px; margin-top:30px; flex-wrap:wrap; }
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    height:44px; padding:0 20px; border-radius:8px;
    font-family:'Inter Tight', sans-serif; font-size:15px; font-weight:700;
    white-space:nowrap;
    transition:transform 160ms var(--ease-out), box-shadow 160ms ease, background-color 160ms ease, filter 160ms ease;
    will-change:transform;
  }
  .btn-primary{
    background:linear-gradient(176deg, var(--accent-1) 8.7%, var(--accent-2) 109%);
    color:var(--bg);
    box-shadow:0 2px 1px rgba(246,195,19,0.08), 0 4px 2px rgba(246,195,19,0.12);
  }
  .btn-primary svg{ width:20px; height:20px; }
  .btn-secondary svg{ width:18px; height:18px; }
  .btn-icon{
    width:16px; height:16px; flex:0 0 16px; background:currentColor;
    -webkit-mask:var(--button-icon) center / contain no-repeat;
    mask:var(--button-icon) center / contain no-repeat;
  }
  .btn-icon--chat{ --button-icon:url('../img/button-icons/chat-bubbles.svg'); }
  .btn-icon--file{ --button-icon:url('../img/button-icons/file-list.svg'); }
  .btn-secondary{ background:var(--elevated); color:var(--text-primary); border:1px solid transparent; }
  .btn:active{ transform:scale(0.97); }
  @media (hover:hover) and (pointer:fine){
    .btn-primary:hover{ box-shadow:0 8px 20px rgba(246,195,19,0.32), 0 2px 8px rgba(246,195,19,0.2); }
    .btn-secondary:hover{ background:#282828; border-color:#3d3d3d; box-shadow:0 8px 18px rgba(0,0,0,0.3); }
  }

  /* ---------- section shared ---------- */
  section.block{ padding:60px 0; position:relative; }
  .eyebrow{ font-family:'Inter Tight', sans-serif; font-weight:500; font-size:24px; letter-spacing:0.01em; color:var(--text-primary); margin:0 0 10px; }
  .eyebrow-sub{ font-size:14px; letter-spacing:-0.14px; color:var(--text-second); margin:0 0 36px; }

  /* ---------- featured work ---------- */
  .home-work{ padding-top:0; }
  .home-work > .col{ border-top:1px solid rgba(255,255,255,0.07); padding-top:88px; }
  .home-work .eyebrow{ margin-bottom:44px; }
  .work-grid{ display:flex; flex-wrap:wrap; gap:30px 20px; }
  .work-card{ flex:1 1 300px; min-width:280px; display:flex; flex-direction:column; gap:16px; }
  .work-frame{
    border-radius:6px; border:0; overflow:hidden; height:220px;
    position:relative; background:#fff; transition:box-shadow .3s ease, transform .3s ease;
  }
  @media (hover:hover) and (pointer:fine){
    .work-card:hover .work-frame{ transform:translateY(-4px); box-shadow:0 0 46px rgba(246,195,19,0.22); }
  }

  .works-listing{ gap:48px 28px; }
  .works-listing .work-frame{ height:260px; }
  .work-img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
  .work-meta{ display:flex; align-items:center; gap:20px; }
  .work-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
  .work-text h3{ margin:0; font-family:'Funnel Sans', sans-serif; font-weight:500; font-size:18px; letter-spacing:-0.36px; color:var(--text-primary); }
  .work-text p{ margin:0; font-size:14px; line-height:1.4; letter-spacing:-0.14px; color:var(--text-second); }
  .view-btn{ flex-shrink:0; border-radius:6px; }

  .work-actions{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:36px; }

  /* ---------- trusted by ---------- */
  .badge-grid{ display:flex; flex-wrap:wrap; gap:12px; }
  .badge{
    display:flex; align-items:center; gap:8px; background:var(--surface);
    border:1px solid var(--border); border-radius:6px; padding:10px 14px;
  }
  .badge .badge-logo{ height:20px; width:auto; max-width:80px; display:block; flex-shrink:0; object-fit:contain; }
  .badge span{ font-weight:500; font-size:15px; letter-spacing:-0.15px; color:var(--text-primary); text-transform:capitalize; }

  /* ---------- testimonials ---------- */
  .testimonial-grid{ display:flex; flex-wrap:wrap; gap:20px; }
  .testimonial-card{
    flex:1 1 320px; min-width:280px; display:flex; flex-direction:column; gap:20px;
    background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:28px;
  }
  .testimonial-heading{ max-width:560px; margin-bottom:36px; }
  .testimonial-body{ display:flex; flex-direction:column; gap:14px; }
  .testimonial-quote-mark{
    font-family:'Inter Tight', sans-serif; font-size:40px; line-height:1; font-weight:700;
    color:var(--text-muted);
  }
  .testimonial-card p{ margin:0; font-size:16px; line-height:1.5; letter-spacing:-0.16px; color:var(--text-primary); font-weight:400; }
  .testimonial-author{ display:flex; flex-direction:column; gap:2px; margin-top:auto; }
  .testimonial-author strong{ font-family:'Funnel Sans', sans-serif; font-weight:500; font-size:14px; color:var(--text-primary); }
  .testimonial-author span{ font-size:13px; color:var(--text-second); }

  /* ---------- about ---------- */
  .about-row{ display:flex; gap:20px; align-items:stretch; }
  .about-photos{ display:flex; flex-direction:column; gap:20px; width:148px; flex-shrink:0; align-self:stretch; height:auto; }
  .about-photos .ph{ flex:1 1 0; border-radius:12px; overflow:hidden; background:linear-gradient(150deg,#242424,#141414); min-height:0; }
  .about-photos .ph img{ width:100%; height:100%; object-fit:cover; display:block; }
  .about-photos .ph.headshot img{ object-position:center 15%; }
  .about-photos .ph.desk img{ object-position:center 25%; }

  .about-page-photo{
    width:340px; flex-shrink:0; border-radius:16px; overflow:hidden;
    background:linear-gradient(150deg,#242424,#141414); align-self:stretch;
  }
  .about-page-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 15%; display:block; }

  .about-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:20px; justify-content:center; }
  .about-text .headline{ margin:0; font-weight:500; font-size:28px; line-height:1.26; letter-spacing:-0.36px; color:var(--text-primary); }
  .about-text .body p{ margin:0 0 16px; font-size:16px; line-height:1.5; letter-spacing:-0.14px; color:var(--text-second); }
  .about-text .body p:last-child{ margin-bottom:0; }

  .tools-label{ font-family:'Funnel Sans', sans-serif; font-weight:500; font-size:20px; letter-spacing:-0.4px; color:var(--text-primary); margin:48px 0 20px; }
  .tools-row{ display:flex; flex-wrap:wrap; gap:12px; }
  .tool{ width:60px; height:60px; border-radius:6px; background:var(--elevated); display:flex; align-items:center; justify-content:center; padding:10px; }
  .tool svg{ width:40px; height:40px; display:block; }

  .tools-grid{ display:flex; flex-wrap:wrap; gap:14px; }
  .creative-suite-heading{ margin-bottom:36px; }
  .tool-chip{
    display:flex; align-items:center; gap:12px; background:var(--elevated); border:1px solid var(--border);
    border-radius:6px; padding:14px 18px;
  }
  .tool-chip svg{ width:30px; height:30px; flex-shrink:0; display:block; }
  .tool-chip span{ font-family:'Funnel Sans', sans-serif; font-weight:500; font-size:18px; letter-spacing:-0.16px; color:var(--text-primary); white-space:nowrap; }

  /* ---------- cta band ---------- */
  .cta-heading{ margin:0 0 10px; font-family:'Inter Tight', sans-serif; font-weight:600; font-size:clamp(20px, 2.4vw, 28px); letter-spacing:0.01em; line-height:1.15; white-space:nowrap; }
  .cta-heading .muted{ color:var(--accent-1); }
  .cta-sub{ margin:0 0 36px; font-size:14px; letter-spacing:-0.14px; color:var(--text-second); }

  #contact-form .col{ display:flex; flex-direction:column; align-items:center; text-align:center; }
  #contact-form .cta-form{ margin-left:auto; margin-right:auto; }
  #contact-form .cta-success{ align-items:center; text-align:center; }
  #contact-form .cta-actions{ justify-content:center; }

  /* ---------- footer ---------- */
  footer{ position:relative; z-index:1; overflow:hidden; padding:60px 0 90px; }
  .footer-glow{
    position:absolute; left:50%; top:209px; width:814px; height:729px; transform:translateX(-50%);
    background:radial-gradient(ellipse at center, rgba(246,195,19,0.14), transparent 68%);
    filter:blur(60px); z-index:0; pointer-events:none;
  }
  .footer-inner{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:32px; }
  .footer-top{ display:flex; flex-direction:column; align-items:center; gap:30px; width:100%; }
  .footer-brand-row{ display:flex; align-items:center; gap:20px; }
  .footer-logo{ font-family:'Inter Tight', sans-serif; font-weight:600; font-size:28px; letter-spacing:-0.56px; }
  .footer-logo .dot{ color:var(--accent-1); }
  .footer-social{ display:flex; align-items:center; gap:8px; }
  .footer-social a{ color:var(--text-second); transition:color .18s ease; display:flex; align-items:center; justify-content:center; width:24px; height:24px; }
  .footer-social a:hover{ color:var(--text-primary); }
  .footer-social svg{ width:24px; height:24px; display:block; }
  .footer-divider{ width:100%; height:1px; background:var(--border); }
  .footer-bottom-row{ display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; }
  .footer-copy{ margin:0; font-size:14px; color:var(--text-muted); }
  .back-to-top{
    display:inline-flex; align-items:center; gap:6px; background:none; border:none; padding:0;
    font-family:'Funnel Sans', sans-serif; font-size:14px; font-weight:500; color:var(--accent-1);
    cursor:pointer; transition:opacity .2s ease, transform .2s ease;
  }
  .back-to-top:hover{ opacity:0.75; transform:translateY(-2px); }
  .back-to-top svg{ width:14px; height:14px; }

  /* ---------- bottom nav ---------- */
  nav.bottom-nav{
    position:relative; isolation:isolate; z-index:1;
    display:flex; align-items:center; gap:28px; height:50px; padding:0 20px;
    flex:0 0 auto;
  }
  nav.bottom-nav a{
    position:relative; isolation:isolate;
    display:inline-flex; align-items:center; gap:9px;
    font-size:15px; line-height:22px; font-weight:400; letter-spacing:-0.1px; color:var(--text-second); white-space:nowrap;
    transition:color 160ms ease;
  }
  nav.bottom-nav a::before{
    content:""; position:absolute; inset:-8px -12px; z-index:-1;
    border-radius:999px; background:rgba(255,255,255,0.045);
    opacity:0; transform:scale(0.96);
    transition:opacity 160ms ease, transform 160ms ease;
  }
  .nav-icon{
    width:15px; height:15px; flex:0 0 15px;
    background-color:currentColor;
    -webkit-mask:var(--nav-icon) center / contain no-repeat;
    mask:var(--nav-icon) center / contain no-repeat;
  }
  .nav-icon--home{ --nav-icon:url('../img/nav-icons/RiHome6Fill.svg'); }
  .nav-icon--work{ --nav-icon:url('../img/nav-icons/RiStackFill.svg'); }
  .nav-icon--about{ --nav-icon:url('../img/nav-icons/RiUser3Fill.svg'); }
  .nav-icon--contact{ --nav-icon:url('../img/nav-icons/RiSendPlaneFill.svg'); }
  nav.bottom-nav a:hover{ color:var(--text-primary); }
  nav.bottom-nav a.active{ color:var(--text-primary); }
  nav.bottom-nav a.active:hover{ color:var(--text-primary); }
  header.scrolled nav.bottom-nav a.active::before{ opacity:1; transform:scale(1); }
  @media (hover:hover) and (pointer:fine){
    header.scrolled nav.bottom-nav a:hover::before{ opacity:1; transform:scale(1); }
  }

  /* ---------- cta contact form ---------- */
  .cta-form{ display:flex; flex-direction:column; gap:20px; max-width:640px; margin-bottom:36px; text-align:left; }
  .hp-field{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .form-row{ display:flex; flex-direction:column; gap:20px; }
  .field{ flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-width:0; text-align:left; }
  .field label{ font-size:13px; font-weight:600; color:var(--text-primary); }
  .field input, .field textarea{
    width:100%; background:var(--surface); border:1px solid var(--border); border-radius:6px;
    padding:12px 14px; font-family:'Funnel Sans', sans-serif; font-size:14px; color:var(--text-primary);
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .field textarea{ resize:vertical; }
  .field input::placeholder, .field textarea::placeholder{ color:var(--text-muted); }
  .field input:focus, .field textarea:focus{
    outline:none; border-color:var(--accent-1); box-shadow:0 0 0 3px rgba(246,195,19,0.12);
  }
  .field.invalid input, .field.invalid textarea{
    border-color:#E5484D; box-shadow:0 0 0 3px rgba(229,72,77,0.12);
  }
  .field .error-msg{ display:none; font-size:12px; color:#E5484D; }
  .field.invalid .error-msg{ display:block; }

  .btn:disabled{ opacity:0.4; cursor:not-allowed; box-shadow:none; transform:none; filter:none; }
  .btn:disabled:hover{ transform:none; box-shadow:none; }
  .btn.loading{ position:relative; color:transparent; pointer-events:none; }
  .btn.loading svg{ opacity:0; }
  .btn.loading::after{
    content:""; position:absolute; width:16px; height:16px; border-radius:50%;
    border:2px solid rgba(17,17,17,0.35); border-top-color:var(--bg);
    animation:btnSpin .7s linear infinite;
  }
  .btn-secondary.loading::after{ border:2px solid rgba(247,247,247,0.3); border-top-color:var(--text-primary); }
  @keyframes btnSpin{ to{ transform:rotate(360deg); } }
  .cta-form.hide{ display:none; }

  .cta-actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
  .cta-actions.hide{ display:none; }
  .form-submit-error{
    flex-basis:100%; margin:0; max-width:420px;
    color:#E5484D; font-size:13px; line-height:1.5;
  }
  .form-submit-error[hidden]{ display:none; }

  .cta-success{ display:none; flex-direction:column; align-items:flex-start; gap:16px; }
  .cta-success.show{ display:flex; }

  /* ---------- contact page ---------- */
  .contact-grid{ display:flex; gap:32px; align-items:stretch; }
  .contact-direct{ flex:1 1 380px; min-width:0; }
  .eyebrow-tag{
    display:flex; align-items:center; gap:10px; font-size:14px; font-weight:500;
    color:var(--text-primary); margin:0 0 8px;
  }
  .eyebrow-tag .dot{
    width:6px; height:6px; border-radius:50%; background:var(--accent-1); flex-shrink:0;
  }
  .contact-list{ display:flex; flex-direction:column; margin-top:20px; }
  .contact-row{
    display:flex; flex-direction:column; gap:14px;
    padding:26px 0; border-bottom:1px solid var(--border);
    transition:transform 200ms var(--ease-out);
  }
  button.contact-row{ width:100%; color:inherit; text-align:start; position:relative; }
  .contact-row:first-child{ padding-top:0; }
  .contact-row:last-child{ border-bottom:none; }
  @media (hover:hover) and (pointer:fine){ .contact-row:hover{ transform:translateX(8px); } }
  .contact-row-top{ display:flex; align-items:center; justify-content:space-between; }
  .contact-row .row-label{
    font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--text-muted);
  }
  .contact-row .row-value{
    font-family:'Inter Tight', sans-serif; font-weight:500; font-size:16px;
    letter-spacing:-0.1px; color:var(--text-primary); min-width:0;
  }
  .contact-row .row-arrow{
    width:16px; height:16px; color:var(--text-muted); flex-shrink:0;
    transition:transform .25s cubic-bezier(.22,1,.36,1), color .25s ease;
  }
  .contact-row:hover .row-arrow{ color:var(--accent-1); transform:translate(3px,-3px); }
  .copy-email::after{
    content:attr(data-tooltip); position:absolute; inset-block-start:-8px; inset-inline-end:0;
    padding:7px 10px; border-radius:6px; background:var(--elevated); border:1px solid var(--border);
    color:var(--text-primary); font-size:12px; font-weight:500; line-height:1;
    opacity:0; pointer-events:none; transform:translateY(-100%) scale(0.97); transform-origin:bottom right;
    transition:opacity 125ms var(--ease-out), transform 125ms var(--ease-out);
  }
  .copy-email:focus-visible::after{ opacity:1; transform:translateY(-100%) scale(1); }
  @media (hover:hover) and (pointer:fine){
    .copy-email:hover::after{ opacity:1; transform:translateY(-100%) scale(1); }
  }
  .copy-email .copy-icon{ transform:none; }
  .copy-email:hover .copy-icon{ transform:none; }
  .copy-toast{
    position:fixed; inset-inline-start:50%; inset-block-end:24px; z-index:120;
    transform:translateX(-50%); pointer-events:none;
  }
  .copy-toast .t-toast{
    padding:11px 14px; border:1px solid var(--border); border-radius:8px;
    background:var(--elevated); color:var(--text-primary); box-shadow:0 12px 36px rgba(0,0,0,0.38);
    font-size:13px; font-weight:500;
  }

  .t-toast {
    opacity: 0;
    transform: translateY(var(--toast-distance)) scale(var(--toast-scale));
    filter: blur(var(--toast-blur));
    will-change: transform, opacity, filter;
    transition:
      opacity var(--toast-close) var(--toast-ease),
      transform var(--toast-close) var(--toast-ease),
      filter var(--toast-close) var(--toast-ease);
  }
  .t-toast.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    transition:
      opacity var(--toast-open) var(--toast-ease),
      transform var(--toast-open) var(--toast-ease),
      filter var(--toast-open) var(--toast-ease);
  }

  @media (prefers-reduced-motion: reduce) {
    .t-toast { transition: none !important; }
  }

  .contact-form-card{
    flex:1 1 420px; min-width:0; background:rgba(24,24,24,0.75); border:1px solid var(--border);
    border-radius:6px; padding:36px; display:flex; flex-direction:column;
  }
  .contact-form-card .eyebrow-tag{ margin-bottom:40px; }
  .contact-form-card .cta-form{ max-width:none; margin-bottom:28px; }
  .contact-form-card .cta-success{ align-items:center; text-align:center; }
  .contact-form-card .cta-success p{ max-width:none; }

  @media (max-width:820px){
    .contact-grid{ flex-direction:column; }
    .contact-row .row-value{ font-size:16px; }
  }
  .cta-success .success-icon{
    width:56px; height:56px; border-radius:50%; background:rgba(34,197,94,0.12); color:#22c55e;
    display:flex; align-items:center; justify-content:center;
  }
  .cta-success .success-icon svg{ width:26px; height:26px; }
  .cta-success h3{ margin:0; font-family:'Inter Tight', sans-serif; font-weight:600; font-size:20px; letter-spacing:0.01em; color:var(--text-primary); }
  .cta-success p{ margin:0; font-size:14px; color:var(--text-second); max-width:340px; }

  .t-success-check {
    display: inline-block;
    transform-origin: center;
    opacity: 0;
    will-change: transform, opacity, filter;
  }
  .t-success-check svg { display: block; overflow: visible; }
  .t-success-check svg path {
    stroke-dasharray: 22;
    stroke-dashoffset: 22;
  }

  .t-success-check[data-state="in"] {
    animation:
      t-check-fade   var(--check-opacity-dur) var(--check-ease-opacity) forwards,
      t-check-rotate var(--check-rotate-dur)  var(--check-ease-rotate)  forwards,
      t-check-blur   var(--check-blur-dur)    var(--check-ease-out)     forwards,
      t-check-bob    var(--check-bob-dur)     var(--check-ease-bob)     forwards;
  }
  .t-success-check[data-state="in"] svg path {
    animation: t-check-draw var(--check-path-dur) var(--check-ease-path) var(--check-path-delay, 0ms) forwards;
  }

  @keyframes t-check-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes t-check-rotate {
    from { transform: rotate(var(--check-rotate-from)); }
    to   { transform: rotate(0deg); }
  }
  @keyframes t-check-blur {
    from { filter: blur(var(--check-blur-from)); }
    to   { filter: blur(0); }
  }
  @keyframes t-check-bob {
    from { translate: 0 var(--check-y-amount); }
    to   { translate: 0 0; }
  }
  @keyframes t-check-draw { to { stroke-dashoffset: 0; } }

  @media (prefers-reduced-motion: reduce) {
    .t-success-check { animation: none !important; opacity: 1; }
    .t-success-check svg path { animation: none !important; stroke-dashoffset: 0 !important; }
  }

  @media (max-width:480px){
    .form-row{ flex-direction:column; }
  }

  /* ---------- scroll reveal ---------- */
  .t-page-transition main,
  .t-page-transition footer{
    animation:t-page-enter var(--page-slide-dur) var(--page-slide-ease) var(--page-stagger) both;
    will-change:opacity, transform, filter;
  }
  .t-page-transition.is-page-leaving main,
  .t-page-transition.is-page-leaving footer{
    opacity:0;
    transform:translateY(calc(var(--page-slide-distance) * -0.65));
    filter:blur(var(--page-blur));
    transition:
      opacity var(--page-fade-dur) var(--page-fade-ease),
      transform var(--page-slide-dur) var(--page-slide-ease),
      filter var(--page-slide-dur) var(--page-slide-ease);
  }
  @keyframes t-page-enter{
    from{
      opacity:0;
      transform:translateY(var(--page-slide-distance));
      filter:blur(var(--page-blur));
    }
    to{ opacity:1; transform:translateX(0); filter:blur(0); }
  }

  .reveal{
    opacity:0;
    transform:translateY(24px);
    transition:opacity 600ms var(--ease-in-out), transform 600ms var(--ease-in-out);
    will-change:opacity, transform;
  }
  .reveal.in-view{ opacity:1; transform:translateY(0); }

  @media (prefers-reduced-motion: reduce){
    .pulse .ring{ animation:none; display:none; }
    .reveal{ transition:none; }
    nav.bottom-nav::before, .find-me .icons::before, nav.bottom-nav a::before{ transition:opacity 160ms ease; transform:none; }
    .copy-email::after{ transition:opacity 125ms var(--ease-out); transform:translateY(-100%); }
    .copy-toast{ transition:opacity 200ms ease; transform:translate(-50%,0); }
    .t-page-transition main,
    .t-page-transition footer{ animation:none !important; }
    .t-page-transition.is-page-leaving main,
    .t-page-transition.is-page-leaving footer{ transition:none !important; transform:none; filter:none; }
  }

  /* ---------- responsive ---------- */
  @media (max-width:760px){
    header{ width:calc(100% - 24px); gap:14px; padding:14px 0; }
    nav.bottom-nav{ gap:16px; height:44px; padding:0 15px; }
    nav.bottom-nav a{ font-size:15px; }
    .find-me .icons{ gap:8px; height:44px; padding:0 13px; }
    .col{ padding:0 24px; }
    .hero .col{ padding:0 24px; }
    .hero{ padding-top:24px; }
    .id-block h1{ font-size:40px; }
    .cta-heading{ font-size:24px; white-space:normal; }
    .about-row{ flex-direction:column; }
    .about-photos{ flex-direction:row; width:100%; }
    .about-page-photo{ width:200px; }
    footer{ padding-top:80px; }
  }

  @media (max-width:420px){
    header{ gap:2px; }
    nav.bottom-nav{ gap:16px; padding:0 15px; }
    nav.bottom-nav a{ font-size:14px; }
    .find-me .icons{ padding:0 10px; }
  }

  @media (max-width:520px){
    header{ flex-wrap:wrap; gap:4px 2px; }
    header.scrolled{ gap:2px; }
  }

  @media (max-width:360px){
    nav.bottom-nav{ gap:8px; height:40px; padding:0 10px; }
    nav.bottom-nav a{ font-size:13px; }
    nav.bottom-nav a::before{ inset:-6px -8px; }
    .find-me .icons{ height:40px; padding:0 12px; }
  }

/* ---------- homepage remake ---------- */
.home-page main{ overflow:hidden; }
.home-page .hero{ padding:52px 0 122px; }
.home-page .hero .col{ max-width:720px; padding:0 40px; }
.home-page .hero-greeting{ flex-direction:column; align-items:flex-start; gap:12px; margin-bottom:26px; }
.home-page .hero-greeting p{ font-family:'Funnel Sans',sans-serif; font-size:18px; font-weight:300; line-height:1.15; }
.home-page .hero-greeting .wave{ display:inline-block; margin:0 .12em; }
.home-page .id-block{ margin-bottom:30px; }
.home-page .id-block h1{
  font-family:'Google Sans Flex','Inter Tight',sans-serif; font-size:clamp(48px,4.6vw,64px); font-weight:400;
  line-height:1.15; letter-spacing:-0.018em; text-wrap:initial;
}
.home-page .hero-line{ display:block; }
.home-page .hero-line:nth-child(2){ text-wrap:balance; }
.home-page .hero-accent{ color:var(--accent-1); font-weight:500; }
.home-page .hero-word-window{
  display:inline-grid; vertical-align:baseline; overflow:hidden;
  grid-template-columns:1fr; grid-template-rows:1fr;
}
.home-page .hero-word{ grid-area:1/1; color:var(--text-primary); font-weight:500; opacity:0; transform:translateY(100%); transition:transform 520ms var(--ease-in-out),opacity 520ms var(--ease-in-out); }
.home-page .hero-word.is-current{ opacity:1; transform:translateY(0); }
.home-page .hero-word.is-leaving{ opacity:0; transform:translateY(-100%); }
.home-page .hero-word--simple{ color:#F9DA6C; }
.home-page .hero-word--usable{ color:#77DCC5; }
.home-page .hero-word--beautiful{ color:#D9B8FF; }
.home-page .bio-block{ max-width:800px; }
.home-page .bio-block p{ font-family:'Funnel Sans',sans-serif; font-size:18px; line-height:1.5; font-weight:300; letter-spacing:0; margin-bottom:27px; }
.home-page .bio-block .btn-row{ margin-top:24px; gap:10px; }
.home-page .bio-block .btn{ height:48px; padding:0 26px; font-family:'Inter Tight',sans-serif; font-size:16px; font-weight:600; }
.home-page .bio-block .btn-primary{ min-width:150px; }

.home-page section.block{ padding:72px 0; }
.home-page .eyebrow{ font-size:28px; font-weight:500; color:#AAAAAA; }
.home-page .home-work{ padding-top:0; }
.home-page .home-work > .col{
  max-width:1180px; padding:72px 30px 0;
  border-top:1px solid rgba(255,255,255,.1);
}
.home-page .home-work .eyebrow{ margin-bottom:44px; }
.home-page .work-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:76px 24px; }
.home-page .work-card{ min-width:0; gap:18px; }
.home-page .work-frame{ width:100%; height:auto; aspect-ratio:1.53; border-radius:5px; box-shadow:none; }
.home-page .work-card:hover .work-frame{ transform:none; box-shadow:none; }
.home-page .work-img{ transition:transform 260ms var(--ease-out); }
@media (hover:hover) and (pointer:fine){ .home-page .work-card:hover .work-img{ transform:scale(1.035); } }
.home-page .work-meta{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.home-page .work-text{ gap:8px; }
.home-page .work-text h3{ font-size:19px; }
.home-page .work-text p{ font-size:14px; }
.home-page .view-btn{
  align-self:flex-start; font-size:13px; font-weight:500; line-height:1.3;
  color:var(--text-primary); text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:3px; transition:color 260ms ease;
}
.home-page .view-btn:hover,
.home-page .view-btn:focus-visible{ color:var(--accent-1); }
.home-page .work-actions{ margin-top:54px; gap:10px; }

.home-page .clients-section{ padding:92px 0 100px; }
.home-page .clients-heading{ max-width:1180px; padding:0 30px; display:flex; align-items:baseline; justify-content:space-between; gap:28px; margin-bottom:40px; }
.home-page .clients-heading .eyebrow{ margin:0; }
.home-page .clients-heading .eyebrow-sub{ margin:0; font-size:15px; }
.home-page .clients-marquee{ width:100%; overflow:hidden; }
.home-page .clients-track{ display:flex; width:max-content; animation:clientsSlide 52s linear infinite; }
.home-page .clients-set{ display:flex; align-items:center; flex:none; }
.home-page .clients-set .badge{
  flex:none; background:#181818; border:0; border-radius:0;
  padding:24px; margin-right:10px; min-height:80px; gap:12px;
}
.home-page .clients-set .badge-logo{ height:30px; width:30px; max-width:30px; object-fit:contain; }
.home-page .clients-set .badge:nth-child(4) .badge-logo{ width:auto; max-width:none; }
.home-page .clients-set .badge span{ font-size:16px; font-weight:500; color:var(--text-second); text-transform:none; white-space:nowrap; }
.home-page .clients-marquee:hover .clients-track,
.home-page .clients-marquee:focus-within .clients-track{ animation-play-state:paused; }
@keyframes clientsSlide{ to{ transform:translateX(-50%); } }

.home-page .testimonials-section > .col{ max-width:1180px; padding:0 30px; }
.home-page .testimonials-section{ padding-top:56px; padding-bottom:56px; overflow:hidden; }
.home-page .testimonial-header{ display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:30px; }
.home-page .testimonial-heading{ margin:0; max-width:none; }
.home-page .testimonial-stage{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.12fr); gap:70px; align-items:stretch; overflow:hidden; }
.home-page .testimonial-focus,
.home-page .testimonial-stack{ min-width:0; }
.home-page .testimonial-focus{ display:flex; flex-direction:column; }
.home-page .testimonial-stage .testimonial-card{
  display:block; min-width:0; height:auto; padding:0; background:none; border:0; border-radius:0;
  opacity:1; transform:none; transition:none;
}
.home-page .testimonial-stage .testimonial-body{ display:block; }
.home-page .testimonial-stage .testimonial-card p{ margin:0; font-family:'Inter Tight',sans-serif; font-weight:500; letter-spacing:0; }
.home-page .testimonial-focus .testimonial-card p{ color:var(--text-primary); font-size:clamp(32px,2.5vw,36px); line-height:1.28; }
.home-page .testimonial-stack .testimonial-card{ padding:0 0 26px; margin:0 0 28px; border-bottom:1px solid var(--border); }
.home-page .testimonial-stack .testimonial-card:last-child{ margin-bottom:0; }
.home-page .testimonial-stack .testimonial-card:nth-child(1){ opacity:.72; }
.home-page .testimonial-stack .testimonial-card:nth-child(2){ opacity:.35; }
.home-page .testimonial-stack .testimonial-card:nth-child(3){ display:none; }
.home-page .testimonial-stack .testimonial-card p{ color:var(--text-second); font-size:20px; line-height:1.44; }
.home-page .testimonial-stage .testimonial-author{ margin-top:28px; }
.home-page .testimonial-stage .testimonial-author strong{ font-size:14px; }
.home-page .testimonial-stage .testimonial-author span{ font-size:13px; }
.home-page .testimonial-controls{ display:flex; justify-content:flex-start; align-items:center; gap:20px; flex:none; }
.home-page .testimonial-controls button{ color:#888888; background:#1E1E1E; border-radius:6px; display:grid; place-items:center; width:40px; height:40px; padding:8px; transition:color 180ms ease,background-color 180ms ease; }
.home-page .testimonial-controls button:hover{ color:var(--text-primary); }
.t-icon-swap {
  position: relative;
  display: inline-grid;
}
.t-icon-swap .t-icon {
  grid-area: 1 / 1;
  transition:
    opacity   var(--icon-swap-dur) var(--icon-swap-ease),
    filter    var(--icon-swap-dur) var(--icon-swap-ease),
    transform var(--icon-swap-dur) var(--icon-swap-ease);
  will-change: opacity, filter, transform;
}
.t-icon-swap[data-state="a"] .t-icon[data-icon="a"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="b"] {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}
.t-icon-swap[data-state="a"] .t-icon[data-icon="b"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="a"] {
  opacity: 0;
  filter: blur(var(--icon-swap-blur));
  transform: scale(var(--icon-swap-start-scale));
}

@media (prefers-reduced-motion: reduce) {
  .t-icon-swap .t-icon { transition: none !important; }
}

.home-page #contact-form{ padding:90px 0 105px; }
.home-page #contact-form > .col{
  max-width:1180px; padding:90px 30px 0; border-top:1px solid var(--border);
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:40px;
  text-align:left;
}
.home-page .cta-heading{
  max-width:820px; margin:0 0 30px; font-size:clamp(40px,4.5vw,56px);
  font-weight:600; line-height:1.13; letter-spacing:0.005em; white-space:normal;
}
.home-page .cta-sub{ max-width:650px; font-size:18px; line-height:1.5; margin:0; }
.home-page #contact-form .cta-actions{ justify-content:flex-end; gap:10px; padding-bottom:2px; }
.home-page footer .col{ max-width:1180px; padding:0 30px; }

@media (max-width:900px){
  .home-page .hero{ padding:44px 0 90px; }
  .home-page .hero .col{ padding:0 30px; }
  .home-page .id-block h1{ font-size:clamp(40px,7vw,65px); }
  .home-page .clients-heading{ flex-direction:column; align-items:flex-start; gap:12px; }
  .home-page #contact-form > .col{ grid-template-columns:1fr; }
  .home-page #contact-form .cta-actions{ justify-content:flex-start; }
}
@media (max-width:620px){
  .home-page .hero .col,
  .home-page .home-work > .col,
  .home-page .clients-heading,
  .home-page .testimonials-section > .col,
  .home-page #contact-form > .col,
  .home-page footer .col{ padding-left:24px; padding-right:24px; }
  .home-page .hero{ padding:38px 0 82px; }
  .home-page .hero-greeting p{ font-size:15px; }
  .home-page .id-block h1{ font-size:clamp(36px,8vw,50px); line-height:1.2; }
  .home-page .hero-line + .hero-line{ margin-top:.08em; }
  .home-page .bio-block p{ font-size:16px; margin-bottom:22px; }
  .home-page .work-grid{ grid-template-columns:1fr; gap:54px; }
  .home-page .home-work > .col{ padding-top:54px; }
  .home-page .home-work .eyebrow{ margin-bottom:30px; }
  .home-page .eyebrow{ font-size:28px; }
  .home-page .testimonial-stage{ grid-template-columns:1fr; gap:48px; align-content:start; }
  .home-page .testimonial-header{ flex-direction:column; align-items:flex-start; gap:18px; }
  .home-page .testimonial-controls{ align-self:flex-end; }
  .home-page .testimonial-focus .testimonial-card p{ font-size:28px; }
  .home-page .testimonial-stack .testimonial-card p{ font-size:17px; }
  .home-page #contact-form > .col{ padding-top:60px; }
  .home-page .cta-heading{ font-size:clamp(37px,9vw,56px); }
  .home-page .cta-sub{ font-size:16px; }
}
@media (prefers-reduced-motion:reduce){
  .home-page .clients-track{ animation:none; }
  .home-page .testimonial-pause{ display:none; }
  .home-page .hero-word{ transition:none; }
  .home-page .view-btn{ transition:none; }
}

/* ---------- project case-study page ---------- */
section.block.project-hero{ padding-top:36px; }
.project-hero + section.block{ padding-top:0; }
#tab-gallery{ padding-top:0; }
.back-link{
  display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600;
  color:var(--text-second); margin-bottom:28px; transition:color .18s ease;
}
.back-link:hover{ color:var(--text-primary); }
.back-link svg{ width:16px; height:16px; }

.project-title{
  font-family:'Inter Tight', sans-serif; font-weight:600; font-size:clamp(32px,5vw,48px);
  letter-spacing:0.01em; color:var(--text-primary); margin:0 0 16px;
}
.project-title .muted{ color:var(--accent-1); }

.work-header-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.work-header-row .project-title{ margin:0; }
.view-tabs{ display:flex; align-items:center; gap:24px; padding-bottom:4px; }
.view-tab{
  background:none; border:none; padding:0 0 8px; cursor:pointer;
  font-family:'Funnel Sans', sans-serif; font-size:15px; font-weight:600; color:var(--text-second);
  border-bottom:2px solid transparent; transition:color .2s ease, border-color .2s ease;
}
.view-tab:hover{ color:var(--text-primary); }
.view-tab.active{ color:var(--text-primary); border-bottom-color:var(--accent-1); }

.gallery-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:20px; }
.gallery-grid img{ width:100%; height:280px; object-fit:cover; border:1px solid var(--border); border-radius:4px; display:block; cursor:zoom-in; transition:filter .2s ease; }
.gallery-grid img:hover{ filter:brightness(1.05); }
.gallery-grid .img-placeholder{ grid-column:1 / -1; max-width:480px; margin:0 auto; }
.project-tagline{ font-size:17px; line-height:1.5; color:var(--text-second); max-width:640px; margin:0 0 14px; }

.project-status-bar{
  display:flex; align-items:center; gap:10px; width:100%;
  background:rgba(24,24,24,0.75); border:1px solid var(--border); border-radius:4px;
  padding:12px 18px; margin:0 0 40px;
}
.project-status-bar .year{ font-family:'Funnel Sans', sans-serif; font-weight:600; font-size:14px; color:var(--text-primary); }
.project-status-bar .status-text{ font-size:14px; font-weight:300; color:var(--text-second); }
.project-status-bar .live-link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:14px; font-weight:600; color:var(--accent-1); transition:color .18s ease;
}
.project-status-bar .live-link:hover{ color:var(--accent-2); }
.project-status-bar .live-link svg{ width:14px; height:14px; }

.project-link-bar{
  display:flex; align-items:center; gap:12px; width:100%;
  background:rgba(24,24,24,0.75); border:1px solid var(--border); border-radius:4px;
  padding:12px 18px; margin:0 0 40px;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.project-link-bar:hover{
  border-color:rgba(255,255,255,0.5);
  box-shadow:0 0 0 1px rgba(255,255,255,0.18), 0 0 24px rgba(255,255,255,0.14);
  transform:translateY(-1px);
}
.project-link-bar .link-icon{ width:28px; height:28px; border-radius:7px; flex-shrink:0; display:block; }
.project-link-bar .link-text{
  display:inline-flex; align-items:center; gap:6px;
  font-size:14px; font-weight:600; color:var(--text-primary);
}
.project-link-bar .link-text svg{ width:14px; height:14px; }

.project-meta-grid{
  display:flex; flex-wrap:wrap; gap:32px; padding:28px 0; margin-bottom:40px;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.project-meta-item{ display:flex; flex-direction:column; gap:6px; }
.project-meta-item span{ font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-muted); }
.project-meta-item strong{ font-family:'Funnel Sans', sans-serif; font-weight:600; font-size:15px; color:var(--text-primary); }

.project-cover{
  width:100%; border-radius:6px; border:1px solid var(--border); overflow:hidden; margin-bottom:56px;
}
.project-cover.tight{ margin-bottom:20px; }
.project-cover img{ width:100%; display:block; cursor:zoom-in; transition:filter .2s ease; }
.project-cover img:hover{ filter:brightness(1.05); }

.project-section{ margin-bottom:48px; }
.project-section h2{
  font-family:'Funnel Sans', sans-serif; font-weight:500; font-size:24px; letter-spacing:-0.4px;
  color:var(--text-primary); margin:0 0 16px;
}
.project-section h3{
  font-family:'Funnel Sans', sans-serif; font-weight:500; font-size:19px; letter-spacing:-0.2px;
  color:var(--text-primary); margin:0 0 14px;
}
.project-section p{ font-size:16px; font-weight:300; line-height:1.65; color:var(--text-second); max-width:680px; margin:0 0 14px; }
.project-section p:last-child{ margin-bottom:0; }

.project-gallery{ display:flex; flex-direction:column; gap:20px; margin-bottom:48px; }
.project-gallery img{ width:100%; border:1px solid var(--border); border-radius:4px; display:block; cursor:zoom-in; transition:filter .2s ease; }
.project-gallery img:hover{ filter:brightness(1.05); }

.feature-list{ list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:14px; }
.feature-list li{ font-size:16px; font-weight:300; line-height:1.65; color:var(--text-second); max-width:680px; }
.feature-list li strong{ color:var(--text-second); font-weight:500; }

.img-placeholder{
  width:100%; aspect-ratio:16/10; border:1px dashed var(--border); border-radius:16px;
  background:var(--surface); display:flex; align-items:center; justify-content:center;
  text-align:center; padding:24px; color:var(--text-muted); font-size:13px; line-height:1.6;
}

.project-nav-links{
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  padding:32px 0 8px; border-top:1px solid var(--border);
}
.project-nav-links a{ font-weight:600; font-size:14px; color:var(--text-second); transition:color .18s ease; }
.project-nav-links a:hover{ color:var(--accent-1); }

/* ---------- image lightbox ---------- */
.lightbox-overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(8,8,8,0.88); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:40px;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.lightbox-overlay.open{ opacity:1; pointer-events:auto; }
.lightbox-overlay img{
  max-width:90vw; max-height:88vh; box-shadow:0 20px 60px rgba(0,0,0,0.5);
  transform:scale(0.96); transition:transform .3s cubic-bezier(.16,.84,.44,1);
}
.lightbox-overlay.open img{ transform:scale(1); }
.lightbox-close{
  position:fixed; top:24px; right:24px; width:44px; height:44px; border-radius:50%;
  background:var(--elevated); color:var(--text-second); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:color .18s ease, background .18s ease, transform .18s ease;
}
.lightbox-close:hover{ color:var(--text-primary); background:#282828; transform:rotate(90deg); }
.lightbox-close svg{ width:18px; height:18px; }
@media (max-width:600px){
  section.block.project-hero{ padding-top:28px; }
  .lightbox-overlay{ padding:20px; }
  .lightbox-close{ top:16px; right:16px; width:38px; height:38px; }
}

/* ---------- shared work and CTA polish ---------- */
.works-page .project-hero .col,
.works-page #tab-projects > .col{ max-width:1180px; padding-left:30px; padding-right:30px; }
.works-page .work-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:76px 24px; }
.works-page .work-card{ min-width:0; gap:18px; }
.works-page .works-listing .work-frame{
  width:100%; height:auto; aspect-ratio:1.53; border:0; border-radius:5px; box-shadow:none;
  transition:none;
}
.works-page .work-card:hover .work-frame{ transform:none; box-shadow:none; }
.works-page .work-meta{ flex-direction:column; align-items:flex-start; gap:14px; }
.works-page .work-text{ gap:8px; }
.works-page .work-text h3{ font-size:19px; }
.works-page .view-btn{
  align-self:flex-start; font-size:13px; font-weight:500; line-height:1.3;
  color:var(--text-primary); text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:3px; transition:color 260ms ease;
}
.works-page .view-btn:hover,
.works-page .view-btn:focus-visible{ color:var(--accent-1); }
.works-page .work-img{ transition:transform 260ms var(--ease-out); }
@media (hover:hover) and (pointer:fine){
  .works-page .work-card:hover .work-img{ transform:scale(1.035); }
  .btn:not(:disabled):hover{
    transform:translateY(-2px) scale(1.015);
    transition:transform 220ms var(--ease-bounce),box-shadow 160ms ease,background-color 160ms ease,filter 160ms ease;
  }
  .btn:not(:disabled):hover:active{ transform:scale(.97); }
}
.btn{ transition:transform 220ms var(--ease-out),box-shadow 160ms ease,background-color 160ms ease,filter 160ms ease; }

body #contact-form > .col,
body.home-page #contact-form > .col,
body.works-page #contact-form > .col{
  max-width:1180px; padding:90px 30px 0; border-top:1px solid var(--border);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:0; text-align:center;
}
body .cta-heading,
body.home-page .cta-heading,
body.works-page .cta-heading{
  max-width:900px; margin:0 auto 30px; font-size:clamp(40px,4.5vw,56px);
  font-weight:600; line-height:1.13; letter-spacing:0.005em; white-space:normal;
}
body .cta-sub,
body.home-page .cta-sub,
body.works-page .cta-sub{ max-width:650px; margin:0 auto; font-size:18px; line-height:1.5; }
body #contact-form .cta-actions,
body.home-page #contact-form .cta-actions,
body.works-page #contact-form .cta-actions{ flex-direction:row; align-items:stretch; justify-content:center; gap:16px; margin-top:48px; padding-bottom:2px; }
body #contact-form .cta-actions .btn{ width:200px; }

.home-page .work-frame,
.works-page .work-frame{ display:block; }
.home-page .work-frame:focus-visible,
.works-page .work-frame:focus-visible{ outline:2px solid var(--accent-1); outline-offset:4px; }

@media (max-width:900px){
  body #contact-form > .col,
  body.home-page #contact-form > .col,
  body.works-page #contact-form > .col{ gap:0; }
  body #contact-form .cta-actions,
  body.home-page #contact-form .cta-actions,
  body.works-page #contact-form .cta-actions{ justify-content:flex-start; }
}
@media (max-width:620px){
  .works-page .project-hero .col,
  .works-page #tab-projects > .col,
  body #contact-form > .col,
  body.home-page #contact-form > .col,
  body.works-page #contact-form > .col{ padding-left:24px; padding-right:24px; }
  .works-page .work-grid{ grid-template-columns:1fr; gap:54px; }
  body #contact-form > .col,
  body.home-page #contact-form > .col,
  body.works-page #contact-form > .col{ padding-top:60px; }
  body .cta-heading,
  body.home-page .cta-heading,
  body.works-page .cta-heading{ font-size:clamp(37px,9vw,56px); }
  body .cta-sub,
  body.home-page .cta-sub,
  body.works-page .cta-sub{ font-size:16px; }
  body #contact-form .cta-actions,
  body.home-page #contact-form .cta-actions,
  body.works-page #contact-form .cta-actions{ flex-direction:column; width:100%; max-width:280px; }
  body #contact-form .cta-actions .btn{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .home-page .clients-marquee{ overflow-x:auto; }
  .home-page .work-img,
  .works-page .work-img{ transition:none; }
  .btn{ transition:background-color 160ms ease,filter 160ms ease; }
  .works-page .view-btn{ transition:none; }
}
@media (prefers-reduced-motion:reduce) and (hover:hover) and (pointer:fine){
  .home-page .work-card:hover .work-img,
  .works-page .work-card:hover .work-img,
  .btn:not(:disabled):hover{ transform:none; }
}