/* 2026 premium personal-brand art direction for its-ez.com */
:root{
  --ink:#111111;
  --paper:#f5f0e8;
  --hot:#ff5a36;
  --acid:#d9ff52;
  --line:rgba(17,17,17,.14);
  --soft:rgba(17,17,17,.62);
}

html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  overflow-x:hidden;
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
  background:
    radial-gradient(circle at 82% 12%, rgba(255,90,54,.12), transparent 26rem),
    radial-gradient(circle at 12% 72%, rgba(217,255,82,.10), transparent 24rem);
}

.site-header{
  background:rgba(245,240,232,.82)!important;
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line)!important;
}

.brand{
  font-weight:900!important;
  letter-spacing:-.035em!important;
  font-size:1.08rem!important;
}
.brand-dot{background:var(--hot)!important;box-shadow:0 0 0 7px rgba(255,90,54,.10)}
.nav-links a{font-weight:700!important}
.nav-links a:hover{transform:translateY(-1px)}

.button{
  border-radius:999px!important;
  font-weight:800!important;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease!important;
}
.button:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.10)}
.button-orange{background:var(--hot)!important;color:#fff!important;border-color:var(--hot)!important}

.hero{
  position:relative;
  min-height:88vh;
  display:flex;
  align-items:center;
  padding-top:clamp(7rem,12vw,10rem)!important;
  padding-bottom:clamp(5rem,9vw,8rem)!important;
}
.hero:after{
  content:"BUILD WHAT PEOPLE CAN USE";
  position:absolute;
  left:50%;
  bottom:1.25rem;
  transform:translateX(-50%);
  white-space:nowrap;
  font-size:clamp(2.4rem,8vw,8rem);
  font-weight:900;
  letter-spacing:-.06em;
  color:rgba(17,17,17,.035);
  z-index:-1;
}
.hero-grid{gap:clamp(2.2rem,6vw,7rem)!important;align-items:center!important}
.hero-kicker{display:flex!important;gap:.55rem!important;flex-wrap:wrap!important;margin-bottom:1.4rem!important}
.hero-kicker span{
  border:1px solid var(--ink)!important;
  border-radius:999px!important;
  padding:.42rem .72rem!important;
  font-size:.73rem!important;
  letter-spacing:.08em!important;
  font-weight:900!important;
  background:transparent!important;
}
.hero h1{
  font-size:clamp(4.9rem,12.4vw,10.5rem)!important;
  line-height:.79!important;
  letter-spacing:-.075em!important;
  max-width:8ch!important;
  margin:.1em 0 .24em!important;
}
.hero h1 em{font-style:normal!important;color:var(--ink)!important}
.hero-lede{
  font-size:clamp(1.65rem,3.3vw,3rem)!important;
  line-height:1.03!important;
  letter-spacing:-.045em!important;
  max-width:18ch!important;
  font-weight:800!important;
}
.hero-sub{font-size:1.08rem!important;line-height:1.72!important;max-width:66ch!important;color:var(--soft)!important}
.hero-availability{font-size:.92rem!important;max-width:62ch!important}

.portrait-stage{position:relative!important;isolation:isolate}
.portrait-stage:before{
  content:"EZ";
  position:absolute;
  top:-12%;
  right:-8%;
  font-size:clamp(8rem,22vw,18rem);
  line-height:1;
  font-weight:950;
  letter-spacing:-.08em;
  color:var(--acid);
  z-index:-1;
  transform:rotate(7deg);
}
.portrait{
  border-radius:40% 40% 12% 12% / 28% 28% 10% 10%!important;
  overflow:hidden!important;
  box-shadow:0 34px 90px rgba(0,0,0,.18)!important;
  transform:rotate(1.5deg);
}
.portrait img{filter:contrast(1.03) saturate(.92)}
.portrait-badge{
  right:auto!important;
  left:-2rem!important;
  bottom:-2rem!important;
  width:min(300px,82%)!important;
  background:var(--ink)!important;
  color:#fff!important;
  border-radius:1.6rem!important;
  padding:1.25rem!important;
  box-shadow:0 22px 50px rgba(0,0,0,.18)!important;
  transform:rotate(-2.5deg);
}
.portrait-badge strong{font-size:1.25rem!important;color:var(--acid)!important}

.section{padding:clamp(5.5rem,10vw,9rem) 0!important}
.eyebrow{
  font-size:.76rem!important;
  letter-spacing:.14em!important;
  font-weight:900!important;
  text-transform:uppercase!important;
}
.section-title{
  font-size:clamp(3rem,7vw,6.8rem)!important;
  line-height:.91!important;
  letter-spacing:-.065em!important;
  max-width:12ch;
}
.body-copy,.positioning-copy{font-size:clamp(1.05rem,1.5vw,1.25rem)!important;line-height:1.7!important}
.positioning{border-top:1px solid var(--line)!important}
.positioning-grid{gap:clamp(2rem,8vw,9rem)!important;align-items:start!important}
.positioning-copy span{background:linear-gradient(transparent 62%, rgba(217,255,82,.88) 62%)}

.solve-grid{
  margin-top:clamp(3rem,7vw,6rem)!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:0!important;
  border-top:1px solid var(--ink)!important;
}
.solve-card{
  border:0!important;
  border-bottom:1px solid var(--ink)!important;
  border-radius:0!important;
  padding:2.2rem 2rem 2.4rem 0!important;
  background:transparent!important;
  min-height:250px;
  transition:transform .25s ease, background .25s ease!important;
}
.solve-card:nth-child(odd){border-right:1px solid var(--ink)!important;padding-right:2.2rem!important}
.solve-card:nth-child(even){padding-left:2.2rem!important}
.solve-card:hover{background:rgba(255,255,255,.28)!important;transform:translateY(-4px)}
.solve-card b{font-size:.72rem!important;letter-spacing:.12em!important}
.solve-card h3{font-size:clamp(1.7rem,3vw,2.8rem)!important;line-height:1!important;letter-spacing:-.045em!important}
.solve-card p{color:var(--soft)!important;max-width:46ch}

.work{background:var(--ink)!important;color:#fff!important}
.work .eyebrow,.work .body-copy{color:rgba(255,255,255,.66)!important}
.work .section-title{color:#fff!important}
.work-list{margin-top:3rem!important}
.work-item,.project-card,.case-card{
  border-color:rgba(255,255,255,.18)!important;
}

.operating{background:#fff!important}
.framework-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:0!important;
  border-top:1px solid var(--ink)!important;
  border-bottom:1px solid var(--ink)!important;
}
.framework-stage{
  border:0!important;
  border-right:1px solid var(--ink)!important;
  border-radius:0!important;
  background:transparent!important;
  padding:2rem 1.4rem!important;
  min-height:320px;
}
.framework-stage:last-child{border-right:0!important}
.framework-stage h3{font-size:2rem!important;letter-spacing:-.045em!important;line-height:1!important}
.framework-stage span{display:block;margin-top:1rem;font-weight:800}
.measurement-horizons{gap:1rem!important;margin-top:2rem!important}
.horizon{border-radius:1.4rem!important;border:1px solid var(--line)!important;box-shadow:none!important}

.proof{background:var(--paper)!important}
.media-proof,.stack-group,.recommendation-card,.fit-panel,.form{
  border-radius:1.6rem!important;
  box-shadow:none!important;
}
.media-proof{overflow:hidden!important}
.stack-group{background:rgba(255,255,255,.44)!important;border-color:var(--line)!important}

.voice{background:var(--acid)!important;color:var(--ink)!important}
.voice .section-title{max-width:9ch}
.recommendation-grid{gap:1rem!important}
.recommendation-card{
  background:var(--paper)!important;
  border:1px solid var(--ink)!important;
  min-height:280px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transform:rotate(var(--tilt,0deg));
}
.recommendation-card:nth-child(1){--tilt:-1deg}.recommendation-card:nth-child(2){--tilt:1deg}.recommendation-card:nth-child(3){--tilt:-.7deg}.recommendation-card:nth-child(4){--tilt:.6deg}
.recommendation-card blockquote{font-size:clamp(1.45rem,2.5vw,2.2rem)!important;line-height:1.08!important;letter-spacing:-.035em!important}

.fit{background:#fff!important}
.fit-panels{gap:0!important;border-top:1px solid var(--ink)!important}
.fit-panel{border:0!important;border-bottom:1px solid var(--ink)!important;border-radius:0!important;background:transparent!important;padding:1.6rem 0!important}
.fit-panel h3{font-size:1.7rem!important;letter-spacing:-.035em!important}

.contact{background:var(--hot)!important;color:#fff!important}
.contact .eyebrow,.contact .body-copy{color:rgba(255,255,255,.78)!important}
.contact .section-title{color:#fff!important;max-width:9ch}
.contact .email{color:#fff!important;text-decoration-thickness:2px!important}
.form{background:var(--paper)!important;color:var(--ink)!important;border:0!important;padding:1.5rem!important}
.field input,.field textarea{border-radius:1rem!important;border:1px solid rgba(17,17,17,.18)!important;background:#fff!important}

.footer{background:var(--ink)!important;color:rgba(255,255,255,.72)!important}

@media (max-width:900px){
  .hero{min-height:auto}
  .hero h1{font-size:clamp(4rem,19vw,7rem)!important}
  .portrait-stage:before{right:0;top:-9%}
  .solve-grid{grid-template-columns:1fr!important}
  .solve-card:nth-child(odd){border-right:0!important;padding-right:0!important}
  .solve-card:nth-child(even){padding-left:0!important}
  .framework-grid{grid-template-columns:1fr 1fr!important}
  .framework-stage:nth-child(2){border-right:0!important}
  .framework-stage{border-bottom:1px solid var(--ink)!important}
}

@media (max-width:620px){
  .hero{padding-top:7rem!important}
  .hero h1{font-size:clamp(3.8rem,21vw,6rem)!important}
  .hero-lede{font-size:1.7rem!important}
  .hero-actions{gap:.55rem!important}
  .hero-actions .button{width:100%;justify-content:center}
  .portrait-badge{position:relative!important;left:auto!important;bottom:auto!important;margin:-1rem 1rem 0!important;width:auto!important}
  .framework-grid{grid-template-columns:1fr!important}
  .framework-stage{border-right:0!important}
  .section-title{font-size:clamp(2.8rem,15vw,4.8rem)!important}
}

@media (prefers-reduced-motion:no-preference){
  .hero>*,.section .wrap{animation:ezRise .65s ease both}
  .section .wrap{animation-timeline:view();animation-range:entry 8% cover 25%}
  @keyframes ezRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
}

/* 2026 studio pass: system-builder narrative, hierarchy, depth, motion and conversion polish */
:root{
  --paper-2:#ebe3d6;
  --night:#090a0d;
  --signal:#ff5a36;
  --signal-soft:rgba(255,90,54,.18);
  --success:#d9ff52;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.22,.61,.36,1);
}

::selection{background:var(--acid);color:var(--ink)}

.site-header{transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}
.site-header:hover{background:rgba(245,240,232,.94)!important;box-shadow:0 8px 32px rgba(17,17,17,.035)}
.nav-links a{position:relative;transition:color .2s ease,transform .2s ease}
.nav-links a:after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;background:var(--hot);transition:right .28s var(--ease-out)}
.nav-links a:hover:after,.nav-links a:focus-visible:after{right:0}

.hero{isolation:isolate;background:linear-gradient(180deg,rgba(255,255,255,.2),transparent 45%)}
.hero:before{
  content:"";
  position:absolute;
  inset:4rem 0 0;
  z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent 0 49.8%,rgba(17,17,17,.055) 49.9% 50.1%,transparent 50.2%),
    linear-gradient(0deg,transparent 0 49.8%,rgba(17,17,17,.04) 49.9% 50.1%,transparent 50.2%);
  background-size:120px 120px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 88%);
}
.hero-grid>div:first-child{position:relative;z-index:2}
.hero-kicker span{transition:background .2s ease,color .2s ease,transform .2s ease}
.hero-kicker span:hover{background:var(--ink)!important;color:#fff!important;transform:translateY(-2px)}
.hero-lede{position:relative}
.hero-lede:after{content:"";display:block;width:clamp(80px,10vw,140px);height:5px;margin-top:1.4rem;background:var(--hot);border-radius:999px}
.portrait-stage:after{
  content:"STRATEGY → SYSTEM → ADOPTION → IMPACT";
  position:absolute;
  z-index:3;
  top:1.2rem;
  left:-2rem;
  padding:.62rem .82rem;
  border:1px solid var(--ink);
  border-radius:999px;
  background:rgba(245,240,232,.94);
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.08em;
  transform:rotate(-2deg);
}

.positioning{position:relative;overflow:hidden}
.positioning:after{content:"SYSTEM / 01";position:absolute;right:-.03em;top:.08em;font-size:clamp(7rem,17vw,17rem);font-weight:950;letter-spacing:-.08em;color:rgba(17,17,17,.028);pointer-events:none}
.solve-card{position:relative;overflow:hidden}
.solve-card:after{content:"";position:absolute;left:0;bottom:0;width:0;height:5px;background:var(--hot);transition:width .4s var(--ease-out)}
.solve-card:hover:after{width:100%}

.work{position:relative;overflow:hidden;background:linear-gradient(180deg,#090a0d,#111 72%,#0b0c0f)!important}
.work:before{content:"PROOF OF WORK";position:absolute;right:-.02em;top:.02em;font-size:clamp(6rem,17vw,16rem);font-weight:950;letter-spacing:-.08em;color:rgba(255,255,255,.025);pointer-events:none}
.work .project-case{border-color:rgba(255,255,255,.2)!important;background:#f5f0e8!important;color:var(--ink);border-radius:1.25rem;overflow:hidden;transition:transform .28s var(--ease-out),box-shadow .28s var(--ease-out),border-color .28s ease}
.work .project-case:hover{transform:translateY(-3px);box-shadow:0 22px 55px rgba(0,0,0,.22)}
.work .project-case.is-open{box-shadow:0 30px 70px rgba(0,0,0,.28)!important}
.work .project-toggle{transition:background .2s ease}
.work .project-toggle:hover{background:linear-gradient(90deg,rgba(217,255,82,.65),rgba(255,255,255,.1))!important}
.work .project-heading h3{font-size:clamp(1.55rem,3vw,3rem)!important}
.work .project-metric{border-radius:999px!important}
.work .project-case.is-open .project-metric{background:var(--acid)!important}

.operating{position:relative;overflow:hidden}
.operating:before{content:"FROM LEARNING TO BUSINESS IMPACT";position:absolute;left:50%;top:2.2rem;transform:translateX(-50%);font-size:.7rem;font-weight:900;letter-spacing:.16em;color:rgba(17,17,17,.36);white-space:nowrap}
.framework-grid{position:relative;margin-top:3.6rem!important}
.framework-grid:after{content:"";position:absolute;left:3%;right:3%;top:50%;height:2px;background:linear-gradient(90deg,var(--hot),var(--acid));z-index:0;opacity:.45}
.framework-stage{position:relative;z-index:1;transition:background .25s ease,transform .25s var(--ease-out)}
.framework-stage:hover{background:var(--ink)!important;color:#fff;transform:translateY(-8px)}
.framework-stage:hover p{color:rgba(255,255,255,.72)!important}
.framework-stage:hover span{color:var(--acid)}
.framework-stage b{display:inline-flex;align-items:center;justify-content:center;min-width:72px;padding:.38rem .55rem;border-radius:999px;background:var(--paper);border:1px solid var(--ink);font-size:.7rem;letter-spacing:.08em}
.framework-stage:hover b{background:var(--acid);color:var(--ink)}
.horizon{position:relative;overflow:hidden;transition:transform .24s var(--ease-out),box-shadow .24s ease}
.horizon:before{content:"";position:absolute;inset:auto 0 0;height:5px;background:linear-gradient(90deg,var(--hot),var(--acid))}
.horizon:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(17,17,17,.08)!important}

.proof{position:relative}
.media-proof{border:1px solid var(--ink)!important;background:#fff!important;box-shadow:0 20px 60px rgba(17,17,17,.08)!important}
.media-proof video{display:block;width:100%;background:var(--night)}
.stack-group{position:relative;overflow:hidden;transition:transform .22s var(--ease-out),background .22s ease}
.stack-group:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--hot);transform:scaleY(0);transform-origin:bottom;transition:transform .28s var(--ease-out)}
.stack-group:hover{transform:translateX(5px);background:#fff!important}
.stack-group:hover:before{transform:scaleY(1)}

.voice{position:relative;overflow:hidden}
.voice:before{content:"HUMAN PROOF";position:absolute;right:-.02em;bottom:-.13em;font-size:clamp(7rem,19vw,18rem);font-weight:950;letter-spacing:-.08em;color:rgba(17,17,17,.055);pointer-events:none}
.recommendation-card{transition:transform .28s var(--ease-out),box-shadow .28s ease}
.recommendation-card:hover{transform:rotate(0deg) translateY(-8px)!important;box-shadow:0 24px 50px rgba(17,17,17,.14)!important}
.recommendation-link{text-decoration-thickness:1px;text-underline-offset:4px}

.fit-panel{position:relative;padding-right:3rem!important;transition:padding-left .24s var(--ease-out),background .24s ease}
.fit-panel:after{content:"↗";position:absolute;right:.2rem;top:50%;transform:translateY(-50%);font-size:1.6rem;opacity:.25;transition:opacity .2s ease,transform .2s var(--ease-out)}
.fit-panel:hover{padding-left:1rem!important;background:linear-gradient(90deg,rgba(217,255,82,.22),transparent)!important}
.fit-panel:hover:after{opacity:1;transform:translate(.2rem,-50%)}

.pathways{background:var(--paper-2)!important;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pathways .section-title{max-width:9ch}
.pathway-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:3rem}
.pathway-card{position:relative;display:flex;min-height:280px;flex-direction:column;justify-content:space-between;padding:1.5rem;border:1px solid var(--ink);border-radius:1.5rem;background:var(--paper);overflow:hidden;transition:transform .28s var(--ease-out),box-shadow .28s ease,background .28s ease}
.pathway-card:after{content:"↗";position:absolute;right:1.25rem;top:1.15rem;font-size:1.6rem;opacity:.25;transition:opacity .2s ease,transform .28s var(--ease-out)}
.pathway-card small{font-size:.7rem;font-weight:900;letter-spacing:.14em;color:var(--hot)}
.pathway-card strong{max-width:11ch;font-size:clamp(1.8rem,3vw,3rem);line-height:.96;letter-spacing:-.05em}
.pathway-card span{max-width:30ch;color:var(--soft);font-size:.92rem;line-height:1.5}
.pathway-card:hover{transform:translateY(-8px);background:#fff;box-shadow:0 26px 55px rgba(17,17,17,.1)}
.pathway-card:hover:after{opacity:1;transform:translate(.2rem,-.2rem)}
.pathway-card:nth-child(2){background:var(--ink);color:#fff}
.pathway-card:nth-child(2) span{color:rgba(255,255,255,.68)}
.pathway-card:nth-child(2) small{color:var(--acid)}
.pathway-card:nth-child(3){background:var(--acid)}
.pathway-card:nth-child(3) span{color:rgba(17,17,17,.68)}

.contact{position:relative;overflow:hidden;background:linear-gradient(135deg,#ff5a36,#ff6845 52%,#ff4f2a)!important}
.contact:before{content:"LET’S BUILD";position:absolute;right:-.04em;bottom:-.16em;font-size:clamp(7rem,20vw,19rem);font-weight:950;letter-spacing:-.085em;color:rgba(255,255,255,.08);pointer-events:none}
.form{position:relative;box-shadow:0 28px 80px rgba(73,19,5,.22)!important}
.field input,.field textarea{transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.field input:focus,.field textarea:focus{border-color:var(--hot)!important;box-shadow:0 0 0 4px rgba(255,90,54,.12);outline:none;transform:translateY(-1px)}

.footer{border-top:1px solid rgba(255,255,255,.12)}

@media (min-width:901px){
  .hero-grid{grid-template-columns:minmax(0,1.18fr) minmax(340px,.72fr)!important}
  .portrait-stage{min-height:560px}
  .project-toggle{padding:1.55rem 1.5rem!important}
}

@media (max-width:900px){
  .portrait-stage:after{left:1rem;top:1rem}
  .framework-grid:after{display:none}
  .work .project-case{border-radius:1rem}
  .pathway-grid{grid-template-columns:1fr}
  .pathway-card{min-height:220px}
}

@media (max-width:620px){
  .hero:before{background-size:72px 72px}
  .hero:after{bottom:.5rem;font-size:2.2rem}
  .portrait-stage:after{font-size:.56rem;left:.6rem;right:.6rem;width:max-content;max-width:calc(100% - 1.2rem)}
  .operating:before{top:1.3rem;font-size:.56rem;letter-spacing:.1em}
  .framework-grid{margin-top:2.8rem!important}
  .framework-stage:hover{transform:none}
  .recommendation-card:hover{transform:rotate(0deg)!important}
  .fit-panel:hover{padding-left:0!important}
  .pathway-grid{margin-top:2rem}
  .pathway-card{min-height:200px;padding:1.25rem}
  .pathway-card:hover{transform:none}
}

@media (prefers-reduced-motion:no-preference){
  .brand-dot{animation:signalPulse 2.8s ease-in-out infinite}
  .portrait-stage:after{animation:floatTag 4.5s ease-in-out infinite}
  .hero-lede:after{transform-origin:left;animation:lineIn .9s .35s var(--ease-out) both}
  .framework-stage{animation:stageRise .7s var(--ease-out) both;animation-timeline:view();animation-range:entry 5% cover 22%}
  .framework-stage:nth-child(2){animation-delay:.06s}.framework-stage:nth-child(3){animation-delay:.12s}.framework-stage:nth-child(4){animation-delay:.18s}
  @keyframes signalPulse{0%,100%{box-shadow:0 0 0 7px rgba(255,90,54,.10)}50%{box-shadow:0 0 0 13px rgba(255,90,54,.03)}}
  @keyframes floatTag{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(-1deg) translateY(-7px)}}
  @keyframes lineIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes stageRise{from{opacity:.35;transform:translateY(24px)}to{opacity:1;transform:none}}
}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}