/* ============================================================
   ICOSA LTD  ·  Home
   Design tokens. Brand: black, bold orange, burnt orange, white.
   ============================================================ */
:root{
  --black:      #000000;
  --ink:        #0B0B0B;   /* page ground */
  --ink-2:      #141414;   /* raised surface */
  --ink-3:      #060606;   /* footer depth */
  --white:      #FFFFFF;
  --orange:     #FF631F;   /* bold orange, primary accent */
  --orange-hi:  #FF8347;
  --burnt:      #C74906;   /* burnt orange, depth and light grounds */
  --mut-dark:   #9C9C9C;   /* muted text on black */
  --mut-light:  #5A5A5A;   /* muted text on white */
  --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.9rem, 7vw, 7rem);
  --h2:  clamp(2.2rem, 4.6vw, 4.4rem);
  --sec: clamp(96px, 9vw, 160px);
  --ease: cubic-bezier(.16,1,.3,1);
}

/* ---------- Type scale for this template ---------- */
.h-display{ letter-spacing:-.015em; max-width:22ch; }
.lede{ max-width:78ch; font-size:1.125rem; }
.h-display + p, .h-display + .lede{ margin-top:clamp(24px, 2.6vw, 38px); }
.eyebrow + .h-display{ margin-top:clamp(20px, 2.2vw, 28px); }
.sec-head{ margin-bottom:clamp(52px, 5.2vw, 88px); }
.sec-head .h-display{ margin-top:clamp(20px, 2.2vw, 28px); }
.sec-head .lede{ margin-top:clamp(20px, 2.2vw, 28px); }

/* ============================================================
   Hero
   ============================================================ */
.hero{ position:relative; background:var(--ink); overflow:hidden; }
.hero-shell{ position:relative; padding-top:clamp(84px, 9vw, 140px); padding-bottom:clamp(28px, 3vw, 44px); }
.ico-stage{
  position:absolute; z-index:0;
  top:47%; right:-2%;
  width:clamp(320px, 33vw, 580px); aspect-ratio:1;
  transform:translateY(-52%);
}
.ico-stage svg{ width:100%; height:100%; overflow:visible; }
.hero-content{ position:relative; z-index:1; }
.hero-headline{
  font-family:var(--ff-display); font-weight:500;
  font-size:var(--h1); line-height:1.02; letter-spacing:-.022em;
  margin-top:clamp(26px, 3vw, 40px);
}
.hero-headline .line{ display:block; }
.hero-headline .line.accent{ color:var(--orange); }
.hero-sub{
  margin-top:clamp(26px, 3vw, 40px);
  max-width:88ch; font-size:1.16rem; color:var(--mut-dark);
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(32px, 3.4vw, 50px); }
.hero-foot{
  position:relative; z-index:1;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:18px clamp(28px, 4vw, 76px);
  border-top:1px solid var(--line-dark);
  padding-top:26px; margin-top:clamp(46px, 5vw, 78px);
  font-family:var(--ff-mono); font-size:.76rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mut-dark);
}
.hero-stat b{ color:var(--orange); font-weight:500; margin-right:8px; }
.hero-scroll{ margin-left:auto; display:flex; align-items:center; gap:10px; color:var(--mut-dark); }

/* ============================================================
   Client marquee  (deliberate full bleed)
   ============================================================ */
.marquee{
  border-block:1px solid var(--line-dark);
  background:var(--ink-2); overflow:hidden; padding-block:22px;
}
.mq-track{ display:flex; width:max-content; animation:mq 46s linear infinite; }
.mq-track span{
  display:flex; align-items:center; gap:clamp(30px, 4vw, 66px);
  padding-right:clamp(30px, 4vw, 66px);
  font-family:var(--ff-mono); font-size:.8rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.5); white-space:nowrap;
}
.mq-track i{ font-style:normal; color:var(--orange); }
@keyframes mq{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .mq-track{ animation:none; } }

/* ============================================================
   The case for looking  (white)
   ============================================================ */
