/* ============================================================
   ITSMIAS — portfolio site
   Shared styles for index.html (home) and project.html (case studies)
   ============================================================ */

/* Syne's lowercase g has a stub descender by design; serve Bricolage
   Grotesque's g (and only its g) instead via unicode-range. Stacks list
   'Syne GFix' before 'Syne' so every other glyph falls through to Syne. */
@font-face {
  font-family: 'Syne GFix';
  src: url('assets/bricolage-g.woff2') format('woff2');
  font-weight: 200 800;
  size-adjust: 95%;
  unicode-range: U+0067;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; }
body{ margin:0; background:#0b0717; }
::selection{ background:#F5A9B8; color:#0b0717; }
::-webkit-scrollbar{ width:0; height:0; display:none; }

@keyframes projFade { from{ transform:translateY(14px); } to{ transform:translateY(0); } }
@keyframes paneIn { from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:translateY(0); } }
@keyframes paneItemIn { from{ opacity:0; transform:translateY(18px); filter:blur(5px); } to{ opacity:1; transform:translateY(0); filter:blur(0); } }
@keyframes paneNumIn { from{ opacity:0; transform:translateX(16px); } to{ opacity:1; transform:translateX(0); } }

/* ---- hero scroll cue ---- */
/* the pair fades in, then pulses the site's cyan from ~1.5s so the cue is
   moving before a visitor decides to leave; the wrapper owns the fade so it
   can retire mid-pulse and come back when the visitor returns to the top */
@keyframes cueIn { from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
@keyframes cuePulse {
  0%,100%{ color:#8f86ad; filter:drop-shadow(0 0 0 rgba(87,224,221,0)); }
  50%{ color:#57e0dd; filter:drop-shadow(0 0 9px rgba(87,224,221,.75)); }
}
@keyframes cueNudge { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }

.mias-scrollcue{ transition:opacity .5s ease; }
.mias-scrollcue.is-gone{ opacity:0; }
.mias-scrollcue-in{ opacity:0; pointer-events:auto; animation:cueIn .7s cubic-bezier(.22,1,.36,1) .6s both; }
/* faded out it must not swallow clicks meant for the page behind it */
.mias-scrollcue.is-gone .mias-scrollcue-in{ pointer-events:none; }
/* identical timing on both arrows so the pair moves as a single unit */
.mias-scrollcue-chev{ animation:cuePulse 2.6s ease-in-out 1.5s infinite, cueNudge 2.6s ease-in-out 1.5s infinite; }
/* !important so the hover state outranks the running pulse */
.mias-scrollcue-in:hover .mias-scrollcue-chev{ color:#57e0dd !important; filter:drop-shadow(0 0 11px rgba(87,224,221,.85)) !important; }
@media (max-width:640px){ .mias-scrollcue{ bottom:10px !important; } }
/* short/landscape phones: the hero copy already fills the frame */
@media (max-height:560px){ .mias-scrollcue{ display:none !important; } }
@media (prefers-reduced-motion: reduce){
  .mias-scrollcue-in{ opacity:1; animation:none; }
  .mias-scrollcue-chev{ color:#57e0dd !important; animation:none; }
}

/* ---- what-i-do feature tabs ---- */
.mias-tab-title{ display:inline-block; color:#6f6790; }
.mias-tab[aria-selected="true"] .mias-tab-title{ color:#f3f1fa; }
.mias-tab:hover .mias-tab-title{ color:#f3f1fa; }
.mias-tab-fill{ transition:height .45s cubic-bezier(.22,1,.36,1); }
@media (max-width:860px){
  .mias-tabs{ grid-template-columns:1fr !important; gap:28px !important; }
  #services{ padding-top:90px !important; }
  /* tab buttons: tighter rows */
  .mias-tab{ padding:12px 4px !important; gap:14px !important; }
  .mias-tab-title{ font-size:18px !important; }
  /* panel: drop the desktop left inset, shorten min-height */
  .mias-tabpanel{ padding-left:0 !important; min-height:200px !important; }
  .mias-tabpanel > div[aria-hidden="true"]{ left:0 !important; }
  .mias-pane > div{ padding-left:24px !important; }
  /* long titles must wrap on narrow screens */
  .mias-pane h3{ white-space:normal !important; font-size:24px !important; line-height:1.3 !important; }
  .mias-pane p{ font-size:16px !important; max-width:none !important; }
}

/* ---- links ---- */
.mias-link{ transition:color .25s ease, opacity .25s ease; }
.mias-link:hover{ color:#57e0dd !important; }

/* testimonial attribution → project page: recolour the inline-styled name/role on hover */
.mias-testi-link span{ transition:color .25s ease; }
.mias-testi-link:hover span{ color:#F5A9B8 !important; }

/* nav links — sliding underline matching the scroll sliver */
.mias-navlink{ position:relative; }
.mias-navlink::after{ content:""; position:absolute; left:0; right:0; bottom:-7px; height:2px; background:#57e0dd; box-shadow:0 0 8px rgba(87,224,221,.5); transform:scaleX(0); transform-origin:right; transition:transform var(--ul-dur, .3s) cubic-bezier(.2,.7,.2,1); }
html:not(.ul-js) .mias-navlink:hover::after, .mias-navlink.ul-on::after{ transform:scaleX(1); transform-origin:left; }
/* wordmark has .42em letter-spacing → trailing gap; trim the underline */
#nav-wordmark.mias-navlink::after{ right:.42em; }

/* ---- wordmark build (.wm-build: the nav ITSMIAS and the footer's giant MIAS;
   script.js splits the text into .wm-ch pieces) ----
   Valorant-style construction, letter by letter: a cyan line sweeps across,
   two offset slices of the glyph slide in from opposite sides and lock
   together, then the real glyph wipes in cyan and cools to white. Leaving,
   the whole mark goes at once, like Valorant's logo out: glyphs are cut down
   to a thin band, spread apart from the centre with connector lines and a
   cyan copy, smear sideways, then hard-cut. The glyph has no fill on the way
   in, so hover colour still reaches it once the build has finished.
   Per-instance knobs: --wm-hi construction colour, --wm-ls the mark's
   letter-spacing, --wm-line/--wm-dot line and pixel size, --wm-glow,
   --wm-over how far the T finale's stem overshoots (scaleY),
   --wm-spread/--wm-smear how far the exit pushes letters apart and sideways,
   --wm-shift moves the spread's anchor off the centre.
   The settled glyph and the exit connectors use the mark's own colour. */
/* relative: the stray pixels and lines are placed against the mark itself */
.wm-build{ position:relative; white-space:nowrap; --wm-over:2.4; --wm-hi:#57e0dd; --wm-ls:.42em; --wm-line:2px; --wm-dot:3px; --wm-glow:0 0 8px rgba(87,224,221,.6); --wm-spread:1; --wm-smear:1.2em; }
/* the nav mark sits against the left edge, so its exit spreads rightwards
   from the first letter (--wm-dmin, set by script.js, cancels the most
   negative offset) instead of from the centre, and never runs off-screen */
#nav-wordmark{ --wm-shift:var(--wm-dmin, 0); }
/* phones: tighter spread and shorter smear so it never reaches the menu button */
@media (max-width:760px){ #nav-wordmark{ --wm-smear:.1em; --wm-spread:.3; } }
.wm-build .wm-ch{ position:relative; display:inline-block; }
.wm-build .wm-g{ display:inline-block; clip-path:inset(0 100% 0 0); }
.wm-build .wm-s, .wm-build .wm-ln, .wm-build .wm-px{ position:absolute; pointer-events:none; opacity:0; }
.wm-build .wm-s{ left:0; top:0; }
.wm-build .wm-s1{ color:var(--wm-hi); clip-path:inset(0 0 56% 0); }
.wm-build .wm-s2{ color:inherit; clip-path:inset(56% 0 0 0); }
.wm-build .wm-ln{ left:-.18em; right:calc(var(--wm-ls) - .18em); top:var(--ly, 50%); height:var(--wm-line); background:var(--wm-hi); box-shadow:var(--wm-glow); }
.wm-build .wm-px{ width:var(--wm-dot); height:var(--wm-dot); background:var(--wm-hi); left:var(--px); top:var(--py); }

.wm-build.is-in .wm-g{ clip-path:none; animation:wmGlyph .85s cubic-bezier(.2,.7,.2,1) backwards; animation-delay:calc(var(--i) * 105ms); }
.wm-build.is-in .wm-s1{ animation:wmSlice1 .85s cubic-bezier(.2,.7,.2,1); animation-delay:calc(var(--i) * 105ms); }
.wm-build.is-in .wm-s2{ animation:wmSlice2 .85s cubic-bezier(.2,.7,.2,1); animation-delay:calc(var(--i) * 105ms); }
.wm-build.is-in .wm-ln{ animation:wmLine .85s cubic-bezier(.7,0,.2,1); animation-delay:calc(var(--i) * 105ms - 80ms); }
.wm-build.is-in .wm-px{ animation:wmPixel 1.25s steps(1, end); animation-delay:var(--pd); }

/* finale letter (.wm-fin): skips its normal turn and is built last from its
   strokes, like the T in Valorant's logo. T: the crossbar (top copy, cut at
   --cut, measured by script.js) flies in from the right as a long bar and
   shrinks into place, then the stem (bottom copy) drops in from above,
   overshoots past the baseline and snaps back. The real glyph swaps in
   once the pieces have rejoined. */
.wm-build.is-in .wm-fin .wm-g{ animation:finGlyph 1.2s steps(1, end) backwards; animation-delay:var(--fd); }
.wm-build.is-in .wm-fin .wm-ln{ animation:none; }
.wm-build.is-in .wm-fin-t .wm-s1{ color:inherit; clip-path:inset(0 0 calc(100% - var(--cut, 30%)) 0); transform-origin:0 50%; animation:finBar 1.2s cubic-bezier(.2,.7,.2,1); animation-delay:var(--fd); }
.wm-build.is-in .wm-fin-t .wm-s2{ clip-path:inset(var(--cut, 30%) 0 0 0); transform-origin:50% var(--cut, 30%); animation:finStem 1.2s cubic-bezier(.2,.7,.2,1); animation-delay:var(--fd); }
@keyframes finGlyph{ 0%{ opacity:0; } 80%{ opacity:1; } }
@keyframes finBar{
  0%   { opacity:0; transform:translateX(1.8em) scaleX(2.6); color:var(--wm-hi); }
  4%   { opacity:1; }
  30%  { transform:translateX(.3em) scaleX(1.35); color:var(--wm-hi); }
  42%  { transform:translateX(-.03em) scaleX(1); }
  48%  { transform:none; }
  80%  { opacity:1; transform:none; }
  81%,100%{ opacity:0; transform:none; }
}
@keyframes finStem{
  0%,32%{ opacity:0; transform:translateY(-1.1em) scaleY(1); color:var(--wm-hi); }
  35%  { opacity:1; }
  52%  { transform:translateY(0) scaleY(var(--wm-over)); color:var(--wm-hi); }
  64%  { transform:translateY(0) scaleY(.9); }
  72%  { transform:translateY(0) scaleY(1.04); }
  78%  { transform:none; }
  80%  { opacity:1; transform:none; }
  81%,100%{ opacity:0; transform:none; }
}

.wm-build.is-out .wm-ch{ isolation:isolate; }
.wm-build.is-out .wm-g{ animation:wmGlyphOut .3s linear both; }
.wm-build.is-out .wm-s1{ z-index:-1; animation:wmCyanOut .3s linear both; }
.wm-build.is-out .wm-ln{ left:.1em; right:-.1em; top:58%; height:var(--wm-line); background:currentColor; box-shadow:none; animation:wmLineOut .3s linear both; }
.wm-build.is-out .wm-px{ animation:wmPixel .45s steps(1, end); }

@keyframes wmLine{
  0%  { opacity:1; clip-path:inset(0 100% 0 0); }
  38% { opacity:1; clip-path:inset(0 0 0 0); }
  100%{ opacity:1; clip-path:inset(0 0 0 100%); }
}
@keyframes wmSlice1{
  0%,18%{ opacity:0; transform:translateX(-.55em); }
  30%   { opacity:1; transform:translateX(-.22em); }
  48%   { opacity:1; transform:translateX(.06em); }
  58%   { opacity:1; transform:translateX(0); }
  64%   { opacity:0; transform:translateX(0); }
  100%  { opacity:0; }
}
@keyframes wmSlice2{
  0%,24%{ opacity:0; transform:translateX(.5em); }
  36%   { opacity:1; transform:translateX(.18em); }
  52%   { opacity:1; transform:translateX(-.05em); }
  60%   { opacity:1; transform:translateX(0); }
  66%   { opacity:0; transform:translateX(0); }
  100%  { opacity:0; }
}
@keyframes wmGlyph{
  0%,40%{ clip-path:inset(0 100% 0 0); color:var(--wm-hi); opacity:1; }
  60%   { clip-path:inset(0 0 0 0); color:var(--wm-hi); opacity:1; }
  66%   { opacity:.35; }
  72%   { opacity:1; }
  100%  { clip-path:inset(0 0 0 0); }
}
/* exit timing: snap into the band (ease-out), spread evenly, then the
   smear accelerates (ease-in) into a hard cut — no dead frames at the end */
@keyframes wmGlyphOut{
  0%      { clip-path:inset(0 0 0 0); transform:none; opacity:1; animation-timing-function:cubic-bezier(.2,.8,.3,1); }
  18%     { clip-path:inset(30% 0 24% 0); transform:translateX(calc((var(--d) + var(--wm-shift, 0)) * var(--wm-spread) * .25em)); animation-timing-function:linear; }
  50%     { clip-path:inset(42% 0 34% 0); transform:translateX(calc((var(--d) + var(--wm-shift, 0)) * var(--wm-spread) * .9em)) scaleX(1.15); animation-timing-function:cubic-bezier(.5,0,1,1); }
  88%     { clip-path:inset(47% 0 40% 0); transform:translateX(calc((var(--d) + var(--wm-shift, 0)) * var(--wm-spread) * 1.1em + var(--wm-smear))) scaleX(2.4); opacity:1; }
  89%,100%{ clip-path:inset(47% 0 40% 0); transform:translateX(calc((var(--d) + var(--wm-shift, 0)) * var(--wm-spread) * 1.1em + var(--wm-smear))) scaleX(2.4); opacity:0; }
}
@keyframes wmCyanOut{
  0%,8%   { clip-path:inset(30% 0 24% 0); transform:translateX(calc((var(--d) + var(--wm-shift, 0)) * var(--wm-spread) * .25em - .2em)); opacity:0; animation-timing-function:cubic-bezier(.2,.8,.3,1); }
  18%     { clip-path:inset(30% 0 24% 0); transform:translateX(calc((var(--d) + var(--wm-shift, 0)) * var(--wm-spread) * .25em - .2em)); opacity:1; animation-timing-function:linear; }
  50%     { clip-path:inset(42% 0 34% 0); transform:translateX(calc((var(--d) + var(--wm-shift, 0)) * var(--wm-spread) * .9em - .3em)) scaleX(1.2); animation-timing-function:cubic-bezier(.5,0,1,1); }
  88%     { clip-path:inset(47% 0 40% 0); transform:translateX(calc((var(--d) + var(--wm-shift, 0)) * var(--wm-spread) * 1.1em + var(--wm-smear) + .5em)) scaleX(2.8); opacity:1; }
  89%,100%{ clip-path:inset(47% 0 40% 0); transform:translateX(calc((var(--d) + var(--wm-shift, 0)) * var(--wm-spread) * 1.1em + var(--wm-smear) + .5em)) scaleX(2.8); opacity:0; }
}
@keyframes wmLineOut{
  0%,12%  { transform:translateX(calc((var(--d) + var(--wm-shift, 0)) * var(--wm-spread) * .25em)); opacity:0; animation-timing-function:cubic-bezier(.2,.8,.3,1); }
  20%     { transform:translateX(calc((var(--d) + var(--wm-shift, 0)) * var(--wm-spread) * .3em)); opacity:var(--cn); animation-timing-function:linear; }
  50%     { transform:translateX(calc((var(--d) + var(--wm-shift, 0)) * var(--wm-spread) * .9em + .3em)) scaleX(2.2); animation-timing-function:cubic-bezier(.5,0,1,1); }
  88%     { transform:translateX(calc((var(--d) + var(--wm-shift, 0)) * var(--wm-spread) * 1.1em + var(--wm-smear))) scaleX(3); opacity:var(--cn); }
  89%,100%{ transform:translateX(calc((var(--d) + var(--wm-shift, 0)) * var(--wm-spread) * 1.1em + var(--wm-smear))) scaleX(3); opacity:0; }
}
@keyframes wmPixel{
  0%  { opacity:1; }
  18% { opacity:0; }
  34% { opacity:1; }
  46% { opacity:0; }
  100%{ opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .wm-build .wm-s, .wm-build .wm-ln, .wm-build .wm-px{ display:none; }
  .wm-build .wm-g{ clip-path:none; opacity:0; transition:opacity .3s ease; }
  .wm-build.is-in .wm-g{ opacity:1; animation:none; }
  .wm-build.is-out .wm-g{ animation:none; }
}

/* ---- buttons — glow only, no bob ---- */
.mias-btn{ transition:box-shadow .35s ease, background .25s ease; }
.mias-copy-row{ display:inline-grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:16px; }
@media (max-width:600px){ .mias-copy-row{ grid-auto-flow:row; } }
.mias-copy{ font-family:inherit; cursor:pointer; border:none; display:inline-flex; align-items:center; justify-content:center; gap:12px; font-weight:600; font-size:15px; letter-spacing:.04em; color:#0b0717; background:#57e0dd; padding:18px 32px; border-radius:2px; box-shadow:0 10px 40px rgba(87,224,221,.3); }
.mias-copy svg{ flex:none; }
.mias-copy.is-copied{ background:#F5A9B8; box-shadow:0 10px 40px rgba(245,169,184,.4); }
.mias-btn:hover{ box-shadow:0 0 0 1px rgba(87,224,221,.4), 0 14px 34px -10px rgba(87,224,221,.6); }

/* ---- external links (case-study sidebar/body) ---- */
.ext-link{ transition:color .2s ease; }
.ext-link:hover{ color:#57e0dd !important; }

/* ---- socials — icon glow only, no box ---- */
.mias-social{ transition:color .25s ease, filter .3s ease; }
.mias-social:hover{ color:#57e0dd !important; filter:drop-shadow(0 0 8px rgba(87,224,221,.8)); }
/* ultracode easter egg: GitHub hover fills the footer with wordmark-style scan lines */
.mias-ultra{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; mix-blend-mode:plus-lighter; opacity:.65; }
.mias-contact-foot > :not(.mias-ultra){ position:relative; z-index:1; }

/* ---- work cards (home) ---- */
/* One timing family, one moving part per layer. The card used to scale as
   well as lift, which compounded with the thumbnail's own zoom (1.025 x 1.06
   on two different clocks) and re-rasterised the card text mid-transition.
   Now the card only lifts; the image carries the zoom and trails it slightly,
   which reads as depth instead of two separate moves. */
.mias-card{ position:relative; isolation:isolate; transition:transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s ease, box-shadow .4s ease; }
.mias-card:hover{ transform:translateY(-8px); border-color:rgba(245,169,184,.5) !important; box-shadow:0 26px 50px -18px rgba(245,169,184,.45), 0 0 0 1px rgba(245,169,184,.2); }

/* thumbnail: the img and its dark tint live inside one zoom container,
   so the tint scales with the image and can never uncover it */
.mias-thumb{ position:relative; aspect-ratio:16/9; overflow:hidden; isolation:isolate; background:#0e0820; }
/* promoted to its own layer so the zoom doesn't re-rasterise the image */
.mias-thumb-zoom{ position:absolute; inset:0; will-change:transform; transition:transform .55s cubic-bezier(.2,.7,.2,1); }
.mias-thumb-zoom::after{ content:""; position:absolute; inset:-1px; background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.45) 78%, rgba(0,0,0,.85) 100%); pointer-events:none; }
.mias-thumb-zoom img{ width:100%; height:100%; display:block; object-fit:cover; }
.mias-feature:hover .mias-thumb-zoom{ transform:scale(1.05); }
/* CTA space is always reserved (fixed height) so revealing it on hover
   never changes the card's height and shifts the page */
.mias-cta{ display:inline-flex; align-items:flex-start; gap:8px; font-family:'Outfit',sans-serif; font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#F5A9B8; height:22px; margin-top:7px; opacity:0; transform:translateY(4px); transition:opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1); }
.mias-card:hover .mias-cta{ opacity:1; transform:translateY(0); }
.mias-arrow{ margin-top:1px; flex-shrink:0; }
@media (prefers-reduced-motion: reduce){
  .mias-card:hover{ transform:none; }
  .mias-feature:hover .mias-thumb-zoom{ transform:none; }
}

/* ---- case-study banner ---- */
.mias-banner img, .mias-banner{ transition:filter .5s ease; }

/* ---- live Discord presence (about) ---- */
#mias-presence-name{ transition:color .25s ease; }
.mias-presence:hover #mias-presence-name{ color:#57e0dd; }

/* ============================================================
   Footer — columns, then a centred ITSMIAS end card (like the closing
   logo of Valorant's intro) that builds in with the wordmark animation
   when it scrolls into view (script.js).
   ============================================================ */
/* the footer overlaps the (empty) bottom padding of the section above by
   140px and fades in over it, so there is no hard seam between them */
.mias-footer{ position:relative; overflow:hidden; margin-top:-140px; background:linear-gradient(180deg, rgba(11,7,23,0) 0, #0b0717 140px); }
.mias-footer-top{ position:relative; padding:180px 56px 0; }
.mias-footer--plain{ margin-top:0; }
.mias-footer--plain .mias-footer-top{ padding-top:70px; }
.mias-footer-cols{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; max-width:1240px; margin:0 auto; }
.mias-footer-h{ margin:0 0 18px; font-family:'Syne GFix','Syne',sans-serif; font-weight:600; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:#57e0dd; }
.mias-footer-list{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.mias-footer-list a, .mias-footer-contact a{ display:inline-flex; align-items:center; gap:11px; color:#cfc8e2; text-decoration:none; font-size:15px; transition:color .2s ease; }
.mias-footer-contact a{ color:#f3f1fa; }
.mias-footer-list a:hover, .mias-footer-contact a:hover{ color:#57e0dd; }
.mias-footer-list svg, .mias-footer-contact svg{ width:16px; height:16px; flex-shrink:0; color:#8f86ad; transition:color .2s ease, filter .3s ease; }
.mias-footer-list a:hover svg, .mias-footer-contact a:hover svg{ color:#57e0dd; filter:drop-shadow(0 0 6px rgba(87,224,221,.8)); }
.mias-footer-list .mias-ext{ width:12px; height:12px; margin-left:-4px; opacity:.6; }
/* X (Twitter): the X spins out and the old bird pops back in on hover */
.mias-xbird svg{ overflow:visible; }
.mias-xbird svg path{ transform-box:fill-box; transform-origin:50% 50%; }
.mias-xbird .mias-x{ transition:opacity .18s ease, transform .3s cubic-bezier(.2,.7,.2,1); }
.mias-xbird .mias-bird{ opacity:0; transform:scale(.3) rotate(-25deg); transition:opacity .18s ease, transform .3s cubic-bezier(.2,.7,.2,1); }
.mias-xbird:hover .mias-x, .mias-xbird:focus-visible .mias-x{ opacity:0; transform:scale(.3) rotate(90deg); }
.mias-xbird:hover .mias-bird, .mias-xbird:focus-visible .mias-bird{ opacity:1; transform:none; transition:opacity .18s ease .08s, transform .42s cubic-bezier(.3,1.6,.5,1) .08s; }
@media (prefers-reduced-motion: reduce){
  .mias-xbird svg path{ transform:none !important; }
}
.mias-footer-blurb{ margin:18px 0 24px; max-width:340px; font-weight:300; font-size:15px; line-height:1.6; color:#8f86ad; }
.mias-footer-contact{ display:grid; gap:10px; justify-items:start; }

.mias-footer-end{ display:flex; justify-content:center; padding:150px 24px 130px; }
.mias-footer-endmark{ font-family:'Syne GFix','Syne',sans-serif; font-weight:800; font-size:clamp(34px,5.4vw,76px); line-height:1.1; letter-spacing:.42em; color:#ece9f5;
  padding-left:.42em; /* balances the trailing letter-spacing so it centres */
  --wm-line:max(2px,.035em); --wm-dot:max(3px,.05em); --wm-over:2.2; }
@media (min-width:861px) and (max-width:1100px){ .mias-footer-cols{ grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px; } }
@media (max-width:860px){
  .mias-footer-cols{ grid-template-columns:1fr 1fr; gap:36px 24px; }
  .mias-footer-brand{ grid-column:1 / -1; }
}

/* ============================================================
   Responsive
   ============================================================ */
.mias-hamburger{ display:none; cursor:pointer; }
#mias-mobile-menu{ display:none; }
@media (min-width:761px){ #mias-mobile-menu{ display:none !important; } }

@media (max-width:760px){
  .mias-nav{ padding-left:22px !important; padding-right:22px !important; }
  .mias-navlinks{ display:none !important; }
  .mias-hamburger{ display:flex !important; }
  /* always reveal card CTA on touch */
  .mias-cta{ opacity:1 !important; transform:none !important; }
  /* case study: stack the sticky sidebar */
  article[id^="proj-"] > div[style*="320px 1fr"]{ grid-template-columns:1fr !important; }
  article[id^="proj-"] aside{ position:static !important; }
}

@media (max-width:640px){
  #work, #about, #testimonials, #services, #contact, .mias-hero-pad{ padding-left:22px !important; padding-right:22px !important; }
  div[style*="repeat(auto-fit"]{ grid-template-columns:1fr !important; }
  div[style*="max-width: 1180px"]{ padding-left:22px !important; padding-right:22px !important; }
  .mias-footer-top{ padding-left:22px; padding-right:22px; }
  #contact h2{ font-size:clamp(34px,11vw,92px) !important; }
  article[id^="proj-"]{ padding-left:22px !important; padding-right:22px !important; }
}

@media (max-width:560px){
  article[id^="proj-"] h1{ white-space:normal !important; }
  article[id^="proj-"] > div[style*="space-between; gap: 18px"]{ flex-direction:column !important; }
  article[id^="proj-"] > div[style*="space-between; gap: 18px"] > a{ max-width:none !important; }
}

@media (max-width:380px){
  #contact h2{ font-size:32px !important; }
}