/* Warrung — Caliber build · Swiss/International Typographic System */
:root{
  --bone:#EAE6DE;
  --bone-2:#E0DBD0;
  --ink:#14202E;
  --ink-80:rgba(20,32,46,.8);
  --ink-50:rgba(20,32,46,.5);
  --ink-20:rgba(20,32,46,.18);
  --ink-10:rgba(20,32,46,.09);
  --teal:#3F8E8F;
  --teal-bright:#5FB3B4;
  --olive:#7E8F55;
  --serif:'Instrument Serif',serif;
  --sans:'Archivo',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  font-family:var(--sans);
  background:var(--bone);
  color:var(--ink);
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  font-weight:400;
}
::selection{background:var(--teal);color:#fff}
body{overflow-x:clip}
/* flex/grid children may never force horizontal overflow */
.grid-12>*,.w-ack-grid>*,.w-foot-main>*,.svc-row>*{min-width:0}
img{max-width:100%;display:block;border-radius:0}
a{color:inherit;text-decoration:none}

/* ---------- type scale ---------- */
.display{
  font-weight:300;
  font-size:clamp(58px,8.5vw,124px);
  line-height:.92;
  letter-spacing:-.04em;
}
.display em,.headline em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--teal)}
.headline{
  font-weight:300;
  font-size:clamp(36px,4.4vw,68px);
  line-height:.98;
  letter-spacing:-.03em;
}
.subhead{font-weight:400;font-size:clamp(21px,2.3vw,30px);line-height:1.2;letter-spacing:-.02em}
.eyebrow{
  font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal);display:block;margin-bottom:22px;
}
.eyebrow .idx{color:var(--olive);margin-right:14px}
.body-lg{font-size:clamp(18px,1.6vw,21px);line-height:1.7;font-weight:400}
.meta{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-50)}

/* ---------- structure ---------- */
.shell{max-width:1440px;margin:0 auto;padding:0 clamp(22px,4vw,64px)}
.grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.hairline{border-top:1px solid var(--ink-20)}
.hairline-strong{border-top:1px solid var(--ink)}
section{position:relative}

/* ---------- nav ---------- */
.w-nav{
  position:fixed;top:0;left:0;right:0;z-index:90;
  background:color-mix(in srgb,var(--bone) 88%,transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--ink-20);
}
.w-nav-inner{
  max-width:1440px;margin:0 auto;padding:0 clamp(22px,4vw,64px);
  display:flex;align-items:center;justify-content:space-between;
  height:84px;flex-wrap:nowrap;
}
.w-logo{display:flex;align-items:center;gap:13px;white-space:nowrap}
.w-logo *{white-space:nowrap}
.w-logo img{width:44px;height:44px;object-fit:contain}
.w-logo span{font-weight:500;font-size:19px;letter-spacing:.22em}
.w-links{display:flex;align-items:center;gap:clamp(20px,2.6vw,40px);flex-wrap:nowrap}
.w-links a{
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;
  white-space:nowrap;color:var(--ink);
}
.w-links a.active{color:var(--teal)}
.w-cta{
  background:var(--ink);color:var(--bone)!important;
  padding:15px 28px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:500;white-space:nowrap;display:inline-block;
}
.w-burger{display:none;background:none;border:none;cursor:pointer;padding:10px}
.w-burger span{display:block;width:26px;height:1.5px;background:var(--ink);margin:6px 0;transition:.3s}
.w-mobile{
  display:none;position:fixed;inset:84px 0 0 0;background:var(--bone);z-index:85;
  padding:40px clamp(22px,4vw,64px);flex-direction:column;
}
.w-mobile.open{display:flex}
.w-mobile a{
  font-size:clamp(30px,7vw,44px);font-weight:300;letter-spacing:-.02em;
  padding:16px 0;border-bottom:1px solid var(--ink-20);
}
@media(max-width:1080px){.w-links,.w-nav .w-cta{display:none}.w-burger{display:block}}

