/* ==========================================================================
   Mashwork Ltd
   One stylesheet, shared by index, privacy and terms.
   Token changes happen here and nowhere else.
   ========================================================================== */

/* ---------- fonts, self-hosted variable subsets ---------- */

@font-face{
  font-family:"Bricolage Grotesque";
  font-style:normal;
  font-weight:400 800;
  font-stretch:100%;
  font-display:swap;
  src:url(../fonts/bricolage-grotesque-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Bricolage Grotesque";
  font-style:normal;
  font-weight:400 800;
  font-stretch:100%;
  font-display:swap;
  src:url(../fonts/bricolage-grotesque-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Instrument Sans";
  font-style:normal;
  font-weight:400 700;
  font-stretch:100%;
  font-display:swap;
  src:url(../fonts/instrument-sans-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Instrument Sans";
  font-style:normal;
  font-weight:400 700;
  font-stretch:100%;
  font-display:swap;
  src:url(../fonts/instrument-sans-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- tokens ---------- */

:root{
  --ink:#001F3A;
  --ink-deep:#00162A;
  --ink-lift:#06263F;
  --coral:#FF7262;
  --paper:#EFF2F5;
  --card:#F8FAFB;
  --slate:#54697D;
  --mist:#9DB0C2;
  --rule:#D5DDE4;
  --rule-dark:#12314C;

  /* body text on navy: lifted off --mist to clear 4.5:1 on --ink */
  --on-ink:#CFDCE7;

  --display:"Bricolage Grotesque",Georgia,serif;
  --body:"Instrument Sans",system-ui,sans-serif;

  --gutter:clamp(1.25rem,5vw,4.5rem);
  --max:1240px;
  --ease:cubic-bezier(.16,.84,.28,1);
}

/* ---------- base ---------- */

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:.94;margin:0}
p{margin:0}
a{color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
img,svg{max-width:100%}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.label{font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--slate)}
.eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--mist);display:flex;align-items:center;gap:.7rem}
.eyebrow b{width:6px;height:6px;border-radius:50%;background:var(--coral);display:inline-block;flex:0 0 auto}

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--coral);color:var(--ink-deep);padding:.6rem 1rem;border-radius:2px}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px}

/* 44px minimum tap targets on touch and narrow screens, hit area only, so the
   target grows without the visible underline moving. Inline links inside prose
   are deliberately excluded: a 44px overlay on a link mid-sentence would cover
   the lines above and below it and intercept their taps. */
@media(pointer:coarse),(max-width:820px){
  .mark,.nav a,.hero-links a,.foot-links a,.mailto,.contact aside a{position:relative}
  .mark::after,.nav a::after,.hero-links a::after,.foot-links a::after,
  .mailto::after,.contact aside a::after{
    content:"";position:absolute;left:-6px;right:-6px;top:50%;
    transform:translateY(-50%);height:44px;
  }
}

/* the signature: an oversized coral full stop */
.stop{font-style:normal;color:var(--coral);font-size:1.15em;line-height:0}

/* ---------- brand mark ---------- */

