/* =========================================================
   Vince Solutions — light-only design system.
   Committed single theme: white paper, ink, one indigo accent.
   Every colour is painted explicitly so the page holds on any host ground.
   ========================================================= */
:root{
  color-scheme:light;

  --paper:#FFFFFF;
  --wash:#F6F6F8;
  --wash-2:#EFEFF3;
  --ink:#0E0E12;
  --ink-2:#3A3A44;
  --muted:#70707E;
  --line:#E4E4EA;
  --line-2:#D2D2DB;

  --indigo:#2E3192;
  --indigo-lift:#4145C4;
  --indigo-wash:#EEEEFB;

  --gutter:clamp(20px,4.5vw,64px);
  --maxw:1360px;

  --r-pill:999px;
  --r-card:14px;
  --r-panel:24px;

  --t-label:0.75rem;
  --t-body:1.0625rem;
  --t-lede:clamp(1.125rem,1rem + 0.65vw,1.5rem);
  --t-h3:clamp(1.25rem,1.1rem + 0.45vw,1.5rem);
  --t-h2:clamp(2.125rem,1.1rem + 3.6vw,3.75rem);
  --t-h1:clamp(2.75rem,1.1rem + 6.4vw,6rem);
}

.vince-theme,.vince-theme *{box-sizing:border-box}

body.vince-theme{
  background:var(--paper);
  color:var(--ink);
  font-family:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--t-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.vince-theme h1,.vince-theme h2,.vince-theme h3,.vince-theme h4{
  margin:0;
  font-weight:500;
  color:var(--ink);
  text-wrap:balance;
}
.vince-theme h1{font-size:var(--t-h1);line-height:0.97;letter-spacing:-0.042em}
.vince-theme h2{font-size:var(--t-h2);line-height:1.01;letter-spacing:-0.034em}
.vince-theme h3{font-size:var(--t-h3);line-height:1.18;letter-spacing:-0.021em}

.vince-theme p{margin:0}
.vince-theme ul,.vince-theme ol{margin:0;padding:0;list-style:none}
.vince-theme img{max-width:100%;display:block}
.vince-theme a{color:var(--indigo);text-decoration:none}
.vince-theme a:hover{text-decoration:underline;text-underline-offset:3px}
.vince-theme :focus-visible{outline:2px solid var(--indigo);outline-offset:3px;border-radius:3px}

.vince-theme .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.vince-theme .label{
  font-size:var(--t-label);font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--muted);
}
.vince-theme .label-indigo{color:var(--indigo)}
.vince-theme .mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
.vince-theme .lede{font-size:var(--t-lede);line-height:1.4;color:var(--ink-2);letter-spacing:-0.014em;max-width:34ch}
.vince-theme .muted{color:var(--muted)}

