/* INKR Creative — site styles.
   Shared by index.html and about.html. */

  :root{
    --ink:#14151A;        /* Ink Black */
    --slate:#5D5A53;      /* Slate Gray, darkened for body text.
                         The brand value is #6E6B63, but that is only
                         4.88:1 on Paper White — under WCAG AA as soon
                         as any background tint sits behind it. This
                         deeper tone is the same warm hue and clears
                         4.5:1 everywhere, including over the animated
                         background. Use #6E6B63 for non-text brand uses. */
    --teal:#00B8D9;       /* Teal Ink */
    --mint:#66E1F2;       /* Teal Ink Light */
    --paper:#F7F5F0;      /* Paper White */
    --fog:#D8D3C4;        /* Fog */
    --coral:#FF5A3C;      /* Spark Coral */
    --white:#FFFFFF;

    /* legacy aliases */
    --charcoal:var(--slate);
  }

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

  html{scroll-behavior:smooth;}

  body{
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    background:var(--paper);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
  }

  a{color:inherit; text-decoration:none;}

  :focus-visible{
    outline:3px solid var(--teal);
    outline-offset:3px;
  }

  img,svg{display:block;}

  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding:0 32px;
  }

  /* ===== Gradient hairline ===== */
  .hairline{
    height:5px;
    background:linear-gradient(90deg, var(--mint), var(--teal), var(--mint));
    background-size:200% 100%;
    animation:flow 6s linear infinite;
  }
  @keyframes flow{
    0%{background-position:0% 0%;}
    100%{background-position:200% 0%;}
  }

  /* ===== Scroll progress ===== */
  .scroll-progress{
    position:fixed;
    top:0; left:0;
    height:3px;
    width:0%;
    background:linear-gradient(90deg, var(--teal), var(--mint));
    z-index:100;
    transition:width .08s linear;
  }

  /* ===== Nav ===== */
  header.site-nav{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(247,245,240,0.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--fog);
  }
  .nav-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 32px;
    max-width:1180px;
    margin:0 auto;
  }
  .brand{
    display:flex;
    align-items:center;
  }
  .brand-lockup{
    display:block;
    width:116px;
    height:auto;
  }

  nav.links{
    display:flex;
    align-items:center;
    gap:34px;
  }
  nav.links a{
    font-size:15px;
    font-weight:400;
    color:var(--charcoal);
    position:relative;
  }
  nav.links a:hover{color:var(--ink);}
  nav.links a::after{
    content:"";
    position:absolute;
    left:0; bottom:-6px;
    width:0%;
    height:2px;
    background:var(--teal);
    transition:width .2s ease;
  }
  nav.links a:hover::after{width:100%;}

  .nav-cta{
    background:var(--coral);
    color:var(--white);
    padding:10px 20px;
    border-radius:100px;
    font-size:14px;
    font-weight:700;
    letter-spacing:0.3px;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .nav-cta:hover{
    transform:translateY(-1px);
    box-shadow:0 6px 16px rgba(255,92,77,0.35);
  }

  .nav-mobile-hide{display:flex;}
  @media (max-width:760px){
    .nav-mobile-hide{display:none;}
  }

  /* ===== Hero ===== */
  .hero{
    position:relative;
    overflow:hidden;
    padding:120px 0 100px;
    border-bottom:1px solid var(--fog);
  }
  .hero-blob{
    position:absolute;
    border-radius:50%;
    filter:blur(60px);
    opacity:0.35;
    pointer-events:none;
    z-index:0;
  }
  .hero-blob.b1{
    width:420px;height:420px;
    background:radial-gradient(circle, var(--teal), transparent 70%);
    top:-120px; right:-80px;
    animation:drift1 14s ease-in-out infinite;
  }
  .hero-blob.b2{
    width:340px;height:340px;
    background:radial-gradient(circle, var(--mint), transparent 70%);
    bottom:-140px; left:-60px;
    animation:drift2 18s ease-in-out infinite;
  }
  @keyframes drift1{
    0%,100%{transform:translate(0,0) scale(1);}
    50%{transform:translate(-30px, 40px) scale(1.1);}
  }
  @keyframes drift2{
    0%,100%{transform:translate(0,0) scale(1);}
    50%{transform:translate(40px, -30px) scale(1.08);}
  }
  .word{
    display:inline-block;
    overflow:hidden;
    vertical-align:top;
  }
  .word > span.wtext{
    display:inline-block;
    transform:translateY(115%);
    transition:transform .8s cubic-bezier(.16,.8,.24,1);
  }
  .headline.is-visible .word > span.wtext{
    transform:translateY(0);
  }
  .word.accent{
    position:relative;
    overflow:visible;
  }
  .ink-drop{
    position:absolute;
    left:50%;
    top:88%;
    transform:translate(-50%,-8px) scale(0.3);
    opacity:0;
    pointer-events:none;
  }
  .word.accent:hover .ink-drop{
    animation:ink-drip 1.15s ease-in forwards;
  }
  @keyframes ink-drip{
    0%{ opacity:0; transform:translate(-50%,-8px) scale(0.3); }
    15%{ opacity:1; transform:translate(-50%,4px) scale(1); }
    75%{ opacity:1; transform:translate(-50%,54px) scale(1); }
    100%{ opacity:0; transform:translate(-50%,66px) scale(0.7); }
  }
  .ink-splash{
    position:absolute;
    left:50%;
    top:88%;
    width:18px;height:7px;
    margin-left:-9px;
    transform:translateY(58px) scale(0);
    opacity:0;
    pointer-events:none;
    background:radial-gradient(ellipse, rgba(0,184,217,0.55), transparent 70%);
    border-radius:50%;
  }
  .word.accent:hover .ink-splash{
    animation:ink-splash 1.15s ease-in forwards;
  }
  @keyframes ink-splash{
    0%, 68%{ opacity:0; transform:translateY(58px) scale(0); }
    76%{ opacity:0.85; transform:translateY(58px) scale(1.3); }
    100%{ opacity:0; transform:translateY(58px) scale(2.1); }
  }

  /* ===== Ripple + creature scene ===== */
  .ink-scene{
    position:absolute;
    left:calc(100% + 4px);
    top:88%;
    width:270px;
    height:150px;
    transform:translateY(20px);
    pointer-events:none;
  }
  @media (max-width:900px){
    .ink-scene{ display:none; }
  }

  /* horizontal water surface that draws rightward from impact */
  .water-line{
    position:absolute;
    left:0;
    top:38px;
    height:2px;
    width:0;
    background:linear-gradient(90deg, var(--teal), rgba(0,184,217,0.35) 60%, transparent);
    border-radius:2px;
  }
  .scene-on .water-line{
    animation:draw-water .75s cubic-bezier(.16,.8,.24,1) .82s forwards;
  }
  @keyframes draw-water{
    to{ width:210px; }
  }

  /* concentric ripple rings at the impact point */
  .ripple{
    position:absolute;
    left:0;
    top:38px;
    width:20px;
    height:7px;
    margin:-3.5px 0 0 -10px;
    border:1.5px solid var(--teal);
    border-radius:50%;
    opacity:0;
  }
  .scene-on .ripple{ animation:ripple-out 1.6s ease-out forwards; }
  .scene-on .ripple.r2{ animation-delay:1.06s; }
  .scene-on .ripple.r3{ animation-delay:1.24s; }
  .scene-on .ripple.r1{ animation-delay:.88s; }
  @keyframes ripple-out{
    0%{ opacity:.85; transform:scale(.3); }
    100%{ opacity:0; transform:scale(5.5); }
  }

  /* the creature */
  .inkling{
    position:absolute;
    left:96px;
    top:38px;
    width:108px;
    height:108px;
    margin:-106px 0 0 -54px;
    padding:0;
    border:0;
    background:none;
    cursor:pointer;
    opacity:0;
    transform:translateY(56px) scale(.7);
    pointer-events:auto;
    -webkit-tap-highlight-color:transparent;
  }
  .inkling svg{ width:100%; height:100%; overflow:visible; }
  .scene-on .inkling{
    animation:surface 1s cubic-bezier(.34,1.4,.5,1) 1.35s forwards;
  }
  @keyframes surface{
    0%{ opacity:0; transform:translateY(56px) scale(.7); }
    60%{ opacity:1; }
    100%{ opacity:1; transform:translateY(0) scale(1); }
  }
  .scene-on .inkling .bob{
    animation:bob 3.4s ease-in-out 2.35s infinite;
    transform-origin:50% 70%;
  }
  @keyframes bob{
    0%,100%{ transform:translateY(0) rotate(0deg); }
    35%{ transform:translateY(-4px) rotate(-3deg); }
    70%{ transform:translateY(2px) rotate(2.5deg); }
  }
  .inkling:hover .bob{ animation-play-state:paused; }
  .inkling:hover svg{ transform:scale(1.07); transition:transform .2s ease; }
  .pupils{ transition:transform .12s ease-out; }

  /* tentacle sway */
  .scene-on .inkling .tentacles{
    animation:sway 2.8s ease-in-out 2.35s infinite;
    transform-origin:50% 30%;
  }
  @keyframes sway{
    0%,100%{ transform:skewX(0deg); }
    40%{ transform:skewX(5deg); }
    75%{ transform:skewX(-4deg); }
  }

  /* speech bubble */
  .inkling-bubble{
    position:absolute;
    left:172px;
    top:-30px;
    background:var(--ink);
    color:var(--paper);
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:13.5px;
    font-weight:400;
    font-style:normal;
    letter-spacing:normal;
    word-spacing:normal;
    line-height:1.35;
    text-transform:none;
    padding:9px 14px;
    border-radius:14px 14px 14px 3px;
    white-space:nowrap;
    opacity:0;
    transform:translateX(-6px) scale(.9);
    transform-origin:0% 100%;
    pointer-events:none;
    box-shadow:0 8px 20px rgba(20,21,26,0.16);
  }
  .scene-on .inkling-bubble{
    animation:bubble-in .5s cubic-bezier(.34,1.5,.5,1) 2.3s forwards;
  }
  @keyframes bubble-in{
    to{ opacity:1; transform:translateX(0) scale(1); }
  }

  /* ===== Peeking inkling (idle, before the reveal) ===== */
  .inkling-peek{
    position:fixed;
    right:40px;
    bottom:0;
    width:122px;
    height:130px;
    margin:0;
    padding:0;
    border:0;
    background:none;
    cursor:pointer;
    z-index:70;
    transform:translateY(50px);
    opacity:0;
    pointer-events:none;
    transition:opacity .45s ease, transform .45s cubic-bezier(.16,.8,.24,1);
    -webkit-tap-highlight-color:transparent;
  }
  .inkling-peek svg{ width:100%; height:100%; display:block; }
  .inkling-peek.show{
    opacity:1;
    pointer-events:auto;
  }
  .inkling-peek.show .peek-bob{
    animation:peek-bob 3.6s ease-in-out infinite;
    transform-origin:50% 90%;
  }
  @keyframes peek-bob{
    0%,100%{ transform:translateY(0) rotate(0deg); }
    40%{ transform:translateY(-5px) rotate(-2.5deg); }
    72%{ transform:translateY(2px) rotate(2deg); }
  }
  .inkling-peek:hover{ transform:translateY(32px); }
  .inkling-peek:hover .peek-bob{ animation-play-state:paused; }

  /* dives out of sight when the reveal starts */
  .inkling-peek.dove{
    opacity:0;
    transform:translateY(150px);
    pointer-events:none;
    transition:opacity .4s ease .1s, transform .55s cubic-bezier(.5,0,.75,0);
  }
  @media (max-width:900px){
    .inkling-peek{ display:none; }
  }


  /* ===== Chat panel ===== */
  .chat-launcher{
    position:fixed;
    right:24px;
    bottom:24px;
    width:66px;
    height:66px;
    border-radius:50%;
    border:0;
    background:var(--ink);
    cursor:pointer;
    z-index:80;
    opacity:0;
    transform:translateY(14px) scale(.85);
    pointer-events:none;
    transition:opacity .3s ease, transform .3s cubic-bezier(.34,1.4,.5,1), box-shadow .2s ease;
    box-shadow:0 8px 22px rgba(20,21,26,0.22);
    padding:11px;
  }
  .chat-launcher.show{
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
  }
  .chat-launcher:hover{ box-shadow:0 12px 28px rgba(20,21,26,0.3); }
  .chat-launcher svg{ width:100%; height:100%; }

  .chat-panel{
    position:fixed;
    right:24px;
    bottom:24px;
    width:352px;
    max-width:calc(100vw - 32px);
    height:492px;
    max-height:calc(100vh - 48px);
    background:var(--white);
    border:1px solid var(--fog);
    border-radius:18px;
    z-index:90;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    opacity:0;
    transform:translateY(16px) scale(.97);
    pointer-events:none;
    transition:opacity .28s ease, transform .28s cubic-bezier(.16,.8,.24,1);
    box-shadow:0 24px 60px rgba(20,21,26,0.22);
  }
  .chat-panel.open{
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
  }
  .chat-head{
    display:flex;
    align-items:center;
    gap:11px;
    padding:15px 16px;
    background:var(--ink);
    flex-shrink:0;
  }
  .chat-head-icon{ width:34px; height:34px; flex-shrink:0; }
  .chat-head-icon svg{ width:100%; height:100%; }
  .chat-head-txt b{
    display:block;
    color:var(--paper);
    font-family:"Trebuchet MS","Segoe UI",Verdana,sans-serif;
    font-size:14px;
    font-weight:800;
    letter-spacing:-0.2px;
  }
  .chat-head-txt span{
    display:block;
    font-family:"Courier New",Consolas,monospace;
    font-size:9.5px;
    font-weight:700;
    letter-spacing:2px;
    color:var(--mint);
    text-transform:uppercase;
    margin-top:2px;
  }
  .chat-close{
    margin-left:auto;
    background:none;
    border:0;
    color:rgba(247,245,240,0.65);
    font-size:22px;
    line-height:1;
    cursor:pointer;
    padding:4px 6px;
    border-radius:6px;
  }
  .chat-close:hover{ color:var(--paper); background:rgba(247,245,240,0.1); }

  .chat-log{
    flex:1;
    overflow-y:auto;
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:10px;
    background:var(--paper);
  }
  .msg{
    max-width:82%;
    padding:10px 13px;
    font-size:13.5px;
    line-height:1.5;
    border-radius:14px;
    white-space:pre-wrap;
    word-wrap:break-word;
  }
  .msg.bot{
    align-self:flex-start;
    background:var(--white);
    border:1px solid var(--fog);
    color:var(--ink);
    border-bottom-left-radius:4px;
  }
  .msg.user{
    align-self:flex-end;
    background:var(--ink);
    color:var(--paper);
    border-bottom-right-radius:4px;
  }
  .msg.typing{
    display:flex;
    gap:4px;
    align-items:center;
    padding:13px;
  }
  .msg.typing i{
    width:6px; height:6px;
    border-radius:50%;
    background:var(--teal);
    display:block;
    animation:dot 1.1s ease-in-out infinite;
  }
  .msg.typing i:nth-child(2){ animation-delay:.16s; }
  .msg.typing i:nth-child(3){ animation-delay:.32s; }
  @keyframes dot{
    0%,60%,100%{ opacity:.3; transform:translateY(0); }
    30%{ opacity:1; transform:translateY(-3px); }
  }

  .chat-chips{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    padding:0 16px 12px;
    background:var(--paper);
  }
  .chip{
    font-family:"Courier New",Consolas,monospace;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    padding:7px 11px;
    border-radius:100px;
    border:1px solid var(--fog);
    background:var(--white);
    color:var(--slate);
    cursor:pointer;
    transition:border-color .15s ease, color .15s ease;
  }
  .chip:hover{ border-color:var(--teal); color:var(--teal); }

  .chat-form{
    display:flex;
    gap:8px;
    padding:12px;
    border-top:1px solid var(--fog);
    background:var(--white);
    flex-shrink:0;
  }
  .chat-form input{
    flex:1;
    border:1px solid var(--fog);
    border-radius:100px;
    padding:10px 15px;
    font-size:13.5px;
    font-family:inherit;
    color:var(--ink);
    background:var(--paper);
    outline:none;
  }
  .chat-form input:focus{ border-color:var(--teal); }
  .chat-send{
    width:40px; height:40px;
    flex-shrink:0;
    border:0;
    border-radius:50%;
    background:var(--coral);
    color:var(--white);
    cursor:pointer;
    font-size:16px;
    line-height:1;
    transition:transform .15s ease;
  }
  .chat-send:hover{ transform:scale(1.06); }
  .chat-send:disabled{ opacity:.45; cursor:default; transform:none; }

  .hero-inner{
    position:relative;
    z-index:2;
    max-width:820px;
  }
  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:"Courier New",Consolas,monospace;
    font-size:12px;
    font-weight:700;
    letter-spacing:4px;
    color:var(--teal);
    margin-bottom:26px;
    text-transform:uppercase;
  }
  .eyebrow .dot{
    width:7px;height:7px;border-radius:50%;
    background:var(--mint);
  }
  h1.headline{
    font-family:"Trebuchet MS","Segoe UI",Verdana,sans-serif;
    font-size:clamp(40px, 7vw, 78px);
    line-height:1.03;
    font-weight:800;
    letter-spacing:-2px;
    margin-bottom:26px;
  }
  h1.headline .accent{
    color:var(--teal);
    font-style:italic;
    font-weight:300;
  }
  .hero-sub{
    font-size:19px;
    font-weight:300;
    color:var(--charcoal);
    max-width:560px;
    line-height:1.55;
    margin-bottom:40px;
  }
  .hero-ctas{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
  }
  .btn-primary{
    background:var(--ink);
    color:var(--white);
    padding:15px 28px;
    border-radius:100px;
    font-size:15px;
    font-weight:700;
    letter-spacing:0.3px;
    transition:transform .15s ease, background .15s ease;
  }
  .btn-primary:hover{
    background:var(--teal);
    transform:translateY(-1px);
  }
  .btn-secondary{
    padding:15px 10px;
    font-size:15px;
    font-weight:700;
    color:var(--ink);
    border-bottom:2px solid var(--ink);
    display:inline-flex;
    align-items:center;
    gap:8px;
  }
  .btn-secondary:hover{
    color:var(--teal);
    border-color:var(--teal);
  }
  .hero-hint{
    position:absolute;
    right:32px;
    bottom:26px;
    font-size:12px;
    color:#8A8676;
    letter-spacing:0.5px;
    z-index:2;
  }
  @media (max-width:760px){ .hero-hint{display:none;} }

  /* ===== Services ===== */
  .services{
    padding:110px 0;
  }
  .section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:56px;
    gap:24px;
    flex-wrap:wrap;
  }
  .section-label{
    font-family:"Courier New",Consolas,monospace;
    font-size:12px;
    font-weight:700;
    letter-spacing:4px;
    color:var(--teal);
    text-transform:uppercase;
    margin-bottom:14px;
  }
  .section-title{
    font-family:"Trebuchet MS","Segoe UI",Verdana,sans-serif;
    font-size:clamp(28px,4vw,40px);
    font-weight:800;
    letter-spacing:-0.8px;
    max-width:520px;
  }
  .section-desc{
    font-size:16px;
    font-weight:300;
    color:var(--charcoal);
    max-width:340px;
    line-height:1.6;
  }

  .service-list{
    display:flex;
    flex-direction:column;
    border-top:1px solid var(--fog);
  }
  .service-row{
    display:grid;
    grid-template-columns:64px minmax(200px,280px) 1fr;
    grid-template-areas:
      "index name copy"
      "index .    deliv";
    align-items:baseline;
    column-gap:32px;
    padding:32px 4px;
    border-bottom:1px solid var(--fog);
    border-radius:14px;
    position:relative;
    isolation:isolate;
    overflow:hidden;
    transition:padding-left .35s cubic-bezier(.16,.8,.24,1),
               background .35s ease;
  }
  .service-row::before{
    content:"";
    position:absolute;
    left:0; top:0; bottom:0;
    width:3px;
    background:var(--teal);
    transform:scaleY(0);
    transform-origin:bottom;
    transition:transform .4s cubic-bezier(.16,.8,.24,1);
  }
  .service-row:hover{padding-left:22px;background:var(--white);}
  .service-row:hover::before{transform:scaleY(1);transform-origin:top;}
  .service-index{
    grid-area:index;
    font-family:"Courier New",Consolas,monospace;
    font-size:14px;
    font-weight:700;
    letter-spacing:1px;
    color:var(--slate);
    transition:color .3s ease;
  }
  .service-row:hover .service-index{color:var(--teal);}
  .service-name{
    grid-area:name;
    font-size:22px;
    font-weight:700;
    letter-spacing:-0.4px;
  }
  .service-copy{
    grid-area:copy;
    font-size:15px;
    font-weight:300;
    color:var(--charcoal);
    line-height:1.6;
    max-width:440px;
  }

  /* Deliverables: a plain, always-visible list of chips by default. On
     precise-pointer devices that can actually hover, it collapses and
     reveals itself per row instead — touch users never lose the content
     to a hover-only affordance. */
  .service-deliverables{
    grid-area:deliv;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    list-style:none;
    margin-top:14px;
  }
  .service-deliverables li{
    font-family:"Courier New",Consolas,monospace;
    font-size:11px;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
    padding:6px 12px;
    border-radius:100px;
    border:1px solid var(--fog);
    color:var(--slate);
  }
  @media (hover:hover) and (pointer:fine){
    .service-deliverables{
      max-height:0;
      margin-top:0;
      opacity:0;
      overflow:hidden;
      transition:max-height .45s cubic-bezier(.16,.8,.24,1),
                 margin-top .45s cubic-bezier(.16,.8,.24,1),
                 opacity .3s ease;
    }
    .service-row:hover .service-deliverables{
      max-height:120px;
      margin-top:14px;
      opacity:1;
    }
    .service-deliverables li{
      opacity:0;
      transform:translateY(6px);
      transition:opacity .35s ease, transform .35s ease;
    }
    .service-row:hover .service-deliverables li{opacity:1;transform:translateY(0);}
    .service-deliverables li:nth-child(1){transition-delay:.02s;}
    .service-deliverables li:nth-child(2){transition-delay:.07s;}
    .service-deliverables li:nth-child(3){transition-delay:.12s;}
    .service-deliverables li:nth-child(4){transition-delay:.17s;}
  }

  @media (max-width:760px){
    .service-row{
      grid-template-columns:32px 1fr;
      grid-template-areas:
        "index name"
        ".     copy"
        ".     deliv";
      row-gap:8px;
      column-gap:16px;
    }
    .service-copy{max-width:none;}
  }

  /* ===== Work ===== */
  .work{
    padding:110px 0;
    background:var(--white);
    border-top:1px solid var(--fog);
    border-bottom:1px solid var(--fog);
  }
  .work-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
  }
  @media (max-width:900px){
    .work-grid{grid-template-columns:1fr;}
  }
  .work-card{
    display:block;
    border-radius:14px;
    overflow:hidden;
    background:var(--paper);
    border:1px solid var(--fog);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .work-card:hover{
    transform:translateY(-4px);
    box-shadow:0 16px 30px rgba(17,17,17,0.08);
  }
  .work-thumb{
    height:190px;
    position:relative;
    overflow:hidden;
    transition:transform .5s cubic-bezier(.16,.8,.24,1);
  }
  .work-card:hover .work-thumb{
    transform:scale(1.06);
  }
  .work-thumb.t1{background:linear-gradient(135deg,#0A0A0A,#2B2B2B);}
  .work-thumb.t2{background:linear-gradient(135deg,var(--teal),var(--mint));}
  .work-thumb.t3{background:linear-gradient(135deg,var(--coral),#FF8A6E);}
  .work-body{
    padding:22px 22px 26px;
  }
  .work-tag{
    font-family:"Courier New",Consolas,monospace;
    font-size:11px;
    font-weight:700;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:var(--teal);
    margin-bottom:8px;
  }
  .work-title{
    font-size:19px;
    font-weight:700;
    margin-bottom:6px;
  }
  .work-desc{
    font-size:14px;
    font-weight:300;
    color:var(--charcoal);
  }

  /* ===== CTA / Footer ===== */
  footer.site-footer{
    background:var(--ink);
    color:var(--white);
    padding:120px 0 0;
  }
  .footer-cta{
    text-align:left;
    max-width:640px;
    margin-bottom:90px;
  }
  .footer-cta .section-label{color:var(--mint);}
  .footer-cta h2{
    font-family:"Trebuchet MS","Segoe UI",Verdana,sans-serif;
    font-size:clamp(32px,5vw,52px);
    font-weight:800;
    letter-spacing:-1.3px;
    margin-bottom:30px;
    line-height:1.08;
  }
  .footer-cta h2 em{
    font-style:italic;
    font-weight:300;
    color:var(--mint);
  }
  .footer-btn{
    background:var(--coral);
    color:var(--white);
    padding:16px 30px;
    border-radius:100px;
    font-size:15px;
    font-weight:700;
    display:inline-block;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .footer-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 24px rgba(255,92,77,0.3);
  }

  .footer-bottom{
    border-top:1px solid rgba(255,255,255,0.12);
    padding:34px 0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:16px;
  }
  .footer-brand{
    display:flex;
    align-items:center;
  }
  .footer-lockup{
    display:block;
    width:134px;
    height:auto;
  }
  .footer-links{
    display:flex;
    gap:26px;
    font-size:14px;
    color:rgba(255,255,255,0.65);
  }
  .footer-links a:hover{color:var(--mint);}
  .footer-copyright{
    font-size:13px;
    color:rgba(255,255,255,0.4);
  }

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{transition:none !important;}
  }

  /* ===== Scroll reveal ===== */
  .reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .9s cubic-bezier(.16,.8,.24,1), transform .9s cubic-bezier(.16,.8,.24,1);
    will-change:opacity, transform;
  }
  .reveal.is-visible{
    opacity:1;
    transform:translateY(0);
  }
  .reveal-stagger.is-visible{transition-delay:var(--delay, 0ms);}

  .hero h1.headline.reveal{
    opacity:1;
    transform:none;
    transition:none;
  }

  .headline .accent{
    display:inline-block;
  }

  @media (prefers-reduced-motion: reduce){
    .hero-blob{animation:none;}
    .hairline{animation:none;}
    .word > span.wtext{transition:none; transform:none;}
    .word.accent:hover .ink-drop,
    .word.accent:hover .ink-splash{animation:none; opacity:0;}
    .ink-scene .ripple,
    .ink-scene .water-line{animation:none !important;}
    .scene-on .water-line{width:210px;}
    .scene-on .inkling{
      animation:none;
      opacity:1;
      transform:none;
    }
    .scene-on .inkling .bob,
    .scene-on .inkling .tentacles{animation:none;}
    .scene-on .inkling-bubble{
      animation:none;
      opacity:1;
      transform:none;
    }
    .chat-launcher, .chat-panel{transition:none;}
    .inkling-peek{transition:opacity .2s ease;}
    .inkling-peek.show .peek-bob{animation:none;}
    .inkling-peek:hover{transform:translateY(50px);}
    .inkling-peek.dove{transform:translateY(50px); opacity:0;}
  }

  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1; transform:none; transition:none;}
  }

  /* ===== Mobile navigation ===== */
  .nav-toggle{
    display:none;
    width:44px;
    height:44px;
    padding:10px;
    margin-left:6px;
    border:0;
    border-radius:10px;
    background:none;
    cursor:pointer;
    flex-shrink:0;
    -webkit-tap-highlight-color:transparent;
  }
  .nav-toggle:hover{ background:rgba(20,21,26,0.05); }
  .nav-toggle span{
    display:block;
    width:24px;
    height:2px;
    border-radius:2px;
    background:var(--ink);
    transition:transform .3s cubic-bezier(.16,.8,.24,1), opacity .18s ease;
  }
  .nav-toggle span + span{ margin-top:6px; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

  .mobile-menu{
    position:fixed;
    inset:0;
    z-index:45;
    background:var(--paper);
    padding:92px 22px 40px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:opacity .26s ease, transform .26s cubic-bezier(.16,.8,.24,1), visibility .26s;
  }
  .mobile-menu.open{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
  .mobile-menu nav{
    display:flex;
    flex-direction:column;
  }
  .mobile-menu nav a{
    font-family:"Trebuchet MS","Segoe UI",Verdana,sans-serif;
    font-size:27px;
    font-weight:800;
    letter-spacing:-0.7px;
    color:var(--ink);
    padding:17px 2px;
    border-bottom:1px solid var(--fog);
  }
  .mobile-menu nav a:active{ color:var(--teal); }
  .mobile-menu nav a.is-current{ color:var(--teal); }
  .mobile-menu .mm-cta{
    display:block;
    margin-top:28px;
    padding:16px 22px;
    border-radius:100px;
    background:var(--coral);
    color:var(--white);
    font-size:16px;
    font-weight:700;
    text-align:center;
  }
  .mobile-menu .mm-login{
    display:block;
    margin-top:16px;
    padding:15px 22px;
    border-radius:100px;
    border:1px solid var(--fog);
    color:var(--ink);
    font-size:15px;
    font-weight:700;
    text-align:center;
  }
  .mobile-menu .mm-foot{
    margin-top:34px;
    font-family:"Courier New",Consolas,monospace;
    font-size:11px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--slate);
  }
  .mobile-menu .mm-foot a{ color:var(--teal); }

  body.menu-open{ overflow:hidden; }
  body.menu-open .inkling-peek,
  body.menu-open .chat-launcher,
  body.menu-open .scroll-progress{ opacity:0 !important; pointer-events:none !important; }

  @media (max-width:760px){
    .nav-toggle{ display:block; }
    /* nav.links{display:flex} out-specifies .nav-mobile-hide, so the original
       hide rule never applied and the desktop links overflowed on phones.
       This selector is specific enough to actually win. */
    header.site-nav nav.links{ display:none; }
  }
  @media (min-width:761px){
    .mobile-menu{ display:none; }
  }

  /* ===== Mobile layout tuning ===== */
  @media (max-width:760px){
    .wrap{ padding:0 20px; }
    .nav-row{ padding:14px 20px; }

    /* iOS zooms the page when a focused input is under 16px */
    .chat-form input{ font-size:16px; }

    .hero{ padding:74px 0 62px; }
    .hero-sub{ font-size:17px; margin-bottom:32px; }
    .hero-ctas{ gap:12px; }
    .btn-primary, .btn-secondary{ padding:14px 24px; }

    .services, .work{ padding:66px 0; }
    .section-head{ margin-bottom:34px; }
    .service-row{ padding:24px 4px; }

    footer.site-footer{ padding:74px 0 0; }
    .footer-cta{ margin-bottom:54px; }
    .footer-bottom{ padding:26px 0; }
  }

  @media (max-width:480px){
    .nav-cta{ display:none; }
    .brand-lockup{ width:104px; }
  }

  /* chat becomes a bottom sheet on small screens */
  @media (max-width:560px){
    .chat-panel{
      left:0;
      right:0;
      bottom:0;
      width:100%;
      max-width:none;
      height:min(74vh, 520px);
      border-radius:18px 18px 0 0;
      border-left:0;
      border-right:0;
      border-bottom:0;
    }
    .chat-launcher{ right:16px; bottom:16px; }
  }

  @media (prefers-reduced-motion: reduce){
    .mobile-menu{ transition:none; }
    .nav-toggle span{ transition:none; }
  }


  /* ===== About page ===== */
  .page-head{
    padding:110px 0 70px;
    border-bottom:1px solid var(--fog);
    position:relative;
    overflow:hidden;
  }
  .page-head .hero-blob{ opacity:.28; }
  .page-head-inner{ position:relative; z-index:2; max-width:760px; }
  .page-title{
    font-family:"Trebuchet MS","Segoe UI",Verdana,sans-serif;
    font-size:clamp(38px,6vw,68px);
    font-weight:800;
    letter-spacing:-1.8px;
    line-height:1.05;
    margin-bottom:22px;
  }
  .page-title em{
    font-style:italic;
    font-weight:400;
    color:var(--teal);
  }
  .page-lede{
    font-size:18px;
    font-weight:300;
    color:var(--slate);
    line-height:1.6;
    max-width:560px;
  }

  .story{ padding:96px 0 40px; }
  .story-body{
    max-width:680px;
    font-size:17px;
    font-weight:300;
    line-height:1.75;
    color:var(--slate);
  }
  .story-body p{ margin-bottom:20px; }

  .story-lede{
    font-size:22px;
    font-weight:400;
    line-height:1.5;
    color:var(--ink);
    margin-bottom:26px;
  }
  .story-figure{
    margin:34px 0;
    max-width:504px;   /* the photo's natural width — never upscale it */
  }
  .story-figure img{
    display:block;
    width:100%;
    height:auto;
    border-radius:12px;
    border:1px solid var(--fog);
  }
  .story-figure figcaption{
    margin-top:11px;
    font-family:"Courier New",Consolas,monospace;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:1.8px;
    text-transform:uppercase;
    color:var(--slate);
    line-height:1.5;
  }
  .story-quote{
    margin:34px 0;
    padding:4px 0 4px 26px;
    border-left:3px solid var(--teal);
  }
  .story-quote p{
    font-family:"Trebuchet MS","Segoe UI",Verdana,sans-serif;
    font-size:21px;
    font-weight:400;
    font-style:italic;
    line-height:1.5;
    letter-spacing:-0.3px;
    color:var(--ink);
    margin-bottom:0;
  }
  .story-sign{
    margin-top:30px;
    padding-top:22px;
    border-top:1px solid var(--fog);
    font-family:"Trebuchet MS","Segoe UI",Verdana,sans-serif;
    font-size:19px;
    font-weight:800;
    letter-spacing:-0.4px;
    color:var(--ink);
  }

  .mv{ padding:60px 0 110px; }
  .mv-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
  }
  @media (max-width:820px){
    .mv-grid{ grid-template-columns:1fr; }
  }
  .mv-card{
    background:var(--white);
    border:1px solid var(--fog);
    border-radius:16px;
    padding:38px 34px;
    position:relative;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .mv-card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 34px rgba(20,21,26,0.07);
  }
  .mv-card::before{
    content:"";
    position:absolute;
    left:0; top:0;
    width:100%; height:4px;
    background:linear-gradient(90deg, var(--teal), var(--mint));
    transform:scaleX(0);
    transform-origin:0 50%;
    transition:transform .35s cubic-bezier(.16,.8,.24,1);
  }
  .mv-card:hover::before{ transform:scaleX(1); }
  .mv-icon{
    width:44px; height:44px;
    margin-bottom:22px;
  }
  .mv-icon svg{ width:100%; height:100%; }
  .mv-card h2{
    font-family:"Trebuchet MS","Segoe UI",Verdana,sans-serif;
    font-size:26px;
    font-weight:800;
    letter-spacing:-0.5px;
    margin-bottom:14px;
  }
  .mv-card p{
    font-size:15.5px;
    font-weight:300;
    line-height:1.68;
    color:var(--slate);
    margin-bottom:14px;
  }
  .mv-card p:last-child{ margin-bottom:0; }

  nav.links a.is-current{ color:var(--ink); }
  nav.links a.is-current::after{ width:100%; }

@media (max-width:760px){
    .page-head{ padding:68px 0 50px; }
    .page-lede{ font-size:16.5px; }
    .story{ padding:56px 0 26px; }
    .story-body{ font-size:16px; }
    .story-lede{ font-size:19px; }
    .story-figure{ margin:28px 0; max-width:100%; }
    .story-figure figcaption{ font-size:10px; letter-spacing:1.5px; }
    .story-quote{ margin:28px 0; padding-left:18px; }
    .story-quote p{ font-size:18px; }
    .story-sign{ font-size:17px; }
    .mv{ padding:34px 0 74px; }
    .mv-card{ padding:30px 26px; }
    .mv-card h2{ font-size:23px; }
  }

/* ---------------------------------------------------------------------
   Utility classes
   These replace what used to be style="" attributes on the markup. Inline
   style attributes are covered by CSP's style-src, so removing them is what
   allows 'unsafe-inline' to be dropped from the policy entirely.
   --------------------------------------------------------------------- */
.d40  { transition-delay:40ms; }
.d80  { transition-delay:80ms; }
.d110 { transition-delay:110ms; }
.d160 { transition-delay:160ms; }
.d180 { transition-delay:180ms; }
.d260 { transition-delay:260ms; }
.d340 { transition-delay:340ms; }
.d420 { transition-delay:420ms; }

.sd0   { --delay:0ms; }
.sd90  { --delay:90ms; }
.sd110 { --delay:110ms; }
.sd180 { --delay:180ms; }
.sd220 { --delay:220ms; }
.sd270 { --delay:270ms; }
.sd310 { --delay:310ms; }
.sd360 { --delay:360ms; }

.on-dark-accent { color:var(--mint); }

/* ---------------------------------------------------------------------
   No-JavaScript fallback
   Previously a <noscript><style> block, which is itself inline CSS. Instead
   the document starts as .no-js and app.js removes that class immediately,
   so these rules only ever apply when the script did not run.
   --------------------------------------------------------------------- */
.no-js .reveal { opacity:1 !important; transform:none !important; }
.no-js .headline .word > span.wtext { transform:none !important; }
.no-js .mobile-menu,
.no-js .nav-toggle { display:none !important; }
.no-js header.site-nav nav.links { display:flex !important; flex-wrap:wrap; gap:16px; }
.no-js .chat-launcher,
.no-js .inkling-peek { display:none !important; }

/* =====================================================================
   Contact form + "Start a project" wizard
   ===================================================================== */

/* ---------- shared form controls ---------- */
.f-field{ margin-bottom:18px; }
.f-field label,
.f-legend{
  display:block;
  font-family:"Courier New",Consolas,monospace;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--slate);
  margin-bottom:8px;
}
.f-field input[type="text"],
.f-field input[type="email"],
.f-field input[type="tel"],
.f-field textarea{
  width:100%;
  border:1px solid var(--fog);
  border-radius:10px;
  background:var(--white);
  padding:13px 15px;
  font-size:15px;
  font-family:inherit;
  color:var(--ink);
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.f-field textarea{ min-height:120px; resize:vertical; line-height:1.55; }
.f-field input::placeholder,
.f-field textarea::placeholder{ color:#B4AFA0; }
.f-field input:focus,
.f-field textarea:focus{
  border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(0,184,217,0.13);
}
.f-field input[aria-invalid="true"],
.f-field textarea[aria-invalid="true"]{
  border-color:var(--coral);
  box-shadow:0 0 0 3px rgba(255,90,60,0.12);
}
.f-err{
  display:none;
  font-size:12.5px;
  color:var(--coral);
  margin-top:6px;
}
.f-err.on{ display:block; }

/* the honeypot: a real field, hidden from people, irresistible to bots */
.f-hp{
  position:absolute !important;
  left:-9999px !important;
  width:1px; height:1px;
  overflow:hidden;
}

/* ---------- choice chips (radio / checkbox styled as buttons) ---------- */
.f-choices{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  border:0;
  padding:0;
  margin:0 0 4px;
}
.f-choice{ position:relative; }
.f-choice input{
  position:absolute;
  opacity:0;
  width:100%; height:100%;
  left:0; top:0;
  margin:0;
  cursor:pointer;
}
.f-choice span{
  display:block;
  padding:11px 16px;
  border:1px solid var(--fog);
  border-radius:100px;
  background:var(--white);
  font-size:14px;
  color:var(--ink);
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.f-choice input:hover + span{ border-color:var(--teal); }
.f-choice input:focus-visible + span{
  outline:3px solid var(--teal);
  outline-offset:2px;
}
.f-choice input:checked + span{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper);
}

/* ---------- contact section ---------- */
.contact{
  padding:110px 0;
  background:var(--paper);
  border-top:1px solid var(--fog);
}
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:64px;
  align-items:start;
}
@media (max-width:820px){
  .contact-grid{ grid-template-columns:1fr; gap:38px; }
}
.contact-copy h2{
  font-family:"Trebuchet MS","Segoe UI",Verdana,sans-serif;
  font-size:clamp(28px,4vw,40px);
  font-weight:800;
  letter-spacing:-0.8px;
  margin-bottom:16px;
  line-height:1.1;
}
.contact-copy p{
  font-size:16px;
  font-weight:300;
  color:var(--slate);
  line-height:1.65;
  margin-bottom:26px;
}
.contact-points{ list-style:none; padding:0; margin:0; }
.contact-points li{
  display:flex;
  gap:11px;
  font-size:14.5px;
  font-weight:300;
  color:var(--slate);
  margin-bottom:12px;
  line-height:1.5;
}
.contact-points li::before{
  content:"";
  flex-shrink:0;
  width:7px; height:7px;
  margin-top:7px;
  border-radius:50%;
  background:var(--teal);
}
.contact-form-wrap{
  background:var(--white);
  border:1px solid var(--fog);
  border-radius:16px;
  padding:34px 32px;
}
@media (max-width:560px){
  .contact-form-wrap{ padding:26px 22px; }
  .contact{ padding:66px 0; }
}

.f-submit{
  width:100%;
  border:0;
  border-radius:100px;
  background:var(--coral);
  color:var(--white);
  padding:15px 24px;
  font-size:15px;
  font-weight:700;
  font-family:inherit;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.f-submit:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(255,90,60,0.3); }
.f-submit:disabled{ opacity:.55; cursor:default; transform:none; box-shadow:none; }

.f-note{
  margin-top:14px;
  font-size:12.5px;
  color:var(--slate);
  line-height:1.5;
  text-align:center;
}

.f-status{
  display:none;
  margin-bottom:20px;
  padding:14px 16px;
  border-radius:10px;
  font-size:14px;
  line-height:1.55;
}
.f-status.on{ display:block; }
.f-status.ok{
  background:rgba(0,184,217,0.08);
  border:1px solid rgba(0,184,217,0.32);
  color:#0B6B7D;
}
.f-status.bad{
  background:rgba(255,90,60,0.09);
  border:1px solid rgba(255,90,60,0.35);
  color:#B33322;
}
.f-status b{ display:block; margin-bottom:3px; }

/* ---------- wizard modal ---------- */
.wz-overlay{
  position:fixed;
  inset:0;
  z-index:120;
  background:rgba(20,21,26,0.55);
  backdrop-filter:blur(3px);
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease, visibility .25s;
}
.wz-overlay.open{ opacity:1; visibility:visible; }

.wz{
  position:fixed;
  z-index:121;
  left:50%;
  top:50%;
  transform:translate(-50%,-48%) scale(.97);
  width:min(620px, calc(100vw - 32px));
  max-height:min(88vh, 780px);
  background:var(--paper);
  border-radius:20px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  opacity:0;
  visibility:hidden;
  transition:opacity .28s ease, transform .28s cubic-bezier(.16,.8,.24,1), visibility .28s;
  box-shadow:0 30px 80px rgba(20,21,26,0.3);
}
.wz.open{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,-50%) scale(1);
}
@media (max-width:560px){
  .wz{
    width:100%;
    max-height:100%;
    height:100%;
    top:0; left:0;
    transform:translateY(20px);
    border-radius:0;
  }
  .wz.open{ transform:translateY(0); }
}

