/* ============================================================
   ICOSA LTD  ·  Home
   ============================================================ */

/* ---------- Hero ---------- */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:max(700px, 100svh); display:flex;
}
/* A scrim on the copy side, so white type keeps AA contrast over the
   lightest facet the lighting can produce. */
.hero-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(104,24,0,.42) 0, rgba(104,24,0,0) 170px),
    linear-gradient(90deg, rgba(118,28,0,.56) 0%, rgba(118,28,0,.4) 46%, rgba(118,28,0,.1) 86%),
    linear-gradient(0deg, rgba(104,24,0,.5) 0%, rgba(104,24,0,0) 32%);
}
.hero-shell{
  position:relative; z-index:2; width:100%;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:calc(var(--nav-h, 88px) + 56px); padding-bottom:clamp(26px, 3.4vw, 44px);
}
.hero-content{ max-width:1240px; padding-bottom:clamp(56px, 9vh, 120px); }
.hero-headline{
  margin-top:30px;
  font-size:var(--h1); font-weight:300; line-height:1.02; letter-spacing:-.022em; color:var(--white);
}
.hero-headline .accent{ font-style:italic; letter-spacing:-.02em; }
.hero-headline .ln > span{ text-wrap:balance; }
.hero-sub{
  margin-top:clamp(28px, 3vw, 40px); max-width:56ch;
  font-size:var(--lede); font-weight:300; line-height:1.7; color:rgba(255,255,255,.95);
}
.hero-cta{ margin-top:clamp(32px, 3.4vw, 48px); display:flex; flex-wrap:wrap; gap:14px; }

.hero-stats{
  list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  border-top:1px solid rgba(255,255,255,.3);
}
.hero-stat{
  display:flex; flex-direction:column; gap:6px; padding:24px 24px 0 0;
  font-size:.86rem; line-height:1.5; color:rgba(255,255,255,.9);
}
.hero-stat + .hero-stat{ padding-left:clamp(18px, 2.4vw, 40px); border-left:1px solid rgba(255,255,255,.3); }
.hero-stat b{
  font-size:clamp(1.45rem, 1.05rem + 1.1vw, 2.15rem); font-weight:300; line-height:1.15;
  letter-spacing:-.015em; color:var(--white);
}