.mark{display:block;text-decoration:none;line-height:0}
.mark svg{display:block;height:1.55rem;width:auto}
.mark .logo-m{fill:currentColor}
.mark .logo-dot{fill:var(--coral)}
.top .mark{color:#fff}

/* ---------- header ---------- */

.top{position:sticky;top:0;z-index:20;background:var(--ink-deep);color:#fff}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding-block:.9rem}
.nav{display:flex;gap:clamp(1rem,2.4vw,2.25rem);align-items:center;font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.nav a{text-decoration:none;color:var(--mist);transition:color .25s}
.nav a:hover{color:#fff}
.nav .talk{color:#fff;border-bottom:2px solid var(--coral);padding-bottom:3px}
@media(max-width:640px){.nav .hide-s{display:none}}

/* The brief allows the M once per screen. The header is sticky and the contact
   band carries the oversized bookend mark, so the small one steps aside while
   the big one is on screen. */
.top .mark{transition:opacity .4s var(--ease)}
body.bookend-visible .top .mark{opacity:0;pointer-events:none}

/* ---------- hero ---------- */

.hero{background:var(--ink);color:#fff;min-height:calc(100svh - 60px);display:flex;flex-direction:column;overflow:clip}
.hero-in{flex:1;display:flex;flex-direction:column;justify-content:center;gap:clamp(2rem,5vh,3.5rem);padding-block:clamp(3.5rem,9vh,6rem)}
.hero h1{font-size:clamp(3.05rem,10.2vw,7.4rem);letter-spacing:-.045em}
.hero h1.quote{font-size:clamp(2.2rem,7vw,5.2rem);letter-spacing:-.04em;line-height:.98}
.hero h1 span{display:block;text-wrap:balance}
.attr{font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--mist)}
.attr::before{content:"";display:inline-block;width:1.8rem;height:1px;background:var(--coral);vertical-align:middle;margin-right:.75rem;transform:translateY(-1px)}

/* The lede stays in the right half so the headline keeps the space, but the
   attribution and the two links occupy the left half rather than leaving it
   empty. The lede spans both rows, so the left column stacks tight against the
   headline instead of being spaced out to match the lede's height. */
.hero-foot{display:grid;grid-template-columns:repeat(12,1fr);gap:1.25rem clamp(1.5rem,3vw,3rem);align-content:start}
.hero-foot .attr{grid-column:1 / 6;grid-row:1}
.hero-foot .lede{grid-column:6 / -1;grid-row:1 / span 2;font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.5;color:var(--on-ink);max-width:44ch}
.hero-links{grid-column:1 / 6;grid-row:2;align-self:start;display:flex;flex-wrap:wrap;gap:.75rem 1.75rem;font-weight:500}
.hero-links a{text-decoration:none;padding-bottom:3px;border-bottom:1px solid rgba(255,255,255,.28);transition:border-color .25s,color .25s}
.hero-links a:hover{border-color:var(--coral);color:var(--coral)}
@media(max-width:820px){
  /* single column: attribution, lede, links, in document order */
  .hero-foot{grid-template-columns:minmax(0,1fr)}
  .hero-foot .attr,.hero-foot .lede,.hero-links{grid-column:1 / -1;grid-row:auto}
}

.strip{border-top:1px solid var(--rule-dark)}
.strip-in{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem clamp(1rem,3vw,2.5rem);padding-block:1.1rem;font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--mist)}
.strip-in b{width:6px;height:6px;border-radius:50%;background:var(--coral);display:inline-block;flex:0 0 auto}

/* ---------- section furniture ---------- */

.band{padding-block:clamp(4rem,9vw,7.5rem)}
.band-head{display:grid;gap:1.4rem;max-width:62ch;margin-bottom:clamp(2.5rem,5vw,4rem)}
.band-head h2{font-size:clamp(2rem,4.4vw,3.6rem)}
.band-head p{color:var(--slate);max-width:52ch}

/* ---------- what we do ---------- */

.duo{display:grid;gap:clamp(1rem,2vw,1.75rem);grid-template-columns:1.15fr .85fr;align-items:start}
@media(max-width:900px){.duo{grid-template-columns:minmax(0,1fr)}}
.panel{padding:clamp(1.75rem,3.2vw,2.75rem);border-radius:3px;transition:transform .5s var(--ease)}
.panel h3{font-size:clamp(1.6rem,2.6vw,2.2rem);margin-block:.8rem 1rem}
.panel p{font-size:1rem;line-height:1.6}
.p-a{background:var(--ink);color:#fff}
.p-a p{color:#CBD8E3}
.p-a .label{color:var(--mist)}
.p-b{background:var(--card);border:1px solid var(--rule);margin-top:clamp(0rem,4vw,3.25rem)}
.p-b p{color:var(--slate)}
.detail{margin-top:1.75rem;padding-top:1.25rem;display:grid;gap:.55rem;font-size:.95rem}
.p-a .detail{border-top:1px solid var(--rule-dark)}
.p-b .detail{border-top:1px solid var(--rule)}
.detail li{display:flex;gap:.7rem;align-items:baseline}
.detail li::before{content:"";flex:0 0 auto;width:5px;height:5px;border-radius:50%;background:var(--coral);transform:translateY(-2px)}
@media(hover:hover){.panel:hover{transform:translateY(-4px)}}

/* ---------- pull statement ---------- */

.pull{background:var(--ink);color:#fff}
/* The brief puts the supporting line beside the statement above 820px and under
   it below. Two columns, bottom-aligned so the small text sits on the
   statement's last line rather than floating in the middle of the band. */
.pull-in{padding-block:clamp(3.5rem,8vw,6.5rem);display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,4vw,3.5rem);align-items:end}
.pull q{quotes:none;font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:1.02;font-size:clamp(1.9rem,5vw,4.2rem);max-width:24ch}
.pull p{color:var(--on-ink);max-width:46ch;text-align:left}
@media(max-width:820px){
  .pull-in{grid-template-columns:minmax(0,1fr);align-items:start;gap:2rem}
}

/* ---------- process ---------- */

.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2.5vw,2.25rem)}
@media(max-width:820px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.steps{grid-template-columns:minmax(0,1fr)}}
.step{border-top:1px solid var(--rule);padding-top:1.25rem}
.step-n{font-family:var(--display);font-weight:600;font-size:.85rem;color:var(--coral);letter-spacing:.04em}
.step h3{font-size:1.2rem;margin-block:.6rem .5rem;letter-spacing:-.02em}
.step p{font-size:.95rem;color:var(--slate)}

/* ---------- capabilities ---------- */

.cap{background:var(--card);border-block:1px solid var(--rule)}
.cap-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(2rem,4vw,3.5rem)}
@media(max-width:1000px){.cap-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.cap-grid{grid-template-columns:minmax(0,1fr)}}
.cap-list{margin-top:1.1rem;font-family:var(--display);font-weight:600;font-size:clamp(1.05rem,1.7vw,1.3rem);line-height:1.45;letter-spacing:-.02em}
.cap-list b{color:var(--coral);font-weight:600;padding-inline:.06em}

/* ---------- contact ---------- */

.contact{position:relative;background:var(--ink-deep);color:#fff;overflow:clip}
.contact-in{position:relative;z-index:2;padding-block:clamp(4rem,9vw,7rem);display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:end}
@media(max-width:820px){.contact-in{grid-template-columns:minmax(0,1fr);align-items:start}}
.contact h2{font-size:clamp(2.1rem,5vw,3.8rem);margin-top:1.25rem}
.contact .label{color:var(--mist)}
.mailto{display:inline-block;margin-top:1.9rem;font-family:var(--display);font-weight:600;font-size:clamp(1.2rem,2.6vw,1.9rem);letter-spacing:-.02em;text-decoration:none;border-bottom:2px solid var(--coral);padding-bottom:.15em;overflow-wrap:anywhere}
.contact aside{font-size:.95rem;color:#C3D2DF;display:grid;gap:1.1rem}
.contact aside strong{display:block;color:#fff;font-weight:600;margin-bottom:.15rem}
.contact aside a{color:var(--coral);overflow-wrap:anywhere}

/* The bookend: oversized, navy on navy, hard-cropped off the bottom right.
   The offset is a percentage transform, not right/bottom offsets, because a
   percentage transform resolves against the element's own size. The dot sits in
   the right 21% of the viewBox, so offsetting by container percentages would
   scale the gap too and the M could never reach the edge. This keeps the crop
   ratio identical at every viewport: the dot is ~70% cropped off the corner and
   28% of the mark's height is cut by the baseline of the band. */
.bookend{position:absolute;z-index:1;right:0;bottom:0;width:clamp(15rem,42vw,36rem);transform:translate(15%,28%);pointer-events:none;user-select:none}
.bookend svg{display:block;width:100%;height:auto}
.bookend .logo-m{fill:#051D31}
.bookend .logo-dot{fill:#132A3F}
@media(max-width:820px){.bookend{opacity:.6}}

/* ---------- footer ---------- */

.foot{background:var(--ink-deep);color:var(--mist);border-top:1px solid var(--rule-dark);font-size:.875rem;position:relative;z-index:2}
.foot-in{padding-block:2.5rem;display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;justify-content:space-between;align-items:center}
.foot-links{display:flex;flex-wrap:wrap;gap:1.5rem;font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.foot a{text-decoration:none;transition:color .25s}
.foot a:hover{color:#fff}
.legal{max-width:46ch;line-height:1.6}

/* ---------- legal pages ---------- */

.page-head{background:var(--ink);color:#fff;padding-block:clamp(3rem,7vw,5.5rem)}
.page-head h1{font-size:clamp(2.2rem,5.4vw,4rem);margin-top:1.1rem}
.page-head .updated{margin-top:1.5rem;font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--mist)}

.prose{padding-block:clamp(3rem,7vw,5.5rem);max-width:68ch}
.prose h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-top:clamp(2.5rem,5vw,3.5rem);margin-bottom:1rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.1rem;font-weight:600;letter-spacing:-.01em;margin-top:2rem;margin-bottom:.6rem}
.prose p,.prose li{color:var(--slate)}
.prose p+p{margin-top:1rem}
.prose ul{margin-top:1rem;display:grid;gap:.55rem}
.prose ul li{display:flex;gap:.7rem;align-items:baseline}
.prose ul li::before{content:"";flex:0 0 auto;width:5px;height:5px;border-radius:50%;background:var(--coral);transform:translateY(-2px)}
.prose a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--coral);padding-bottom:1px;overflow-wrap:anywhere}
.prose a:hover{color:var(--coral)}
.prose strong{color:var(--ink);font-weight:600}
/* Not a grid: a grid gap would space dt from its own dd exactly as much as it
   spaces one pair from the next, so nothing would read as a pair. Margins bind
   the term to its definition and separate the pairs. */
.prose dl{margin:1.25rem 0 0}
.prose dt{font-weight:600;color:var(--ink)}
.prose dt+dd{margin:.1rem 0 0}
.prose dd+dt{margin-top:1.4rem}
.prose dd{margin-inline-start:0;color:var(--slate)}

/* Unfinished copy that must not reach production. Loud on purpose: an unfilled
   section is a compliance problem, so it fails visibly rather than silently.
   Delete the element once the section is written. */
.todo{margin-top:1.25rem;padding:1rem 1.25rem;border:1px solid var(--coral);border-left-width:3px;border-radius:3px;background:#FFF3F1}
.todo p{color:var(--ink)!important;font-size:.95rem}
.todo p:first-child{font-weight:600}
.todo p:first-child::before{content:"To do before launch: ";color:var(--coral)}

/* ---------- motion ---------- */

.rise{opacity:0;transform:translateY(20px)}
.in .rise,.rise.in{opacity:1;transform:none;transition:opacity .75s var(--ease),transform .75s var(--ease)}
.hero .rise{transition:opacity .85s var(--ease),transform .85s var(--ease)}
.hero.in .eyebrow{transition-delay:.05s}
.hero.in .line-1{transition-delay:.16s}
.hero.in .line-2{transition-delay:.26s}
.hero.in .line-3{transition-delay:.38s}
.hero.in .attr{transition-delay:.5s}
.hero.in .lede{transition-delay:.62s}
.hero.in .hero-links{transition-delay:.72s}
.hero.in .strip-in{transition-delay:.82s}
.hero h1 .stop{opacity:0;transform:translateY(-.35em) scale(.3);display:inline-block;transform-origin:center}
.hero.in h1 .stop{opacity:1;transform:none;transition:transform .8s var(--ease),opacity .4s ease}
.hero.in .line-3 .stop{transition-delay:.92s}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise,.hero h1 .stop{opacity:1!important;transform:none!important;transition:none!important}
  .panel,.top .mark{transition:none!important}
}