/* 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 LAST MENU OPENS FROM ITS RIGHT EDGE, or it leaves the window. The
   panel is at least 230px wide and hangs off the LEFT of its heading, and the
   last heading in the bar sits against the right margin, so Contact us pushed
   about 130px past the viewport and the whole page gained a sideways scrollbar
   (user: "contact us dropdown is moving out the page"). Anchoring the last one
   to the right keeps it inside and leaves the others alone. */
.bar nav > .navitem:last-child .submenu{left:auto;right:-14px}
/* 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}
/* ⚠️ WHILE THE SHEET IS OPEN THE BAR IS TRANSPARENT ON EVERY PAGE, and these
   two rules are deliberately not scoped to .solid any more. The enquiry pages
   set `.enq .bar{background:#fff; z-index:20}` in their own <style>, and 20 is
   above the sheet's 6, so a white strip sat across the top of the dark menu on
   Get in touch and Careers while every other page looked right. The user:
   "in hamburger menu the color to be the same always".
   ⚠️ Specificity is the whole trick and it is fragile: `body.navopen .bar` is
   (0,2,1) and beats `.enq .bar` at (0,2,0). It has to win on specificity
   because the page's own <style> block is parsed AFTER this file, so a tie
   would go to the page. Do not weaken these selectors to `.navopen .bar`. */
body.navopen .bar{background:transparent;box-shadow:none}
/* ⚠️ `body.navopen .bar .burger span` is (0,3,2) and has to be, because
   mission-vision sets `.mv .bar .burger span{background:var(--graphite)}` at
   (0,3,1) in its own <style>. A shorter selector here loses and the close
   cross goes dark grey on a dark sheet, which is invisible. Three pages paint
   their own bar white (contact, careers, mission-vision) and any new one will
   too, so this rule must out-specify a three-class page rule. */
body.navopen .bar .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)}

/* ⚠️ TOP ALIGNED, NOT CENTRED, at the user's instruction (18/08): "in
   hamburger menu the menus to be top aligned and when press arrow they shpould
   open down". Both halves of that are one fault. Centred, the sheet re-centres
   every time a group opens, so the items ABOVE the arrow slide up the screen
   and the list appears to open upwards. Anchored to the top, an opening group
   pushes only what is below it, which is what "open down" means.
   The top padding clears the bar, which is position:absolute at z-index 8 and
   stays above this sheet so the burger can still close it.
   overflow-y is not optional either: four heads plus the seven categories are
   taller than a phone once a group is open, and centred they had nowhere to
   go. overscroll-behavior keeps that scroll from dragging the page behind. */
/* ⚠️ ONE DEFINITION, SHARED. This chip was written into products.html and
   _products.tpl.html only, so it existed wherever the SEARCH drew a card and
   nowhere else. The related-products row on a product page names the category
   too and had nothing to style it, so it came out as bare small type instead of
   the blue chip everywhere else uses (user, 18/08). Defining it here gives
   every page the same chip.
   It sits TOP LEFT because a tile's scrim darkens the bottom, not the top: over
   a pale photograph a bare label up there would have nothing to sit on. */
.cat-tag{position:absolute;top:clamp(14px,1.5vw,20px);left:clamp(18px,1.8vw,24px);
 z-index:1;padding:6px 11px 5px;border-radius:var(--r);
 background:var(--grad-blue);box-shadow:0 4px 12px rgba(19,26,38,.22);
 font-family:'TTS';font-size:11px;line-height:1;letter-spacing:.16em;
 text-transform:uppercase;color:#fff}


/* ---- the bar's search --------------------------------------------------
   A magnifying glass in the bar, and the same field standing open at the top
   of the phone sheet. Built by _nav.js, so every page has it. */
/* ⚠️ 4px, NOT 14, and the number is measured rather than judged. The nav sets
   26px between its items; the glass is outside the nav, so it also picks up
   .bar's own 12px gap AND the 9.5px of empty button around a 19px icon. At 14
   the icon sat 36px from Contact us against 26 between every other pair, which
   is what the user saw. 12 + 4 + 9.5 lands it on 26. Re-measure if the icon or
   the button box changes size. */
/* ⚠️ top:3px MATCHES THE NAV'S OWN OPTICAL NUDGE and is not a fudge of its
   own. `.bar nav` is shifted 3px down because the logo lockup's mass sits low
   and dead centre reads high; the glass is outside the nav, so it never got
   that shift and sat 3px above the menu text. Measured: nav text centred at
   y=42, the icon at y=39. This moves the icon ONLY, at the user's instruction
   to leave the other menus alone. If the nav's `top` changes, change this to
   match. */
.srch-btn{position:relative;top:3px;
 display:flex;align-items:center;justify-content:center;width:38px;height:38px;
 margin-left:4px;padding:0;background:none;border:0;border-radius:var(--r);cursor:pointer;
 color:var(--graphite);transition:color .18s ease}
.srch-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;
 stroke-linecap:round}
