/* ==========================================================================
   SITE CHROME - the navbar and the footer, shared by every page

   Both pages carry the same markup for these two blocks and link this one
   file, so they cannot drift apart the way index's .nb bar and about's side
   chrome had.

   Every custom property this file reads is declared on .sn and .ft
   themselves, never on :root. The pages disagree about token names - index
   calls its label face --mono, about calls it --font-accent - and a
   var() that resolves to nothing takes the whole declaration down with it
   silently. Self-contained is the only way this file works on both.
   ========================================================================== */

/* The one measurement three separate blocks need: the bar itself, the hero
   padding that has to clear it, and the phone panel that starts below it.
   On :root, not on .sn - a rule outside .sn cannot read a property declared
   on it, and would silently fall back instead of failing loudly. */
:root{--sn-h:64px}
@media (max-width:860px){ :root{--sn-h:56px} }

/* ==========================================================================
   1 - THE NAVBAR
   ========================================================================== */
.sn{
  --ink:#0b0b0c; --paper:#f4f4f0; --gold:#c9a227;
  --dim:rgba(244,244,240,.62);
  --line:rgba(244,244,240,.12);
  --bar:rgba(11,11,12,.72);
  --font:"Inter","Helvetica Neue",Arial,sans-serif;
  --disp:"Poppins","Inter","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  position:fixed;top:0;left:0;right:0;z-index:9000;
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);
  height:var(--sn-h);
  padding-inline:clamp(1rem,3vw,2.5rem);
  font-family:var(--font);color:var(--paper);
  background:transparent;border-bottom:1px solid transparent;
  transition:background .45s cubic-bezier(.16,1,.3,1),
             border-color .45s cubic-bezier(.16,1,.3,1),
             backdrop-filter .45s cubic-bezier(.16,1,.3,1);
}
/* Set by script once the page has scrolled past the first screen. The bar is
   readable over the hero without it - both heroes are dark - so this is a
   settling, not a fix for illegible type. */
.sn.is-stuck{
  background:var(--bar);border-bottom-color:var(--line);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
          backdrop-filter:blur(14px) saturate(140%);
}

.sn-mark{display:flex;align-items:center;gap:.55rem;flex:0 0 auto;
  text-decoration:none;color:var(--paper)}
.sn-mark img{width:26px;height:26px;border-radius:50%;display:block}
.sn-mark b{font-family:var(--disp);font-weight:600;letter-spacing:-.03em;
  font-size:clamp(15px,1.4vw,17px)}

.sn-links{display:flex;align-items:center;gap:clamp(14px,2.2vw,34px);
  margin-left:auto}
.sn-links a{
  position:relative;text-decoration:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);padding-block:.4rem;
  transition:color .4s cubic-bezier(.16,1,.3,1);
}
/* the underline sweeps rather than switching on - a border-bottom cannot be
   animated left to right, a background-size can */
.sn-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--gold);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.sn-links a[aria-current="page"]{color:var(--paper)}
.sn-links a[aria-current="page"]::after{transform:scaleX(1)}
@media (hover:hover){
  .sn-links a:hover{color:var(--paper)}
  .sn-links a:hover::after{transform:scaleX(1)}
}

.sn-cta{
  flex:0 0 auto;margin-left:auto;display:inline-flex;align-items:center;gap:.4rem;
  text-decoration:none;padding:.5rem .95rem;border-radius:999px;
  background:var(--gold);color:var(--ink);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:500;
  transition:transform .4s cubic-bezier(.16,1,.3,1),filter .4s ease;
}
@media (hover:hover){ .sn-cta:hover{transform:translateY(-1px);filter:brightness(1.08)} }

/* ---- the Menu pill: a word, not an icon, at every width ---- */
.sn-burger{
  display:none;flex:0 0 auto;margin-left:.6rem;
  min-height:38px;                        /* the touch target, with the word in it */
  align-items:center;justify-content:center;
  padding:.6rem 1.05rem;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:rgba(244,244,240,.08);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
          backdrop-filter:blur(14px) saturate(1.3);
  color:var(--paper);font-family:var(--mono);
  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  transition:background-color .3s ease,transform .2s ease;
}
.sn-burger > span{display:none}           /* the two bars were the old icon */
.sn-burger .sn-lab{display:inline-block;white-space:nowrap}
/* the word does not cross-fade, it flickers out letter by letter and the
   other word flickers back in - the same trick the pill in the reference
   uses, and it reads as a switch rather than a dissolve */
