/* ============================================================
   SwissXL AG — theme styles (Swiss International / Grid)
   International Typographic Style · all-grotesque · red as rare punctuation
   Ported from mock-up-design/3-swiss-grid.html
   ============================================================ */

/* ---------- Inter (self-hosted, latin) ---------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-600.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-700.woff2') format('woff2');}

:root{
  --paper:#FAFAF8;
  --ink:#231F20;
  --grey:#7C7C7C;
  --hairline:#E8E8E6;
  --red:#ED2125;

  --col-gap:24px;
  --page-x:clamp(20px, 5vw, 72px);
  --maxw:1360px;

  --f-xs:11px;
  --lh-tight:1.04;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip;}
body{overflow-x:clip;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  font-feature-settings:"kern" 1,"liga" 1,"cv05" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}

::selection{background:var(--ink);color:var(--paper);}

/* ---------- Layout container + grid ---------- */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding-left:var(--page-x);
  padding-right:var(--page-x);
}
.grid12{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--col-gap);
}

/* ---------- Type system ---------- */
.eyebrow{
  font-size:var(--f-xs);
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--grey);
  line-height:1;
}
.sec-num{
  font-size:var(--f-xs);
  font-weight:600;
  letter-spacing:.18em;
  color:var(--red);
  line-height:1;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-0.02em;}
h2.section-title{
  font-size:clamp(30px,4.6vw,58px);
  line-height:1.02;
  letter-spacing:-0.03em;
}
p{margin:0;}
.lede{
  font-size:clamp(18px,2vw,23px);
  line-height:1.5;
  letter-spacing:-0.01em;
  color:var(--ink);
  font-weight:400;
}
.body-grey{color:var(--grey);}

/* ---------- Fade-in / rise on scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ===========================================================
   NAV
   =========================================================== */
header.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  background:rgba(250,250,248,0.88);
  backdrop-filter:saturate(1.2) blur(10px);
  -webkit-backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--hairline);
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:66px;
}
.nav-logo img{height:28px;width:auto;}
nav.nav-links{display:flex;gap:34px;}
nav.nav-links a{
  position:relative;
  font-size:var(--f-xs);
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink);
  padding:6px 0;
  transition:color .25s var(--ease);
}
nav.nav-links a::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  height:1.5px;width:0;
  background:var(--red);
  transition:width .28s var(--ease);
}
nav.nav-links a:hover,
nav.nav-links a.active{color:var(--red);}
nav.nav-links a:hover::after,
nav.nav-links a.active::after{width:100%;}

.nav-menu-btn{display:none;}
.mobile-menu{display:none;}   /* hidden on desktop — only revealed via the Menu toggle in the mobile breakpoint */

/* ===========================================================
   HERO — 01
   =========================================================== */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  border-bottom:1px solid var(--hairline);
}
.hero-bg{
  position:absolute;
  inset:-8% 0 -8% 0;
  z-index:0;
  will-change:transform;
}
.hero-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(1) contrast(1.05);
}
.hero-bg::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,
     rgba(250,250,248,0.22) 0%,
     rgba(250,250,248,0.15) 24%,
     rgba(250,250,248,0.55) 54%,
     rgba(250,250,248,0.82) 100%);
}
.hero-grid{
  position:relative;
  z-index:2;
  width:100%;
  padding-bottom:clamp(48px,8vh,110px);
  padding-top:130px;
}
.hero-meta{
  grid-column:1 / 4;
  align-self:start;
  padding-top:8px;
}
.hero-main{grid-column:1 / 12;}
.hero-headline{
  font-size:clamp(44px,8.6vw,124px);
  line-height:0.98;
  letter-spacing:-0.045em;
  font-weight:700;
  margin-top:24px;
  text-shadow:0 0 26px rgba(250,250,248,0.92), 0 0 8px rgba(250,250,248,0.85);
}
.hero-headline .l2{display:block;color:var(--ink);}
.hero-headline .redmark{color:var(--red);}
.hero-subline{
  grid-column:1 / 8;
  margin-top:34px;
  font-size:clamp(16px,1.6vw,20px);
  line-height:1.5;
  color:var(--ink);
  max-width:640px;
  text-shadow:0 0 12px rgba(250,250,248,0.96), 0 0 4px rgba(250,250,248,0.9);
}
/* vertical hairline that visualises the grid on hero */
.hero-rule{
  position:absolute;
  top:0;bottom:0;
  width:1px;
  background:var(--hairline);
  z-index:1;
}
.scroll-cue{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-top:52px;
  font-size:var(--f-xs);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--grey);
}
.scroll-cue .line{
  display:block;width:44px;height:1px;background:var(--ink);
  transform-origin:left;
  animation:cuepulse 2.6s var(--ease) infinite;
}
@keyframes cuepulse{
  0%,100%{transform:scaleX(.5);opacity:.5;}
  50%{transform:scaleX(1);opacity:1;}
}