.wz-head{
  flex-shrink:0;
  padding:22px 26px 18px;
  background:var(--ink);
  color:var(--paper);
  position:relative;
}
.wz-kicker{
  font-family:"Courier New",Consolas,monospace;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--mint);
  margin-bottom:7px;
}
.wz-head h2{
  font-family:"Trebuchet MS","Segoe UI",Verdana,sans-serif;
  font-size:22px;
  font-weight:800;
  letter-spacing:-0.5px;
  padding-right:40px;
}
.wz-close{
  position:absolute;
  right:16px; top:16px;
  width:36px; height:36px;
  border:0;
  border-radius:9px;
  background:none;
  color:rgba(247,245,240,0.6);
  font-size:24px;
  line-height:1;
  cursor:pointer;
}
.wz-close:hover{ color:var(--paper); background:rgba(247,245,240,0.1); }

.wz-progress{
  height:4px;
  background:rgba(247,245,240,0.15);
  margin-top:16px;
  border-radius:2px;
  overflow:hidden;
}
.wz-progress i{
  display:block;
  height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--mint),var(--teal));
  border-radius:2px;
  transition:width .35s cubic-bezier(.16,.8,.24,1);
}
.wz-count{
  margin-top:9px;
  font-family:"Courier New",Consolas,monospace;
  font-size:10px;
  font-weight:700;
  letter-spacing:2px;
  color:rgba(247,245,240,0.5);
  text-transform:uppercase;
}

