/* ===========================================================================
   KODE GARMENT — shared site styles
   Tokens, base, type, buttons, header, marquee, menu, footer and the scroll
   reveal: everything the home and contact pages have in common. Page styles
   (home.css, contact.css) load after this file.
   =========================================================================== */

:root{
  --ground:   #F2EFE9;   /* warm gallery white */
  --ground-2: #EAEAEC;
  --ground-3: #DCDCDF;
  --ink:      #111113;
  --ink-2:    #3A3A3F;
  --mid:      #66666C;
  --soft:     #939399;
  --line:     #DDDDE0;
  --line-2:   #C8C8CD;
  --kode:     #F37021;
  --kode-ink: #BE4F0C;
  --blue:     #2F62C2;   /* business-card blue */
  --blue-lt:  #57A0E6;
  --blue-dp:  #1B3A78;

  --d:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --b:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --m:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --hd:78px;                    /* sticky header height */
  --tick:34px;                  /* marquee band under it   */
  --gut:clamp(20px,4.4vw,72px);
  --maxw:1560px;
  --ease:cubic-bezier(.22,.61,.36,1);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--b);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto;
  /* no dragging images out, no long-press save sheet on iOS */
  -webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--kode);color:#fff}

/* --------------------------------------------------------------- type --- */
.dsp{
  font-family:var(--d);font-weight:800;line-height:.9;letter-spacing:-.025em;
  font-variation-settings:'wdth' 90,'wght' 800;margin:0;text-wrap:balance;
  text-transform:uppercase;
}
.eyebrow{
  font-family:var(--m);font-size:11.5px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--kode-ink);margin:0;
}
.eyebrow--mid{color:var(--soft)}
.mono{font-family:var(--m);font-variant-numeric:tabular-nums}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}

/* ------------------------------------------------------------ controls --- */
.btn{
  display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 28px;
  font-family:var(--m);font-size:12px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap;border:1px solid transparent;
  transition:.3s var(--ease);
}
.btn svg{flex:none;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--fill{background:var(--ink);color:#FAFAFA}
.btn--fill:hover{background:var(--kode);color:#fff}
.btn--ghost{border-color:var(--line-2);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);background:rgba(18,18,20,.04)}
.btn--onDark{background:#FAFAFA;color:var(--ink)}
.btn--onDark:hover{background:var(--kode);color:#fff}
.btn--ghostDark{border-color:rgba(255,255,255,.28);color:#FAFAFA}
.btn--ghostDark:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn--sm{height:44px;padding:0 20px;font-size:11.5px}

.chip{
  display:inline-flex;align-items:center;height:30px;padding:0 12px;
  border:1px solid var(--line-2);font-family:var(--m);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mid);white-space:nowrap;
}
.chip--dark{border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.72)}

/* ============================================================== chrome === */
.hd{
  position:sticky;top:0;z-index:50;background:rgba(242,239,233,.86);
  backdrop-filter:blur(20px) saturate(1.2);border-bottom:1px solid var(--line);
}
.hd .wrap{display:flex;align-items:center;gap:clamp(20px,3vw,52px);height:var(--hd)}
.hd__nav{display:none;gap:clamp(20px,2.4vw,38px);font-size:15.5px;font-weight:500}
.hd__nav a{color:var(--ink-2);padding:6px 0;position:relative;white-space:nowrap}
.hd__nav a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--kode);transition:right .3s var(--ease)}
.hd__nav a:hover{color:var(--ink)}.hd__nav a:hover::after{right:0}
.hd__nav a[aria-current]{color:var(--ink)}.hd__nav a[aria-current]::after{right:0}
.hd__cta{margin-left:auto}
@media(min-width:1180px){.hd__nav{display:flex}}
.mark{height:30px;width:auto;flex:none}
.mark--lg{height:46px}

/* ---- marquee -----------------------------------------------------------
   Sticks directly beneath the header, so the capability list is on screen for
   the whole scroll. Two identical sets translate by exactly -50%, which puts
   set two where set one started — the loop has no seam. */
.tick{position:sticky;top:var(--hd);z-index:49;height:var(--tick);
  display:flex;align-items:center;overflow:hidden;
  background:var(--ink);color:#FAFAFA;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.tick__row{display:flex;flex:none;animation:tick 132s linear infinite;
  will-change:transform}
.tick:hover .tick__row{animation-play-state:paused}
.tick__set{display:flex;flex:none;align-items:center}
.tick b{font-family:var(--m);font-size:11px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;white-space:nowrap;padding:0 20px;
  color:rgba(247,244,238,.82)}
.tick i{font-style:normal;color:var(--kode);font-size:8px;line-height:1}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.tick__row{animation:none}}

