/* ICCo homepage: Concept B v2, The Infinity.
   The base styles are a normal scrolling page (phones, tablets, no JavaScript, reduced motion).
   html.pin turns the sections into full-screen panels that wipe away as the visitor scrolls. */
:root{
  --royal:#014BAA;--cream:#F8F3F0;
  --font:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(20px,3.33vw,64px);
  --wipe:cubic-bezier(.68,0,.18,1);
  --out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0}
html{background:var(--royal);-webkit-text-size-adjust:100%}
html.locked,html.locked body{overflow:hidden}
body{font:400 18px/1.35 var(--font);color:var(--cream);background:var(--royal);overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none;padding:0}
:focus-visible{outline:3px solid currentColor;outline-offset:4px}
.skip{position:fixed;left:16px;top:-80px;z-index:90;background:var(--cream);color:var(--royal);padding:12px 18px}
.skip:focus{top:16px}
.logo{display:block;width:100%;height:auto}
h2{font-weight:500;letter-spacing:-.04em;line-height:.96}

/* Intro: the logo holds still, then the top edge wipes down over it */
#loader{position:fixed;inset:0;z-index:80;background:var(--cream);color:var(--royal);display:flex;align-items:center;justify-content:center;animation:loaderWipe .93s var(--wipe) 2s forwards}
.logo-full{display:block;width:min(70vw,90vh,600px);height:auto;animation:logoIn .8s var(--out) .15s both}
@keyframes loaderWipe{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(100% 0 0 0);visibility:hidden}}
@keyframes logoIn{from{clip-path:inset(100% 0 0 0);transform:translateY(60px)}to{clip-path:inset(0 0 0 0);transform:none}}
html.no-intro #loader{display:none}

/* Header */
.site-head{position:fixed;z-index:60;left:0;right:0;top:0;height:72px;display:flex;align-items:center;padding:0 var(--gutter);color:var(--cream);transition:color .25s}
.site-head.on-light{color:var(--royal)}
/* Normal scrolling page: a solid bar, so the menu never sits on top of content */
html:not(.pin) .site-head{background:var(--royal);transition:color .25s,background .25s}
html:not(.pin) .site-head.on-light{background:var(--cream)}
html:not(.pin) .site-head.menu-open{background:var(--royal)}
.brand{display:block;width:116px;position:relative;z-index:2}
.cta{display:none;border:2px solid currentColor;padding:.55em 1.2em;border-radius:40px;font-weight:700;font-size:15px;white-space:nowrap;transition:background .25s,color .25s}
.menu-btn{margin-left:auto;background:none;border:0;color:inherit;font:700 16px var(--font);padding:12px 0;cursor:pointer;position:relative;z-index:2}
.site-nav{position:fixed;inset:0;background:var(--royal);color:var(--cream);display:flex;align-items:center;padding:0 var(--gutter);visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--wipe),visibility 0s .6s}
.site-nav.open{visibility:visible;clip-path:inset(0);transition:clip-path .6s var(--wipe)}
.site-nav ul{display:flex;flex-direction:column;gap:16px;font:500 clamp(34px,9vw,52px)/1.1 var(--font);letter-spacing:-.03em}
.site-head.menu-open{color:var(--cream)}
html.js .site-head{opacity:0}
html.js.entered .site-head{opacity:1;transition:opacity .8s .35s,color .25s}

/* Panels: normal scrolling page */
.panel{position:relative;overflow:hidden}
#hero{background:var(--royal);display:flex;flex-direction:column;min-height:100svh}
#stage{position:relative;flex:1;min-height:clamp(300px,46svh,620px);margin-top:72px}
#track{position:absolute;inset:0;width:100%;height:100%}
#tp,#tpW{stroke-dasharray:1;stroke-dashoffset:1}
html.entered #tp,html.entered #tpW{stroke-dashoffset:0;transition:stroke-dashoffset 1.8s var(--wipe) .25s}
/* Real 3D space: depth decides which card is in front, with no re-sorting while they move */
#orbit{position:absolute;inset:0;transform-style:preserve-3d}
.card{position:absolute;left:0;top:0;width:var(--cw,130px);aspect-ratio:292/208;will-change:transform;backface-visibility:hidden}
.card img{width:100%;height:100%;object-fit:cover;border-radius:12px}
.big{position:relative;z-index:30;padding:0 var(--gutter) 34px}
h1{font:500 clamp(46px,min(15vw,16svh),120px)/.9 var(--font);letter-spacing:-.045em}
.line{display:block;overflow:hidden;padding-bottom:.11em}
.line>span{display:block}
html.js h1 .line>span{transform:translateY(118%)}
html.js.entered h1 .line>span{transform:none;transition:transform 1.05s var(--out)}
h1 .line:nth-child(2)>span{transition-delay:.1s!important}
.side{margin-top:18px;max-width:30em}
.side a{display:inline-block;margin-top:14px;font-weight:700;border-bottom:2px solid currentColor}
html.js .side{opacity:0;transform:translateY(40px)}
html.js.entered .side{opacity:1;transform:none;transition:opacity .9s var(--out) .5s,transform .9s var(--out) .5s}

