@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500;600;700&display=swap");

:root{
  --sectors-bg:#ffffff;
  --sectors-card:#ffffff;
  --sectors-black:#050505;
  --sectors-text:#111111;
  --sectors-desc:#666862;
  --sectors-muted:#959791;
  --sectors-line:#e3e3dc;
  --sectors-soft:#eeeeea;
  --sectors-shell:min(1320px,calc(100% - 40px));
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--sectors-bg);
  color:var(--sectors-text);
  font-family:Inter,Arial,sans-serif;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  display:block;
  width:100%;
  max-width:100%;
}

.sectors-index{
  overflow:hidden;
  background:var(--sectors-bg);
  color:var(--sectors-text);
}

.sectors-shell{
  width:var(--sectors-shell);
  margin-inline:auto;
}

/* =========================================================
   EYEBROW
   ========================================================= */

.sectors-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--sectors-muted);
  font-size:10px;
  line-height:1;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.sectors-eyebrow::before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:currentColor;
  flex:0 0 auto;
}

/* =========================================================
   BUTTON
   ========================================================= */

.sectors-btn{
  min-height:48px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid var(--sectors-black);
  background:var(--sectors-black);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:11px;
  font-weight:700;
  transition:
    transform .2s ease,
    opacity .2s ease;
}

.sectors-btn:hover{
  transform:translateY(-2px);
  opacity:.88;
}

.sectors-btn--light{
  background:var(--sectors-black);
  color:#fff;
  border-color:var(--sectors-black);
}

/* =========================================================
   HERO
   ========================================================= */

.sectors-hero{
  position:relative;
  min-height:100vh;
  background:var(--sectors-bg);
  color:var(--sectors-black);
}

.sectors-hero__inner{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(400px,.8fr);
  gap:80px;
  align-items:center;
  padding:120px 0 80px;
}

.sectors-hero__copy{
  position:relative;
  z-index:2;
}

.sectors-hero .sectors-eyebrow{
  color:var(--sectors-muted);
}

.sectors-hero h1{
  margin:24px 0 0;
  max-width:900px;
  color:var(--sectors-black);
  font-family:"Inter Tight",Inter,sans-serif;
  font-size:clamp(66px,7.7vw,120px);
  line-height:.88;
  letter-spacing:-.064em;
  font-weight:600;
}

.sectors-hero__copy > p{
  max-width:600px;
  margin:30px 0 0;
  color:var(--sectors-desc);
  font-size:15px;
  line-height:1.75;
}

.sectors-hero .sectors-btn{
  margin-top:34px;
}

/* =========================================================
   HERO VISUAL
   ========================================================= */

.sectors-hero__visual{
  position:relative;
  min-height:650px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.sectors-hero__line{
  width:1px;
  height:78%;
  position:absolute;
  left:50%;
  top:11%;
  background:linear-gradient(
    to bottom,
    transparent,
    #d8d8d1 12%,
    #d8d8d1 88%,
    transparent
  );
}

.sectors-hero__line::before,
.sectors-hero__line::after{
  content:"";
  position:absolute;
  left:50%;
  width:420px;
  height:420px;
  border:1px solid var(--sectors-line);
  border-radius:50%;
  transform:translate(-50%,-50%);
}

.sectors-hero__line::before{
  top:30%;
}

.sectors-hero__line::after{
  top:70%;
}

.sectors-hero__labels{
  position:relative;
  width:100%;
  height:520px;
}

.sectors-hero__labels span{
  position:absolute;
  padding:11px 15px;
  border:1px solid var(--sectors-line);
  border-radius:999px;
  background:var(--sectors-card);
  color:var(--sectors-muted);
  font-size:9px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.1em;
  box-shadow:0 8px 24px rgba(0,0,0,.025);
}

.sectors-hero__labels span:nth-child(1){top:5%;left:14%}
.sectors-hero__labels span:nth-child(2){top:25%;right:7%}
.sectors-hero__labels span:nth-child(3){top:48%;left:2%}
.sectors-hero__labels span:nth-child(4){bottom:20%;right:12%}
.sectors-hero__labels span:nth-child(5){bottom:3%;left:22%}

/* =========================================================
   INTRO
   ========================================================= */

.sectors-intro{
  padding:120px 0;
  background:var(--sectors-bg);
}

.sectors-intro__grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(300px,.62fr);
  gap:90px;
  align-items:start;
}