.srch-btn:hover{color:var(--flare)}
.srch-btn:focus-visible{outline:2px solid var(--logo);outline-offset:3px}
.bar.dark .srch-btn{color:rgba(255,255,255,.82)}
.bar.dark .srch-btn:hover{color:var(--flare)}
/* while the sheet is open the bar's own button would sit over it */
body.navopen .srch-btn{display:none}
/* ⚠️ AND IT GOES ENTIRELY ONCE THE HAMBURGER APPEARS, at the same 900px the
   burger arrives at. The search is already standing open at the top of the
   sheet, so a phone bar carrying the logo, a glass AND a burger was three
   controls where two will do (user, 18/08: "the search magnifying is not
   disappearing when hamburger is coming"). */
@media (max-width:900px){.srch-btn{display:none}}

/* the bar's field: closed by default, opened by the button */
.bar-srch{position:absolute;top:100%;right:40px;z-index:21;width:min(420px,calc(100vw - 80px));
 opacity:0;visibility:hidden;transform:translateY(-6px);
 transition:opacity .18s ease,transform .18s ease,visibility .18s}
.bar.searching .bar-srch{opacity:1;visibility:visible;transform:none}
/* ⚠️ 14px, the SAME as the nav beside it (.bar nav), at the user's
   instruction. The field is furniture in the same bar as About us and
   Projects, so at 15px it read a size larger than its neighbours. Scoped to
   .bar-srch: the sheet's field stays at 15px, where it is a phone control and
   not a bar item. */
.bar-srch .srch-field input{font-size:14px}
/* ⚠️ what is TYPED is shown in caps, at the user's instruction, which also
   puts it in step with the results underneath: every product name in the list
   is uppercase TTS. It is display only, so matching is unaffected, the query
   is lowercased before any comparison. */
/* ⚠️ WHAT IS TYPED IS SHOWN AS TYPED. It was uppercased for a while so the
   field matched the results under it, and the user rejected that: a text field
   that rewrites the letters as they arrive fights the person using it, and it
   also hides their own capitals back to them. The PLACEHOLDER stays uppercase
   below, because that is our label rather than their text. */
.srch-field input{width:100%;height:46px;padding:0 16px;border-radius:var(--r);
 background:var(--tile);border:1px solid var(--mist);
 font-family:'TTS';font-size:15px;text-transform:none;letter-spacing:-.0074em;
 color:var(--ink);
 box-shadow:0 18px 44px rgba(19,26,38,.18)}
/* ⚠️ RED, not the blue used for focus rings elsewhere, at the user's
   instruction. This one is a typing field the reader is looking straight at,
   and the site's active colour is red: "when teyong in search there is a blue
   border make it red". The blue --logo ring stays everywhere else. */
.srch-field input::placeholder{text-transform:uppercase;letter-spacing:.02em}
.srch-field input:focus{outline:2px solid var(--flare);outline-offset:-1px}
/* the platform's own clear glyph is switched off: .srch-clear replaces it at a
   size we control, because in the phone sheet the native one sat tiny against
   a 44px field */