/* ---------------- buttons ---------------- */
.vince-theme .btn{
  display:inline-flex;align-items:center;gap:10px;
  font-size:0.9375rem;font-weight:600;letter-spacing:-0.005em;
  padding:14px 26px;border-radius:var(--r-pill);
  border:1px solid transparent;white-space:nowrap;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.vince-theme .btn:hover{text-decoration:none;transform:translateY(-1px)}
.vince-theme .btn-solid{background:var(--indigo);color:#FFFFFF;border-color:var(--indigo)}
.vince-theme .btn-solid:hover{background:var(--indigo-lift);border-color:var(--indigo-lift);color:#FFFFFF}
.vince-theme .btn-line{background:transparent;color:var(--ink);border-color:var(--line-2)}
.vince-theme .btn-line:hover{border-color:var(--ink);color:var(--ink)}
.vince-theme .btn-paper{background:#FFFFFF;color:var(--indigo);border-color:#FFFFFF}
.vince-theme .btn-paper:hover{background:var(--indigo-wash);border-color:var(--indigo-wash);color:var(--indigo)}
.vince-theme .btn-onindigo{background:transparent;color:#FFFFFF;border-color:rgba(255,255,255,.42)}
.vince-theme .btn-onindigo:hover{border-color:#FFFFFF;background:rgba(255,255,255,.1);color:#FFFFFF}
.vince-theme .btn-sm{padding:11px 20px;font-size:0.875rem}

/* ---------------- header ---------------- */
.vince-theme .topbar{border-bottom:1px solid var(--line);background:var(--paper)}
.vince-theme .topbar-in{display:flex;flex-wrap:wrap;gap:6px 26px;justify-content:space-between;align-items:center;padding-block:10px}
.vince-theme .topbar a{color:var(--muted);font-size:0.8125rem}
.vince-theme .topbar a:hover{color:var(--ink)}
.vince-theme .topbar-group{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center}

.vince-theme .head{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--line)}
.vince-theme .head-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:16px}
.vince-theme .brand{display:flex;align-items:center;gap:12px}
.vince-theme .brand:hover{text-decoration:none}
.vince-theme .brand svg{flex:none}
.vince-theme .brand-txt{display:flex;flex-direction:column;gap:3px}
.vince-theme .brand-txt b{font-size:1.25rem;font-weight:700;letter-spacing:-0.03em;color:var(--ink);line-height:1}
.vince-theme .brand-txt span{font-size:0.5625rem;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;color:var(--muted);line-height:1}
.vince-theme .nav{display:flex;align-items:center}
.vince-theme .nav ul{display:flex;align-items:center;gap:34px;margin:0;padding:0;list-style:none}
.vince-theme .nav li{margin:0}
.vince-theme .nav a{color:var(--ink-2);font-size:0.9375rem;font-weight:500;white-space:nowrap}
.vince-theme .nav a:hover{color:var(--indigo);text-decoration:none}
@media (max-width:1000px){.vince-theme .nav{display:none}}

/* ---------------- hero: full-bleed technical ground ---------------- */
.vince-theme .hero{
  position:relative;
  isolation:isolate;
  background-color:#0A0C18;
  background-image:url("../img/hero-bg.jpg");
  background-size:cover;
  background-position:58% center;
  padding-block:clamp(72px,10vw,148px);
  color:#FFFFFF;
}
/* Legibility wash: heavier on the left where the type sits, so the fibre
   detail on the right stays visible instead of being flattened out. */
.vince-theme .hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,
      rgba(8,10,22,.95) 0%,
      rgba(8,10,22,.88) 32%,
      rgba(10,13,32,.66) 62%,
      rgba(12,16,40,.5) 100%),
    linear-gradient(to bottom, rgba(8,10,22,.5) 0%, rgba(8,10,22,0) 28%);
}
.vince-theme .hero .label{color:#A9ACF2}
.vince-theme .hero h1{color:#FFFFFF;max-width:15ch;margin-bottom:clamp(24px,3vw,38px)}
.vince-theme .hero .lede{color:rgba(255,255,255,.8)}
.vince-theme .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

.vince-theme .hero-facts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,3vw,40px);
  margin-top:clamp(44px,6vw,76px);
  max-width:760px;
}
@media (max-width:640px){.vince-theme .hero-facts{grid-template-columns:minmax(0,1fr);gap:20px}}
.vince-theme .hero-fact{border-top:1px solid rgba(255,255,255,.26);padding-top:14px}
.vince-theme .hero-fact b{
  display:block;font-size:clamp(1.5rem,1.1rem + 1.2vw,2.125rem);font-weight:500;
  letter-spacing:-0.035em;line-height:1;color:#FFFFFF;
  font-variant-numeric:tabular-nums;
}
.vince-theme .hero-fact span{display:block;margin-top:8px;font-size:0.875rem;color:rgba(255,255,255,.62);line-height:1.4}

.vince-theme .figure{margin:0}
.vince-theme .figure-img{border-radius:var(--r-card);overflow:hidden;background:var(--wash-2)}
.vince-theme .figure-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.vince-theme .figure:hover .figure-img img{transform:scale(1.03)}
.vince-theme .figure figcaption{
  display:flex;flex-wrap:wrap;gap:4px 18px;justify-content:space-between;
  padding-top:12px;font-size:0.75rem;color:var(--muted);
}
.vince-theme .ratio-wide img{aspect-ratio:16/10}
.vince-theme .ratio-tall img{aspect-ratio:4/5}
.vince-theme .ratio-sq img{aspect-ratio:1/1}

/* ---------------- marquee of clients ---------------- */
.vince-theme .clients{padding-block:clamp(40px,5vw,68px);border-top:1px solid var(--line)}
.vince-theme .clients-in{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:center}
@media (max-width:800px){.vince-theme .clients-in{grid-template-columns:minmax(0,1fr);gap:24px}}
.vince-theme .client-row{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(30px,5vw,68px)}
/* Shown in full colour at full strength — these are the strongest credibility
   signal on the page, so they are not dimmed or held back for hover. */
.vince-theme .client-row img{
  height:clamp(62px,6.5vw,86px);width:auto;object-fit:contain;
  transition:transform .25s ease;
}
.vince-theme .client-row img:hover{transform:scale(1.04)}

/* ---------------- sections ---------------- */
.vince-theme .sec{padding-block:clamp(60px,8vw,128px);border-top:1px solid var(--line)}
.vince-theme .sec-head{max-width:var(--maxw)}
.vince-theme .sec-head .label{display:block;margin-bottom:clamp(20px,2.5vw,32px)}
.vince-theme .sec-intro{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(40px,5vw,72px);
}
@media (max-width:860px){.vince-theme .sec-intro{grid-template-columns:minmax(0,1fr);align-items:start;gap:20px}}

/* triad — Design. Install. Maintain. */
.vince-theme .triad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
@media (max-width:820px){.vince-theme .triad{grid-template-columns:minmax(0,1fr);gap:32px}}
.vince-theme .triad-item{border-top:2px solid var(--ink);padding-top:20px}
.vince-theme .triad-item h3{font-size:clamp(1.75rem,1.1rem + 2vw,2.75rem);letter-spacing:-0.035em;line-height:1.02;margin-bottom:12px}
.vince-theme .triad-item p{color:var(--muted);font-size:0.9375rem;line-height:1.5}

/* capability columns */
.vince-theme .caps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.5vw,40px);margin-top:clamp(44px,5vw,72px)}
@media (max-width:880px){.vince-theme .caps{grid-template-columns:minmax(0,1fr);gap:40px}}
.vince-theme .cap-img{
  border-radius:var(--r-card);overflow:hidden;background:var(--wash-2);
  margin-bottom:22px;
}
.vince-theme .cap-img img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.vince-theme .cap:hover .cap-img img{transform:scale(1.04)}
.vince-theme .cap-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--line-2)}
.vince-theme .cap li a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);color:var(--ink);font-size:0.9375rem;font-weight:500}
.vince-theme .cap li a:hover{color:var(--indigo);text-decoration:none}
.vince-theme .cap li a::after{content:"\2192";color:var(--line-2);transition:transform .18s ease,color .18s ease}
.vince-theme .cap li a:hover::after{color:var(--indigo);transform:translateX(4px)}