.leak-grid{
  display:grid; grid-template-columns:minmax(0,63fr) minmax(0,37fr);
  gap:clamp(44px, 5vw, 96px); align-items:center;
}
.leak-copy .big-num{
  font-family:var(--ff-display); font-weight:600;
  font-size:clamp(4.4rem, 9vw, 9rem); line-height:1; letter-spacing:-.03em;
  color:var(--burnt); display:flex; align-items:flex-start; gap:clamp(20px,2vw,32px);
  margin-block:clamp(30px, 3.4vw, 52px) 16px;
}
.leak-copy .big-num small{
  font-family:var(--ff-mono); font-weight:400; font-size:.74rem; color:var(--mut-light);
  letter-spacing:.18em; text-transform:uppercase;
  max-width:44ch; line-height:1.85; padding-top:clamp(.6rem, 1.2vw, 1.1rem);
}
.leak-copy p{ color:var(--mut-light); max-width:92ch; }
.leak-copy .kicker{ color:var(--black); font-weight:600; }

.calc{ border:1px solid var(--line-light); padding:clamp(28px, 3vw, 44px); background:#FAF9F8; }
.calc-label{
  font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--mut-light);
}
.calc-spend{
  font-family:var(--ff-display); font-weight:500; font-size:clamp(2rem, 3vw, 2.9rem);
  line-height:1.1; margin-top:10px; color:var(--black);
}
.calc-range{
  -webkit-appearance:none; appearance:none; width:100%; height:2px;
  background:var(--line-light); margin-block:clamp(24px,2.6vw,34px); cursor:pointer;
}
.calc-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:20px; height:20px;
  background:var(--orange); border:none; cursor:pointer;
}
.calc-range::-moz-range-thumb{
  width:20px; height:20px; background:var(--orange); border:none; cursor:pointer;
}
.calc-range:focus-visible{ outline:2px solid var(--burnt); outline-offset:6px; }
.calc-out{
  font-family:var(--ff-display); font-weight:600; font-size:clamp(2.6rem, 4.4vw, 4rem);
  line-height:1; color:var(--burnt); margin-top:10px; letter-spacing:-.02em;
}
.calc-band{ font-family:var(--ff-mono); font-size:.74rem; color:var(--mut-light); margin-top:14px; }
.calc-cta{
  display:inline-flex; align-items:center; gap:10px; margin-top:clamp(24px,2.6vw,34px);
  font-weight:600; font-size:.95rem; color:var(--black);
  border-bottom:2px solid var(--orange); padding-bottom:6px;
  transition:color .3s var(--ease);
}
.calc-cta:hover{ color:var(--burnt); }
/* The design gave this link the same arrow as the buttons but none of the
   motion, because .arr is only animated under .btn. Matched up here. */
.calc-cta .arr{ transition:transform .35s var(--ease); }
.calc-cta:hover .arr{ transform:translateX(5px); }
.calc-divide{ border-top:1px solid var(--line-light); margin-block:clamp(22px,2.4vw,30px); }

/* ============================================================
   Services  (black)
   ============================================================ */
.svc-row{
  display:grid; align-items:center;
  grid-template-columns:72px minmax(0,39fr) minmax(0,45fr) minmax(244px,16fr);
  gap:clamp(18px, 2.4vw, 44px);
  padding-block:clamp(30px, 3.2vw, 46px);
  border-top:1px solid var(--line-dark);
  transition:background-color .8s var(--ease), border-color .8s var(--ease);
}
.svc-row:last-of-type{ border-bottom:1px solid var(--line-dark); }
.svc-row:hover{ background-color:var(--ink-2); }
.svc-glyph{ width:44px; height:48.8px; fill:var(--orange); opacity:.55; transition:opacity .4s var(--ease), transform .6s var(--ease); }
.svc-row:hover .svc-glyph{ opacity:1; transform:rotate(-12deg); }
.svc-row h3{
  font-family:var(--ff-display); font-weight:500;
  font-size:clamp(1.5rem, 2.2vw, 2.1rem); line-height:1.15; letter-spacing:-.012em;
}
.svc-desc{ color:var(--mut-dark); font-size:1rem; max-width:60ch; }
.svc-tag{
  justify-self:end; margin-right:clamp(6px, 1vw, 18px);
  font-family:var(--ff-mono); font-size:.69rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--mut-dark);
  border:1px solid var(--line-dark); padding:8px 13px; white-space:nowrap;
}
.svc-note{
  margin-top:clamp(38px, 4vw, 62px);
  color:var(--mut-dark); font-size:1.02rem; max-width:84ch;
}
.svc-note a{
  color:var(--white); font-weight:600; border-bottom:2px solid var(--orange);
  padding-bottom:3px; margin-left:8px; transition:color .3s var(--ease);
}
.svc-note a:hover{ color:var(--orange); }
#services .sec-head .lede{ max-width:84ch; }

