/* ============================================================
   ICOSA LTD  ·  Services.  Shares the base token system, with the
   inner-page type scale.
   ============================================================ */
:root{
  --black:#000000; --ink:#0B0B0B; --ink-2:#141414; --ink-3:#060606;
  --white:#FFFFFF; --orange:#FF631F; --orange-hi:#FF8347; --burnt:#C74906;
  --mut-dark:#9C9C9C; --mut-light:#5A5A5A;
  --line-dark:rgba(255,255,255,.15); --line-light:rgba(0,0,0,.15);

  --ff-display:"Rokkitt", Georgia, serif;
  --ff-sans:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --ff-mono:"IBM Plex Mono", ui-monospace, monospace;

  --h1:clamp(2.4rem, 5.2vw, 5rem);
  --h2:clamp(2.1rem, 4.2vw, 4rem);
  --sec:clamp(84px, 7.2vw, 132px);
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- Type scale for this template ---------- */
.h-display{ letter-spacing:-.018em; max-width:20ch; }
.lede{ max-width:80ch; font-size:1.1rem; }
.h-display + p, .h-display + .lede{ margin-top:clamp(22px, 2.4vw, 34px); }
.eyebrow + .h-display{ margin-top:clamp(18px, 2vw, 26px); }

/* ============================================================
   Hero: one frame
   ============================================================ */
.hero{
  position:relative; background:var(--ink); overflow:hidden;
  min-height:calc(100svh - var(--nav-h, 95px));
  display:flex; align-items:center;
  padding-block:clamp(26px, 3.6vh, 60px);
}
.hero .shell{ position:relative; z-index:1; width:100%; }
.hero-mark{
  position:absolute; right:-8%; top:50%; transform:translateY(-50%);
  width:clamp(300px, 38vw, 620px); height:auto; fill:var(--orange);
  opacity:.045; pointer-events:none; z-index:0;
}
.hero h1{
  font-family:var(--ff-display); font-weight:500;
  font-size:var(--h1); line-height:1.03; letter-spacing:-.022em;
  max-width:26ch; margin-top:clamp(18px, 2vw, 28px);
}
.hero h1 em{ font-style:normal; color:var(--orange); }
.hero .lede{ margin-top:clamp(18px, 2vw, 28px); max-width:90ch; }

/* ============================================================
   Section heads
   ============================================================ */
.sec-head{ margin-bottom:clamp(44px, 4.4vw, 72px); }
.sec-head .h-display{ margin-top:clamp(18px, 2vw, 26px); }
.sec-head .lede{ margin-top:clamp(20px, 2.2vw, 30px); max-width:88ch; }

/* Headline caps set to break where the sentence breaks */
#lines      .h-display{ max-width:38ch; }
#engagement .h-display{ max-width:34ch; }
.closing    .h-display{ max-width:34ch; }

/* ============================================================
   Closing band (light on this template)
   ============================================================ */
.closing{ position:relative; overflow:hidden; }
.closing.light{ background:var(--white); color:var(--black); }
.closing .shell{ position:relative; z-index:1; }
.closing-mark{
  position:absolute; right:-6%; bottom:-30%;
  width:clamp(280px, 34vw, 560px); height:auto; fill:var(--orange);
  opacity:.05; pointer-events:none; z-index:0;
}
.closing.light .closing-mark{ fill:var(--burnt); opacity:.055; }
.closing-inner{
  display:grid; grid-template-columns:minmax(0,60fr) minmax(0,40fr);
  gap:clamp(34px, 4vw, 88px); align-items:center;
}
.closing-inner .btn{ margin-top:0; justify-self:start; }

/* ============================================================
   Service index and list
   ============================================================ */
.svc-index{
  list-style:none; display:flex; flex-wrap:wrap; gap:14px clamp(22px, 2.6vw, 44px);
  border-top:1px solid var(--line-dark);
  padding-top:24px; margin-top:clamp(30px, 3.4vw, 52px);
}
.svc-index a{
  font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mut-dark);
  border-bottom:1px solid transparent; padding-bottom:4px;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.svc-index a:hover{ color:var(--orange); border-bottom-color:var(--orange); }

.svc-list{ border-top:1px solid var(--line-light); }
.svc-entry{
  display:grid; grid-template-columns:minmax(0,36fr) minmax(0,64fr);
  gap:clamp(28px, 3.2vw, 76px); align-items:start;
  padding-block:clamp(32px, 3.4vw, 52px);
  border-bottom:1px solid var(--line-light);
  scroll-margin-top:120px;
}
.svc-entry:target{
  box-shadow:inset 3px 0 0 var(--orange);
  padding-left:clamp(18px, 1.8vw, 28px);
  transition:box-shadow .5s var(--ease), padding-left .5s var(--ease);
}
.svc-num{
  font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.2em;
  color:var(--burnt); margin-bottom:14px;
}
.svc-entry h3{
  font-family:var(--ff-display); font-weight:500;
  font-size:clamp(1.5rem, 2.2vw, 2.15rem); line-height:1.14; letter-spacing:-.012em;
  color:var(--black); max-width:26ch;
}
.svc-tag{
  display:inline-block; margin-top:16px;
  font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--mut-light);
  border:1px solid var(--line-light); padding:7px 12px;
}
.svc-body p{ color:var(--mut-light); font-size:1.04rem; max-width:96ch; }
.svc-points{
  list-style:none; display:flex; flex-wrap:wrap;
  gap:10px clamp(20px, 2.4vw, 44px); margin-top:clamp(18px, 2vw, 26px);
}
.svc-points li{
  display:flex; align-items:baseline; gap:10px;
  font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--mut-light);
}
.svc-points li::before{
  content:""; width:7px; height:7px; background:var(--orange);
  transform:rotate(45deg); flex:none;
}

/* ============================================================
   Engagement steps
   ============================================================ */
.steps-grid{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(28px, 3vw, 60px);
  border-top:1px solid var(--line-dark);
  padding-top:clamp(34px, 3.6vw, 54px);
}
.step-num{
  font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.2em;
  color:var(--orange); margin-bottom:16px;
}
.step h3{
  font-family:var(--ff-sans); font-weight:700; font-size:1.1rem;
  color:var(--white); line-height:1.3; margin-bottom:12px;
}
.step p{ color:var(--mut-dark); font-size:.98rem; max-width:40ch; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px){
  .hero{ min-height:0; padding-block:clamp(56px, 8vw, 88px); }
  .hero-mark{ opacity:.045; right:-24%; }
  .svc-entry{ grid-template-columns:minmax(0,1fr); gap:20px; }
  .closing-inner{ grid-template-columns:minmax(0,1fr); gap:clamp(28px,3.4vw,40px); align-items:start; }
  .steps-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .steps-grid{ grid-template-columns:minmax(0,1fr); }
}