/* jmtg solutions — site styles
   Layout: left-aligned, one 1120px column. The hero pairs the headline with the
   logo writing itself; everything after it stays quiet (rows and hairlines, no cards). */

@font-face{font-family:"Quicksand";src:url("../fonts/quicksand-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Quicksand";src:url("../fonts/quicksand-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("../fonts/figtree-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("../fonts/figtree-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("../fonts/figtree-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  /* light mode: cream */
  --bg:#F4EFE6;
  --text:#0D1117;
  --muted:#4A5568;
  --line:#DDD5C6;
  --j:#4C6EF5;            /* the j: logo accent */
  --link:#3554D1;         /* accent dark enough for running text */
  --panel:#3554D1;        /* contact block */
  --panel-text:#FFFFFF;
  --display:"Quicksand","Trebuchet MS","Segoe UI",sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --page:1120px;
  --gutter:clamp(20px,5vw,48px);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0D1117;
    --text:#F7F8FA;
    --muted:#A9B4C6;
    --line:#242C39;
    --j:#5C7CFA;
    --link:#8FA3FF;
    --panel:#5C7CFA;
    --panel-text:#0D1117;
    color-scheme:dark;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
a{color:var(--link);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--j);outline-offset:3px;border-radius:4px}
.container{width:100%;max-width:calc(var(--page) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:var(--gutter);top:-60px;background:var(--text);color:var(--bg);padding:10px 14px;border-radius:8px;z-index:10}
.skip:focus{top:12px}

/* the mark, drawn with strokes so it follows the theme */
.mark{fill:none;stroke:currentColor;stroke-width:12;stroke-linecap:round;stroke-linejoin:round}
.mark .mark-j{stroke:var(--j)}
.mark-dot{fill:var(--j)}

/* header */
.site-header{padding:22px 0}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:inline-flex;color:var(--text)}
.brand svg{width:64px;height:auto;display:block}
.nav{display:flex;align-items:center;gap:clamp(14px,2.6vw,30px)}
.nav-links{display:flex;gap:clamp(14px,2.4vw,28px);list-style:none;margin:0;padding:0}
.nav-links a{color:var(--text);text-decoration:none;font-weight:500;font-size:16px;padding:10px 0;display:inline-block}
.nav-links a:hover{text-decoration:underline}
.lang{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px}
.lang button{font:600 14px/1 var(--body);color:var(--muted);background:none;border:0;border-radius:999px;min-width:44px;min-height:38px;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--text);color:var(--bg)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;min-height:52px;padding:12px 26px;border-radius:999px;font:600 17px/1.25 var(--body);text-decoration:none;background:var(--text);color:var(--bg);border:2px solid var(--text)}
.btn:hover{background:transparent;color:var(--text)}
.text-link{font-weight:600}

/* hero */
.hero{padding:clamp(28px,6vw,72px) 0 clamp(56px,9vw,112px)}
.hero .container{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:center}
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(40px,6.1vw,76px);line-height:1.03;letter-spacing:-0.02em;text-wrap:balance}
.hero-copy{display:flex;flex-direction:column;gap:26px;align-items:flex-start}
.lede{font-size:clamp(18px,1.7vw,21px);color:var(--muted);max-width:34em}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px}
.hero-mark{color:var(--text);justify-self:end;width:100%;max-width:440px}
.hero-mark svg{width:100%;height:auto;display:block;overflow:visible}

/* the one piece of motion: the logo writes itself once on load */
.draw{stroke-dasharray:1.002 1;animation:draw var(--t,.4s) cubic-bezier(.6,0,.3,1) var(--d,0s) both}
.hero-mark .mark-dot{transform-box:fill-box;transform-origin:center;animation:pop .4s cubic-bezier(.2,1.6,.4,1) .42s both}
@keyframes draw{0%{stroke-dashoffset:1;opacity:0}2%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes pop{0%{transform:scale(0)}100%{transform:scale(1)}}

/* sections */
.section{padding:clamp(48px,7vw,88px) 0;border-top:1px solid var(--line)}
.section h2{font-family:var(--display);font-weight:700;font-size:clamp(30px,3.6vw,44px);line-height:1.1;letter-spacing:-0.015em;margin-bottom:clamp(24px,3.5vw,40px)}
.rows{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:12px clamp(24px,5vw,72px);padding:clamp(22px,2.8vw,32px) 0;border-top:1px solid var(--line)}
.row:last-child{padding-bottom:0}
.row h3{font-family:var(--display);font-weight:700;font-size:clamp(24px,2.5vw,31px);line-height:1.15}
.row p{color:var(--muted);max-width:36em}
.principles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,40px)}
.principle{display:flex;flex-direction:column;gap:10px}
.principle h3{font-family:var(--display);font-weight:700;font-size:23px;line-height:1.2}
.principle p{color:var(--muted);font-size:17px}

/* contact */
.contact{padding:0 0 clamp(48px,7vw,88px)}
.panel{background:var(--panel);color:var(--panel-text);border-radius:28px;padding:clamp(32px,6vw,72px);display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.panel h2{font-family:var(--display);font-weight:700;font-size:clamp(36px,5.2vw,64px);line-height:1.05;letter-spacing:-0.02em}
.panel p{font-size:clamp(18px,1.7vw,21px);max-width:30em}
.panel .btn{background:var(--panel-text);color:var(--panel);border-color:var(--panel-text)}
.panel .btn:hover{background:transparent;color:var(--panel-text)}
.panel :focus-visible{outline-color:var(--panel-text)}

/* footer */
.site-footer{border-top:1px solid var(--line);padding:28px 0 40px;color:var(--muted);font-size:16px}
.site-footer .container{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px}
.site-footer .brand svg{width:48px}
.foot-left{display:flex;align-items:center;gap:16px}

@media (max-width:860px){
  .hero .container{grid-template-columns:1fr}
  .hero-mark{order:-1;justify-self:start;max-width:min(62vw,300px)}
  .row{grid-template-columns:1fr}
  .principles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav-links{display:none}
}
@media (max-width:480px){
  body{font-size:17px}
  .principles{grid-template-columns:1fr}
  .btn{width:100%}
  .actions{width:100%}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .draw,.hero-mark .mark-dot{animation:none}
}