.sn-burger .sn-lab i{display:inline-block;font-style:normal;
  transition:opacity .13s ease}
.sn-burger.is-swap .sn-lab i{opacity:0}
@media (hover:hover){ .sn-burger:hover{background:rgba(244,244,240,.16)} }
.sn-burger:active{transform:scale(.96)}

/* ---- the phone panel ---- */
.sn-panel{
  --paper:#f4f4f0; --gold:#c9a227; --dim:rgba(244,244,240,.55);
  --line:rgba(244,244,240,.12);
  --disp:"Poppins","Inter","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --font:"Inter","Helvetica Neue",Arial,sans-serif;

  position:fixed;inset:0;z-index:8900;
  background:#0b0b0c;color:var(--paper);
  display:flex;flex-direction:column;justify-content:center;
  /* the notch, and the home indicator on the way out */
  padding:calc(var(--sn-h) + env(safe-area-inset-top,0px) + 2rem)
          max(1.5rem,env(safe-area-inset-right,0px))
          calc(2rem + env(safe-area-inset-bottom,0px))
          max(1.5rem,env(safe-area-inset-left,0px));
  /* The sheet itself never fades. What arrives is the frost behind it and
     the words on it, which is what the eye reads as the menu opening. */
  background:transparent;align-items:flex-start;
  visibility:hidden;pointer-events:none;
  /* visibility is a discrete property: a plain transition flips it halfway
     through, which would swallow the first third of the opening. Held at 0s
     and delayed only on the way out instead. */
  transition:visibility 0s linear .5s;
}
.sn-panel.is-open{visibility:visible;pointer-events:auto;transition-delay:0s}
.sn-veil{position:absolute;inset:0;z-index:-1;opacity:0;
  background:linear-gradient(180deg,rgba(11,11,12,.76),rgba(11,11,12,.93));
  -webkit-backdrop-filter:blur(26px) saturate(1.2);
          backdrop-filter:blur(26px) saturate(1.2);
  transition:opacity .8s cubic-bezier(.16,1,.3,1);
}
.sn-panel.is-open .sn-veil{opacity:1}
.sn-panel a{text-decoration:none;color:inherit}
/* The five pages on the left, the five services beside them. The sheet had
   an empty right-hand half and a submenu you have to open is one more thing
   to find, so the services are simply there. */
.sn-panel-main{display:flex;align-items:center;flex-wrap:wrap;width:100%;
  gap:clamp(1.8rem,7vw,6rem);
  /* the block sits in the middle of what is left once the contact row has
     taken the bottom, rather than stacking against the bar */
  margin-block:auto}
.sn-panel-links{display:flex;flex-direction:column;gap:.06em}
.sn-panel-links a{
  position:relative;display:inline-flex;align-items:center;white-space:nowrap;
  width:max-content;max-width:100%;
  font-family:var(--disp);font-weight:600;letter-spacing:-.035em;
  font-size:clamp(2.1rem,9vw,4.6rem);line-height:1.14;
  padding-block:.06em;min-height:44px;     /* the touch target on a phone */
  transition:transform .6s cubic-bezier(.16,1,.3,1),
             opacity .45s ease,color .35s ease;
}
.sn-panel-links a[aria-current="page"]{color:var(--gold)}
/* the row under the pointer comes forward and the rest stand back */
@media (hover:hover){
  .sn-panel-links:hover a{opacity:.4}
  .sn-panel-links a:hover{opacity:1;transform:translateX(12px)}
}
.sn-panel-links a:focus-visible{outline:2px solid var(--gold);outline-offset:6px;
  border-radius:4px}