/* ===========================================================
   Section scaffolding
   =========================================================== */
section{position:relative;}
.band{padding:clamp(80px,11vh,150px) 0;}
.band + .band{border-top:1px solid var(--hairline);}

.sec-head{
  grid-column:1 / 4;
  align-self:start;
  position:sticky;
  top:96px;
}
.sec-head .rule{
  width:38px;height:2px;background:var(--red);
  margin:16px 0 20px;
}
.sec-body{grid-column:5 / 13;}

@media (max-width:900px){
  .sec-head{position:static;}
}

/* ---------- ABOUT — 02 ---------- */
#about .about-lede{
  font-size:clamp(22px,2.9vw,38px);
  line-height:1.28;
  letter-spacing:-0.02em;
  font-weight:500;
  max-width:20ch;
}
#about .about-body{
  grid-column:5 / 11;
  margin-top:30px;
  font-size:18px;
  line-height:1.62;
  color:var(--grey);
}
#about .sec-body{grid-column:5 / 13;}

/* ---------- WHAT WE DO — items row ---------- */
.whatwedo{margin-top:clamp(52px,7vh,92px);}
.wwd-grid{
  grid-column:1 / 13;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  column-gap:var(--col-gap);
  border-top:1px solid var(--ink);
}
.wwd-item{
  padding:28px 0 0;
  border-right:1px solid var(--hairline);
  padding-right:24px;
  min-height:230px;
  transition:transform .4s var(--ease);
}
.wwd-item:last-child{border-right:none;}
.wwd-item .idx{
  font-size:var(--f-xs);font-weight:600;letter-spacing:.18em;
  color:var(--grey);font-variant-numeric:tabular-nums;
}
.wwd-item h3{
  font-size:clamp(20px,2vw,26px);
  line-height:1.1;
  letter-spacing:-0.02em;
  margin-top:56px;
}
.wwd-item p{
  margin-top:16px;
  color:var(--grey);
  font-size:16px;
  line-height:1.55;
  max-width:30ch;
}
.wwd-item .topline{
  height:2px;width:0;background:var(--red);
  margin-bottom:-2px;position:relative;top:-30px;
  transition:width .45s var(--ease);
}
.wwd-item:hover{transform:translateY(-4px);}
.wwd-item:hover .topline{width:56px;}
.wwd-item:hover h3{color:var(--ink);}

/* ---------- PULL QUOTE ---------- */
.quote-band{
  position:relative;
  overflow:hidden;
  padding:clamp(120px,22vh,240px) 0;
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  background:var(--ink);
  color:var(--paper);
}
.quote-bg{position:absolute;inset:0;z-index:0;}
.quote-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04);}
.quote-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,18,0.55) 0%,rgba(20,18,18,0.72) 100%);}
.quote-band .wrap{position:relative;z-index:1;}
.quote-band .qnum{color:var(--red);}
.pull-quote{
  grid-column:1 / 11;
  font-size:clamp(34px,6.4vw,86px);
  line-height:1.02;
  letter-spacing:-0.035em;
  font-weight:700;
  margin-top:26px;
}
.quote-band .redmark{color:var(--red);}
.quote-band .eyebrow{color:rgba(250,250,248,0.55);}

/* ---------- PRINCIPLES — 4 ---------- */
.principles-grid{
  grid-column:5 / 13;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  column-gap:var(--col-gap);
  row-gap:0;
}
.principle{
  padding:34px 0 34px;
  border-top:1px solid var(--hairline);
  padding-right:26px;
}
.principle .pidx{
  font-size:var(--f-xs);font-weight:600;letter-spacing:.18em;
  color:var(--red);font-variant-numeric:tabular-nums;
}
.principle h3{
  font-size:clamp(19px,1.8vw,24px);
  letter-spacing:-0.02em;
  margin-top:12px;
}
.principle p{
  margin-top:12px;color:var(--grey);font-size:16px;line-height:1.55;
}

