:root{
      --ink:#10233b;
      --muted:#64748b;
      --surface:#ffffff;
      --surface-2:#f5f9fc;
      --line:#dce8ee;
      --teal:#12a5a3;
      --teal-dark:#087d83;
      --blue:#1769aa;
      --cyan:#59c4cf;
      --navy:#0b2940;
      --radius:24px;
      --shadow:0 24px 70px rgba(15,54,77,.12);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color:var(--ink);
      background:#fff;
      line-height:1.6;
      overflow-x:hidden;
    }
    a{text-decoration:none;color:inherit}
    button,input,textarea,select{font:inherit}
    .container{width:min(1160px,calc(100% - 40px));margin:auto}
    .eyebrow{
      display:inline-flex;align-items:center;gap:8px;
      padding:7px 12px;border:1px solid rgba(18,165,163,.22);
      border-radius:999px;background:rgba(18,165,163,.08);
      color:var(--teal-dark);font-size:.82rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase
    }
    .dot{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 5px rgba(18,165,163,.12)}
    h1,h2,h3,p{margin-top:0}
    h1{font-size:clamp(3rem,7vw,5.6rem);line-height:.98;letter-spacing:-.055em;margin-bottom:24px}
    h2{font-size:clamp(2.25rem,4.5vw,3.75rem);line-height:1.02;letter-spacing:-.045em;margin-bottom:18px}
    h3{font-size:1.12rem;line-height:1.25}
    .lead{font-size:clamp(1rem,2vw,1.18rem);color:var(--muted);max-width:700px}
    .gradient-text{
      background:linear-gradient(100deg,var(--teal-dark),var(--teal) 45%,var(--blue));
      -webkit-background-clip:text;background-clip:text;color:transparent
    }

    /* NAV */
    .nav-wrap{
      position:sticky;top:0;z-index:50;
      background:rgba(255,255,255,.84);backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(220,232,238,.72)
    }
    nav{height:104px;display:flex;align-items:center;justify-content:space-between;gap:24px}
    .logo{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:215px;padding:7px 0;line-height:1}
    .logo .brand-logo{display:block;width:190px;height:auto;object-fit:contain}.brand-tagline{display:block;margin-top:1px;margin-left:5px;font-size:8.5px;line-height:1.15;letter-spacing:.11em;text-transform:uppercase;font-weight:800;color:#465b6b;white-space:nowrap}
    .nav-links{display:flex;align-items:center;gap:30px;font-size:.94rem;font-weight:700;color:#294157}
    .nav-links a:hover{color:var(--teal-dark)}
    .nav-actions{display:flex;align-items:center;gap:12px}
    .btn{
      border:0;cursor:pointer;border-radius:13px;padding:13px 18px;font-weight:800;
      display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:.2s ease
    }
    .btn:hover{transform:translateY(-2px)}
    .btn-primary{
      color:white;background:linear-gradient(105deg,var(--teal-dark),var(--teal) 52%,var(--blue));
      box-shadow:0 12px 28px rgba(18,165,163,.24)
    }
    .btn-secondary{background:#fff;border:1px solid var(--line);color:var(--ink)}
    .menu-btn{display:none;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px}

    /* HERO */
    .hero{
      position:relative;padding:96px 0 70px;min-height:690px;
      background:
        radial-gradient(circle at 82% 20%,rgba(89,196,207,.18),transparent 28%),
        radial-gradient(circle at 70% 90%,rgba(23,105,170,.09),transparent 34%),
        linear-gradient(#fff,#fbfdfe);
    }
    .hero:before{
      content:"";position:absolute;inset:0;opacity:.45;pointer-events:none;
      background-image:linear-gradient(rgba(12,94,105,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(12,94,105,.04) 1px,transparent 1px);
      background-size:42px 42px;
      mask-image:linear-gradient(to bottom,black,transparent 88%)
    }
    .hero-grid{position:relative;display:grid;grid-template-columns:1.03fr .97fr;gap:64px;align-items:center}
    .hero-copy .lead{margin-bottom:30px;max-width:620px}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap}
    .hero-trust{margin-top:30px;display:flex;gap:22px;flex-wrap:wrap;color:#60788c;font-size:.9rem;font-weight:650}
    .trust-item{display:flex;align-items:center;gap:8px}
    .check{
      width:20px;height:20px;border-radius:50%;background:#e6f7f5;color:var(--teal-dark);
      display:grid;place-items:center;font-size:.72rem;font-weight:900
    }

    .tech-stage{position:relative;min-height:470px}
    .glow{position:absolute;width:330px;height:330px;right:5%;top:11%;border-radius:50%;filter:blur(50px);background:rgba(18,165,163,.16)}
    .dashboard{
      position:absolute;inset:30px 0 30px 15px;background:rgba(255,255,255,.94);
      border:1px solid rgba(194,218,226,.9);border-radius:28px;box-shadow:var(--shadow);overflow:hidden;
      transform:perspective(900px) rotateY(-4deg) rotateX(2deg)
    }
    .dash-top{height:60px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:9px;padding:0 20px;background:#fbfdfe}
    .dash-dot{width:9px;height:9px;border-radius:50%;background:#d5e4e9}
    .dash-title{margin-left:10px;font-size:.79rem;font-weight:800;color:#5b7182}
    .dash-body{display:grid;grid-template-columns:112px 1fr;min-height:385px}
    .sidebar{border-right:1px solid var(--line);padding:20px 12px;background:#f8fbfc}
    .side-pill{height:11px;border-radius:8px;background:#dfecef;margin:0 5px 15px}
    .side-pill.active{background:linear-gradient(90deg,var(--teal),var(--blue));height:34px;opacity:.82}
    .mainpanel{padding:22px}
    .mini-label{font-size:.68rem;color:#7c91a1;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
    .mini-title{font-weight:900;font-size:1rem;margin:2px 0 15px}
    .metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
    .metric{border:1px solid var(--line);padding:14px;border-radius:16px;background:#fff}
    .metric b{display:block;font-size:1.3rem;margin-top:2px}
    .chart{height:154px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#fff,#f7fbfc);position:relative;overflow:hidden}
    .chart:before,.chart:after{content:"";position:absolute;left:0;right:0;border-top:1px dashed #d7e6eb}
    .chart:before{top:35%}.chart:after{top:68%}
    .chart svg{position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px)}
    .float-card{
      position:absolute;background:#fff;border:1px solid var(--line);border-radius:16px;
      padding:12px 15px;box-shadow:0 16px 40px rgba(15,54,77,.12);font-size:.78rem;font-weight:750
    }
    .float-card small{display:block;color:#7c91a1;font-weight:650}
    .float-card.one{right:-24px;top:44px;animation:float 4.8s ease-in-out infinite}
    .float-card.two{left:-8px;bottom:10px;animation:float 5.4s ease-in-out infinite reverse}
    @keyframes float{50%{transform:translateY(-9px)}}

    /* VALUE STRIP */
    .value-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
    .value-grid{display:grid;grid-template-columns:repeat(4,1fr)}
    .value{padding:26px 26px;border-right:1px solid var(--line)}
    .value:last-child{border-right:0}
    .value b{display:block;font-size:1rem;margin-bottom:3px}
    .value span{font-size:.84rem;color:var(--muted)}

    section{padding:100px 0}
    .section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:42px}
    .section-head .lead{max-width:520px;margin-bottom:5px}

    /* SERVICES */
    .services{background:var(--surface-2)}
    .service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
    .service-card{
      position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
      padding:32px;overflow:hidden;min-height:255px;transition:.25s ease
    }
    .service-card:hover{transform:translateY(-5px);box-shadow:0 22px 52px rgba(14,66,84,.08);border-color:#b8d9dd}
    .service-no{font-size:.74rem;font-weight:900;color:var(--teal-dark);letter-spacing:.12em}
    .service-icon{
      width:52px;height:52px;border-radius:15px;margin:18px 0 24px;
      background:linear-gradient(145deg,#e7f8f5,#e9f1fa);display:grid;place-items:center;color:var(--teal-dark)
    }
    .service-card p{color:var(--muted);max-width:520px;margin:0}
    .service-arrow{position:absolute;right:28px;top:28px;font-size:1.2rem;color:#8aa0af}

    /* PROCESS */
    .process-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:66px;align-items:start}
    .sticky-copy{position:sticky;top:125px}
    .steps{display:grid;gap:14px}
    .step{display:grid;grid-template-columns:60px 1fr;gap:18px;padding:24px;border-radius:20px;border:1px solid var(--line);background:#fff}
    .step-num{width:54px;height:54px;border-radius:17px;background:#eef8f7;display:grid;place-items:center;font-weight:900;color:var(--teal-dark)}
    .step h3{margin:3px 0 7px}.step p{margin:0;color:var(--muted)}

    /* WHY */
    .why{background:var(--navy);color:#fff;position:relative;overflow:hidden}
    .why:after{content:"";position:absolute;width:500px;height:500px;border-radius:50%;right:-180px;top:-180px;background:rgba(32,186,185,.16);filter:blur(15px)}
    .why .lead{color:#b8ccd9}
    .why-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.1fr;gap:55px;align-items:center}
    .reason-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
    .reason{padding:24px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.045);border-radius:20px}
    .reason b{display:block;margin-bottom:7px}
    .reason p{margin:0;color:#aac0ce;font-size:.9rem}

    /* MODELS */
    .models-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .model{border:1px solid var(--line);border-radius:24px;padding:28px;background:#fff}
    .model.featured{background:linear-gradient(160deg,#f1fbf9,#f4f8fd);border-color:#a8d7d8}
    .tag{display:inline-block;padding:6px 9px;border-radius:999px;background:#eef8f7;color:var(--teal-dark);font-size:.72rem;font-weight:900;margin-bottom:20px}
    .model ul{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px;color:#526c7e;font-size:.91rem}
    .model li:before{content:"✓";font-weight:900;color:var(--teal-dark);margin-right:10px}

    /* FAQ */
    .faq-wrap{display:grid;grid-template-columns:.75fr 1.25fr;gap:60px}
    details{border-bottom:1px solid var(--line);padding:20px 0}
    summary{cursor:pointer;list-style:none;font-weight:850;font-size:1.04rem;display:flex;justify-content:space-between;gap:20px}
    summary::-webkit-details-marker{display:none}
    summary:after{content:"+";font-size:1.4rem;color:var(--teal-dark);font-weight:500}
    details[open] summary:after{content:"–"}
    details p{color:var(--muted);margin:12px 45px 0 0}

    /* CONTACT */
    .contact{background:linear-gradient(180deg,#f6fbfc,#fff)}
    .contact-card{
      border:1px solid var(--line);border-radius:30px;background:#fff;box-shadow:var(--shadow);
      display:grid;grid-template-columns:.88fr 1.12fr;overflow:hidden
    }
    .contact-info{padding:46px;background:linear-gradient(155deg,#0c3148,#0d4b5c);color:#fff}
    .contact-info .lead{color:#bdd1dc}
    .contact-line{margin-top:24px}
    .contact-line span{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.09em;color:#98b6c4;font-weight:800}
    .contact-line a{font-weight:800}
    form{padding:46px}
    .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
    .field{display:grid;gap:7px}
    .field.full{grid-column:1/-1}
    label{font-size:.82rem;font-weight:800;color:#425d70}
    input,textarea,select{width:100%;border:1px solid #d6e4e9;border-radius:12px;padding:13px 14px;outline:none;background:#fbfdfe;color:var(--ink)}
    input:focus,textarea:focus,select:focus{border-color:#69bdc1;box-shadow:0 0 0 3px rgba(18,165,163,.1)}
    textarea{min-height:125px;resize:vertical}
    .form-note{font-size:.77rem;color:#7b8e9c;margin-top:12px}

    /* FOOTER */
    footer{padding:52px 0 30px;background:#071f31;color:#d6e4eb}
    .footer-grid{display:grid;grid-template-columns:1.3fr .7fr .7fr;gap:50px;margin-bottom:42px}
    .footer-logo{
      display:inline-flex;
      flex-direction:column;
      align-items:flex-start;
      width:max-content;
      background:none !important;
      border:0 !important;
      box-shadow:none !important;
      padding:0 !important;
    }
    .footer-brand-logo{
      display:block;
      width:220px;
      height:auto;
      object-fit:contain;
      background:transparent !important;
      border:0 !important;
      border-radius:0 !important;
      box-shadow:none !important;
      padding:0 !important;
    }
    .footer-tagline{
      display:block;
      width:auto;
      margin:8px 0 0 2px;
      padding:0 !important;
      background:none !important;
      color:#79ded8;
      font-size:10px;
      line-height:1.25;
      letter-spacing:.035em;
      text-transform:none;
      font-weight:750;
      text-align:left;
      white-space:nowrap;
    }
    footer p{color:#93adbc;max-width:430px;margin-top:18px}
    .footer-title{font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;font-weight:900;color:#8fb0c0;margin-bottom:15px}
    .footer-links{display:grid;gap:9px;font-size:.91rem}
    .footer-links a:hover{color:#7fe0db}
    .copyright{border-top:1px solid rgba(255,255,255,.09);padding-top:22px;color:#7694a4;font-size:.82rem;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

    /* reveal */
    .reveal{opacity:0;transform:translateY(20px);transition:.7s ease}
    .reveal.visible{opacity:1;transform:none}

    @media(max-width:900px){
      .nav-links,.nav-actions .btn-secondary{display:none}.menu-btn{display:block}
      .hero{padding-top:70px}.hero-grid,.process-grid,.why-grid,.faq-wrap,.contact-card{grid-template-columns:1fr}
      .hero-grid{gap:35px}.tech-stage{min-height:430px}.dashboard{inset:20px 10px 20px 10px;transform:none}
      .float-card.one{right:0}.float-card.two{left:0}
      .value-grid{grid-template-columns:repeat(2,1fr)}.value:nth-child(2){border-right:0}.value:nth-child(-n+2){border-bottom:1px solid var(--line)}
      .section-head{display:block}.section-head .lead{margin-top:16px}
      .sticky-copy{position:static}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}
    }
    @media(max-width:620px){
      .logo{min-width:170px}.logo .brand-logo{width:150px;height:auto;max-width:none}.brand-tagline{font-size:6.7px;margin-left:3px;letter-spacing:.08em}
      .container{width:min(100% - 28px,1160px)}nav{height:86px}
      .hero{padding:56px 0 50px}.hero-actions .btn{width:100%}
      .tech-stage{min-height:365px}.dash-body{grid-template-columns:78px 1fr}.sidebar{padding:16px 8px}.mainpanel{padding:15px}
      .metrics{gap:7px}.metric{padding:10px}.metric b{font-size:1rem}.chart{height:125px}
      section{padding:76px 0}.service-grid,.reason-grid,.models-grid{grid-template-columns:1fr}
      .service-card{padding:25px}.value{padding:20px 16px}
      .form-grid{grid-template-columns:1fr}.contact-info,form{padding:30px 24px}.field.full{grid-column:auto}
      .footer-grid{grid-template-columns:1fr}.footer-grid>div:first-child{grid-column:auto}
    }

    /* ---------------------------------------------------------------
       Enquiry form: spam trap, status messages
       --------------------------------------------------------------- */
    .hp-field{
      position:absolute!important;left:-9999px!important;top:auto!important;
      width:1px!important;height:1px!important;overflow:hidden!important;
      opacity:0!important;pointer-events:none!important;
    }
    .form-status{
      margin:16px 0 0;padding:13px 16px;border-radius:14px;
      font-size:.92rem;font-weight:700;line-height:1.5;
    }
    .form-status.is-success{
      background:rgba(18,165,163,.12);border:1px solid rgba(18,165,163,.32);color:#0b6f6d;
    }
    .form-status.is-error{
      background:rgba(192,57,43,.09);border:1px solid rgba(192,57,43,.28);color:#a8342a;
    }
    #submitBtn[disabled]{opacity:.62;cursor:progress}
    .form-note a{color:var(--teal-dark);font-weight:800;text-decoration:underline;text-underline-offset:2px}

    /* footer legal links */
    .legal-links{display:flex;gap:18px;flex-wrap:wrap}
    .legal-links a{color:#8fb0c0;text-decoration:none}
    .legal-links a:hover{color:#7fe0db;text-decoration:underline;text-underline-offset:3px}

    /* ---------------------------------------------------------------
       Long-form document pages (privacy, terms) and the 404 page
       --------------------------------------------------------------- */
    .doc-hero{
      background:linear-gradient(180deg,var(--surface-2),#fff);
      border-bottom:1px solid var(--line);
      padding:64px 0 52px;
    }
    .doc-hero h1{
      font-size:clamp(2.3rem,5vw,3.6rem);line-height:1.02;
      letter-spacing:-.045em;margin:16px 0 14px;
    }
    .doc-hero .lead{margin:0}
    .doc-meta{
      margin-top:20px;font-size:.85rem;font-weight:800;color:var(--muted);
      letter-spacing:.03em;text-transform:uppercase;
    }
    .doc-body{padding:56px 0 90px}
    .doc-body .container{max-width:820px}
    .doc-body h2{
      font-size:1.45rem;line-height:1.25;letter-spacing:-.02em;
      margin:44px 0 14px;padding-top:22px;border-top:1px solid var(--line);
    }
    .doc-body h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
    .doc-body h3{font-size:1.05rem;margin:26px 0 10px}
    .doc-body p,.doc-body li{color:#41576e;line-height:1.75;font-size:1rem}
    .doc-body p{margin:0 0 15px}
    .doc-body ul,.doc-body ol{margin:0 0 18px;padding-left:22px}
    .doc-body li{margin-bottom:8px}
    .doc-body a{color:var(--teal-dark);font-weight:700;text-decoration:underline;text-underline-offset:2px}
    .doc-body strong{color:var(--ink);font-weight:800}
    .doc-toc{
      background:var(--surface-2);border:1px solid var(--line);border-radius:18px;
      padding:22px 26px;margin:0 0 40px;
    }
    .doc-toc b{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:12px}
    .doc-toc ol{margin:0;padding-left:20px;columns:2;column-gap:30px}
    .doc-toc li{margin-bottom:7px;font-size:.93rem}
    .doc-contact{
      background:var(--navy);color:#cfe4ee;border-radius:var(--radius);
      padding:30px 32px;margin-top:40px;
    }
    .doc-contact b{color:#fff;display:block;margin-bottom:10px;font-size:1.05rem}
    .doc-contact p{color:#9fbccd;margin:0 0 6px}
    .doc-contact a{color:#7fe0db;font-weight:700}
    .todo{
      background:#fff8e6;border:1px dashed #e0b34a;border-radius:10px;
      padding:2px 9px;color:#8a6112;font-weight:800;font-size:.86rem;
      display:inline-block;
    }

    /* 404 */
    .nf{min-height:68vh;display:grid;place-items:center;text-align:center;padding:80px 0}
    .nf .code{
      font-size:clamp(5rem,16vw,10rem);font-weight:900;line-height:.9;letter-spacing:-.06em;
      background:linear-gradient(120deg,var(--teal),var(--blue));
      -webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:8px;
    }
    .nf h1{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:14px}
    .nf .lead{margin:0 auto 28px}
    .nf-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

    @media(max-width:620px){
      .doc-toc ol{columns:1}
      .doc-body{padding:40px 0 70px}
      .doc-hero{padding:44px 0 38px}
    }

    /* ---------------------------------------------------------------
       Mobile header fix
       Below 640px the "Discuss a Project" button had nowhere to go and
       wrapped onto four lines, breaking the header. The hamburger menu
       carries Contact, and the hero CTA sits just below the fold, so
       the nav button is hidden rather than squeezed.
       --------------------------------------------------------------- */
    @media(max-width:640px){
      .nav-actions .btn-primary{display:none}
      .nav-actions{gap:0}
      nav{gap:12px}
      .menu-btn{margin-left:auto}
    }

    /* =================================================================
       BUG FIXES — appended 3 Sep 2026
       Each block notes the problem it solves.
       ================================================================= */

    /* FIX 1 — Anchor links landed *underneath* the sticky header.
       Clicking Services / How We Work / Why Setukaar / FAQ scrolled the
       section heading 5px (desktop) to 11px (mobile) behind the bar. */
    html{scroll-padding-top:112px}
    @media(max-width:900px){ html{scroll-padding-top:94px} }

    /* FIX 2 — The sticky header was 84% opaque, so headings and form
       fields were clearly readable *through* the bar while scrolling. */
    .nav-wrap{background:rgba(255,255,255,.98)}
    @supports ((backdrop-filter:blur(18px)) or (-webkit-backdrop-filter:blur(18px))){
      .nav-wrap{background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(18px)}
    }

    /* FIX 3 — The "Connected workflow" card sat on top of the dashboard's
       title bar, covering 13px of "SETUKAAR / BUSINESS OPERATIONS" on
       desktop and 98px of it at tablet width. Lifted clear of the bar. */
    .float-card.one{top:-18px}

    /* FIX 4 — .float-card.one hangs 24px past the hero on the right, which
       pushed the document 4px wider than the viewport around 1024px and
       produced a stray horizontal scrollbar. Pull it in below 1150px. */
    @media(max-width:1150px){
      .float-card.one{right:0}
    }
    /* the dashboard sits higher on small screens, so the card needs more lift */
    @media(max-width:900px){
      .float-card.one{top:-34px}
    }

    /* FIX 5 — Every .reveal block starts at opacity:0 and is only shown by
       JavaScript. If the script fails to load, or is blocked, 22 sections
       of the page stay permanently invisible. */
    @media (scripting: none){
      .reveal{opacity:1!important;transform:none!important}
    }

    /* FIX 6 — Respect reduced-motion preferences. */
    @media (prefers-reduced-motion: reduce){
      html{scroll-behavior:auto}
      .reveal{opacity:1;transform:none;transition:none}
      .float-card.one,.float-card.two{animation:none}
    }

    /* FIX 7 — Keyboard focus was effectively invisible. Inputs had
       outline:none with a 10%-opacity ring, and the submit button and the
       mobile menu button had no focus indicator at all. */
    :where(a,button,input,select,textarea,summary):focus-visible{
      outline:3px solid var(--teal);
      outline-offset:2px;
      border-radius:6px;
    }
    .field input:focus-visible,
    .field select:focus-visible,
    .field textarea:focus-visible{
      outline:3px solid var(--teal);
      outline-offset:1px;
      box-shadow:0 0 0 4px rgba(18,165,163,.18);
    }
    .btn:focus-visible{outline-offset:3px}
    .contact-card .btn:focus-visible,
    footer a:focus-visible{outline-color:#7fe0db}