.srch-field{position:relative}
.srch-field input{padding-right:46px}
.srch-field input::-webkit-search-cancel-button{-webkit-appearance:none}
.srch-clear{position:absolute;top:50%;right:4px;transform:translateY(-50%);
 display:flex;align-items:center;justify-content:center;width:40px;height:40px;
 padding:0;background:none;border:0;border-radius:var(--r);cursor:pointer;
 color:var(--slate);transition:color .16s ease}
.srch-clear svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
 stroke-linecap:round}
.srch-clear:hover{color:var(--flare)}
.srch-clear:focus-visible{outline:2px solid var(--flare);outline-offset:-2px}
.srch-clear[hidden]{display:none}
.bar.dark .srch-clear{color:rgba(255,255,255,.6)}
.bar.dark.solid .srch-clear{color:var(--slate)}
/* in the sheet it is white, and larger, because it is the control a thumb
   reaches for to empty the field */
.sheet-srch .srch-clear{color:rgba(255,255,255,.72);width:44px;height:44px}
.sheet-srch .srch-clear svg{width:20px;height:20px}
.sheet-srch .srch-clear:hover{color:var(--flare)}
/* ⚠️ IN THE SHEET THE EXPLORE BUTTON MATCHES ITS NEIGHBOURS, at the user's
   instruction: the same 44px height as the search field above it, and its text
   at the 15px the product names in the list are set at. At 12px in a 44px
   sheet it read as a footnote under six full-size results rather than the
   action they lead to. Tracking is eased to .1em so 21 uppercase characters
   still fit a 320px phone. */
.sheet-srch .srch-all{display:flex;align-items:center;justify-content:center;
 height:44px;padding:0 12px;font-size:15px;letter-spacing:.1em}

/* the dropdown */
.srch-list{margin-top:8px;padding:6px;border-radius:var(--r);
 background:var(--tile);border:1px solid var(--mist);
 box-shadow:0 18px 44px rgba(19,26,38,.18);max-height:min(60vh,420px);overflow-y:auto}
.srch-row{display:flex;align-items:center;gap:12px;padding:8px;border-radius:var(--r);
 text-decoration:none;color:var(--ink);transition:background .16s ease}
.srch-row:hover{background:rgba(var(--red-rgb),.06);color:var(--flare)}
.srch-row img{width:64px;height:44px;object-fit:cover;border-radius:var(--r);flex:0 0 auto;
 background:var(--ground)}
/* ⚠️ a product with no photograph keeps its place in the list rather than
   dropping out of it: a missing result reads as "we do not sell it" */
.srch-row.nophoto::before{content:"";width:64px;height:44px;border-radius:var(--r);
 flex:0 0 auto;background:var(--grad-blue);opacity:.5}