/* ---------- APPROACH — 04 ---------- */
#approach .approach-body{
  font-size:clamp(20px,2.3vw,29px);
  line-height:1.42;
  letter-spacing:-0.015em;
  font-weight:400;
  max-width:48ch;
}
#approach .sec-body{grid-column:5 / 12;}
.approach-image{
  grid-column:1 / 13;
  margin-top:clamp(52px,7vh,92px);
  overflow:hidden;
  border:1px solid var(--hairline);
}
.approach-image img{
  width:100%;
  aspect-ratio:16/6.4;
  object-fit:cover;
  filter:grayscale(1) contrast(1.05);
  transition:transform 1.1s var(--ease);
}
.approach-image:hover img{transform:scale(1.03);}

/* ---------- INVESTMENTS — 05 ---------- */
.inv-list{grid-column:5 / 13;border-top:1px solid var(--ink);}
.inv-row{
  display:grid;
  grid-template-columns:56px 1fr auto;
  align-items:baseline;
  column-gap:24px;
  padding:26px 0;
  border-bottom:1px solid var(--hairline);
  transition:padding-left .35s var(--ease), color .35s var(--ease);
}
.inv-row .num{
  font-size:var(--f-xs);font-weight:600;letter-spacing:.16em;
  color:var(--grey);font-variant-numeric:tabular-nums;
}
.inv-row .label{
  font-size:clamp(22px,3.2vw,42px);
  letter-spacing:-0.025em;
  font-weight:600;
  line-height:1;
}
.inv-row .tick{
  width:0;height:1px;background:var(--red);
  transition:width .35s var(--ease);
  align-self:center;
}
.inv-row:hover{padding-left:16px;}
.inv-row:hover .label{color:var(--red);}
.inv-row:hover .tick{width:46px;}

/* ---------- CONTACT — 06 ---------- */
#contact .contact-intro{
  font-size:clamp(18px,1.7vw,20px);
  line-height:1.6;
  color:var(--grey);
  max-width:46ch;
  margin-top:6px;
}
#contact .sec-body{grid-column:5 / 13;}
.form{
  margin-top:clamp(40px,6vh,64px);
  display:grid;
  grid-template-columns:repeat(2,1fr);
  column-gap:var(--col-gap);
  row-gap:0;
  max-width:820px;
}
.field{position:relative;padding-top:30px;padding-bottom:12px;border-bottom:1px dotted rgba(20,18,18,.34);}
.field.full{grid-column:1 / 3;}
.field label{
  position:absolute;top:0;left:0;
  font-size:var(--f-xs);font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grey);
}
.field input,
.field textarea{
  width:100%;
  border:none;
  background:transparent;
  font-family:inherit;
  font-size:18px;
  color:var(--ink);
  line-height:1.5;
  padding:6px 0 4px;
  resize:none;
}
.field textarea{min-height:96px;}
.field input:focus,
.field textarea:focus{outline:none;}
.field::after{
  content:"";
  position:absolute;left:0;bottom:-1px;
  height:1.5px;width:0;background:var(--red);
  transition:width .3s var(--ease);
}
.field:focus-within::after{width:100%;}
.field:focus-within{border-bottom-color:transparent;}
.field:focus-within label{color:var(--ink);}