.wz-body{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:26px;
}
.wz-step{ display:none; }
.wz-step.active{ display:block; animation:wz-in .3s ease; }
@keyframes wz-in{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}
.wz-q{
  font-family:"Trebuchet MS","Segoe UI",Verdana,sans-serif;
  font-size:20px;
  font-weight:800;
  letter-spacing:-0.4px;
  color:var(--ink);
  margin-bottom:6px;
}
.wz-hint{
  font-size:13.5px;
  font-weight:300;
  color:var(--slate);
  margin-bottom:18px;
  line-height:1.5;
}

.wz-foot{
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 26px;
  border-top:1px solid var(--fog);
  background:var(--white);
}
.wz-back{
  border:0;
  background:none;
  font-size:14px;
  font-weight:700;
  color:var(--slate);
  cursor:pointer;
  padding:12px 6px;
  border-radius:8px;
}
.wz-back:hover{ color:var(--ink); }
.wz-back[hidden]{ display:none; }

/* An author `display` rule overrides the UA default for [hidden], so setting
   el.hidden = true silently fails on any styled element. This was letting the
   wizard's footer — and its live "Send brief" button — stay on screen after
   submission. Make the attribute authoritative. */
[hidden]{ display:none !important; }
.wz-next{
  margin-left:auto;
  border:0;
  border-radius:100px;
  background:var(--ink);
  color:var(--paper);
  padding:14px 30px;
  font-size:15px;
  font-weight:700;
  font-family:inherit;
  cursor:pointer;
  transition:background .18s ease, transform .15s ease;
}
.wz-next:hover{ background:var(--teal); transform:translateY(-1px); }
.wz-next:disabled{ opacity:.5; cursor:default; transform:none; background:var(--ink); }