.sectors-intro h2{
  margin:25px 0 0;
  max-width:800px;
  color:var(--sectors-black);
  font-family:"Inter Tight",Inter,sans-serif;
  font-size:clamp(50px,6vw,84px);
  line-height:.94;
  letter-spacing:-.057em;
  font-weight:600;
}

.sectors-intro__copy{
  padding-top:37px;
}

.sectors-intro__copy p{
  margin:0;
  color:var(--sectors-desc);
  font-size:15px;
  line-height:1.75;
}

.sectors-intro__copy p + p{
  margin-top:22px;
}

/* =========================================================
   SECTOR LIST
   ========================================================= */

.sectors-list{
  padding-bottom:130px;
  background:var(--sectors-bg);
}

.sector-row{
  position:relative;
  display:grid;
  grid-template-columns:52px minmax(0,1.05fr) minmax(330px,.8fr);
  gap:34px;
  align-items:center;
  margin-bottom:18px;
  padding:24px;
  border:1px solid var(--sectors-line);
  border-radius:26px;
  background:var(--sectors-card);
  box-shadow:0 8px 28px rgba(0,0,0,.02);
}

.sector-row--reverse{
  grid-template-columns:52px minmax(330px,.8fr) minmax(0,1.05fr);
}

.sector-row--reverse .sector-row__image{
  grid-column:3;
  grid-row:1;
}

.sector-row--reverse .sector-row__content{
  grid-column:2;
  grid-row:1;
}

.sector-row__number{
  align-self:start;
  padding-top:4px;
  color:var(--sectors-muted);
  font-size:9px;
  letter-spacing:.08em;
}

.sector-row__image{
  display:block;
  overflow:hidden;
  aspect-ratio:16/10;
  border-radius:20px;
  background:var(--sectors-soft);
}

.sector-row__image img{
  height:100%;
  object-fit:cover;
  filter:saturate(.82);
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}

.sector-row__image:hover img{
  transform:scale(1.03);
}

.sector-row__content{
  padding:12px 10px;
}

.sector-row__content h2{
  margin:17px 0 0;
  color:var(--sectors-black);
  font-family:"Inter Tight",Inter,sans-serif;
  font-size:clamp(40px,4.2vw,62px);
  line-height:.95;
  letter-spacing:-.052em;
  font-weight:600;
}

.sector-row__content h2 a{
  color:var(--sectors-black);
}

.sector-row__content h2 a:hover{
  opacity:.64;
}

.sector-row__content > p{
  max-width:560px;
  margin:22px 0 0;
  color:var(--sectors-desc);
  font-size:14px;
  line-height:1.7;
}

.sector-row__tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:26px;
}

.sector-row__tags span{
  padding:8px 11px;
  border:1px solid var(--sectors-line);
  border-radius:999px;
  background:#fafaf8;
  color:var(--sectors-muted);
  font-size:9px;
  font-weight:600;
}

.sector-row__cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:32px;
  color:var(--sectors-black);
  font-size:11px;
  font-weight:700;
}

.sector-row__cta span{
  transition:transform .2s ease;
}

.sector-row__cta:hover span{
  transform:translate(2px,-2px);
}

/* =========================================================
   METHOD
   ========================================================= */

.sectors-method{
  padding:120px 0;
  background:var(--sectors-bg);
}

.sectors-method__head{
  display:grid;
  grid-template-columns:.55fr 1.15fr;
  gap:60px;
  align-items:start;
}

.sectors-method__head h2{
  margin:0;
  max-width:900px;
  color:var(--sectors-black);
  font-family:"Inter Tight",Inter,sans-serif;
  font-size:clamp(48px,6vw,86px);
  line-height:.94;
  letter-spacing:-.058em;
  font-weight:600;
}

.sectors-method__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-top:70px;
}

.sectors-method__grid article{
  min-height:280px;
  padding:24px;
  border:1px solid var(--sectors-line);
  border-radius:20px;
  background:var(--sectors-card);
}

