/* subset to the characters this site actually sets, and served as woff2:
   169 KB of OTF becomes 10.6 KB. Bold is not dropped by accident — nothing on
   the page renders at 700, so shipping it would be 56 KB for nothing. */
@font-face{font-family:'TTS';src:url('../fonts/tts-300.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'TTS';src:url('../fonts/tts-400.woff2') format('woff2');font-weight:400;font-display:swap}
:root{--ink:#131A26;--graphite:#2A3444;--slate:#5A6678;--silver:#8B95A5;--mist:#C6CDD8;
 --paper:#F4F6F9;--white:#fff;--red:#D6260F;--flare:#FE361F;--deep:#D52A19;
 --steel:#2F6FB4;--logo:#3E85C6;--r:2px;
 /* ---- everything below is a DECISION, and it lives here only. -----------
    Change a value here and it changes on every page, in every button, rule,
    tint and on the globe. Do not write these colours as literals in a page:
    if a value appears twice, one of them will be missed on the next change. */
 --ground:#0E1620;              /* the dark ground: hero, product band, footer */
 --blue:#3983C4;                /* the mark's blue, for text, rules and accents */
 --blue-lt:#5EA0D3;             /* its light end */
 --tile:#FFFFFF;                /* partner tiles: white, like every other raised surface */
 /* tints are built from these triplets, so one edit moves every tint too */
 --red-rgb:254,54,31; --red600-rgb:214,38,15; --blue-rgb:62,133,198; --ink-rgb:19,26,38;
 /* the mark's two gradients: the only gradients on the site */
 --grad-red:linear-gradient(180deg,#FE361F,#D52A19);
 --grad-red-hi:linear-gradient(180deg,#FF4C36,#E22E1B);
 --grad-blue:linear-gradient(180deg,#5EA0D3,#3983C4);
 /* one typeface everywhere, as on the e-card and the printed card */
 --body:'TTS','Barlow','Helvetica Neue',Helvetica,Arial,sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
/* ⚠️ THE FOOTER STAYS AT THE BOTTOM OF THE WINDOW ON A SHORT PAGE. A search
   that matches nothing, or a category with no products yet, leaves half a
   screen of paper under the footer and the page looks broken. The column plus
   `margin-top:auto` pushes it down ONLY when there is room to spare: flex items
   do not grow on their own, so every section keeps exactly the height it had.
   ⚠️ `svh`, not `vh`: on a phone `100vh` is the height with the toolbar hidden,
   which would put the footer just past the fold on every short page. */
body{font-family:var(--body);letter-spacing:-.0074em;color:var(--ink);background:var(--paper);
 -webkit-font-smoothing:antialiased;
 min-height:100svh;display:flex;flex-direction:column}
body > footer{margin-top:auto}
/* NOT sticky: the bar sits at the top of the first section and scrolls away.
   The sticky configuration is kept below and in state/HOMEPAGE.md — set
   STICKY = true in _nav.js and change position to fixed to bring it back. */
.bar{position:absolute;top:0;left:0;right:0;z-index:8;display:flex;align-items:center;gap:12px;
 padding:20px 40px;transition:background .28s ease,box-shadow .28s ease,padding .28s ease}
.bar.solid{background:var(--paper);box-shadow:0 1px 0 rgba(19,26,38,.10);padding:12px 40px}
/* the bar is not fixed, so anchor jumps land flush; a small margin keeps a
   heading off the very top edge */
section[id],main[id],:target{scroll-margin-top:0}
@media (max-width:900px){.bar.solid{padding:10px 22px}}
@media (prefers-reduced-motion:reduce){.bar{transition:none}}
.homelink{display:block;flex:0 0 auto;line-height:0;border-radius:var(--r)}
.homelink:focus-visible{outline:2px solid var(--logo);outline-offset:4px}
.bar .lk2{height:34px;width:auto;display:block}
/* logo text stays the e-card blue #3E85C6 on every background */
/* nav sits at the right edge, vertically level with the logo */
.bar nav{margin-left:auto;display:flex;gap:26px;font-family:'TTS';font-size:14px;
 letter-spacing:-.0074em;text-transform:uppercase;white-space:nowrap;
 position:relative;top:3px}   /* optical: the lockup's mass sits low, so dead
                                 centre reads high; 3px settles the nav on the
                                 logo's visual middle */
.bar nav a{color:var(--graphite);text-decoration:none;transition:color .18s ease;cursor:pointer}
.bar nav a:hover{color:var(--flare)}

/* ---- the menus that open ------------------------------------------------
   Two items carry a list. It opens on hover and on keyboard focus, which are
   the same state here, so a reader who tabs gets what a reader who points
   gets. The list is in the markup rather than built by script: a crawler
   follows it, and it still works if the script fails. */
/* in the markup for the phone sheet, not for the bar */
.bar nav .only-sheet{display:none}
.bar .navitem{position:relative;display:flex;align-items:center;gap:5px}
.bar .navitem > a::after{content:"";display:inline-block;width:5px;height:5px;margin-left:7px;
 border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
 transform:translateY(-2px) rotate(45deg);opacity:.55;transition:transform .2s ease,opacity .2s ease}
.bar .navitem:hover > a::after,.bar .navitem:focus-within > a::after{opacity:1;
 transform:translateY(0) rotate(225deg)}
.submenu{position:absolute;top:100%;left:-14px;z-index:20;min-width:230px;
 padding:8px 0;margin-top:10px;display:flex;flex-direction:column;
 background:var(--tile);border:1px solid var(--mist);border-radius:var(--r);
 box-shadow:0 18px 44px rgba(19,26,38,.18);
 opacity:0;visibility:hidden;transform:translateY(-6px);
 transition:opacity .18s ease,transform .18s ease,visibility .18s}
/* the gap between the word and the panel would drop the hover, so the panel's
   own top padding reaches back up to the bar */
.submenu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.bar .navitem:hover .submenu,.bar .navitem:focus-within .submenu{opacity:1;visibility:visible;
 transform:none}
.submenu a{padding:9px 18px;font-size:13.5px;line-height:1.3;color:var(--graphite);
 white-space:nowrap}
.submenu a:hover{background:rgba(var(--red-rgb),.06);color:var(--flare)}
/* Over a photographic banner the white panel read as a hole cut in the picture.
   On those pages the bar is .dark, so the panel is dark too: the same ground the
   footer uses, with the blue wash, which sits on a photograph rather than
   punching through it. */
.bar.dark .submenu{background:var(--ground);border-color:rgba(255,255,255,.14);
 box-shadow:0 20px 46px rgba(0,0,0,.5)}
.bar.dark .submenu a{color:rgba(255,255,255,.86)}
.bar.dark .submenu a:hover{background:rgba(var(--red-rgb),.10);color:var(--flare)}
/* the solid state is the light bar again, so the panel goes back to paper */
.bar.dark.solid .submenu{background:var(--tile);border-color:var(--mist)}
.bar.dark.solid .submenu a{color:var(--graphite)}
@media (prefers-reduced-motion:reduce){.submenu{transition:none}}
.bar.dark nav a{color:rgba(255,255,255,.82)}
.bar.dark nav a:hover{color:var(--flare)}
/* the solid state must come AFTER .bar.dark: same specificity, later wins, and
   the homepage bar carries .dark for its transparent pass over the hero */
.bar.solid nav a,.bar.dark.solid nav a{color:var(--graphite)}
.bar.solid nav a:hover,.bar.dark.solid nav a:hover{color:var(--flare)}
.bar.solid .burger span,.bar.dark.solid .burger span{background:var(--graphite)}
.bar.solid .lk2 text,.bar.dark.solid .lk2 text{fill:#3E85C6;stroke:#3E85C6}
body.navopen .bar.solid{background:transparent;box-shadow:none}
body.navopen .bar.solid .burger span,body.navopen .bar.dark.solid .burger span{background:#fff}

/* hamburger — phone only ------------------------------------------- */
.burger{display:none;margin-left:auto;width:42px;height:42px;padding:9px;border:0;
 background:transparent;cursor:pointer;flex-direction:column;justify-content:space-between;
 border-radius:var(--r)}
.burger span{display:block;width:100%;height:2px;background:var(--graphite);border-radius:1px;
 transition:transform .26s ease,opacity .16s ease}
.bar.dark .burger span{background:#fff}
.burger:focus-visible{outline:2px solid var(--logo);outline-offset:3px}
body.navopen .burger span:nth-child(1){transform:translateY(11px) rotate(45deg)}
body.navopen .burger span:nth-child(2){opacity:0}
body.navopen .burger span:nth-child(3){transform:translateY(-11px) rotate(-45deg)}

.mnav{position:fixed;inset:0;z-index:6;background:rgba(19,26,38,.975);
 display:flex;flex-direction:column;justify-content:center;padding:0 34px;
 opacity:0;visibility:hidden;transition:opacity .24s ease,visibility .24s ease}
body.navopen{overflow:hidden}
body.navopen .mnav{opacity:1;visibility:visible}
/* same scale as the hero headline */
.mnav a{font-family:'TTS';text-transform:uppercase;letter-spacing:-.0074em;
 font-size:clamp(18px,5.9vw,50px);line-height:1.05;color:#fff;text-decoration:none;
 padding:14px 0;border-bottom:1px solid rgba(255,255,255,.10);transition:color .18s ease}
.mnav a:last-child{border-bottom:0}
/* :active covers touch, where there is no hover */
@media (hover:hover){.mnav a:hover{color:var(--flare)}}
.mnav a:active{color:var(--flare)}
.mnav a:focus-visible{outline:2px solid var(--logo);outline-offset:4px}

@media (max-width:900px){
 /* on a phone every action button runs the full text column */
 .cta{width:100%;justify-content:center}
 .bar{padding:16px 22px}
 .bar .lk2{height:29px}
 .bar nav{display:none}
 /* the sheet's groups: the heading is a button, the list opens under it */
 .mnav .mgroup{width:100%;display:flex;flex-direction:column;align-items:inherit}
 /* the group heading is a button and inherits nothing useful from the sheet's
    link rules, so it is set the same way here rather than looking unstyled */
 /* the group heading is a button and inherits nothing useful from the sheet's
    link rules, so it is set to the same rhythm here: same face, same padding,
    same hairline, or the menu reads as two different lists */
 .mnav .mtop{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.10);
  font-family:'TTS';font-weight:400;text-transform:uppercase;letter-spacing:-.0074em;
  font-size:clamp(18px,5.9vw,50px);line-height:1.05;color:#fff;cursor:pointer;text-align:left}
 .mnav .mgroup.open .mtop{border-bottom-color:transparent}
 .mnav .mtop i{width:8px;height:8px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);
  transition:transform .22s ease;opacity:.6}
 .mnav .mgroup.open .mtop i{transform:translateY(1px) rotate(225deg);opacity:1}
 .mnav .msub{display:none;flex-direction:column;margin:0 0 6px;
  padding-left:18px;border-left:2px solid rgba(var(--red-rgb),.5)}
 .mnav .mgroup.open .msub{display:flex}
 .mnav .msub a{font-size:clamp(15px,4.4vw,20px);padding:11px 0;opacity:.84;
  border-bottom:1px solid rgba(255,255,255,.07)}
 .mnav .msub a:last-child{border-bottom:0}
 .burger{display:flex}
}
@media (prefers-reduced-motion:reduce){
 .burger span,.mnav,.mnav a,.bar nav a{transition:none}
}
.eyebrow{font-family:'TTS';font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--silver)}
h1{font-family:'TTS';font-weight:700;text-transform:uppercase;letter-spacing:-.0074em;
 font-size:clamp(38px,5.4vw,68px);line-height:1.02;text-wrap:balance}
/* TTS is condensed, so it needs a little more size and leading than Barlow did */
.sub{font-size:20px;line-height:1.62;color:var(--slate);max-width:56ch}
/* the mark's own red gradient, #FE361F to #D52A19, the same one the red
   triangle in the logo uses. Flat red was the earlier treatment. */
.cta{display:inline-flex;align-items:center;height:46px;padding:0 24px;border-radius:var(--r);
 background:var(--grad-red);
 color:#fff;text-decoration:none;font-family:'TTS';font-size:16px;
 letter-spacing:-.0074em;text-transform:uppercase;margin-top:30px;
 transition:background .18s ease,border-color .18s ease}
.cta:hover{background:var(--grad-red-hi)}
.cta:focus-visible{outline:2px solid #fff;outline-offset:3px}
.cta.ghost{background:transparent;border:1px solid rgba(255,255,255,.32);margin-left:10px}
.cta.ghost:hover{background:transparent;border-color:#fff}
@media (prefers-reduced-motion:reduce){.cta{transition:none}}

/* ---- footer ------------------------------------------------------------- */
footer{background:var(--ground);color:#fff;border-top:1px solid rgba(255,255,255,.14);
 padding:clamp(56px,7vh,84px) 40px clamp(28px,4vh,40px);scroll-snap-align:end}
/* named areas so phone and e-mail can sit under the address on desktop but
   move to the right column on a phone */
footer .fwrap{display:grid;
 grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) max-content;
 grid-template-areas:"logo quick more git" "logo quick more reach";
 gap:14px clamp(28px,4vw,64px)}
footer .flogo{grid-area:logo}
footer .fwrap > div:nth-child(2){grid-area:quick}
footer .fwrap > div:nth-child(3){grid-area:more}
footer .fcontact{grid-area:git}
footer .freach{grid-area:reach;display:flex;flex-direction:column;gap:12px;
 align-items:flex-start;align-self:start}
footer .fhome{display:inline-block;line-height:0;border-radius:var(--r)}
footer .fhome:focus-visible{outline:2px solid var(--logo);outline-offset:4px}
footer .flogo svg{height:38px;width:auto;display:block;transition:opacity .18s ease}
@media (hover:hover){footer .fhome:hover svg{opacity:.82}}
footer .fnote{margin-top:18px;font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.62);
 max-width:34ch}
footer .lbl{font-family:'TTS';font-weight:400;text-transform:uppercase;letter-spacing:.14em;
 font-size:12px;color:#A9B4C4;margin-bottom:16px}
footer ul{list-style:none}
footer li + li{margin-top:11px}
footer a{color:rgba(255,255,255,.82);text-decoration:none;font-size:15px;line-height:1.5;
 transition:color .18s ease}
@media (hover:hover){footer a:hover{color:var(--flare)}}
footer a:active{color:var(--flare)}
footer a:focus-visible{outline:2px solid var(--logo);outline-offset:3px}
/* address, phone and e-mail are three separate things, so they get the same
   rhythm as the link lists beside them rather than running together */
footer address{font-style:normal;font-size:15px;line-height:1.7;color:rgba(255,255,255,.82)}
/* the policy links sit under the copyright line, not opposite it */
.fbar{margin-top:clamp(34px,5vh,56px);padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
 display:flex;flex-direction:column;gap:8px;
 font-size:13px;color:rgba(255,255,255,.6)}
@media (max-width:900px){
 .approach{min-height:0;padding:72px 0 36px}
 .approach .wrap{grid-template-columns:1fr;gap:34px;padding:0 22px}
 .vside{align-self:auto}
 .vals{flex:none;gap:12px}
 .val{flex:none;padding:22px 20px}
 .contact{min-height:0;padding:36px 0 72px}
 /* stacked, "Who we work with" is a block with its own heading, so it takes the
    same 72px of air above it as "Get in touch" does, and the rhythm through the
    whole screen stays even: 72 in, 72 between, 72 out to the footer */
 .cwrap{grid-template-columns:1fr;grid-template-rows:none;gap:72px;padding:0 22px}
 /* stacked: the column-fit cap no longer applies, match the other headings */
 .partners h3{font-size:clamp(18px,5.9vw,50px)}
 .cleft,.partners{display:block;grid-row:auto}
 .ccard{padding:24px 20px}
 .form{grid-template-columns:1fr}
 .logos{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;margin-top:18px;align-self:auto}
 .tile{min-height:96px}
}
@media (max-width:900px){
 footer{padding:48px 22px 26px}
 footer .fwrap{grid-template-columns:1fr 1fr;gap:30px 24px;
  grid-template-areas:"logo logo" "quick more" "git git" "reach reach"}
 footer .flogo svg{height:30px}
 footer .fnote{margin-top:14px}
 /* the right-hand blocks keep left-aligned text but shrink to content and
    anchor right, so their widest line ends on the tile grid's edge */
 footer .fwrap > div:nth-child(3){text-align:left;justify-self:end}
 /* phone and e-mail continue the address column: same left rail as
    "#402, Maruthi Grandeur," with the address's own line rhythm */
 footer .freach{justify-self:start;margin-top:-16px;gap:10px}
 .fbar{gap:7px;margin-top:36px;padding-top:18px}

}

/* ---- back to top --------------------------------------------------------
   Replaces the sticky bar: nothing follows you down the page except one small
   control that appears after the first screen. */
.totop{position:fixed;right:22px;bottom:22px;z-index:60;width:48px;height:48px;
 display:grid;place-items:center;border:0;border-radius:var(--r);cursor:pointer;
 background:var(--grad-red);color:#fff;opacity:0;transform:translateY(10px);
 pointer-events:none;box-shadow:0 8px 26px rgba(19,26,38,.28);
 transition:opacity .26s ease,transform .26s ease,background .18s ease}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
 stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.totop:hover{background:var(--grad-red-hi)}}
.totop:active{background:var(--grad-red-hi)}
.totop:focus-visible{outline:2px solid var(--logo);outline-offset:3px}
@media (max-width:900px){.totop{right:16px;bottom:16px;width:46px;height:46px}}
@media (prefers-reduced-motion:reduce){.totop{transition:none}}