.wz-done{
  text-align:center;
  padding:26px 10px 14px;
}
.wz-done-mark{
  width:64px; height:64px;
  margin:0 auto 20px;
}
.wz-done h3{
  font-family:"Trebuchet MS","Segoe UI",Verdana,sans-serif;
  font-size:24px;
  font-weight:800;
  letter-spacing:-0.5px;
  margin-bottom:10px;
}
.wz-done p{
  font-size:15px;
  font-weight:300;
  color:var(--slate);
  line-height:1.6;
  max-width:380px;
  margin:0 auto;
}

body.wz-open{ overflow:hidden; }

@media (prefers-reduced-motion: reduce){
  .wz, .wz-overlay, .wz-progress i{ transition:none; }
  .wz-step.active{ animation:none; }
}

/* Without JavaScript the wizard cannot run, so hide it and let the
   [data-wizard] links behave as ordinary jumps to the contact form. */
.no-js .wz,
.no-js .wz-overlay{ display:none !important; }

/* =====================================================================
   Animated background — "ink in water"

   Three layers, all GPU-only (transform / opacity):
     1. aurora   slow drifting colour fields
     2. grain    a faint static texture that stops the gradients banding

   Contrast strategy: instead of muting the whole background to protect
   body text, the colour is allowed to be strong and the long-form text
   blocks sit on their own near-solid surfaces. That keeps paragraphs on
   a calm ground while the hero and the gaps between sections carry the
   full effect.
   ===================================================================== */