/* field gallery */
.vince-theme .gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(44px,5vw,72px)}
@media (max-width:820px){.vince-theme .gallery{grid-template-columns:minmax(0,1fr)}}

/* vendor strip */
.vince-theme .vendors-block{margin-top:clamp(52px,6vw,88px);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--line)}
.vince-theme .vendors-block .label{display:block;margin-bottom:8px}
.vince-theme .vendors-note{color:var(--muted);font-size:0.9375rem;max-width:56ch;margin-bottom:clamp(26px,3vw,38px)}
.vince-theme .vendors{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));
  gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
}
.vince-theme .vendor{
  background:var(--paper);
  display:flex;align-items:center;justify-content:center;
  padding:18px 14px;min-height:96px;
  transition:background .2s ease;
}
.vince-theme .vendor:hover{background:var(--wash)}
/* Each file is pre-normalised to a 150x58 box with the mark centred, so a fixed
   display size keeps every logo at equal optical weight with no per-brand CSS. */
.vince-theme .vendor img{width:150px;height:58px;max-width:100%;object-fit:contain}

/* sectors */
.vince-theme .sectors{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(14px,1.6vw,20px)}
.vince-theme .sector{background:var(--wash);border-radius:var(--r-card);padding:28px 26px 32px;transition:background .2s ease}
.vince-theme .sector:hover{background:var(--wash-2)}
.vince-theme .sector .label{display:block;margin-bottom:16px}
.vince-theme .sector h3{margin-bottom:10px}
.vince-theme .sector p{color:var(--muted);font-size:0.9375rem;line-height:1.5}

/* process */
.vince-theme .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(26px,3vw,40px)}
.vince-theme .step{border-top:1px solid var(--line-2);padding-top:18px}
.vince-theme .step:first-child{border-top-color:var(--indigo)}
.vince-theme .step .mono{display:block;font-size:0.75rem;letter-spacing:0.1em;color:var(--indigo);margin-bottom:12px}
.vince-theme .step h3{margin-bottom:8px}
.vince-theme .step p{color:var(--muted);font-size:0.9375rem;line-height:1.5}

/* split */
.vince-theme .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,88px);align-items:center}
@media (max-width:880px){.vince-theme .split{grid-template-columns:minmax(0,1fr)}}
.vince-theme .checks{display:grid;gap:22px;margin-top:34px}
.vince-theme .check{border-top:1px solid var(--line);padding-top:16px}
.vince-theme .check b{display:block;font-weight:600;font-size:1rem;margin-bottom:5px;color:var(--ink)}
.vince-theme .check span{color:var(--muted);font-size:0.9375rem;line-height:1.5}