/* ---------- breadcrumb ---------- */
.w-breadcrumb{
  max-width:1440px;margin:0 auto;padding:14px clamp(22px,4vw,64px);
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-50);
  border-bottom:1px solid var(--ink-10);
}
.w-breadcrumb a{color:var(--ink-50)}
.w-breadcrumb a:hover{color:var(--teal)}
.w-breadcrumb .sep{margin:0 10px;opacity:.5}

/* ---------- hero ---------- */
.page-top{padding-top:84px}
.hero-home{padding:clamp(70px,10vh,130px) 0 clamp(50px,7vh,90px)}
.hero-page{padding:clamp(56px,8vh,100px) 0 clamp(44px,6vh,72px)}

/* ---------- dots device (from the Warrung emblem) ---------- */
.dot-band{
  height:12px;width:160px;
  background-image:radial-gradient(circle,var(--teal) 2.6px,transparent 3px),radial-gradient(circle,var(--olive) 2px,transparent 2.4px);
  background-size:20px 12px,20px 12px;background-position:0 0,10px 6px;background-repeat:repeat-x;
}

/* ---------- service rows ---------- */
.svc-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:28px;
  padding:34px 0;border-top:1px solid var(--ink-20);cursor:pointer;
  transition:background .3s;
}
.svc-row:last-of-type{border-bottom:1px solid var(--ink-20)}
.svc-row .idx{
  font-size:12px;letter-spacing:.15em;color:var(--teal);width:52px;flex:0 0 auto;
}
.svc-row .name{font-size:clamp(22px,2.4vw,32px);font-weight:300;letter-spacing:-.02em;flex:1}
.svc-row .desc{font-size:14.5px;color:var(--ink-50);max-width:34ch;flex:1;display:none}
.svc-row .arrow{font-size:22px;opacity:.35;transition:.3s}
.svc-row:hover .arrow{opacity:1}
@media(min-width:900px){.svc-row .desc{display:block}}

/* ---------- cards / panels ---------- */
.panel{border:1px solid var(--ink-20);padding:clamp(26px,3vw,44px)}
.panel-ink{background:var(--ink);color:var(--bone)}
.panel-ink .meta{color:rgba(234,230,222,.5)}

/* ---------- marquee ---------- */
.w-marquee{overflow:hidden;position:relative;padding:38px 0;border-top:1px solid var(--ink-20);border-bottom:1px solid var(--ink-20)}
.w-marquee-track{display:flex;gap:clamp(48px,6vw,96px);align-items:center;width:max-content;animation:w-scroll 38s linear infinite}
.w-marquee:hover .w-marquee-track{animation-play-state:paused}
.w-marquee-track img{height:72px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.55;transition:.35s}
.w-marquee-track img:hover{filter:none;opacity:1}
@keyframes w-scroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .w-marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
}

/* ---------- buttons ---------- */
.btn-ink{
  display:inline-block;background:var(--ink);color:var(--bone);
  padding:19px 40px;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;
}
.btn-line{
  display:inline-block;border:1px solid var(--ink);color:var(--ink);
  padding:18px 40px;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;
}
.btn-bone{
  display:inline-block;background:var(--bone);color:var(--ink);
  padding:19px 40px;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;
}