.form-actions{
  grid-column:1 / 3;
  margin-top:34px;
  display:flex;
  justify-content:flex-start;
}
.btn-send{
  appearance:none;
  border:none;
  cursor:pointer;
  background:var(--red);
  color:#fff;
  font-family:inherit;
  font-size:var(--f-xs);
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  padding:17px 46px;
  transition:transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.btn-send:hover{
  background:#cf1a1e;
  transform:translateY(-2px);
  box-shadow:0 10px 26px -12px rgba(237,33,37,.6);
}
.btn-send:active{transform:translateY(0);}

/* CF7 messages (kept minimal / on-brand) */
.wpcf7-response-output{
  margin:22px 0 0 !important;border:none !important;
  padding:12px 0 0 !important;font-size:14px;color:var(--grey);
  border-top:1px solid var(--hairline) !important;
}
.wpcf7-not-valid-tip{color:var(--red);font-size:12px;}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output{color:var(--red);}
/* CF7 form reuses the same grid + field styling */
.wpcf7-form{
  margin-top:clamp(40px,6vh,64px);
  display:grid;grid-template-columns:repeat(2,1fr);
  column-gap:var(--col-gap);row-gap:0;max-width:820px;
}
.field .wpcf7-form-control-wrap{display:block;}
.hp{position:absolute !important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.wpcf7-spinner{margin:16px 0 0 10px;}
@media (max-width:900px){ .wpcf7-form{grid-template-columns:1fr;} }

/* ---------- FOOTER ---------- */
footer.site-foot{
  border-top:1px solid var(--ink);
  padding:44px 0 40px;
}
.foot-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.foot-left{display:flex;align-items:center;gap:22px;}
.foot-left img{height:22px;width:auto;}
.foot-left .copy{font-size:var(--f-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--grey);}
.foot-links{display:flex;gap:26px;}
.foot-links a{
  font-size:var(--f-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--grey);
  transition:color .25s var(--ease);
}
.foot-links a:hover{color:var(--red);}

/* ---------- Legal / page template ---------- */
.legal{padding:150px 0 clamp(80px,11vh,140px);}
.legal .sec-body{grid-column:4 / 11;}
.legal h1{font-size:clamp(30px,4vw,50px);letter-spacing:-0.03em;margin-bottom:8px;}
.legal .eyebrow{margin-bottom:26px;}
.legal-body{color:var(--ink);font-size:17px;line-height:1.7;}
.legal-body h2{font-size:22px;margin:34px 0 10px;letter-spacing:-0.02em;}
.legal-body p{margin:0 0 14px;}
.legal-body a{color:var(--red);}
.legal-back{display:inline-block;margin-top:34px;font-size:var(--f-xs);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);}
.legal-back:hover{color:var(--red);}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:900px){
  nav.nav-links{display:none;}          /* collapse desktop nav (specificity: beat nav.nav-links) */

  /* less whitespace + tighter rhythm on small screens */
  .band{padding:clamp(50px,8vh,80px) 0;}
  .hero{min-height:90vh;}
  .hero-grid{padding-top:96px;padding-bottom:clamp(34px,6vh,60px);}
  .quote-band{padding:clamp(66px,12vh,110px) 0;}
  .whatwedo{margin-top:clamp(32px,5vh,52px);}
  .wrap{padding-left:20px;padding-right:20px;}

  .nav-menu-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:none;border:none;cursor:pointer;
    font-size:var(--f-xs);font-weight:600;letter-spacing:.2em;
    text-transform:uppercase;color:var(--ink);padding:8px 0;
  }
  .mobile-menu{
    border-top:1px solid var(--hairline);
    background:var(--paper);
  }
  .mobile-menu.open{display:block;}
  .mobile-menu a{
    display:block;
    padding:16px var(--page-x);
    font-size:var(--f-xs);font-weight:600;letter-spacing:.2em;
    text-transform:uppercase;color:var(--ink);
    border-bottom:1px solid var(--hairline);
  }
  .mobile-menu a:hover{color:var(--red);}

  .grid12{grid-template-columns:1fr;}
  .hero-rule{display:none;}   /* decorative grid hairlines are a desktop-only conceit */
  .sec-head,.sec-body,
  #about .about-body,#about .sec-body,
  #approach .sec-body,
  .principles-grid,.inv-list,
  .hero-meta,.hero-main,.hero-subline,
  .pull-quote,.wwd-grid,.approach-image,
  .legal .sec-body{
    grid-column:1 / -1 !important;
  }
  .sec-head{margin-bottom:36px;}
  .wwd-grid{grid-template-columns:1fr;border-top:1px solid var(--ink);}
  .wwd-item{border-right:none;border-bottom:1px solid var(--hairline);min-height:0;padding-bottom:30px;padding-right:0;}
  .wwd-item:last-child{border-bottom:none;}
  .wwd-item h3{margin-top:24px;}
  .wwd-item .topline{position:static;top:0;margin-bottom:14px;}
  .wwd-item:hover .topline{width:56px;}
  .principles-grid{grid-template-columns:1fr;}
  .form{grid-template-columns:1fr;}
  .field.full,.form-actions{grid-column:1 / -1;}
  .inv-row .label{font-size:clamp(26px,8vw,40px);}
}
@media (max-width:520px){
  .foot-inner{flex-direction:column;align-items:flex-start;}
  .hero-headline{margin-top:16px;}
}