.bg-anim{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
  background:var(--paper);
}

/* ---------- 1. aurora ---------- */
.bg-blob{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  will-change:transform;
  mix-blend-mode:multiply;
}
.bg-blob.b1{
  width:52vmax; height:44vmax;
  top:-16vmax; left:-12vmax;
  background:radial-gradient(circle, rgba(0,184,217,0.42), transparent 66%);
  animation:drift-a 26s ease-in-out infinite;
}
.bg-blob.b2{
  width:44vmax; height:40vmax;
  top:22%; right:-14vmax;
  background:radial-gradient(circle, rgba(102,225,242,0.40), transparent 66%);
  animation:drift-b 34s ease-in-out infinite;
}
.bg-blob.b3{
  width:38vmax; height:34vmax;
  bottom:-14vmax; left:22%;
  background:radial-gradient(circle, rgba(255,90,60,0.20), transparent 66%);
  animation:drift-c 30s ease-in-out infinite;
}
.bg-blob.b4{
  width:30vmax; height:30vmax;
  top:52%; left:8%;
  background:radial-gradient(circle, rgba(0,184,217,0.26), transparent 64%);
  animation:drift-d 22s ease-in-out infinite;
}

@keyframes drift-a{
  0%,100%{ transform:translate3d(0,0,0) scale(1) rotate(0deg); }
  30%    { transform:translate3d(14vw,7vh,0) scale(1.22) rotate(8deg); }
  62%    { transform:translate3d(-5vw,15vh,0) scale(.9) rotate(-6deg); }
}
@keyframes drift-b{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  35%    { transform:translate3d(-16vw,-10vh,0) scale(1.26); }
  70%    { transform:translate3d(-6vw,12vh,0) scale(.88); }
}
@keyframes drift-c{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  45%    { transform:translate3d(16vw,-13vh,0) scale(1.3); }
  75%    { transform:translate3d(6vw,-4vh,0) scale(.94); }
}
@keyframes drift-d{
  0%,100%{ transform:translate3d(0,0,0) scale(.95); }
  50%    { transform:translate3d(10vw,-16vh,0) scale(1.25); }
}