/* ---------- forms ---------- */
.f-label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;display:block;margin-bottom:10px;color:var(--ink-80)}
.f-input,.f-select,.f-textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--ink-20);
  padding:12px 2px 14px;font-family:var(--sans);font-size:17px;color:var(--ink);
  transition:border-color .25s;border-radius:0;-webkit-appearance:none;appearance:none;
}
.f-select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 16px) 55%,calc(100% - 10px) 55%;background-size:6px 6px;background-repeat:no-repeat}
.f-input:focus,.f-select:focus,.f-textarea:focus{outline:none;border-bottom-color:var(--teal)}
.f-input::placeholder,.f-textarea::placeholder{color:var(--ink-50)}
.f-group{margin-bottom:34px}
.f-fieldset{border:1px solid var(--ink-20);padding:28px;margin-bottom:34px}
.f-legend{font-size:15.5px;line-height:1.6;font-weight:500;margin-bottom:18px}
.f-radio{
  display:flex;align-items:center;gap:14px;padding:15px 18px;border:1px solid var(--ink-20);
  cursor:pointer;font-size:15.5px;transition:.2s;margin-bottom:10px;
}
.f-radio:hover{border-color:var(--ink)}
.f-radio input{accent-color:var(--teal);width:16px;height:16px;flex:0 0 auto}
.f-radio:has(input:checked){border-color:var(--teal);background:rgba(63,142,143,.06)}
.f-file{
  width:100%;padding:20px;border:1px dashed var(--ink-20);background:transparent;
  font-family:var(--sans);font-size:14.5px;color:var(--ink-80);cursor:pointer;transition:border-color .25s;
}
.f-file:hover,.f-file:focus{border-color:var(--teal);outline:none}
.f-file::file-selector-button{
  background:var(--ink);color:var(--bone);border:none;padding:12px 22px;
  font-family:var(--sans);font-size:11.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  margin-right:16px;cursor:pointer;
}
.f-note{display:flex;gap:12px;font-size:13px;color:var(--ink-50);line-height:1.6;margin-top:22px}
.f-success{display:none;border:1px solid var(--teal);padding:24px;margin-top:24px;font-size:15.5px}

/* ---------- footer ---------- */
.w-footer{background:var(--ink);color:var(--bone);margin-top:clamp(80px,10vh,130px)}
.w-footer a{color:rgba(234,230,222,.72)}
.w-footer a:hover{color:#fff}
.w-ack{border-bottom:1px solid rgba(234,230,222,.14);padding:52px 0}
.w-ack-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;align-items:start}
.w-ack img{width:64px;height:64px;object-fit:contain}
.w-ack h3{font-weight:300;font-size:clamp(22px,2.2vw,30px);letter-spacing:-.02em;margin-bottom:16px}
.w-ack p{font-size:14.5px;line-height:1.85;color:rgba(234,230,222,.66);max-width:72ch}
.w-foot-main{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;padding:64px 0}
.w-foot-main h4{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:rgba(234,230,222,.45);margin-bottom:20px}
.w-foot-main a{display:block;font-size:15px;padding:6px 0}
.w-foot-main .fl{font-size:15px;color:rgba(234,230,222,.72);padding:6px 0}
.w-foot-bottom{border-top:1px solid rgba(234,230,222,.14);padding:26px 0;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12px;letter-spacing:.06em;color:rgba(234,230,222,.4)}
.w-foot-logo img{width:140px;margin-bottom:20px}
@media(max-width:900px){
  .w-foot-main{grid-template-columns:1fr 1fr}
  .w-foot-main>div{grid-column:span 1!important}
  .w-foot-main>.w-foot-logo{grid-column:span 2!important}
  .w-ack-grid>*{grid-column:span 12!important}
}

/* ---------- misc ---------- */
.char-roll{position:relative;overflow:hidden;display:inline-block;vertical-align:top}
.js-reveal{will-change:transform,opacity}
/* line-reveal wrappers clip with overflow:hidden — pad the WRAPPER so descenders
   (esp. the italic serif) stay inside the clip window, and cancel the added
   height with a negative margin so the line rhythm is unchanged */
h1.display > span, .js-hero h1 > span{padding-bottom:.26em;margin-bottom:-.26em}
/* pre-paint hidden states for the hero reveal — the html.js-anim class is added
   by an inline head script before first paint and removed by its own timeout
   (or by animations.js) so content can never stay hidden if scripts fail */
html.js-anim .js-hero .js-line{transform:translateY(145%)}
html.js-anim .js-hero .js-after{opacity:0}
.img-frame{overflow:hidden}
.img-frame img{transition:transform .8s cubic-bezier(.25,1,.5,1)}
.img-frame:hover img{transform:scale(1.05)}
@media(max-width:900px){
  .grid-12>*{grid-column:span 12!important}
}