.sectors-method__grid article > span{
  color:var(--sectors-muted);
  font-size:9px;
  font-weight:600;
}

.sectors-method__grid h3{
  margin:90px 0 0;
  color:var(--sectors-black);
  font-family:"Inter Tight",Inter,sans-serif;
  font-size:30px;
  letter-spacing:-.04em;
  font-weight:600;
}

.sectors-method__grid p{
  margin:14px 0 0;
  color:var(--sectors-desc);
  font-size:12px;
  line-height:1.65;
}

/* =========================================================
   CTA
   ========================================================= */

.sectors-cta{
  padding:120px 0;
  background:var(--sectors-card);
  color:var(--sectors-black);
  border-top:1px solid var(--sectors-line);
}

.sectors-cta .sectors-eyebrow{
  color:var(--sectors-muted);
}

.sectors-cta__inner{
  display:grid;
  grid-template-columns:1.08fr .72fr;
  gap:100px;
  align-items:end;
}

.sectors-cta h2{
  margin:24px 0 0;
  max-width:800px;
  color:var(--sectors-black);
  font-family:"Inter Tight",Inter,sans-serif;
  font-size:clamp(54px,6.7vw,94px);
  line-height:.92;
  letter-spacing:-.06em;
  font-weight:600;
}

.sectors-cta__right p{
  margin:0;
  max-width:560px;
  color:var(--sectors-desc);
  font-size:14px;
  line-height:1.75;
}

.sectors-cta__right .sectors-btn{
  margin-top:30px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:980px){
  .sectors-hero__inner{
    grid-template-columns:1fr;
    padding-top:140px;
  }

  .sectors-hero__visual{
    min-height:450px;
  }

  .sectors-intro__grid,
  .sectors-method__head,
  .sectors-cta__inner{
    grid-template-columns:1fr;
    gap:35px;
  }

  .sector-row,
  .sector-row--reverse{
    grid-template-columns:40px 1fr;
    gap:24px;
  }

  .sector-row__image,
  .sector-row--reverse .sector-row__image{
    grid-column:2;
    grid-row:auto;
  }

  .sector-row__content,
  .sector-row--reverse .sector-row__content{
    grid-column:2;
    grid-row:auto;
  }

  .sector-row__number{
    grid-row:1 / span 2;
  }

  .sectors-method__grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:650px){
  :root{
    --sectors-shell:calc(100% - 24px);
  }

  .sectors-hero__inner{
    min-height:100svh;
    padding:115px 0 60px;
    gap:30px;
  }

  .sectors-hero h1{
    font-size:58px;
  }

  .sectors-hero__copy > p{
    font-size:14px;
  }

  .sectors-hero__visual{
    min-height:320px;
  }

  .sectors-hero__labels{
    height:300px;
  }

  .sectors-hero__line::before,
  .sectors-hero__line::after{
    width:240px;
    height:240px;
  }

  .sectors-intro{
    padding:80px 0;
  }

  .sectors-intro h2{
    font-size:46px;
  }

  .sectors-list{
    padding-bottom:80px;
  }

  .sector-row,
  .sector-row--reverse{
    grid-template-columns:1fr;
    padding:14px;
    margin-bottom:14px;
    border-radius:20px;
  }

  .sector-row__number,
  .sector-row__image,
  .sector-row__content,
  .sector-row--reverse .sector-row__image,
  .sector-row--reverse .sector-row__content{
    grid-column:1;
    grid-row:auto;
  }

  .sector-row__number{
    padding:4px 4px 0;
  }

  .sector-row__image{
    border-radius:16px;
  }

  .sector-row__content{
    padding:8px 4px 10px;
  }

  .sector-row__content h2{
    font-size:42px;
  }

  .sectors-method{
    padding:80px 0;
  }

  .sectors-method__head h2{
    font-size:46px;
  }

  .sectors-method__grid{
    grid-template-columns:1fr;
    margin-top:50px;
  }

  .sectors-method__grid article{
    min-height:0;
    padding:22px;
  }

  .sectors-method__grid h3{
    margin-top:38px;
  }

  .sectors-cta{
    padding:82px 0;
  }

  .sectors-cta h2{
    font-size:50px;
  }
}