/* ============================================================
   How we work  (white)
   ============================================================ */
.ethos-head{ margin-bottom:clamp(54px, 5.4vw, 88px); }
.ethos-head .h-display{ max-width:20ch; margin-top:clamp(20px,2.2vw,28px); }
.ethos-grid{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(30px, 3.2vw, 60px);
  border-top:1px solid var(--line-light);
  padding-top:clamp(40px, 4vw, 64px);
}
.ethos-item h3{
  font-family:var(--ff-sans); font-weight:700; font-size:1.14rem;
  margin-bottom:16px; color:var(--black); line-height:1.3;
}
.ethos-item h3::before{
  content:""; display:block; width:28px; height:3px; background:var(--orange);
  margin-bottom:22px;
}
.ethos-item p{ color:var(--mut-light); font-size:1rem; max-width:44ch; }

/* ============================================================
   Contact  (black, faceted watermark)
   ============================================================ */
.contact{ position:relative; background:var(--ink); overflow:hidden; }
.contact-mark{
  position:absolute; right:-5%; top:50%; transform:translateY(-50%);
  width:clamp(320px, 42vw, 700px); height:auto; fill:var(--orange);
  opacity:.07; pointer-events:none; z-index:0;
}
.contact .shell{ position:relative; z-index:1; }
.contact-inner{ max-width:min(100%, 1120px); }
.contact-alt{ margin-top:clamp(26px, 2.8vw, 38px); color:var(--mut-dark); max-width:64ch; }
.contact-alt a{
  color:var(--white); font-weight:600;
  border-bottom:2px solid var(--orange); padding-bottom:3px;
  transition:color .3s var(--ease);
}
.contact-alt a:hover{ color:var(--orange); }
.contact-mail{
  display:inline-block; margin-top:clamp(34px, 3.6vw, 54px);
  font-family:var(--ff-display); font-weight:500;
  font-size:clamp(1.9rem, 4vw, 3.3rem); line-height:1.1; color:var(--orange);
  border-bottom:2px solid rgba(255,99,31,.4); padding-bottom:8px;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.contact-mail:hover{ color:var(--orange-hi); border-bottom-color:var(--orange-hi); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1180px){
  .ethos-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 980px){
  .leak-grid{ grid-template-columns:minmax(0,1fr); }
  .contact-mark{ opacity:.05; right:-18%; }
  .ico-stage{
    position:relative; top:auto; right:auto; transform:none;
    width:min(64vw, 340px); margin-bottom:22px;
  }
  .hero-shell{ padding-top:clamp(48px,7vw,72px); }
  .svc-row{
    grid-template-columns:56px minmax(0,1fr); gap:14px 18px;
    align-items:start; padding-block:30px;
  }
  .svc-glyph{ width:34px; height:37.7px; }
  .svc-desc{ grid-column:2; }
  .svc-tag{ grid-column:2; justify-self:start; margin-top:4px; margin-right:0; }
}
@media (max-width: 640px){
  .ethos-grid{ grid-template-columns:minmax(0,1fr); }
  .hero-foot{ gap:14px 28px; }
  /* Decorative affordance only, and there is nothing below the fold to cue on a
     phone. Safe to drop. */
  .hero-scroll{ display:none; }
  /* The design hid these below 640, which removed five real content strings
     from phones — and the services page shows the same labels at this width, so
     the site contradicted itself. Kept, allowed to wrap rather than forcing a
     224px nowrap box into a 272px column. */
  .svc-tag{ white-space:normal; max-width:100%; }
}