.srch-row div{min-width:0}
.srch-row strong{display:block;font-family:'TTS';font-weight:400;font-size:15px;
 text-transform:uppercase;letter-spacing:-.0074em;line-height:1.15;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srch-row span{display:block;margin-top:2px;font-family:'TTS';font-size:10.5px;
 letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.srch-why{padding:12px 10px 6px;color:var(--slate);font-size:13px}
/* nothing found is not a dead end: it is where an enquiry starts */
.srch-none{display:block;padding:12px 10px 14px;text-decoration:none;
 border-radius:var(--r);transition:background .16s ease}
.srch-none:hover{background:rgba(var(--red-rgb),.06)}
.srch-none strong{display:block;font-family:'TTS';font-weight:400;font-size:15px;
 text-transform:uppercase;letter-spacing:-.0074em;color:var(--flare)}
.srch-none span{display:block;margin-top:3px;font-size:13.5px;color:var(--slate)}
.bar.dark .srch-why{color:rgba(255,255,255,.6)}
.bar.dark .srch-none span{color:rgba(255,255,255,.76)}
.bar.dark .srch-none:hover{background:rgba(var(--red-rgb),.10)}
.bar.dark.solid .srch-why{color:var(--slate)}
.bar.dark.solid .srch-none span{color:var(--slate)}
.sheet-srch .srch-why{color:rgba(255,255,255,.6)}
.sheet-srch .srch-none span{color:rgba(255,255,255,.76)}
.sheet-srch .srch-none:hover{background:rgba(255,255,255,.08)}
/* red, like every other action on the site: the blue chip beside it names a
   category, this asks the reader to do something */
.srch-all[hidden]{display:none}
.srch-all{display:block;margin-top:8px;padding:11px;border-radius:var(--r);
 background:var(--grad-red);color:#fff;text-decoration:none;text-align:center;
 font-family:'TTS';font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.srch-all:hover{background:var(--grad-red-hi)}

/* ⚠️ THE SAME TWO STATES THE NAV DROPDOWN HAS, and for the same reason it has
   them. Over a photographic banner a white panel reads as a hole cut in the
   picture, so on a .dark bar the field and the list take the footer's ground,
   and the .solid state puts them back on paper. Keep these in step with the
   .submenu rules above: they are one component to a reader, and were reported
   as one ("that search to be like the dropdown colors"). */
.bar.dark .srch-field input,.bar.dark .srch-list{background:var(--ground);
 border-color:rgba(255,255,255,.14);box-shadow:0 20px 46px rgba(0,0,0,.5)}
.bar.dark .srch-field input{color:#fff}
.bar.dark .srch-field input::placeholder{color:rgba(255,255,255,.5)}
.bar.dark .srch-row{color:rgba(255,255,255,.86)}
.bar.dark .srch-row:hover{background:rgba(var(--red-rgb),.10);color:var(--flare)}
.bar.dark .srch-row span{color:var(--blue-lt)}
.bar.dark .srch-none{color:rgba(255,255,255,.6)}
.bar.dark.solid .srch-field input,.bar.dark.solid .srch-list{background:var(--tile);
 border-color:var(--mist);box-shadow:0 18px 44px rgba(19,26,38,.18)}
.bar.dark.solid .srch-field input{color:var(--ink)}
.bar.dark.solid .srch-row{color:var(--ink)}
.bar.dark.solid .srch-row span{color:var(--blue)}

/* in the phone sheet the field is simply there, dark, above the menu */
.sheet-srch{margin-bottom:18px}
.sheet-srch .srch-field input{height:44px;background:rgba(255,255,255,.06);
 border-color:rgba(255,255,255,.18);color:#fff;box-shadow:none}
.sheet-srch .srch-field input::placeholder{color:rgba(255,255,255,.5)}
.sheet-srch .srch-list{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);
 box-shadow:none;max-height:44vh}
.sheet-srch .srch-row{color:#fff}
.sheet-srch .srch-row:hover{background:rgba(255,255,255,.08)}
.sheet-srch .srch-row span{color:var(--blue-lt)}
.sheet-srch .srch-none{color:rgba(255,255,255,.6)}
@media (min-width:901px){.sheet-srch{display:none}}
@media (max-width:900px){
 .bar-srch{right:22px;width:calc(100vw - 44px)}
}
@media (prefers-reduced-motion:reduce){.bar-srch,.srch-btn,.srch-row{transition:none}}

.mnav{position:fixed;inset:0;z-index:6;background:rgba(19,26,38,.975);
 display:flex;flex-direction:column;justify-content:flex-start;
 padding:78px 22px 40px;overflow-y:auto;overscroll-behavior:contain;
 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 */
/* ⚠️ 15px, THE SIZE OF THE SEARCH FIELD ABOVE THEM, at the user's
   instruction. The sheet used to set its menu at the hero headline's scale,
   clamp(18px,5.9vw,50px), which was written before the sheet carried a search
   box; beside a 15px field the menu read as a different piece of furniture
   altogether. The 14px padding stays, so each row is still a 44px tap target
   at the smaller type. */
.mnav a{font-family:'TTS';text-transform:uppercase;letter-spacing:-.0074em;
 font-size:15px;line-height:1.2;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:15px;line-height:1.2;color:#fff;cursor:pointer;text-align:left}
 .mnav .mgroup.open .mtop{border-bottom-color:transparent}
 .mnav .mtop i{width:7px;height:7px;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:13.5px;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}}