/* ---------- 2. grain ---------- */
.bg-grain{
  position:absolute;
  inset:-50%;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain-shift 7s steps(6) infinite;
  pointer-events:none;
}
@keyframes grain-shift{
  0%,100%{ transform:translate3d(0,0,0); }
  20%{ transform:translate3d(-3%,2%,0); }
  40%{ transform:translate3d(2%,-3%,0); }
  60%{ transform:translate3d(-2%,-2%,0); }
  80%{ transform:translate3d(3%,3%,0); }
}

/* ---------- surfaces ----------
   Long-form text gets a near-solid card; the hero and the gaps stay open
   so the colour actually reads. */
body{ background:transparent; }
.hero{ background:transparent; }
.services{ background:transparent; }

/* The section heading sits directly on the live background now that the
   veil is gone, so it gets its own soft pocket — same trick as the hero. */
.services .section-head{
  position:relative;
}
.services .section-head::before{
  content:"";
  position:absolute;
  inset:-26px -40px;
  background:radial-gradient(ellipse at 30% 50%,
             rgba(247,245,240,0.90) 34%, rgba(247,245,240,0) 80%);
  z-index:-1;
  pointer-events:none;
}
.contact{ background:rgba(247,245,240,0.84); }
.work{ background:rgba(255,255,255,0.90); }
.page-head{ background:transparent; }
/* fallback for browsers without backdrop-filter */
.story, .mv{ background:rgba(247,245,240,0.86); }
header.site-nav{ background:rgba(247,245,240,0.78); }

/* the hero's own blobs are redundant now the page has its own field */
.hero-blob{ display:none; }

/* Hero text sits directly on the live background, so it gets its own
   readable pocket rather than a page-wide veil. */
.hero-inner::before{
  content:"";
  position:absolute;
  inset:-40px -60px;
  background:radial-gradient(ellipse at 30% 50%, rgba(247,245,240,0.92) 30%, rgba(247,245,240,0) 78%);
  z-index:-1;
  pointer-events:none;
}
.page-head-inner::before{
  content:"";
  position:absolute;
  inset:-30px -60px;
  background:radial-gradient(ellipse at 30% 50%, rgba(247,245,240,0.90) 32%, rgba(247,245,240,0) 78%);
  z-index:-1;
  pointer-events:none;
}