/* ---- the service column ---------------------------------------------- */
.sn-sub{display:grid;gap:.05rem;align-content:center;min-width:0}
.sn-sub-h{margin:0 0 .7rem;font-family:var(--mono);font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.sn-sub a{display:inline-flex;align-items:center;min-height:44px;
  width:max-content;max-width:100%;
  font-family:var(--font);font-size:clamp(15px,1.25vw,18px);
  letter-spacing:-.01em;color:var(--dim);
  /* the rule sweeps in from the left rather than switching on */
  background-image:linear-gradient(var(--gold),var(--gold));
  background-repeat:no-repeat;background-position:0 calc(100% - 12px);
  background-size:0% 1px;
  transition:color .35s ease,background-size .5s cubic-bezier(.16,1,.3,1),
             opacity .55s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.sn-sub a[aria-current="page"]{color:var(--paper);background-size:100% 1px}
@media (hover:hover){
  .sn-sub:hover a{opacity:.45}
  .sn-sub a:hover{opacity:1;color:var(--paper);background-size:100% 1px}
}
.sn-sub a:focus-visible{outline:2px solid var(--gold);outline-offset:4px;
  border-radius:3px}
/* they come up after the five display rows have finished arriving */
.sn-sub-h,.sn-sub a{opacity:0;transform:translateY(16px);
  transition-delay:calc(.52s + var(--i,0) * .07s)}
.sn-sub-h{transition:opacity .55s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.sn-panel.is-open .sn-sub-h,
.sn-panel.is-open .sn-sub a{opacity:1;transform:none}
.sn-panel:not(.is-open) .sn-sub-h,
.sn-panel:not(.is-open) .sn-sub a{transition-duration:.3s;transition-delay:0s}

/* A word arrives in three parts: the number and its first letter rise out of
   a mask, a rule opens beside them, and the remaining letters are carried in
   on a box that widens from nothing. --i is the row, --k the letter. */
.sn-i{align-self:flex-start;flex:0 0 auto;margin:.7em .55em 0 0;
  overflow:hidden;
  font-family:var(--mono);font-size:max(9px,.16em);font-weight:500;
  letter-spacing:.1em;color:var(--gold)}
.sn-msk{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.06em;margin-bottom:-.06em}
.sn-msk > span{display:inline-block;transform:translateY(115%);
  transition:transform .85s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(.1s + var(--i,0) * .11s)}
.sn-panel.is-open .sn-msk > span{transform:none}
.sn-div{display:inline-block;flex:0 0 auto;width:2px;height:.5em;margin:0 .3em;
  background:linear-gradient(180deg,var(--paper),var(--gold));
  box-shadow:0 0 12px rgba(201,162,39,.45);
  transform:rotate(20deg) scaleY(0);transform-origin:50% 50%;
  transition:transform 1s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(.14s + var(--i,0) * .11s)}
.sn-panel.is-open .sn-div{transform:rotate(20deg) scaleY(1)}
.sn-body{display:inline-block;width:0;overflow:hidden;white-space:nowrap;
  transition:width 1s cubic-bezier(.76,0,.24,1);
  transition-delay:calc(.32s + var(--i,0) * .11s)}
.sn-panel.is-open .sn-body{width:var(--w,auto)}
.sn-c{display:inline-block;transform:translateX(130%);
  transition:transform .75s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(.54s + var(--i,0) * .11s + var(--k,0) * .045s)}
.sn-panel.is-open .sn-c{transform:none}
/* closing is one quick collapse, not the arrival run backwards */
.sn-panel:not(.is-open) .sn-msk > span,
.sn-panel:not(.is-open) .sn-div,
.sn-panel:not(.is-open) .sn-body,
.sn-panel:not(.is-open) .sn-c{transition-duration:.4s;transition-delay:0s}

.sn-panel-foot{padding-top:2rem;border-top:1px solid var(--line);
  width:100%;display:flex;flex-wrap:wrap;gap:.55rem 1.6rem;
  opacity:0;transition:opacity .5s ease;transition-delay:.66s}
.sn-panel.is-open .sn-panel-foot{opacity:1}
.sn-panel-foot a,.sn-panel-foot span{
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--dim)}
.sn-panel-foot a{min-height:24px;display:inline-flex;align-items:center}

/* Body scroll is frozen while the panel is open. Fixed positioning is what
   actually holds on iOS - overflow:hidden on <body> does not - and the top
   offset is written by script so the page does not jump to zero. */
html.sn-locked,html.sn-locked body{overflow:hidden}
body.sn-locked{position:fixed;left:0;right:0;width:100%}

/* The row of links is the navigation when there is no script: the sheet
   cannot open without one, so it is the script that takes the row away and
   puts the pill there. A page whose JS never arrives keeps a working bar. */
html.sn-js .sn-links{display:none}
html.sn-js .sn-burger{display:inline-flex}
@media (max-width:860px){
  .sn-cta{display:none}
  .sn-burger{margin-left:auto}
}
/* A short screen has no room to centre five display-size rows. */
@media (max-height:560px){
  .sn-panel{justify-content:flex-start;overflow-y:auto}
  .sn-panel-links a{font-size:clamp(1.4rem,5vw,2.1rem);min-height:0}
  .sn-sub a{min-height:34px}
}
/* Stacked on a phone, and the sheet scrolls if the two lists outgrow it. */
@media (max-width:700px){
  .sn-panel{overflow-y:auto}
  .sn-panel-main{gap:2rem}
  .sn-sub{width:100%}
  .sn-sub-h{margin-bottom:.35rem}
}
/* Somebody who has asked for less motion gets the same menu, already open:
   the words are simply there, and only the frost fades. */
@media (prefers-reduced-motion: reduce){
  .sn,.sn-links a::after,.sn-panel,.sn-cta,.sn-burger{transition-duration:.01ms}
  html:not(.force-motion) .sn-msk > span,
  html:not(.force-motion) .sn-c{transform:none;transition:none}
  html:not(.force-motion) .sn-body{width:auto;transition:none}
  html:not(.force-motion) .sn-div{transform:rotate(20deg) scaleY(1);transition:none}
  html:not(.force-motion) .sn-panel-links a{transition:none}
  html:not(.force-motion) .sn-sub-h,
  html:not(.force-motion) .sn-sub a{opacity:1;transform:none;transition:none}
  html:not(.force-motion) .sn-panel-foot{opacity:1;transition:none}
}

/* Pages that pin their own wordmark at the top of the viewport now have one
   in the bar, and two wordmarks in the same 64px is a mistake, not a motif. */
#fixed-logo{display:none!important}

/* ==========================================================================
   2 - THE FOOTER   (lifted out of about.html so both pages share one copy)
   ========================================================================== */
/* ==========================================================================
   THE FOOTER - Moto's footer2

   Their shape, kept: a hairline opens it, a display line and its call to
   action take the left, the link columns take the right, and a quiet row
   closes the page underneath.

   Every address here is one this business actually answers - the WhatsApp
   link, the number and the mailbox are the same three the home page offers,
   and nothing else is invented.

   The columns are parked by script only, so a page whose CDN never arrives
   still shows a complete, readable footer.
   ========================================================================== */
.ft{ --ink:#0b0b0c; --paper:#f4f4f0; --gold:#c9a227;
     --dim:rgba(244,244,240,.62); --faint:rgba(244,244,240,.34);
     --line:rgba(244,244,240,.14);
     /* The three faces, declared here for the same reason as the colours:
        this block came out of about.html, where :root names them. index.html
        names its own --font / --mono, so on the home page var(--font-display)
        resolved to nothing and the footer heading silently fell back to the
        inherited Inter - Poppins on one page, Inter on the other, from the
        same stylesheet. */
     --font-body:"Inter","Helvetica Neue",Arial,sans-serif;
     --font-display:"Poppins","Inter","Helvetica Neue",Arial,sans-serif;
     --font-accent:"JetBrains Mono",ui-monospace,monospace;
     position:relative;background:var(--ink);color:var(--paper);
     font-family:var(--font-body);
     padding-block:clamp(3.5rem,12vh,7.5rem) clamp(1.5rem,4vh,2.5rem)}
.ft-wrap{width:min(100%,1440px);margin-inline:auto;
  padding-inline:clamp(1.25rem,5vw,4.5rem)}
.ft-rule{height:1px;background:var(--line);margin-bottom:clamp(2.5rem,8vh,4.5rem)}

/* ---- the top ---- */
.ft-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2.5rem,6vw,5rem);align-items:start}
.ft-eye{margin:0;font-family:var(--font-accent);font-size:11px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--faint)}
.ft-h2{font-family:var(--font-display);font-weight:600;
  font-size:clamp(2rem,5.6vw,4.4rem);line-height:.94;letter-spacing:-.035em;
  text-transform:uppercase;margin:clamp(.8rem,2.5vh,1.4rem) 0 0}