/* ============================================================= sections == */
.sec{position:relative;padding:clamp(76px,9vw,156px) 0}
.sec--dark{background:var(--ink);color:#F4F4F5}
.sec--dark .sec__note{color:rgba(244,244,245,.66)}
.sec--dark .eyebrow--mid{color:rgba(244,244,245,.45)}
.sec__hd{display:grid;gap:clamp(20px,3vw,60px);align-items:end;grid-template-columns:1fr}
@media(min-width:980px){.sec__hd{grid-template-columns:1.3fr 1fr}}
.sec__h{font-size:clamp(40px,6.6vw,104px);margin-top:18px}
.sec__note{font-size:17px;line-height:1.6;color:var(--mid);max-width:46ch}

/* --------------------------------------------------------------- footer - */
.ft{background:var(--ink);color:#F4F4F5;border-top:1px solid rgba(255,255,255,.12);padding:clamp(50px,5vw,80px) 0 0}
.ft__top{display:grid;gap:clamp(30px,4vw,56px);grid-template-columns:1fr}
@media(min-width:860px){.ft__top{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.ft__h{font-family:var(--m);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(244,244,245,.4);margin:0 0 16px}
.ft__l{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px;color:rgba(244,244,245,.72)}
.ft__l a:hover{color:#fff}
.ft__adr{font-style:normal;line-height:1.5}
.ft__p{margin:18px 0 0;font-size:15px;line-height:1.6;color:rgba(244,244,245,.56);max-width:34ch}
.ft__bot{margin-top:clamp(38px,4vw,60px);padding:20px 0;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  font-family:var(--m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(244,244,245,.36)}
.ft__bot a{text-decoration:underline;text-underline-offset:3px}

/* ------------------------------------------------------------- reveal fx - */
[data-rv]{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
[data-rv].is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-rv]{opacity:1;transform:none}
}

/* sections land below the pinned header, not under it */
section[id],main[id]{scroll-margin-top:calc(var(--hd) + var(--tick) + 8px)}

/* ---- menu: below the full navigation width ---- */
.hd__menu{display:none;position:relative;flex:none;width:44px;height:44px;margin-left:10px;
  border:1px solid var(--line-2);color:var(--ink);transition:border-color .25s var(--ease)}
.hd__menu:hover{border-color:var(--ink)}
.hd__menu i{position:absolute;left:12px;right:12px;height:1.6px;background:currentColor;
  transition:transform .3s var(--ease),opacity .2s var(--ease)}
.hd__menu i:nth-child(1){top:calc(50% - 6.8px)}
.hd__menu i:nth-child(2){top:calc(50% - .8px)}
.hd__menu i:nth-child(3){top:calc(50% + 5.2px)}
.hd__menu[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hd__menu[aria-expanded="true"] i:nth-child(2){opacity:0}
.hd__menu[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mnav{position:fixed;left:0;right:0;top:var(--hd);z-index:60;background:var(--ground);
  border-bottom:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(18,18,20,.28);
  padding:6px var(--gut) 22px;max-height:calc(100vh - var(--hd));overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .22s var(--ease),transform .3s var(--ease),visibility 0s linear .3s}
.mnav.is-open{opacity:1;visibility:visible;transform:none;
  transition:opacity .22s var(--ease),transform .3s var(--ease),visibility 0s}
.mnav>a{display:flex;align-items:center;justify-content:space-between;min-height:56px;
  border-bottom:1px solid var(--line);font-family:var(--d);font-weight:800;
  font-variation-settings:'wdth' 88,'wght' 800;font-size:21px;letter-spacing:-.01em;
  text-transform:uppercase;color:var(--ink)}
.mnav>a span{font-family:var(--m);font-weight:500;font-size:11px;letter-spacing:.2em;color:var(--kode-ink)}
.mnav>a:active,.mnav>a[aria-current]{color:var(--kode-ink)}
.mnav__foot{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.mnav__foot .btn{flex:1 1 200px;justify-content:center}
@media(max-width:1179px){.hd__menu{display:block}}
@media(min-width:1180px){.mnav{display:none}}

/* large monitors: a wider measure */
@media(min-width:1900px){
  :root{--maxw:1720px}
  .hd__nav{font-size:16.5px}
  .sec__note{font-size:19px}
}
@media(min-width:2400px){:root{--maxw:1880px}}

/* phones: a slimmer header and marquee */
@media(max-width:759px){
  :root{--hd:64px;--tick:30px}
  .mark{height:26px}
  .hd .wrap{gap:12px}
  .hd__cta .btn{height:40px;padding:0 14px;font-size:10.5px;letter-spacing:.12em}
  .hd__cta .btn svg{display:none}
  .hd__menu{width:40px;height:40px;margin-left:6px}
  .tick b{font-size:10px;letter-spacing:.18em;padding:0 14px}
}
@media(max-width:359px){.hd__cta{display:none}}
/* a phone on its side: don't pin the header and marquee over a short screen */
@media(max-height:520px) and (orientation:landscape){
  .hd,.tick{position:relative;top:auto}
}

/* ---------- EN / FR ---------------------------------------------------- */
/* Beside the call to action on a wide screen; at the head of the mobile
   menu, where the header bar has no room for it. */
.hd__cta{display:flex;align-items:center;gap:clamp(10px,1.4vw,18px)}
.lang{display:none;align-items:center;font-family:var(--m);font-weight:500;
  font-size:11.5px;letter-spacing:.14em}
.lang__opt{display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:30px;color:var(--soft);transition:color .25s var(--ease)}
.lang__opt+.lang__opt{border-left:1px solid var(--line-2)}
.lang__opt:hover{color:var(--ink)}
.lang__opt[aria-current]{color:var(--ink)}
@media(min-width:760px){.lang{display:flex}}

.mlang{order:-1;flex:1 1 100%;display:flex;gap:10px}
.mlang__opt{flex:1;display:inline-flex;align-items:center;justify-content:center;
  height:46px;border:1px solid var(--line-2);font-family:var(--m);font-weight:500;
  font-size:11.5px;letter-spacing:.2em;color:var(--mid);
  transition:border-color .25s var(--ease),background .25s var(--ease)}
.mlang__opt:hover{border-color:var(--ink);color:var(--ink)}
.mlang__opt[aria-current]{background:var(--ink);border-color:var(--ink);color:#FAFAFA}