@media (max-width:760px){
  /* blur is the expensive part — fewer, cheaper layers on phones */
  .bg-blob{ filter:blur(52px); }
  .bg-blob.b4{ display:none; }
  .bg-grain{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .bg-blob, .bg-grain{ animation:none !important; }
}

/* =====================================================================
   Liquid glass system
   =====================================================================

   Glass only reads as a material when there is something behind it, so
   the section veils that used to sit between the aurora and the content
   are removed here. Each pane then carries its own readable surface.

   Opacity floors, measured against the worst-case background (all four
   aurora blobs stacked) and the WCAG AA 4.5:1 threshold:

     light pane   50% white   body text 4.85:1
     text pocket  88% paper   body text 5.8:1
     dark pane    82% ink     muted text 5.0:1

   Only transform / opacity / filter animate, so this stays on the
   compositor. Everything is inside @supports, so browsers without
   backdrop-filter keep the previous flat treatment.
   ===================================================================== */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {

  :root{
    --glass-fill:rgba(255,255,255,0.50);
    --glass-fill-hi:rgba(255,255,255,0.60);
    --glass-rim:rgba(255,255,255,0.72);
    --glass-blur:blur(30px) saturate(210%);
    --glass-blur-lite:blur(16px) saturate(160%);
    --glass-shadow:0 8px 32px rgba(20,21,26,0.10);
    --glass-shadow-hi:0 18px 44px rgba(20,21,26,0.14);
    --glass-inset:inset 0 1px 0 rgba(255,255,255,0.95),
                  inset 0 -1px 0 rgba(255,255,255,0.30);
  }

  /* ---------- shared pane ---------- */
  .glass{
    position:relative;
    isolation:isolate;
    background:var(--glass-fill);
    -webkit-backdrop-filter:var(--glass-blur);
    backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-rim);
    box-shadow:var(--glass-shadow), var(--glass-inset);
    overflow:hidden;
  }
  /* specular corner highlight */
  .glass::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(135deg,
      rgba(255,255,255,0.42) 0%,
      rgba(255,255,255,0.10) 14%,
      rgba(255,255,255,0) 34%);
    opacity:.85;
    pointer-events:none;
    z-index:-1;
    transition:opacity .35s ease;
  }

  /* ---------- let the background through ---------- */
  .services,
  .work,
  .contact{ background:transparent; }

  /* copy that sits directly on the live background needs its own pocket */
  .services .section-head,
  .work .section-head,
  .contact-copy{ position:relative; }
  .services .section-head::before,
  .work .section-head::before,
  .contact-copy::before{
    content:"";
    position:absolute;
    inset:-26px -40px;
    background:radial-gradient(ellipse at 30% 50%,
      rgba(247,245,240,0.88) 36%, rgba(247,245,240,0) 82%);
    z-index:-1;
    pointer-events:none;
  }

  /* ---------- services (editorial rows) ---------- */
  .service-list{
    position:relative;
    isolation:isolate;
    border-radius:22px;
    padding:6px 32px;
    background:var(--glass-fill);
    -webkit-backdrop-filter:var(--glass-blur);
    backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-rim);
    box-shadow:var(--glass-shadow), var(--glass-inset);
    overflow:hidden;
    border-top:0;
  }
  .service-list::before{
    content:"";
    position:absolute; inset:0; border-radius:inherit;
    background:linear-gradient(135deg,
      rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.10) 14%,
      rgba(255,255,255,0) 34%);
    opacity:.85; pointer-events:none; z-index:-1;
  }
  .service-row{
    border-bottom-color:var(--glass-rim);
    border-radius:14px;
    transition:padding-left .35s cubic-bezier(.16,.8,.24,1), background .3s ease;
  }
  .service-row:last-child{ border-bottom:0; }
  .service-row:hover{ background:var(--glass-fill-hi); }
  /* travelling glint */
  .service-row::after,
  .work-card::after{
    content:"";
    position:absolute;
    top:-60%; left:-40%;
    width:60%; height:220%;
    background:linear-gradient(100deg,
      rgba(255,255,255,0) 0%, rgba(255,255,255,0.34) 50%,
      rgba(255,255,255,0) 100%);
    transform:translateX(-60%) rotate(8deg);
    opacity:0; pointer-events:none; z-index:-1;
    transition:transform .85s cubic-bezier(.16,.8,.24,1), opacity .3s ease;
  }
  .service-row:hover::after,
  .work-card:hover::after{ opacity:1; transform:translateX(320%) rotate(8deg); }

  /* ---------- selected work ---------- */
  .work-card{
    position:relative;
    isolation:isolate;
    background:var(--glass-fill);
    -webkit-backdrop-filter:var(--glass-blur);
    backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-rim);
    border-radius:18px;
    box-shadow:var(--glass-shadow), var(--glass-inset);
    overflow:hidden;
  }
  .work-card:hover{
    transform:translateY(-5px);
    background:var(--glass-fill-hi);
    box-shadow:var(--glass-shadow-hi), var(--glass-inset);
  }
  /* the thumbnail is solid, so it gets its own rim to sit in the pane */
  .work-thumb{
    margin:10px 10px 0;
    border-radius:12px;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.28),
               0 6px 18px rgba(20,21,26,0.16);
  }

  /* ---------- get in touch ---------- */
  .contact-form-wrap{
    position:relative;
    isolation:isolate;
    background:var(--glass-fill);
    -webkit-backdrop-filter:var(--glass-blur);
    backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-rim);
    border-radius:20px;
    box-shadow:var(--glass-shadow), var(--glass-inset);
    overflow:hidden;
  }
  .contact-form-wrap::before{
    content:"";
    position:absolute; inset:0; border-radius:inherit;
    background:linear-gradient(135deg,
      rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.10) 16%,
      rgba(255,255,255,0) 38%);
    opacity:.85; pointer-events:none; z-index:-1;
  }
  /* inputs stay near-solid — typed text must never fight the background */
  .contact-form-wrap .f-field input,
  .contact-form-wrap .f-field textarea{
    background:rgba(255,255,255,0.86);
    border-color:rgba(255,255,255,0.9);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
  }
  .contact-form-wrap .f-field input:focus,
  .contact-form-wrap .f-field textarea:focus{
    background:rgba(255,255,255,0.97);
    border-color:var(--teal);
  }
  .contact-form-wrap .f-choice span{
    background:rgba(255,255,255,0.72);
    border-color:rgba(255,255,255,0.85);
  }

  /* ---------- nav ---------- */
  header.site-nav{
    background:rgba(247,245,240,0.62);
    -webkit-backdrop-filter:blur(24px) saturate(190%);
    backdrop-filter:blur(24px) saturate(190%);
    border-bottom:1px solid rgba(255,255,255,0.55);
    box-shadow:0 1px 0 rgba(255,255,255,0.6),
               0 6px 24px rgba(20,21,26,0.05);
  }

  /* ---------- footer: dark glass ---------- */
  footer.site-footer{
    position:relative;
    isolation:isolate;
    background:rgba(20,21,26,0.82);
    -webkit-backdrop-filter:blur(30px) saturate(160%);
    backdrop-filter:blur(30px) saturate(160%);
    border-top:1px solid rgba(255,255,255,0.10);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.12);
  }
  footer.site-footer::before{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(135deg,
      rgba(255,255,255,0.09) 0%,
      rgba(255,255,255,0.02) 22%,
      rgba(255,255,255,0) 48%);
    pointer-events:none; z-index:-1;
  }

  /* ---------- chat + wizard ---------- */
  .chat-panel{
    background:rgba(255,255,255,0.72);
    -webkit-backdrop-filter:var(--glass-blur);
    backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-rim);
    box-shadow:0 24px 60px rgba(20,21,26,0.22), var(--glass-inset);
  }
  .chat-log{ background:transparent; }
  .chat-chips{ background:transparent; }
  .chat-form{
    background:rgba(255,255,255,0.55);
    border-top-color:rgba(255,255,255,0.5);
  }
  .chat-form input{ background:rgba(255,255,255,0.88); }
  .msg.bot{ background:rgba(255,255,255,0.82); border-color:rgba(255,255,255,0.7); }

  .wz{
    background:rgba(247,245,240,0.86);
    -webkit-backdrop-filter:var(--glass-blur);
    backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-rim);
  }
  .wz-foot{
    background:rgba(255,255,255,0.55);
    border-top-color:rgba(255,255,255,0.5);
  }
  .f-choice span{ background:rgba(255,255,255,0.72); }

  /* ---------- lighter on phones ---------- */
  @media (max-width:900px){
    .service-list,
    .work-card,
    .contact-form-wrap,
    .chat-panel{
      -webkit-backdrop-filter:var(--glass-blur-lite);
      backdrop-filter:var(--glass-blur-lite);
      background:rgba(255,255,255,0.66);
    }
    header.site-nav{
      -webkit-backdrop-filter:blur(14px) saturate(160%);
      backdrop-filter:blur(14px) saturate(160%);
      background:rgba(247,245,240,0.78);
    }
    footer.site-footer{
      -webkit-backdrop-filter:blur(14px);
      backdrop-filter:blur(14px);
      background:rgba(20,21,26,0.90);
    }
    .service-row::after,
    .work-card::after{ display:none; }
  }

  @media (prefers-reduced-motion: reduce){
    .service-row, .work-card{ transition:none; }
    .service-row::before, .service-row::after, .work-card::after{ display:none; }
  }

  /* ---------- about page ---------- */

  /* Mission and vision become panes. */
  .mv{ background:transparent; }
  .mv-card{
    position:relative;
    isolation:isolate;
    border-radius:18px;
    background:var(--glass-fill);
    -webkit-backdrop-filter:var(--glass-blur);
    backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-rim);
    box-shadow:var(--glass-shadow), var(--glass-inset);
    overflow:hidden;
    transition:transform .35s cubic-bezier(.16,.8,.24,1),
               box-shadow .35s ease, background .35s ease;
  }
  .mv-card::before{
    content:"";
    position:absolute; inset:0; border-radius:inherit;
    background:linear-gradient(135deg,
      rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.10) 14%,
      rgba(255,255,255,0) 34%);
    opacity:.85; pointer-events:none; z-index:-1;
    transition:opacity .35s ease;
  }
  .mv-card:hover{
    transform:translateY(-5px);
    background:var(--glass-fill-hi);
    box-shadow:var(--glass-shadow-hi), var(--glass-inset);
  }
  .mv-card:hover::before{ opacity:1; }
  .mv-card .mv-icon{
    border-radius:9px;
    box-shadow:0 4px 14px rgba(20,21,26,0.18),
               inset 0 1px 0 rgba(255,255,255,0.18);
  }

  /* The story stays calm on purpose.
     Several hundred words of prose over a drifting background is tiring to
     read no matter how good the contrast figure is, so it keeps a near
     solid pocket rather than becoming a pane. Glass belongs on chrome and
     cards, not on long-form reading. */
  .story{ background:transparent; }
  .story .wrap{ position:relative; }
  .story .wrap::before{
    content:"";
    position:absolute;
    inset:-30px -48px;
    background:radial-gradient(ellipse at 32% 45%,
      rgba(247,245,240,0.93) 46%, rgba(247,245,240,0) 88%);
    z-index:-1;
    pointer-events:none;
  }

  /* The photo gets a glass rim so it sits in the page rather than on it. */
  .story-figure img{
    border-color:rgba(255,255,255,0.7);
    box-shadow:0 10px 30px rgba(20,21,26,0.12),
               inset 0 1px 0 rgba(255,255,255,0.5);
  }

  /* Page header pocket, same treatment as the landing sections. */
  .page-head-inner{ position:relative; }

  @media (max-width:900px){
    .mv-card{
      -webkit-backdrop-filter:var(--glass-blur-lite);
      backdrop-filter:var(--glass-blur-lite);
      background:rgba(255,255,255,0.66);
    }
  }
  @media (prefers-reduced-motion: reduce){
    .mv-card{ transition:none; }
  }
}


/* =====================================================================
   Mobile refinement — build b20
   Keeps the desktop composition intact while giving phones and small
   tablets tighter rhythm, safer controls, and viewport-aware overlays.
   ===================================================================== */

/* Lock the page only behind the mobile bottom sheet. On desktop the chat is
   a floating panel, so the page must remain independently scrollable. */
@media (max-width:560px){
  body.chat-open{ overflow:hidden; }
}

@media (min-width:761px) and (max-width:980px){
  .wrap{ padding-inline:24px; }
  .nav-row{ padding:16px 24px; gap:14px; }
  nav.links{ gap:22px; }
  .nav-cta{ padding-inline:17px; }
  .hero{ padding:92px 0 82px; }
  .services,
  .contact{ padding:88px 0; }
  .service-list{ padding-inline:22px; }
  .service-row{
    grid-template-columns:48px minmax(180px,220px) 1fr;
    column-gap:22px;
  }
  .contact-grid{ gap:42px; }
}