/* the call to action - the gold fills from the left on hover */
.ft-cta{display:inline-flex;align-items:center;gap:.7rem;
  margin-top:clamp(1.6rem,5vh,2.6rem);
  padding:.85rem 1.4rem;border:1px solid var(--line);border-radius:999px;
  position:relative;overflow:hidden;isolation:isolate;
  font-family:var(--font-accent);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--paper);text-decoration:none;
  transition:color .45s cubic-bezier(.16,1,.3,1),
             border-color .45s cubic-bezier(.16,1,.3,1)}
.ft-cta::before{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--gold);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .55s cubic-bezier(.83,0,.17,1)}
.ft-cta:hover{color:var(--ink);border-color:var(--gold)}
.ft-cta:focus-visible{color:var(--ink);border-color:var(--gold);
  outline:2px solid var(--gold);outline-offset:3px}
.ft-cta:hover::before,.ft-cta:focus-visible::before{transform:scaleX(1)}
.ft-cta svg{width:15px;height:15px;flex:none}

/* ---- the columns ---- */
.ft-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.2rem,3vw,2.5rem)}
.ft-col{display:grid;gap:.7rem;align-content:start}
.ft-col-name{margin:0 0 .2rem;font-family:var(--font-accent);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.ft-col a,.ft-col span{font-size:clamp(13px,1.05vw,15px);line-height:1.5;
  color:var(--dim)}
/* the rule under a link is a background, so it can sweep in from the left */
.ft-col a{width:max-content;max-width:100%;text-decoration:none;
  background-image:linear-gradient(var(--gold),var(--gold));
  background-repeat:no-repeat;background-position:0 100%;
  background-size:0% 1px;
  transition:color .35s ease,background-size .45s cubic-bezier(.16,1,.3,1)}
.ft-col a:hover,.ft-col a:focus-visible{color:var(--paper);background-size:100% 1px}
.ft-col a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;
  border-radius:2px}