/* Reveal when a panel becomes active */
html.js .rv{opacity:0;transform:translateY(46px)}
html.js .active .rv{opacity:1;transform:none;transition:opacity .9s var(--out),transform .9s var(--out);transition-delay:var(--d,0s)}

/* Impact */
#impact{background:var(--cream);color:var(--royal);padding:72px var(--gutter)}
#impact h2,#trust h2{font-size:clamp(50px,12vw,96px)}
#mini{display:block;width:100%;max-width:640px;margin:34px auto 0;overflow:visible}
#mini text{font:700 25px var(--font);fill:var(--royal)}
#mp{stroke-dasharray:1;stroke-dashoffset:1}
.active #mp{stroke-dashoffset:0;transition:stroke-dashoffset 1.4s var(--wipe)}
.nums{display:grid;grid-template-columns:1fr 1fr;gap:30px 20px;border-top:3px solid var(--royal);margin-top:40px;padding-top:28px}
.num b{display:block;font:700 clamp(40px,10.6vw,84px)/1 var(--font);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.num span{display:block;margin-top:10px;font-size:16px;line-height:1.25}

/* Work */
#work{background:var(--royal);padding:72px var(--gutter)}
#work h2{font-size:clamp(42px,9.5vw,76px);margin-bottom:30px;line-height:1}
.tiles{display:grid;gap:14px}
.tile{position:relative;display:block;overflow:hidden;border-radius:20px;height:clamp(300px,82vw,560px)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,32,84,.92),rgba(0,32,84,0) 62%)}
.tile-in{position:absolute;z-index:2;left:22px;right:22px;bottom:22px;display:block}
.tile strong{display:block;font:500 34px/1.02 var(--font);letter-spacing:-.025em}
.desc{display:block;margin-top:8px;line-height:1.25}

/* Trust */
#trust{background:var(--cream);color:var(--royal);padding:72px var(--gutter)}
#trust h2{margin-bottom:28px}
.names{font-size:clamp(20px,5vw,29px);font-weight:500;line-height:1.45;max-width:800px}
.docs{display:flex;flex-direction:column;margin-top:44px}
.doc{border-top:3px solid var(--royal);padding:24px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;font-weight:500;font-size:clamp(25px,6.4vw,54px);line-height:1.05;letter-spacing:-.025em}
.doc:last-child{border-bottom:3px solid var(--royal)}
.doc small{font-size:15px;letter-spacing:0;white-space:nowrap}
.doc span{transition:transform .45s var(--out)}
.doc:hover span{transform:translateX(14px)}

/* End */
#end{background:var(--royal);padding:112px var(--gutter) 24px;min-height:88svh;display:flex;flex-direction:column;justify-content:space-between;gap:44px}
#endLoop{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#endP{stroke-dasharray:1;stroke-dashoffset:1}
.active #endP{stroke-dashoffset:0;transition:stroke-dashoffset 2.2s var(--wipe)}
#end h2{position:relative;font-size:clamp(64px,17vw,206px);line-height:.9;letter-spacing:-.05em;max-width:1600px}
.end-cta{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:22px}
.end-cta p{flex:1 1 320px;max-width:42em}
.btn2{background:var(--cream);color:var(--royal);padding:1em 1.7em;border-radius:50px;font-weight:700;white-space:nowrap;transition:transform .35s var(--out)}
.btn2:hover{transform:translateY(-3px)}
#end .icco-foot{background:none;padding:0;overflow:visible}
#end .icco-foot-loop{display:none}