/* offices */
.vince-theme .offices{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(16px,2vw,24px)}
.vince-theme .office{border:1px solid var(--line);border-radius:var(--r-card);padding:30px 28px 32px;transition:border-color .2s ease}
.vince-theme .office:hover{border-color:var(--line-2)}
.vince-theme .office .label{display:block;margin-bottom:16px}
.vince-theme .office h3{font-size:1.5rem;margin-bottom:12px}
.vince-theme .office address{font-style:normal;color:var(--muted);font-size:0.9375rem;line-height:1.6}
.vince-theme .office dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;margin:22px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.vince-theme .office dt{font-size:0.6875rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);padding-top:4px}
.vince-theme .office dd{margin:0;font-size:0.9375rem}
.vince-theme .office dd a{color:var(--ink);font-weight:500}
.vince-theme .office dd a:hover{color:var(--indigo)}

/* indigo CTA panel */
.vince-theme .cta-sec{padding-block:clamp(60px,8vw,120px)}
.vince-theme .cta{
  background:var(--indigo);color:#FFFFFF;border-radius:var(--r-panel);
  padding:clamp(38px,5.5vw,84px);
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(26px,4vw,56px);align-items:center;
}
@media (max-width:860px){.vince-theme .cta{grid-template-columns:minmax(0,1fr)}}
.vince-theme .cta h2{color:#FFFFFF;margin-bottom:18px}
.vince-theme .cta p{color:rgba(255,255,255,.74);font-size:var(--t-lede);line-height:1.4;max-width:40ch}
.vince-theme .cta .label{color:rgba(255,255,255,.6);display:block;margin-bottom:22px}
.vince-theme .cta-actions{display:flex;flex-wrap:wrap;gap:12px}

/* footer */
.vince-theme .foot{border-top:1px solid var(--line);padding-block:clamp(48px,6vw,80px) 0;background:var(--paper)}
.vince-theme .foot-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:40px 28px}
@media (max-width:900px){.vince-theme .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.vince-theme .foot-grid{grid-template-columns:minmax(0,1fr)}}
.vince-theme .foot h4{font-size:0.75rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.vince-theme .foot a{color:var(--ink-2);font-size:0.9375rem}
.vince-theme .foot a:hover{color:var(--indigo)}
.vince-theme .foot li{margin-bottom:10px}
.vince-theme .foot-about p{color:var(--muted);font-size:0.9375rem;line-height:1.6;max-width:34ch;margin-top:18px}
.vince-theme .foot-bar{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line);padding-block:24px;display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between;align-items:center}
.vince-theme .foot-bar p,.vince-theme .foot-bar a{font-size:0.8125rem;color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  .vince-theme,.vince-theme *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ===================== mobile navigation =====================
   The design hides the desktop nav under 1000px. A real site still needs a way
   to navigate there, so the toggle below drives a full-width panel. */
.vince-theme .nav-toggle{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;flex:none;
  background:transparent;border:1px solid var(--line-2);border-radius:var(--r-pill);
  cursor:pointer;color:var(--ink);
}
.vince-theme .nav-toggle:hover{border-color:var(--ink)}
.vince-theme .nav-toggle span{position:relative;display:block;width:17px;height:1.5px;background:currentColor}
.vince-theme .nav-toggle span::before,.vince-theme .nav-toggle span::after{
  content:"";position:absolute;left:0;width:17px;height:1.5px;background:currentColor;
  transition:transform .2s ease,top .2s ease;
}
.vince-theme .nav-toggle span::before{top:-5.5px}
.vince-theme .nav-toggle span::after{top:5.5px}
.vince-theme .nav-toggle[aria-expanded="true"] span{background:transparent}
.vince-theme .nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.vince-theme .nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

.vince-theme .nav-panel{display:none}
@media (max-width:1000px){
  .vince-theme .nav-toggle{display:inline-flex}
  .vince-theme .head-cta-desktop{display:none}
  .vince-theme .nav-panel{
    display:block;border-top:1px solid var(--line);
    background:var(--paper);
    max-height:0;overflow:hidden;
    transition:max-height .28s ease;
  }
  .vince-theme .nav-panel[data-open="true"]{max-height:80vh;overflow-y:auto}
  .vince-theme .nav-panel ul{padding:8px 0 20px}
  .vince-theme .nav-panel li a{
    display:block;padding:13px 0;border-bottom:1px solid var(--line);
    color:var(--ink);font-size:1.0625rem;font-weight:500;
  }
  .vince-theme .nav-panel li a:hover{color:var(--indigo);text-decoration:none}
  .vince-theme .nav-panel .btn{margin-top:18px;width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .vince-theme .nav-panel{transition:none}
}

/* Accessible skip link, visible only on focus. */
.vince-theme .screen-reader-text{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.vince-theme .screen-reader-text:focus{
  position:fixed;top:12px;left:12px;z-index:200;
  width:auto;height:auto;clip:auto;margin:0;
  padding:12px 20px;background:var(--indigo);color:#fff;border-radius:var(--r-pill);
}