.ft-note{color:var(--faint);font-size:clamp(11.5px,.95vw,13px);line-height:1.5}

/* ---- the closing row ---- */
.ft-bot{margin-top:clamp(3rem,10vh,6rem);padding-top:clamp(1rem,3vh,1.6rem);
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:.6rem clamp(1rem,4vw,3rem);
  align-items:baseline;justify-content:space-between;
  font-family:var(--font-accent);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint)}
.ft-bot b{font-weight:inherit;color:var(--dim)}

@media (min-width:861px){
  /* the same gutter the fixed side chrome takes everywhere else */
  .ft-wrap{padding-inline:max(clamp(1.25rem,5vw,4.5rem),11rem)}
}
@media (max-width:1099px){
  .ft-top{grid-template-columns:1fr;gap:clamp(2rem,6vh,3.2rem)}
}
@media (max-width:640px){
  .ft-cols{grid-template-columns:1fr;gap:clamp(1.4rem,4vh,2rem)}
  .ft-bot{flex-direction:column;align-items:flex-start}
}

/* ==========================================================================
   3 - CLEARING THE BAR

   The bar is fixed and 64px tall, so whatever each page used to put in that
   band is now underneath it. Two pages, three collisions.
   ========================================================================== */

/* about: the hero overlay opened at 2.5vw from the top, which is 36px at
   1440 - the headline sat behind the bar */
.overlay-ui{padding-top:calc(2.5vw + var(--sn-h))}

/* home: the intro chrome opened at 24px, same problem */
.chrome{padding-top:calc(24px + var(--sn-h))}

/* home: a second navigation, two rows of it, directly under the bar. The
   bar carries Work and Contact already. Hidden rather than deleted - the
   intro timeline still animates these nodes, and an empty selector there
   would quietly change the shape of that sequence. */
#dt-intro .gnav{display:none}