/* ---------- Clients ---------- */
.clients{ border-bottom:1px solid var(--line); }
.clients-in{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:stretch; }
.clients-label{
  display:flex; align-items:center;
  max-width:280px; padding:34px 40px 34px var(--gutter);
  border-right:1px solid var(--line);
  font-size:.7rem; font-weight:700; letter-spacing:.2em; line-height:1.7; text-transform:uppercase;
  color:var(--burnt-ink);
}
.marquee{
  position:relative; overflow:hidden; display:flex; align-items:center;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.mq-list{
  list-style:none; display:flex; flex-wrap:wrap; gap:10px 34px; padding:30px var(--gutter);
  font-size:1.1rem; font-weight:300; color:var(--ink);
}
.mq-track{ display:none; }
.mq-ready .mq-list{
  position:absolute !important; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
.mq-ready .mq-track{
  display:flex; width:max-content; padding-block:34px;
  animation:mq var(--mq-dur, 60s) linear infinite;
}
.marquee:hover .mq-track{ animation-play-state:paused; }
.mq-track > span{ display:flex; align-items:center; white-space:nowrap; }
.mq-item{
  padding-inline:clamp(22px, 2.4vw, 42px);
  font-size:clamp(1.2rem, 1rem + .7vw, 1.7rem); font-weight:300; letter-spacing:-.01em; color:var(--ink);
}
.mq-sep{ width:12px; height:13.3px; fill:var(--burnt); flex:none; }
@keyframes mq{ to{ transform:translateX(-50%); } }

/* ---------- The case for looking ---------- */
.leak{ overflow:hidden; }
.leak > .lines{ --lo:.11; --lfade:radial-gradient(ellipse 52% 62% at 100% 0%, #000 0%, transparent 72%); }
.leak .shell{ position:relative; }
.leak-head{
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:32px clamp(40px, 7vw, 140px); align-items:end;
}
.leak-head .h-display{ margin-top:26px; }
.leak-body{ max-width:50ch; color:var(--text-soft); }


.leak-grid{
  margin-top:clamp(72px, 9vw, 150px);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:56px clamp(40px, 6vw, 120px); align-items:center;
}
.big-num{
  font-size:clamp(6.2rem, 2.6rem + 13.5vw, 16rem); font-weight:300; line-height:.84;
  letter-spacing:-.06em; color:var(--burnt); margin-left:-.05em;
  font-variant-numeric:lining-nums;
}
.big-cap{
  margin-top:32px; padding-top:20px; max-width:34ch;
  border-top:1px solid var(--line-strong);
  font-size:.72rem; font-weight:700; letter-spacing:.18em; line-height:1.75; text-transform:uppercase;
  color:var(--mut);
}
.leak-close{
  margin-top:clamp(32px, 3.4vw, 48px); max-width:42ch;
  font-size:var(--lede); font-weight:300; line-height:1.6; color:var(--text-soft);
}
.leak-close .kicker{ font-style:italic; color:var(--ink); }

/* The estimator */
.calc{ position:relative; overflow:hidden; padding:clamp(30px, 4vw, 64px); }
.calc > .lines{ --lc:var(--orange); --lo:.24; --lfade:radial-gradient(ellipse 75% 60% at 100% 0%, #000 0%, transparent 68%); }
.calc-in{ position:relative; }
.calc-row{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:12px 24px; }
.calc-label{
  font-size:.7rem; font-weight:700; letter-spacing:.18em; line-height:1.6; text-transform:uppercase;
  color:var(--on-dark-mut);
}
.calc-spend{
  font-size:clamp(2.2rem, 1.5rem + 2.2vw, 3.6rem); font-weight:300; line-height:1; letter-spacing:-.025em;
  color:var(--white); font-variant-numeric:tabular-nums lining-nums;
}

.calc-range{
  --p:10%;
  -webkit-appearance:none; appearance:none; display:block;
  width:100%; height:30px; margin-top:30px; background:transparent; cursor:pointer;
}
.calc-range::-webkit-slider-runnable-track{
  height:2px; background:linear-gradient(90deg, var(--orange) var(--p), rgba(255,255,255,.22) var(--p));
}
.calc-range::-moz-range-track{ height:2px; background:rgba(255,255,255,.22); }
.calc-range::-moz-range-progress{ height:2px; background:var(--orange); }
.calc-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:20px; height:20px; margin-top:-9px;
  background:var(--white); border:0; border-radius:0;
  box-shadow:0 0 0 6px rgba(255,99,31,.3);
  transition:box-shadow .3s var(--ease), transform .3s var(--ease);
}
.calc-range::-moz-range-thumb{
  width:20px; height:20px; background:var(--white); border:0; border-radius:0;
  box-shadow:0 0 0 6px rgba(255,99,31,.3);
}
.calc-range:hover::-webkit-slider-thumb{ box-shadow:0 0 0 9px rgba(255,99,31,.36); }
.calc-range:active::-webkit-slider-thumb{ transform:rotate(45deg); }
.calc-range:focus-visible{ outline:2px solid var(--white); outline-offset:8px; }
.calc-ends{ display:flex; justify-content:space-between; margin-top:10px; font-size:.75rem; color:rgba(255,255,255,.6); }

.calc-result{ margin-top:clamp(34px, 4vw, 56px); padding-top:clamp(28px, 3vw, 40px); border-top:1px solid var(--line-dark); }
.calc-out{
  margin-top:14px;
  font-size:clamp(3.4rem, 2rem + 4.4vw, 6.4rem); font-weight:300; line-height:1; letter-spacing:-.045em;
  color:var(--orange); font-variant-numeric:tabular-nums lining-nums;
}
.calc-band{ margin-top:18px; font-size:.9rem; line-height:1.6; color:var(--on-dark-mut); }
.calc-scale{ position:relative; margin-top:22px; padding-bottom:22px; }
.cs-bar{
  position:relative; display:block; height:6px;
  background:linear-gradient(90deg, rgba(255,99,31,.18), rgba(255,99,31,.95));
}
.cs-mark{
  position:absolute; top:-7px; bottom:-7px; left:var(--pos, 33%); width:2px; margin-left:-1px;
  background:var(--white); transition:left .6s var(--ease);
}
.cs-lo, .cs-hi{ position:absolute; bottom:0; font-size:.7rem; color:rgba(255,255,255,.55); font-style:normal; }
.cs-lo{ left:0; } .cs-hi{ right:0; }
.calc-cta{ margin-top:clamp(30px, 3.4vw, 44px); }
.btn-orange{ background:var(--orange); color:var(--ink); --btn-sweep:var(--white); }

/* ---------- Services ---------- */

.svc-list{ list-style:none; border-top:1px solid var(--line-strong); }
.svc-item{ border-bottom:1px solid var(--line-strong); }
.svc-row{
  position:relative; isolation:isolate;
  display:grid; grid-template-columns:64px minmax(0,.95fr) minmax(0,1.25fr) 290px;
  gap:20px clamp(24px, 3vw, 56px); align-items:center;
  padding:clamp(26px, 2.6vw, 42px) 0;
  transition:color .5s var(--ease), padding .7s var(--ease);
}
.svc-row::before{
  content:""; position:absolute; inset:-1px calc(var(--gutter) * -1); z-index:-1;
  background:var(--burnt);
  clip-path:polygon(0 0, 0 0, 0 100%, 0 100%);
  transition:clip-path .75s var(--ease);
}
a.svc-row:hover, a.svc-row:focus-visible{ color:var(--white); padding-left:clamp(10px, 1.6vw, 28px); }
a.svc-row:hover::before, a.svc-row:focus-visible::before{ clip-path:polygon(0 0, 112% 0, 100% 100%, 0 100%); }
a.svc-row:focus-visible{ outline-offset:-2px; outline-color:var(--white); }
.svc-num{ font-size:.78rem; font-weight:700; letter-spacing:.14em; color:var(--burnt-ink); transition:color .5s var(--ease); }
.svc-row h3{ font-size:var(--h3); font-weight:300; line-height:1.2; letter-spacing:-.01em; }
.svc-desc{ font-size:.97rem; line-height:1.7; color:var(--text-soft); transition:color .5s var(--ease); }
.svc-side{ display:flex; align-items:center; justify-content:flex-end; gap:18px; }
.svc-tag{
  padding:8px 12px; border:1px solid var(--line-strong); white-space:nowrap;
  font-size:.64rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--text-soft);
  transition:color .5s var(--ease), border-color .5s var(--ease);
}
.svc-go{
  display:grid; place-items:center; width:46px; height:46px; flex:none;
  border:1px solid var(--line-strong); font-size:1rem;
  transition:background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
a.svc-row:hover .svc-num,
a.svc-row:focus-visible .svc-num{ color:var(--white); }
a.svc-row:hover .svc-desc,
a.svc-row:focus-visible .svc-desc{ color:rgba(255,255,255,.94); }
a.svc-row:hover .svc-tag,
a.svc-row:focus-visible .svc-tag{ color:var(--white); border-color:rgba(255,255,255,.55); }
a.svc-row:hover .svc-go,
a.svc-row:focus-visible .svc-go{ background:var(--white); color:var(--burnt-deep); border-color:var(--white); }

.svc-note{
  margin-top:clamp(36px, 4vw, 56px);
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px;
  font-size:1.08rem; font-weight:300; color:var(--text-soft);
}

/* ---------- How we work ---------- */
.ethos{ overflow:hidden; }
.ethos > .lines{ --lc:var(--orange); --lo:.2; --lfade:radial-gradient(ellipse 58% 80% at 100% 100%, #000 0%, transparent 70%); }
.ethos .shell{ position:relative; }
.ethos-head{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:40px clamp(40px, 7vw, 140px); align-items:end;
}
.ethos-head .h-display{ margin-top:26px; }
.ethos-lead h3{
  font-size:clamp(1.6rem, 1.15rem + 1.5vw, 2.5rem); font-style:italic; font-weight:300;
  color:var(--orange); letter-spacing:-.01em;
}
.ethos-lead p{ margin-top:20px; max-width:52ch; color:var(--on-dark-mut); }
.ethos-grid{
  margin-top:clamp(72px, 8vw, 128px);
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  border-top:1px solid var(--line-dark);
}
.ethos-item{ padding:38px clamp(20px, 3vw, 52px) 0 0; }
.ethos-item + .ethos-item{ padding-left:clamp(20px, 3vw, 52px); border-left:1px solid var(--line-dark); }
.ethos-num{ font-size:.74rem; font-weight:700; letter-spacing:.14em; color:var(--orange); }
.ethos-item h3{ margin-top:30px; font-size:var(--h3); font-weight:300; }
.ethos-item p{ margin-top:16px; font-size:.98rem; color:var(--on-dark-mut); }

/* ---------- Contact band ---------- */
.contact-band{ position:relative; isolation:isolate; overflow:hidden; padding-block:clamp(110px, 13vw, 230px); }
.band-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(118,28,0,.5) 0%, rgba(118,28,0,.32) 50%, rgba(118,28,0,.3) 100%);
}
.contact-band .shell{ position:relative; z-index:2; }
.contact-inner .h-display{
  margin-top:26px; max-width:15ch;
  font-size:clamp(2.7rem, 1.1rem + 5.2vw, 6.6rem); line-height:1.02; letter-spacing:-.03em;
}
.contact-row{
  margin-top:clamp(40px, 4.4vw, 72px);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:36px clamp(40px, 6vw, 120px); align-items:end;
}
.contact-mail{
  display:inline-flex; align-items:baseline; gap:18px; max-width:100%;
  font-size:clamp(1.5rem, .9rem + 2.4vw, 3.3rem); font-weight:300; line-height:1.2; letter-spacing:-.02em;
  color:var(--white); overflow-wrap:anywhere;
}
.contact-mail span:first-child{
  padding-bottom:6px;
  background:linear-gradient(var(--white), var(--white)) 0 100% / 100% 2px no-repeat;
  transition:background-size .6s var(--ease);
}
.contact-mail:hover span:first-child{ background-size:0 2px; background-position:100% 100%; }
.contact-mail .arr{ transition:transform .5s var(--ease); }
.contact-mail:hover .arr{ transform:translateX(10px); }
.contact-alt{ margin-top:22px; font-size:1rem; color:rgba(255,255,255,.92); }
.contact-alt a{ color:var(--white); border-bottom:1px solid rgba(255,255,255,.6); padding-bottom:1px; transition:border-color .3s var(--ease); }
.contact-alt a:hover{ border-bottom-color:var(--white); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px){
  .svc-row{ grid-template-columns:56px minmax(0,1fr) minmax(0,1.3fr); }
  .svc-side{ justify-content:flex-start; }
  .svc-side{ grid-column:2 / -1; justify-content:flex-start; }
}
@media (max-width: 980px){
  .leak-head, .ethos-head, .contact-row{ grid-template-columns:minmax(0,1fr); }
  .leak-grid{ grid-template-columns:minmax(0,1fr); }
  .ethos-grid{ grid-template-columns:minmax(0,1fr); }
  .ethos-item, .ethos-item + .ethos-item{ padding:32px 0 34px; border-left:0; }
  .ethos-item + .ethos-item{ border-top:1px solid var(--line-dark); }
  .clients-in{ grid-template-columns:minmax(0,1fr); }
  .clients-label{ max-width:none; padding:22px var(--gutter) 0; border-right:0; }
  .mq-ready .mq-track{ padding-block:22px 28px; }
}
@media (max-width: 720px){
  /* Copy runs the full width here, so the scrim does too. */
  .hero-scrim{
    background:linear-gradient(180deg, rgba(104,24,0,.44) 0, rgba(118,28,0,.34) 26%, rgba(118,28,0,.34) 68%, rgba(104,24,0,.52) 100%);
  }
  .hero-stats{ grid-template-columns:minmax(0,1fr); }
  .hero-stat{ flex-direction:row; align-items:baseline; gap:12px; padding:14px 0 0; }
  .hero-stat + .hero-stat{ padding-left:0; border-left:0; }
  .hero-stat b{ font-size:1.3rem; min-width:6.4em; }
  .hero-content{ padding-bottom:40px; }
  .svc-row{ grid-template-columns:minmax(0,1fr); gap:12px; }
  .svc-side{ grid-column:auto; }
  .svc-num{ margin-bottom:-2px; }
  .svc-go{ display:none; }
}