@media (max-width:760px){
  html{ scroll-padding-top:78px; }
  body{
    overflow-x:hidden;
    overflow-x:clip;
  }

  .wrap{ padding-inline:18px; }

  header.site-nav{ padding-top:env(safe-area-inset-top); }
  .nav-row{
    min-height:68px;
    padding:12px 18px;
    gap:8px;
  }
  .brand{ min-width:0; }
  .brand-lockup{ width:104px; }
  .nav-row .theme-toggle{
    width:42px;
    height:42px;
    flex-basis:42px;
    margin-left:auto;
  }
  .nav-toggle{ margin-left:0; }

  .mobile-menu{
    min-height:100vh;
    min-height:100svh;
    min-height:100dvh;
    padding:calc(82px + env(safe-area-inset-top)) 18px
            calc(24px + env(safe-area-inset-bottom));
    flex-direction:column;
  }
  .mobile-menu:not([hidden]){ display:flex; }
  .mobile-menu nav a{
    display:flex;
    align-items:center;
    min-height:56px;
    padding:14px 4px;
    font-size:clamp(24px,7.2vw,30px);
    line-height:1.08;
  }
  .mobile-menu .mm-cta,
  .mobile-menu .mm-login{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:52px;
  }
  .mobile-menu .mm-foot{
    margin-top:auto;
    padding-top:28px;
    line-height:1.5;
  }

  .hero{
    padding:52px 0 58px;
    overflow:hidden;
  }
  .hero-inner::before{ inset:-24px -18px; }
  .eyebrow{
    max-width:100%;
    margin-bottom:18px;
    font-size:10.5px;
    letter-spacing:2.4px;
    line-height:1.4;
  }
  h1.headline{
    font-size:clamp(38px,12.2vw,52px);
    line-height:.99;
    letter-spacing:-1.45px;
    margin-bottom:22px;
  }
  .hero-sub{
    font-size:16.5px;
    line-height:1.6;
    margin-bottom:27px;
  }
  .hero-ctas{
    display:grid;
    width:100%;
    gap:10px;
  }
  .btn-primary,
  .btn-secondary{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:50px;
    padding:13px 20px;
    text-align:center;
  }

  .services{ padding:64px 0; }
  .section-head{
    gap:14px;
    margin-bottom:28px;
  }
  .section-label{
    margin-bottom:10px;
    font-size:10.5px;
    letter-spacing:2.8px;
  }
  .section-title{
    font-size:clamp(28px,9vw,36px);
    line-height:1.1;
    letter-spacing:-.65px;
  }
  .section-desc{
    max-width:none;
    font-size:15.5px;
  }
  .services .section-head::before,
  .contact-copy::before{
    inset:-18px;
  }

  .service-list{
    padding:4px 12px;
    border-radius:18px;
  }
  .service-row{
    grid-template-columns:25px minmax(0,1fr);
    grid-template-areas:
      "index name"
      ". copy"
      ". deliv";
    column-gap:12px;
    row-gap:8px;
    padding:22px 2px;
    border-radius:0;
  }
  .service-row:hover{
    padding-left:2px;
    background:transparent;
  }
  .service-row::before{ display:none; }
  .service-index{ font-size:12px; }
  .service-name{
    min-width:0;
    font-size:20px;
    line-height:1.2;
  }
  .service-copy{
    font-size:15px;
    line-height:1.6;
  }
  .service-deliverables{
    gap:6px;
    margin-top:10px;
  }
  .service-deliverables li{
    padding:5px 9px;
    font-size:9.5px;
    line-height:1.3;
  }

  .contact{ padding:64px 0; }
  .contact-grid{ gap:30px; }
  .contact-copy h2{
    font-size:clamp(28px,9vw,36px);
    line-height:1.12;
  }
  .contact-copy p{ margin-bottom:22px; }
  .contact-points li{
    gap:10px;
    font-size:14px;
  }
  .contact-form-wrap{
    padding:24px 18px;
    border-radius:16px;
  }
  .f-field{ margin-bottom:16px; }
  .f-field input[type="text"],
  .f-field input[type="email"],
  .f-field input[type="tel"],
  .f-field textarea{
    min-height:48px;
    padding:13px 14px;
    font-size:16px;
  }
  .f-field textarea{ min-height:132px; }
  .f-submit{ min-height:50px; }

  footer.site-footer{ padding:64px 0 0; }
  .footer-cta{ margin-bottom:44px; }
  .footer-cta h2{
    font-size:clamp(31px,9.5vw,42px);
    line-height:1.12;
    margin-bottom:25px;
  }
  .footer-btn{
    width:100%;
    min-height:52px;
    padding:15px 22px;
    text-align:center;
  }
  .footer-bottom{
    align-items:flex-start;
    gap:22px;
    padding:28px 0 calc(28px + env(safe-area-inset-bottom));
  }
  .footer-links{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
    gap:0 18px;
  }
  .footer-links a{
    display:flex;
    align-items:center;
    min-height:44px;
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  .footer-copyright{
    width:100%;
    line-height:1.5;
  }

  .page-head{
    padding:52px 0 44px;
    overflow:hidden;
  }
  .page-head-inner::before{ inset:-20px -18px; }
  .page-title{
    font-size:clamp(36px,11.5vw,48px);
    line-height:1.02;
    letter-spacing:-1.25px;
  }
  .page-lede{ font-size:16px; }
  .story{
    padding:52px 0 24px;
    overflow:hidden;
  }
  .story .wrap::before{ inset:-20px -18px; }
  .story-body{ font-size:16px; }
  .mv{ padding:30px 0 64px; }
  .mv-grid{ gap:18px; }
  .mv-card{
    padding:26px 20px;
    border-radius:16px;
  }

  .chat-launcher{
    right:max(14px,env(safe-area-inset-right));
    bottom:max(14px,env(safe-area-inset-bottom));
    width:60px;
    height:60px;
    padding:10px;
  }
  .chat-close{
    display:grid;
    place-items:center;
    min-width:44px;
    min-height:44px;
    padding:0;
  }
}

@media (max-width:560px){
  .chat-panel{
    height:min(82dvh,620px);
    max-height:calc(100dvh - max(10px,env(safe-area-inset-top)));
  }
  .chat-head{ padding:13px 12px 13px 15px; }
  .chat-log{ padding:14px; }
  .chat-chips{
    gap:7px;
    padding:0 14px 10px;
  }
  .chip{
    min-height:40px;
    padding:8px 12px;
  }
  .chat-form{
    padding:11px 12px calc(11px + env(safe-area-inset-bottom));
  }
  .chat-form input{ min-width:0; }

  .wz{
    height:100vh;
    height:100svh;
    height:100dvh;
  }
  .wz-head{
    padding:calc(18px + env(safe-area-inset-top)) 18px 14px;
  }
  .wz-close{
    top:calc(12px + env(safe-area-inset-top));
    right:12px;
    width:44px;
    height:44px;
  }
  .wz-body{ padding:20px 18px; }
  .wz-q{
    font-size:19px;
    line-height:1.2;
  }
  .wz .f-choices{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }
  .wz .f-choice,
  .wz .f-choice span{ width:100%; }
  .wz .f-choice span{
    min-height:48px;
    padding:13px 15px;
  }
  .wz-foot{
    padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  }
  .wz-back{ min-height:44px; }
  .wz-next{
    min-height:48px;
    padding:13px 24px;
  }
}

@media (max-width:360px){
  .wrap{ padding-inline:16px; }
  .nav-row{ padding-inline:16px; }
  .brand-lockup{ width:96px; }
  .nav-row .theme-toggle{
    width:40px;
    height:40px;
    flex-basis:40px;
  }
  .nav-toggle{
    width:40px;
    height:40px;
    padding:8px;
  }
  h1.headline{ font-size:37px; }
  .service-list{ padding-inline:8px; }
  .footer-links{ grid-template-columns:1fr; }
}

@media (hover:none) and (pointer:coarse){
  .service-row:hover,
  .work-card:hover,
  .mv-card:hover,
  .btn-primary:hover,
  .footer-btn:hover,
  .f-submit:hover{
    transform:none;
    box-shadow:none;
  }
  .service-row:hover{ background:transparent; }
  button,
  .btn-primary,
  .btn-secondary,
  .footer-btn,
  .mobile-menu a{
    touch-action:manipulation;
  }
}

/* =====================================================================
   Desktop performance safeguards — build b22
   Keeps the INKR glass composition while avoiding the expensive repaint
   path triggered by animated full-screen blur beneath large glass panes.
   ===================================================================== */
@media (min-width:901px) and (hover:hover) and (pointer:fine){
  .bg-anim{ contain:paint; }
  .bg-blob{
    animation:none !important;
    filter:blur(46px);
    will-change:auto;
  }
  .bg-blob.b4,
  .bg-grain{ display:none; }

  @supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
    :root{
      --glass-blur:blur(14px) saturate(155%);
      --glass-blur-lite:blur(10px) saturate(145%);
    }

    /* Large scrolling panes keep their translucent fill, rim, highlights,
       and shadow without re-sampling the whole viewport on every frame. */
    .service-list,
    .work-card,
    .contact-form-wrap,
    .mv-card{
      -webkit-backdrop-filter:none;
      backdrop-filter:none;
    }

    header.site-nav{
      -webkit-backdrop-filter:blur(12px) saturate(150%);
      backdrop-filter:blur(12px) saturate(150%);
    }

    footer.site-footer{
      -webkit-backdrop-filter:none;
      backdrop-filter:none;
    }
  }
}