/* Pinned desktop: 1rem is 16px at 1920x1080 and scales with the screen so each panel always fits */
html.pin{font-size:min(calc(min(1vw,1.778vh) * .8333),22px)}
html.pin body{font-size:max(15px,1.375rem)}
html.pin #stack-space{display:block}
html.pin .panel{position:fixed;inset:0;min-height:0;height:100vh}
html.pin #hero{z-index:40;display:block}
html.pin #impact{z-index:30;padding:9.4rem 4rem 0}
html.pin #work{z-index:20;padding:8rem 4rem 0}
html.pin #trust{z-index:10;padding:9.4rem 4rem 0;display:grid;grid-template-columns:1fr 1fr;gap:4.4rem}
html.pin #end .icco-foot-h{margin-bottom:.8rem!important}
html.pin #end{z-index:5;padding:8.6rem 4rem 2rem;gap:1.6rem;justify-content:flex-start}
html.pin #end .icco-foot{margin-top:auto}
html.pin .site-head{height:7rem;padding:0 4rem}
html.pin .brand{width:max(124px,9.4rem)}
html.pin .menu-btn{display:none}
html.pin .site-nav{position:static;inset:auto;background:none;color:inherit;margin:0 auto;padding:0;visibility:visible;clip-path:none;transition:none}
html.pin .site-nav ul{flex-direction:row;gap:2.75rem;font:500 max(14px,1.25rem)/1.2 var(--font);letter-spacing:0}
html.pin .site-nav a{position:relative;padding:.4em 0}
html.pin .site-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--out)}
html.pin .site-nav a:hover::after{transform:scaleX(1)}
html.pin .cta{display:block;font-size:max(13px,1.125rem)}
html.pin .cta:hover{background:currentColor}
html.pin .cta:hover{background:var(--cream);color:var(--royal)}
html.pin .on-light .cta:hover{background:var(--royal);color:var(--cream)}
html.pin #stage{position:absolute;inset:0;margin:0;min-height:0}
html.pin .card img{border-radius:1.125rem;box-shadow:0 1.2rem 2rem rgba(0,20,60,.34)}
html.pin .big{position:absolute;left:4rem;right:4rem;bottom:2.9rem;padding:0;display:flex;justify-content:space-between;align-items:flex-end;gap:3.75rem}
html.pin h1{font-size:9.875rem}
html.pin .side{width:27.5rem;margin:0;padding-bottom:1.4rem;font-size:max(15px,1.5rem);line-height:1.3;flex:none}
html.pin .side a{margin-top:1.25rem}
html.pin .p-top{display:grid;grid-template-columns:1fr 47.5rem;gap:3.75rem;height:27.5rem}
html.pin #impact h2,html.pin #trust h2{font-size:7.375rem}
html.pin #mini{width:47.5rem;height:23.75rem;max-width:none;margin:0}
html.pin .nums{position:absolute;left:4rem;right:4rem;bottom:5.5rem;grid-template-columns:repeat(4,1fr);gap:0;margin:0;padding:0}
html.pin .num{padding:2rem 1.9rem 0 0}
html.pin .num b{font-size:7rem}
html.pin .num span{margin-top:.875rem;font-size:max(14px,1.375rem);max-width:22.5rem}
html.pin #work h2{font-size:4.75rem;margin-bottom:2.4rem}
html.pin .tiles{display:flex;gap:1rem;height:calc(100vh - 16.4rem)}
html.pin .tiles li{flex:1 1 0;min-width:0;transition:flex-grow .7s var(--out)}
html.pin .tiles li.on{flex-grow:2.7}
html.pin .tile{height:100%;border-radius:1.375rem}
html.pin .tile img{transform:scale(1.12);transition:transform .9s var(--out)}
html.pin .tiles li.on .tile img{transform:none}
html.pin .tile-in{left:1.75rem;right:1.75rem;bottom:1.625rem}
html.pin .tile strong{font-size:2.625rem}
html.pin .desc{font-size:max(14px,1.375rem);margin-top:.625rem;max-width:29rem;min-width:18rem;opacity:0;max-height:0;overflow:hidden;transition:opacity .35s}
html.pin .tiles li.on .desc{opacity:1;max-height:6em;transition:opacity .5s .2s}
html.pin #trust h2{margin-bottom:2.875rem}
html.pin .names{font-size:1.8rem;line-height:1.5;max-width:50rem}
html.pin .docs{align-self:center;margin:0}
html.pin .doc{padding:2rem 0;font-size:3.375rem}
html.pin .doc small{font-size:max(13px,1.3rem)}
html.pin #end h2{font-size:8.6rem;max-width:100rem}
html.pin .end-cta{font-size:max(15px,1.4rem)}

/* Larger phones and tablets */
@media (min-width:700px){
  .nums{grid-template-columns:repeat(4,1fr)}
  .tiles{grid-template-columns:1fr 1fr}
  .tiles li:first-child{grid-column:1/-1}
}

/* Phones held sideways: keep the headline and the loop on one screen */
@media (max-height:500px) and (orientation:landscape){
  #hero{min-height:0}
  #stage{min-height:300px;flex:none}
  .side{max-width:none}
}

/* Respect a visitor's reduced-motion setting */
@media (prefers-reduced-motion:reduce){
  #loader{display:none}
  html.js .rv,html.js h1 .line>span,html.js .side,html.js .site-head{opacity:1!important;transform:none!important;transition:none!important}
  #mp,#endP,#tp,#tpW{stroke-dashoffset:0!important;transition:none!important}
  *{scroll-behavior:auto!important}
}