:root{--green:#185a55;--deep:#0d4946;--orange:#ff7924;--cream:#fff8e7;--paper:#fffdf9;--ink:#173f3c;--pink:#ed1370;--blue:#5ba4df;--max:1120px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Montserrat,Avenir Next,Avenir,Arial,sans-serif;overflow-x:hidden}button,a{font:inherit}.container{width:min(var(--max),calc(100% - 40px));margin-inline:auto}.site-header{position:sticky;top:0;z-index:50;padding:18px 0 0;transition:.3s}.site-header.scrolled{padding-top:8px}.nav{height:64px;padding:0 54px;border-radius:40px;background:var(--green);display:grid;grid-template-columns:1fr 1fr 1.3fr 1fr 1fr;align-items:center;gap:20px;box-shadow:0 10px 30px #164c4630}.nav-link{color:#ffe49c;text-decoration:none;text-transform:uppercase;letter-spacing:.2em;font-size:11px;font-weight:800;text-align:center}.nav-link:hover{color:white}.brand{display:flex;justify-content:center;align-items:center;gap:10px;color:#fff;text-decoration:none}.brand>span{font-weight:1000;font-size:28px;letter-spacing:-.18em;color:var(--orange)}.brand small{text-transform:uppercase;font-size:8px;letter-spacing:.2em;line-height:1.4}.menu-button{display:none;border:0;background:transparent}.hero{padding:90px 0 70px;text-align:center}.eyebrow{text-transform:uppercase;letter-spacing:.28em;font-weight:800;font-size:11px;color:var(--orange)}h1{font-size:clamp(42px,6vw,76px);line-height:.98;margin:26px auto 32px;max-width:1050px;letter-spacing:-.045em}h1 span,.about h2 span{color:var(--orange)}.chips{display:flex;justify-content:center;flex-wrap:wrap;gap:16px}.chips span,.tags span{border:2px solid var(--green);border-radius:30px;padding:10px 16px;font-size:10px;text-transform:uppercase;font-weight:900;letter-spacing:.17em}.hero-copy,.section-lead,.specialty-intro{font-style:italic;font-weight:650;letter-spacing:.05em;line-height:1.7}.hero-copy{max-width:760px;margin:50px auto 35px;font-size:18px}.values{display:flex;justify-content:center;gap:70px;margin:30px 0 45px}.values div{display:grid;gap:8px;font-size:13px;font-style:italic;font-weight:700}.values b{display:grid;place-items:center;margin:auto;width:52px;height:52px;border-radius:50%;background:var(--green);color:#ffe49c;font-size:25px}.values div:nth-child(odd) b{background:var(--orange);color:white}.hero-work{margin:0 -6vw;filter:drop-shadow(0 22px 15px #124b4620)}.hero-work img{display:block;width:100%;max-height:420px;object-fit:cover;object-position:center;border-radius:30px}.section{padding:80px 0}.section-rule{height:2px;background:var(--orange);margin-bottom:62px}.section-title{font-size:clamp(42px,5vw,65px);line-height:1;margin:0 0 58px;letter-spacing:-.04em}.section-title.center{text-align:center}.section-title.right{text-align:right}.skill-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.skill-card{position:relative;overflow:hidden;min-height:510px;padding:36px 28px;border-radius:28px;color:#fff;box-shadow:0 30px 28px -25px currentColor}.skill-card:after{content:"";position:absolute;width:260px;height:260px;border:1px solid #fff5;right:-80px;bottom:-110px;transform:rotate(45deg)}.illustrator{background:linear-gradient(#ffc78a,#ff8a00)}.indesign{background:linear-gradient(#f1a5c7,#ed0a69)}.photoshop{background:linear-gradient(#bce4fa,#4c96d5)}.app-icon{float:left;margin-right:12px;padding:8px;background:#211015;border-radius:5px;font-size:24px;font-weight:900}.skill-card h3{font-size:21px;color:#231316;margin:4px 0 42px}.skill-visual{height:180px;display:grid;place-items:center;border:1px dashed #fff9;border-radius:15px;text-align:center;font-size:12px;font-weight:900;letter-spacing:.14em}.skill-card p{font-size:16px;line-height:1.7;font-style:italic}.meter{position:absolute;left:28px;right:28px;bottom:25px;height:5px;border-radius:5px;background:#ffffff60;overflow:hidden}.meter i{display:block;height:100%;width:0;background:white;transition:1.2s .3s}.skill-card.visible .meter i{width:var(--level)}.section-lead{text-align:center;font-style:normal;font-size:20px;margin:55px 0 25px}.button{display:inline-flex;justify-content:center;align-items:center;min-width:155px;padding:15px 26px;border:0;border-radius:40px;color:#fff;text-decoration:none;text-transform:uppercase;font-size:13px;font-weight:900;letter-spacing:.1em;cursor:pointer;transition:.25s}.button.dark{background:var(--green)}.button.orange{background:var(--orange)}.section>.button{display:flex;margin:auto}.button:hover{transform:translateY(-3px);box-shadow:0 12px 20px #174a4530}.extra-skills{justify-content:center;flex-wrap:wrap;gap:12px;margin:25px auto}.extra-skills.open{display:flex}.extra-skills span{padding:10px 18px;border-radius:30px;background:#e7f2ee;font-weight:800}.career,.projects{background:radial-gradient(circle at 100% 20%,#ffc77b90 0,transparent 34%),#fff}.timeline{position:relative}.timeline:before{content:"";position:absolute;left:46%;top:40px;bottom:40px;width:3px;background:var(--green)}.timeline-item{display:grid;grid-template-columns:40% 12% 48%;align-items:center;min-height:230px}.timeline-item>div h3{text-transform:uppercase;margin:0 0 8px;font-size:20px}.timeline-item em,.timeline-item strong{display:block;font-size:19px;line-height:1.5;font-weight:500}.timeline-item i{position:relative;z-index:2;justify-self:center;width:54px;height:54px;border:6px solid white;border-radius:50%;background:var(--orange);outline:2px solid var(--orange)}.timeline-item:nth-child(2) i{background:var(--green);outline-color:var(--green)}.timeline-item ul{line-height:1.65;font-style:italic;font-size:14px}.project-heading{display:grid;grid-template-columns:1fr 1fr;align-items:end;border-bottom:2px solid var(--green);margin-bottom:55px}.project-heading .section-title{margin-bottom:15px}.project-heading p{text-align:right;font-style:italic;font-weight:700;line-height:1.6}.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:36px}.project-card{background:var(--cream);padding:22px;border-radius:30px;transition:.35s}.project-card:hover{transform:translateY(-8px);box-shadow:0 24px 35px #ff7a2426}.project-card img{width:100%;height:400px;object-fit:cover;object-position:top;border-radius:22px}.project-card .tags{display:flex;gap:7px;flex-wrap:wrap;margin:18px 0}.project-card .tags span{border:0;background:var(--orange);color:#fff;padding:8px 12px;font-size:9px}.project-card h3{text-transform:uppercase;font-size:18px;line-height:1.25;margin:0}.project-card p{font-style:italic;line-height:1.5;min-height:48px}.project-card button{width:100%;display:flex;align-items:center;justify-content:space-between;border:0;background:transparent;color:var(--orange);text-transform:uppercase;font-weight:900;letter-spacing:.08em;cursor:pointer;padding:0}.project-card button b{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--orange);color:var(--green);font-size:40px}.specialty-intro{text-align:right;max-width:820px;margin:-35px 0 60px auto}.specialty-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}.specialty-card{position:relative;background:var(--green);color:#fff6bd;padding:18px 18px 25px;border-radius:25px;min-height:390px}.specialty-card img{width:100%;height:185px;object-fit:cover;border-radius:18px}.specialty-card h3{font-size:23px;margin:14px 0 7px;border-bottom:2px solid #fff6bd;padding-bottom:7px}.specialty-card p{max-width:75%;line-height:1.5}.specialty-card>b{position:absolute;right:-8px;bottom:-8px;display:grid;place-items:center;width:74px;height:74px;border:15px solid var(--paper);border-radius:50%;background:var(--orange);color:white;font-size:28px}.about{padding:90px 0;background:radial-gradient(circle at 100% 80%,#ffb24f90,transparent 36%)}.about-grid{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:70px}.about-label{display:flex;align-items:center;gap:30px}.about-label img{width:95px;height:95px;object-fit:cover;border-radius:50%;background:var(--green)}.about-label span{border:2px solid var(--green);border-radius:30px;padding:9px 28px;text-transform:uppercase;font-weight:800}.about h2{font-size:42px;line-height:1.08;margin:45px 0}.about p{font-size:17px;line-height:1.7;max-width:660px}.about-actions{display:flex;gap:16px;margin-top:40px}.big-logo{text-align:center}.big-logo strong{display:block;font-size:150px;line-height:.8;letter-spacing:-.16em;color:var(--green)}.big-logo span{display:block;color:var(--orange);font-size:24px;margin-top:25px}.reveal{opacity:0;transform:translateY(24px);transition:opacity .75s ease,transform .75s ease}.reveal.visible{opacity:1;transform:none}.project-modal{width:min(850px,calc(100% - 30px));padding:0;border:0;border-radius:25px;overflow:hidden;color:var(--ink);box-shadow:0 30px 100px #0008}.project-modal::backdrop{background:#0b3835d9;backdrop-filter:blur(5px)}.project-modal img{width:100%;max-height:480px;object-fit:cover;object-position:top}.project-modal>div{padding:30px}.project-modal h2{font-size:34px;margin:8px 0}.modal-close{position:absolute;right:15px;top:15px;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:var(--green);font-size:30px;cursor:pointer}.toast{position:fixed;z-index:100;left:50%;bottom:25px;transform:translate(-50%,120px);padding:14px 24px;background:var(--green);color:#fff;border-radius:30px;transition:.35s}.toast.show{transform:translate(-50%,0)}
@media(max-width:800px){.site-header{padding-top:10px}.nav{display:flex;justify-content:space-between;padding:0 22px;height:58px}.nav-link{display:none}.brand{justify-content:flex-start}.menu-button{display:grid;gap:6px}.menu-button i{display:block;width:27px;height:2px;background:#fff}.nav.open{height:auto;min-height:58px;flex-wrap:wrap;padding-bottom:20px}.nav.open .nav-link{display:block;width:100%;padding:9px}.hero{padding-top:60px}.hero h1 br{display:none}.values{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}.hero-work{margin:0}.hero-work img{height:250px}.skill-grid,.project-grid,.specialty-grid,.about-grid{grid-template-columns:1fr}.skill-card{min-height:470px}.section{padding:60px 0}.section-title{margin-bottom:40px}.timeline:before{left:20px}.timeline-item{grid-template-columns:45px 1fr;gap:10px;padding:30px 0}.timeline-item>div,.timeline-item ul{grid-column:2}.timeline-item i{grid-column:1;grid-row:1;position:absolute;left:-5px;width:50px;height:50px}.timeline-item ul{margin:15px 0}.project-heading{display:block}.project-heading p{text-align:left}.project-card img{height:330px}.specialty-intro,.section-title.right{text-align:left}.about-grid{gap:90px}.big-logo{grid-row:1}.big-logo strong{font-size:110px}.about h2{font-size:34px}.about-actions{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.meter i{width:var(--level)!important}}
/* Floating-to-fixed navigation, adapted from the Suzanil interaction. */
.site-header{position:fixed;inset:18px 0 auto;z-index:50;padding:0;pointer-events:none;transition:inset .42s cubic-bezier(.22,.8,.2,1)}
.site-header.scrolled{inset:0 0 auto;padding:0}
.site-header .nav{width:min(var(--max),calc(100% - 40px));height:64px;padding:0 54px;border:1px solid #ffffff14;border-radius:40px;background:linear-gradient(135deg,#185a55f8,#104d49f4);pointer-events:auto;box-shadow:0 14px 36px #164c4635;backdrop-filter:blur(16px);transition:width .42s cubic-bezier(.22,.8,.2,1),height .42s cubic-bezier(.22,.8,.2,1),border-radius .42s cubic-bezier(.22,.8,.2,1),box-shadow .42s ease,background .42s ease}
.site-header.scrolled .nav{width:100%;height:70px;border-radius:0;background:linear-gradient(135deg,#124f4cf8,#0c413ef5);box-shadow:0 22px 60px #0b3b384f}
@media(max-width:800px){.site-header{inset:10px 0 auto;padding:0}.site-header .nav{width:min(100% - 24px,var(--max));height:58px;padding:0 22px;border-radius:29px}.site-header.scrolled{inset:0 0 auto}.site-header.scrolled .nav{width:100%;height:64px;border-radius:0}.site-header .nav.open{height:auto;min-height:58px;padding-bottom:20px;border-radius:22px}.site-header.scrolled .nav.open{width:calc(100% - 16px);margin-top:8px;border-radius:22px}}
/* Animated hero project carousel. */
.hero-carousel{position:relative;width:calc(100% + 12vw);margin:8px -6vw 0;padding:0 70px 42px;filter:drop-shadow(0 22px 15px #124b4620);outline:none}
.hero-carousel-viewport{position:relative;height:390px;overflow:hidden;touch-action:pan-y;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.hero-slide{--offset:0;--distance:0;position:absolute;top:18px;left:50%;width:clamp(260px,34vw,430px);height:330px;margin:0;overflow:hidden;border-radius:30px;background:var(--cream);box-shadow:0 20px 45px #163f3b35;opacity:calc(1 - var(--distance)*.22);z-index:calc(10 - var(--distance));transform:translateX(calc(-50% + var(--offset)*72%)) scale(calc(1 - var(--distance)*.13));transition:transform .72s cubic-bezier(.22,.8,.2,1),opacity .55s ease,filter .55s ease;filter:saturate(calc(1 - var(--distance)*.16));will-change:transform}
.hero-slide[data-distance="0"]{box-shadow:0 28px 55px #0e47423d}
.hero-slide img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:inherit;transition:transform 5s ease}
.hero-slide[data-distance="0"] img{transform:scale(1.035)}
.hero-slide span{position:absolute;left:18px;bottom:18px;padding:9px 15px;border-radius:30px;background:#fffdf4e8;color:var(--green);font-size:10px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;box-shadow:0 8px 20px #0002;backdrop-filter:blur(8px)}
.carousel-arrow{position:absolute;top:164px;z-index:20;display:grid;place-items:center;width:50px;height:50px;border:1px solid #ffffff70;border-radius:50%;background:var(--orange);color:#fff;font-size:22px;font-weight:900;cursor:pointer;box-shadow:0 10px 25px #ff79244a;transition:transform .25s ease,background .25s ease}
.carousel-arrow:hover{transform:scale(1.1);background:var(--green)}
.carousel-prev{left:20px}.carousel-next{right:20px}
.carousel-dots{position:absolute;left:50%;bottom:8px;display:flex;gap:9px;transform:translateX(-50%)}
.carousel-dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:#185a5540;cursor:pointer;transition:width .35s ease,background .35s ease}
.carousel-dot.active{width:28px;border-radius:8px;background:var(--orange)}
@media(max-width:800px){.hero-carousel{width:calc(100% + 40px);margin:5px -20px 0;padding:0 36px 38px}.hero-carousel-viewport{height:315px;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}.hero-slide{top:16px;width:min(74vw,330px);height:265px;transform:translateX(calc(-50% + var(--offset)*78%)) scale(calc(1 - var(--distance)*.14));border-radius:23px}.carousel-arrow{top:124px;width:42px;height:42px}.carousel-prev{left:4px}.carousel-next{right:4px}}
@media(prefers-reduced-motion:reduce){.hero-slide,.hero-slide img,.carousel-dot{transition:none!important}}
/* Typography correction: keep portfolio copy upright and easier to read. */
.hero-copy,.section-lead,.specialty-intro,.values div,.skill-card p,.timeline-item em,.timeline-item ul,.project-heading p,.project-card p{font-style:normal}
/* Global typography rule: no italic text anywhere on the site. */
body,body *{font-style:normal!important}
body{font-family:"Avenir Next",Avenir,"Helvetica Neue",Arial,sans-serif}
/* Professional experience timeline: circles stay lit and intensify on hover. */
.timeline-item{--timeline-glow:var(--orange);isolation:isolate}
.timeline-item:nth-child(2){--timeline-glow:var(--green)}
.timeline-item i{
  overflow:visible;
  background:var(--timeline-glow)!important;
  outline-color:var(--timeline-glow)!important;
  box-shadow:0 0 0 9px color-mix(in srgb,var(--timeline-glow) 13%,transparent),0 0 24px color-mix(in srgb,var(--timeline-glow) 48%,transparent),0 0 54px color-mix(in srgb,var(--timeline-glow) 24%,transparent);
  transform:scale(1);
  transition:transform .34s cubic-bezier(.22,.8,.2,1),box-shadow .34s ease,filter .34s ease;
  animation:timelinePulse 2.8s ease-in-out infinite;
}
.timeline-item i::before,.timeline-item i::after{
  content:"";
  position:absolute;
  inset:-15px;
  border-radius:inherit;
  pointer-events:none;
}
.timeline-item i::before{
  border:1px solid color-mix(in srgb,var(--timeline-glow) 42%,transparent);
  opacity:.62;
  transform:scale(.9);
  animation:timelineHalo 2.8s ease-in-out infinite;
}
.timeline-item i::after{
  inset:11px;
  background:radial-gradient(circle at 34% 28%,#fff 0 12%,#fff8 13% 22%,transparent 25%);
  opacity:.86;
  filter:blur(.1px);
}
.timeline-item:hover i{
  transform:scale(1.13);
  filter:saturate(1.18) brightness(1.08);
  box-shadow:0 0 0 13px color-mix(in srgb,var(--timeline-glow) 20%,transparent),0 0 34px color-mix(in srgb,var(--timeline-glow) 72%,transparent),0 0 82px color-mix(in srgb,var(--timeline-glow) 44%,transparent);
}
.timeline-item:hover i::before{
  opacity:.95;
  border-color:color-mix(in srgb,var(--timeline-glow) 68%,transparent);
  animation-duration:1.45s;
}
@keyframes timelinePulse{
  0%,100%{box-shadow:0 0 0 9px color-mix(in srgb,var(--timeline-glow) 13%,transparent),0 0 24px color-mix(in srgb,var(--timeline-glow) 48%,transparent),0 0 54px color-mix(in srgb,var(--timeline-glow) 24%,transparent)}
  50%{box-shadow:0 0 0 12px color-mix(in srgb,var(--timeline-glow) 18%,transparent),0 0 31px color-mix(in srgb,var(--timeline-glow) 58%,transparent),0 0 68px color-mix(in srgb,var(--timeline-glow) 31%,transparent)}
}
@keyframes timelineHalo{
  0%,100%{transform:scale(.88);opacity:.48}
  50%{transform:scale(1.16);opacity:.78}
}
@media(prefers-reduced-motion:reduce){.timeline-item i,.timeline-item i::before{animation:none!important;transition:none!important}}
/* Dark mode switch and palette. */
html{color-scheme:light}
html.dark-mode{color-scheme:dark}
body{transition:background-color .35s ease,color .35s ease}
.site-header .nav{grid-template-columns:1fr 1fr 1.3fr 1fr 1fr auto}
.theme-toggle{
  display:grid;
  place-items:center;
  justify-self:end;
  width:42px;
  height:42px;
  border:1px solid #ffe49c66;
  border-radius:50%;
  background:#fff7d81a;
  color:#ffe49c;
  cursor:pointer;
  box-shadow:inset 0 0 0 1px #ffffff10,0 8px 18px #093c3829;
  transition:transform .25s ease,background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.theme-toggle span{
  display:block;
  font-size:18px;
  line-height:1;
  transform:translateY(-1px);
}
.theme-toggle:hover{
  transform:translateY(-2px) scale(1.04);
  background:var(--orange);
  border-color:var(--orange);
  color:#fff;
  box-shadow:0 12px 22px #ff79243f;
}
html.dark-mode body{
  --paper:#071917;
  --cream:#102c29;
  --ink:#f8edd2;
  --green:#1f746d;
  --deep:#062320;
  --orange:#ff8a3d;
  background:
    radial-gradient(circle at 14% 2%,#ff79241d 0,transparent 30%),
    radial-gradient(circle at 94% 20%,#1f746d52 0,transparent 34%),
    #071917;
  color:var(--ink);
}
html.dark-mode .site-header .nav{
  border-color:#ffe49c18;
  background:linear-gradient(135deg,#092d2af4,#061c1af4);
  box-shadow:0 16px 42px #0009,0 0 0 1px #ffe49c10;
}
html.dark-mode .site-header.scrolled .nav{
  background:linear-gradient(135deg,#071f1df8,#041514f8);
  box-shadow:0 22px 70px #000b;
}
html.dark-mode .nav-link,
html.dark-mode .brand small{
  color:#ffe7a8;
}
html.dark-mode .brand>span,
html.dark-mode h1 span,
html.dark-mode .about h2 span,
html.dark-mode .eyebrow{
  color:var(--orange);
}
html.dark-mode .theme-toggle{
  background:#ff8a3d20;
  border-color:#ffb16f72;
  color:#ffd89a;
  box-shadow:0 0 18px #ff8a3d26;
}
html.dark-mode .chips span,
html.dark-mode .tags span,
html.dark-mode .about-label span{
  border-color:#7bc4bd;
  color:#f8edd2;
  background:#ffffff05;
}
html.dark-mode .section-rule{
  background:linear-gradient(90deg,transparent,var(--orange),transparent);
}
html.dark-mode .values b{
  background:#1f746d;
  color:#ffe7a8;
  box-shadow:0 0 24px #1f746d6c;
}
html.dark-mode .values div:nth-child(odd) b{
  background:var(--orange);
  color:#071917;
  box-shadow:0 0 28px #ff8a3d68;
}
html.dark-mode .career,
html.dark-mode .projects{
  background:
    radial-gradient(circle at 100% 20%,#ff8a3d24 0,transparent 34%),
    linear-gradient(180deg,#0b211f,#081918);
}
html.dark-mode .timeline:before{
  background:#3a9b91;
  box-shadow:0 0 22px #3a9b9150;
}
html.dark-mode .project-card{
  background:linear-gradient(180deg,#12322f,#0d2523);
  box-shadow:0 0 0 1px #ffe49c10;
}
html.dark-mode .project-card:hover{
  box-shadow:0 28px 46px #0007,0 0 34px #ff8a3d1f;
}
html.dark-mode .project-card button{
  color:#ffad72;
}
html.dark-mode .project-card button b{
  color:#071917;
}
html.dark-mode .extra-skills span{
  background:#143a36;
  color:#ffe7a8;
}
html.dark-mode .specialty-card{
  background:linear-gradient(180deg,#123c38,#092522);
  color:#fff1b9;
  box-shadow:0 0 0 1px #ffe49c13,0 24px 45px #0005;
}
html.dark-mode .specialty-card>b{
  border-color:#071917;
}
html.dark-mode .about{
  background:
    radial-gradient(circle at 100% 80%,#ff8a3d22,transparent 36%),
    linear-gradient(180deg,#071917,#0b211f);
}
html.dark-mode .big-logo strong{
  color:#7bc4bd;
  text-shadow:0 0 32px #1f746d44;
}
html.dark-mode .big-logo span{
  color:#ffad72;
}
html.dark-mode .button.dark{
  background:#277f77;
}
html.dark-mode .button.orange{
  color:#071917;
}
html.dark-mode .hero-carousel{
  filter:drop-shadow(0 26px 22px #0007);
}
html.dark-mode .hero-slide{
  background:#102c29;
  box-shadow:0 22px 45px #0009;
}
html.dark-mode .hero-slide[data-distance="0"]{
  box-shadow:0 30px 65px #000b,0 0 40px #ff8a3d1f;
}
html.dark-mode .hero-slide span{
  background:#071917d9;
  color:#ffe7a8;
  box-shadow:0 10px 24px #0007;
}
html.dark-mode .carousel-dot{
  background:#ffe49c35;
}
html.dark-mode .carousel-dot.active{
  background:var(--orange);
}
html.dark-mode .project-modal{
  background:#0b211f;
  color:#f8edd2;
}
html.dark-mode .modal-close{
  background:#f8edd2;
  color:#071917;
}
html.dark-mode .toast{
  background:#ff8a3d;
  color:#071917;
}
@media(max-width:800px){
  .site-header .nav{grid-template-columns:none}
  .theme-toggle{display:grid;margin-left:auto;order:4}
  .nav.open .theme-toggle{margin:8px auto 0;width:46px;height:46px}
}
/* Official logo image replacements. */
.brand-logo{
  display:block;
  width:min(210px,24vw);
  max-height:42px;
  object-fit:contain;
  filter:drop-shadow(0 3px 5px #063d3828);
}
.big-logo img{
  display:block;
  width:min(380px,100%);
  margin-inline:auto;
  filter:drop-shadow(0 20px 24px #174a4520);
}
html.dark-mode .brand-logo{
  filter:drop-shadow(0 6px 12px #0008);
}
html.dark-mode .big-logo img{
  filter:drop-shadow(0 22px 32px #0008) drop-shadow(0 0 22px #1f746d36);
}
@media(max-width:800px){
  .brand-logo{width:168px;max-height:38px}
  .big-logo img{width:min(310px,92vw)}
}
/* About signature asset. */
.about-signature{
  display:block;
  width:min(118px,34vw);
  height:auto;
  margin:18px 0 0 2px;
  filter:drop-shadow(0 10px 16px #174a4520);
}
.about-signature + .about-actions{
  margin-top:18px;
}
html.dark-mode .about-signature{
  filter:drop-shadow(0 12px 20px #0008);
}
@media(max-width:800px){
  .about-signature{width:min(112px,38vw);margin-top:16px}
  .about-signature + .about-actions{margin-top:17px}
}
/* Contact project form from the updated Site.pdf layout. */
.inquiry-grid{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(340px,1fr);
  gap:92px;
  align-items:start;
  padding:78px 0 28px;
}
.inquiry-copy h2{
  margin:0 0 34px;
  color:var(--green);
  font-size:clamp(36px,4.2vw,58px);
  line-height:1.08;
  letter-spacing:-.04em;
}
.inquiry-copy p{
  max-width:520px;
  margin:0 0 22px;
  color:#596361;
  font-size:18px;
  line-height:1.58;
}
.contact-form{
  display:grid;
  gap:20px;
  padding-top:36px;
}
.contact-form label,
.contact-form legend{
  color:var(--green);
  text-transform:uppercase;
  font-size:15px;
  font-weight:900;
  letter-spacing:.12em;
}
.contact-form label{
  display:grid;
  gap:8px;
}
.contact-form label span{
  color:#596361;
  text-transform:none;
  font-size:15px;
  font-weight:600;
  letter-spacing:.03em;
  line-height:1.55;
}
.contact-form input,
.contact-form textarea{
  width:100%;
  border:2px solid color-mix(in srgb,var(--green) 66%,white);
  border-radius:28px;
  background:#fffdfcf2;
  color:var(--ink);
  padding:15px 22px;
  font:inherit;
  font-size:16px;
  outline:none;
  box-shadow:inset 0 1px 0 #fff,0 8px 18px #174a4510;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.contact-form textarea{
  min-height:82px;
  resize:vertical;
}
.contact-form input:focus,
.contact-form textarea:focus{
  border-color:var(--orange);
  box-shadow:0 0 0 4px #ff792424,0 10px 24px #174a4514;
}
.contact-form fieldset{
  display:grid;
  gap:12px;
  margin:2px 0 0;
  padding:0;
  border:0;
}
.contact-form legend{
  margin:0 0 12px;
}
.contact-form fieldset label{
  display:flex;
  align-items:center;
  gap:10px;
  color:#596361;
  text-transform:none;
  font-size:16px;
  font-weight:600;
  letter-spacing:.02em;
}
.contact-form input[type="radio"]{
  appearance:none;
  width:22px;
  height:22px;
  flex:0 0 22px;
  padding:0;
  border:2px solid color-mix(in srgb,var(--green) 68%,white);
  border-radius:50%;
  background:#fffdfcf2;
  box-shadow:none;
  cursor:pointer;
}
.contact-form input[type="radio"]:checked{
  border-color:var(--green);
  background:radial-gradient(circle,var(--orange) 0 42%,transparent 45%);
}
.contact-form .button{
  justify-self:end;
  min-width:165px;
  margin-top:-6px;
}
.contact-form .button:disabled{
  cursor:not-allowed;
  opacity:.72;
  transform:none;
  box-shadow:none;
}
html.dark-mode .inquiry-copy h2,
html.dark-mode .contact-form label,
html.dark-mode .contact-form legend{
  color:#ffe7a8;
}
html.dark-mode .inquiry-copy p,
html.dark-mode .contact-form label span,
html.dark-mode .contact-form fieldset label{
  color:#d8cdb2;
}
html.dark-mode .contact-form input,
html.dark-mode .contact-form textarea{
  border-color:#7bc4bd;
  background:#071917d4;
  color:#f8edd2;
  box-shadow:inset 0 1px 0 #ffffff10,0 10px 24px #0004;
}
html.dark-mode .contact-form input[type="radio"]{
  background:#071917d4;
}
@media(max-width:800px){
  .inquiry-grid{
    grid-template-columns:1fr;
    gap:38px;
    padding:56px 0 10px;
  }
  .inquiry-copy h2{font-size:34px}
  .inquiry-copy p{font-size:16px}
  .contact-form{padding-top:0}
  .contact-form .button{justify-self:start;margin-top:4px}
}
/* New structure: project form before About, plus PDF-style footer. */
.inquiry-section{
  padding:58px 0 86px;
  background:
    radial-gradient(circle at 92% 54%,#ffb24f55 0,transparent 36%),
    linear-gradient(180deg,#fff 0%,var(--paper) 100%);
}
.inquiry-section .inquiry-grid{
  padding:0;
}
.about{
  padding-top:94px;
}
.site-footer{
  background:var(--green);
  color:#ffe8aa;
  padding:72px 0 38px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:start;
  gap:46px;
}
.footer-logo{
  display:inline-flex;
  width:min(360px,44vw);
}
.footer-logo img{
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 12px 18px #082f2c35);
}
.footer-nav{
  display:grid;
  min-width:220px;
  justify-items:end;
}
.footer-nav a{
  width:100%;
  padding:10px 0 12px;
  border-bottom:1px solid #ffe8aa;
  color:#ffe8aa;
  text-align:right;
  text-decoration:none;
  text-transform:uppercase;
  font-size:12px;
  font-weight:900;
  letter-spacing:.34em;
  transition:color .2s ease,padding-right .2s ease;
}
.footer-nav a:first-child{
  color:var(--orange);
  border-top:1px solid var(--orange);
}
.footer-nav a:hover{
  color:#fff;
  padding-right:8px;
}
.footer-meta{
  grid-column:1 / -1;
  justify-self:end;
  margin-top:-24px;
  text-align:right;
}
.footer-meta p{
  margin:0 0 14px;
  text-transform:uppercase;
  font-size:12px;
  font-weight:900;
  letter-spacing:.34em;
}
.footer-meta a{
  color:#fff0bc;
  text-decoration:none;
  font-size:20px;
  font-weight:700;
  letter-spacing:.08em;
}
.footer-meta a:hover{
  color:#fff;
}
html.dark-mode .inquiry-section{
  background:
    radial-gradient(circle at 92% 54%,#ff8a3d24 0,transparent 36%),
    linear-gradient(180deg,#071917 0%,#0b211f 100%);
}
html.dark-mode .site-footer{
  background:#092d2a;
  box-shadow:inset 0 1px 0 #ffe8aa16;
}
@media(max-width:800px){
  .inquiry-section{padding:52px 0 66px}
  .about{padding-top:70px}
  .site-footer{padding:54px 0 34px}
  .footer-grid{
    grid-template-columns:1fr;
    gap:34px;
  }
  .footer-logo{
    width:min(280px,78vw);
  }
  .footer-nav{
    width:100%;
    min-width:0;
    justify-items:stretch;
  }
  .footer-meta{
    justify-self:start;
    margin-top:0;
    text-align:left;
  }
  .footer-meta p{
    font-size:10px;
    line-height:1.8;
  }
  .footer-meta a{
    font-size:16px;
  }
}
/* Internal cloned campaign page opened from the Stanley project card. */
.campaign-page{
  min-height:100vh;
  background:#fff;
  transition:background-color .35s ease;
}
.campaign-page img{
  display:block;
  width:100%;
  height:auto;
  transition:filter .35s ease,opacity .35s ease;
}
.campaign-back{
  position:fixed;
  top:124px;
  left:32px;
  z-index:120;
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  align-items:center;
  border:0;
  border-radius:50%;
  padding:0;
  background:var(--orange);
  color:var(--green);
  font-size:48px;
  font-weight:900;
  line-height:.78;
  cursor:pointer;
  box-shadow:0 14px 28px #0002;
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}
.campaign-back:hover{
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 18px 34px #0003;
  filter:saturate(1.06);
}
body.project-view{
  background:#fff;
}
body.project-view main,
body.project-view .site-footer,
body.project-view .toast{
  display:none;
}
body.project-view .campaign-page{
  display:block;
}
.campaign-page[hidden]{
  display:none!important;
}
html.dark-mode body.project-view{
  background:#071917;
}
html.dark-mode .campaign-page{
  background:#071917;
}
html.dark-mode .campaign-page img{
  filter:invert(1) hue-rotate(180deg) saturate(.92) contrast(.9) brightness(.9);
  opacity:.96;
}
html.dark-mode .campaign-back{
  background:#ff8a3d;
  box-shadow:0 18px 38px #0009,0 0 24px #ff8a3d38;
}
@media(max-width:800px){
  .campaign-back{
    top:94px;
    left:20px;
    width:44px;
    height:44px;
    font-size:40px;
  }
}
/* Stable animated top menu: keeps the floating-to-full-width effect without scroll flicker. */
.site-header{
  position:fixed;
  inset:18px 0 auto!important;
  padding:0!important;
  pointer-events:none;
  transform:translateZ(0);
  backface-visibility:hidden;
  will-change:inset;
  transition:inset .42s cubic-bezier(.22,.8,.2,1)!important;
}
.site-header.scrolled{
  inset:0 0 auto!important;
}
.site-header .nav{
  width:min(var(--max),calc(100% - 40px))!important;
  height:64px!important;
  border-radius:40px!important;
  background:linear-gradient(135deg,#185a55f8,#104d49f4)!important;
  box-shadow:0 14px 36px #164c4635!important;
  transform:translateZ(0);
  will-change:width,height,border-radius;
  transition:width .42s cubic-bezier(.22,.8,.2,1),height .42s cubic-bezier(.22,.8,.2,1),border-radius .42s cubic-bezier(.22,.8,.2,1),box-shadow .28s ease,background .28s ease!important;
}
.site-header.scrolled .nav{
  width:100%!important;
  height:70px!important;
  border-radius:0!important;
  background:linear-gradient(135deg,#124f4cf8,#0c413ef5)!important;
  box-shadow:0 22px 60px #0b3b384f!important;
}
body.project-view .site-header{
  display:block;
}
body.project-view .campaign-page{
  padding-top:100px;
}
@media(max-width:800px){
  .site-header{
    inset:10px 0 auto!important;
  }
  .site-header.scrolled{
    inset:0 0 auto!important;
  }
  .site-header .nav{
    width:min(100% - 24px,var(--max))!important;
    height:58px!important;
    border-radius:29px!important;
  }
  .site-header.scrolled .nav{
    width:100%!important;
    height:64px!important;
    border-radius:0!important;
  }
  body.project-view .campaign-page{
    padding-top:78px;
  }
}
/* Official typography from Site.pdf: Archivo for display/UI, Titillium Web for copy. */
@font-face{font-family:"Archivo";src:url("assets/fonts/Archivo-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("assets/fonts/Archivo-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("assets/fonts/Archivo-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("assets/fonts/Archivo-ExtraBold.ttf") format("truetype");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("assets/fonts/Archivo-Black.ttf") format("truetype");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Titillium Web";src:url("assets/fonts/TitilliumWeb-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Titillium Web";src:url("assets/fonts/TitilliumWeb-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Titillium Web";src:url("assets/fonts/TitilliumWeb-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
body{font-family:"Titillium Web","Helvetica Neue",Arial,sans-serif}
h1,h2,h3,.section-title,.nav-link,.button,.chips span,.tags span,.eyebrow,.brand,.values div,.app-icon,.skill-visual,.about-label span,.contact-form label,.contact-form legend,.footer-nav a,.footer-meta p{
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
}
h1,.section-title,.inquiry-copy h2,.about h2{
  font-weight:900;
}
.hero-copy,.section-lead,.specialty-intro,.timeline-item ul,.project-heading p,.project-card p,.specialty-card p,.about p,.inquiry-copy p,.contact-form label span,.contact-form fieldset label{
  font-family:"Titillium Web","Helvetica Neue",Arial,sans-serif;
}
.project-card button b{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:48px;
  height:48px;
  padding:0;
  line-height:1;
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-size:0;
  text-align:center;
}
/* Geometric centering for every arrow inside circular buttons.
   The glyph arrows looked off because their font metrics are asymmetrical,
   so the chevrons below are drawn as CSS shapes and centered in the circle. */
.project-card button b,
.campaign-back{
  position:relative;
  color:transparent!important;
  overflow:hidden;
}
.project-card button b::before,
.campaign-back::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  display:block;
  width:15px;
  height:15px;
  border-color:var(--green);
  border-style:solid;
  border-width:0;
  pointer-events:none;
}
.project-card button b::before{
  border-top-width:5px;
  border-right-width:5px;
  transform:translate(-58%,-50%) rotate(45deg);
}
.campaign-back::before{
  width:17px;
  height:17px;
  border-left-width:5px;
  border-bottom-width:5px;
  transform:translate(-42%,-50%) rotate(45deg);
}
html.dark-mode .project-card button b::before,
html.dark-mode .campaign-back::before{
  border-color:var(--green);
}
@media(max-width:800px){
  .campaign-back::before{
    width:14px;
    height:14px;
    border-left-width:4px;
    border-bottom-width:4px;
    transform:translate(-42%,-50%) rotate(45deg);
  }
}
/* Updated skills cards from Site.pdf assets, with fluid luminous hover outline. */
.skill-grid{
  gap:30px;
}
.skill-card{
  --skill-light:#ffe7a8;
  --skill-glow:#ff8a3d;
  --skill-bg-a:#ffbd70;
  --skill-bg-b:#ff7924;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  min-height:560px;
  padding:28px 22px 72px;
  border-radius:30px;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(circle at 22% 9%,rgba(255,255,255,.32),transparent 28%),
    linear-gradient(180deg,var(--skill-bg-a),var(--skill-bg-b));
  box-shadow:0 28px 34px -26px var(--skill-glow);
  transform:translateZ(0);
  transition:transform .42s cubic-bezier(.22,.8,.2,1),box-shadow .42s ease,filter .42s ease;
}
.skill-card.indesign{
  --skill-light:#ffd2e6;
  --skill-glow:#ed1370;
  --skill-bg-a:#f389bc;
  --skill-bg-b:#ed1370;
}
.skill-card.photoshop{
  --skill-light:#d7f1ff;
  --skill-glow:#5ba4df;
  --skill-bg-a:#8cccf1;
  --skill-bg-b:#5ba4df;
}
.skill-card::after{
  content:"";
  position:absolute;
  inset:3px;
  z-index:1;
  border-radius:27px;
  background:
    radial-gradient(circle at 22% 9%,rgba(255,255,255,.32),transparent 28%),
    linear-gradient(180deg,var(--skill-bg-a),var(--skill-bg-b));
  border:1px solid rgba(255,255,255,.22);
  transform:none;
}
.skill-card:hover{
  transform:translateY(-10px) scale(1.015);
  filter:saturate(1.08) brightness(1.03);
  box-shadow:0 34px 44px -28px rgba(0,0,0,.32);
}
.skill-card .app-icon{
  position:relative;
  z-index:2;
  display:inline-grid;
  place-items:center;
  flex:0 0 auto;
  width:50px;
  height:50px;
  padding:0;
  margin:0 14px 0 0;
  border:3px solid currentColor;
  border-radius:9px;
  background:#2b1405;
  color:#ff9a00;
  font-family:"Arial Rounded MT Bold",Arial,"Helvetica Neue",sans-serif;
  font-size:23px;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1;
  box-shadow:0 14px 24px rgba(0,0,0,.2),inset 0 0 22px rgba(255,154,0,.13);
}
.skill-card.indesign .app-icon{
  background:#2b0618;
  color:#ff3366;
  box-shadow:0 14px 24px rgba(0,0,0,.2),inset 0 0 22px rgba(255,51,102,.15);
}
.skill-card.photoshop .app-icon{
  background:#001e36;
  color:#31a8ff;
  box-shadow:0 14px 24px rgba(0,0,0,.2),inset 0 0 22px rgba(49,168,255,.16);
}
.skill-card h3{
  position:relative;
  z-index:2;
  min-height:32px;
  margin:9px 0 22px;
  color:#231316;
}
.skill-visual{
  position:relative;
  z-index:2;
  display:block;
  height:auto;
  min-height:0;
  margin:0 -8px 24px;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:24px;
  background:#fff;
  box-shadow:0 18px 30px rgba(0,0,0,.13);
  transform:translateZ(0);
}
.skill-visual::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(120deg,transparent 0 34%,rgba(255,255,255,.62) 44%,transparent 56% 100%);
  opacity:0;
  transform:translateX(-70%);
  pointer-events:none;
}
.skill-card:hover .skill-visual::after{
  opacity:1;
  animation:skillImageSheen 1.25s ease-out;
}
.skill-visual img{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  transition:transform .65s cubic-bezier(.22,.8,.2,1),filter .45s ease;
}
.skill-card:hover .skill-visual img{
  transform:scale(1.045);
  filter:saturate(1.08) contrast(1.03);
}
.skill-card p{
  position:relative;
  z-index:2;
  margin:0;
  color:#fff;
  font-size:15px;
  line-height:1.56;
}
.skill-card .meter{
  z-index:2;
}
html.dark-mode .skill-card{
  box-shadow:0 28px 42px -24px #000b,0 0 0 1px rgba(255,255,255,.08);
}
html.dark-mode .skill-card:hover{
  box-shadow:0 34px 50px -24px #000d,0 0 0 1px rgba(255,255,255,.1);
}
@keyframes skillImageSheen{
  0%{transform:translateX(-80%);opacity:0}
  18%{opacity:.8}
  100%{transform:translateX(85%);opacity:0}
}
@media(max-width:800px){
  .skill-grid{gap:24px}
  .skill-card{min-height:0;padding:24px 20px 68px}
  .skill-visual{margin-inline:-4px}
}
@media(prefers-reduced-motion:reduce){
  .skill-card,.skill-visual img{transition:none!important}
  .skill-card:hover .skill-visual::after{animation:none!important}
}

/* Final responsive pass: stable mobile layout without changing the desktop composition. */
@media(max-width:1024px){
  :root{--max:920px}
  .container{width:min(var(--max),calc(100% - 32px))}
  .site-header .nav{
    padding-inline:30px!important;
    gap:14px!important;
  }
  .brand-logo{width:min(190px,28vw)}
  h1{font-size:clamp(48px,8vw,72px)}
  .values{gap:42px}
  .skill-grid,.specialty-grid{gap:22px}
  .skill-card{padding-inline:18px}
  .project-card img{height:340px}
  .inquiry-grid{gap:56px}
}

@media(max-width:800px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  body{font-size:16px}
  .container{width:calc(100% - 28px)}

  .site-header{
    inset:10px 0 auto!important;
    z-index:200;
  }
  .site-header .nav{
    display:flex!important;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    width:calc(100% - 20px)!important;
    min-height:58px;
    height:auto!important;
    max-height:58px;
    padding:8px 14px!important;
    overflow:hidden;
    border-radius:30px!important;
    transition:max-height .32s ease,width .42s cubic-bezier(.22,.8,.2,1),border-radius .42s cubic-bezier(.22,.8,.2,1),box-shadow .28s ease,background .28s ease!important;
  }
  .site-header.scrolled .nav{
    width:100%!important;
    border-radius:0!important;
  }
  .site-header .brand{
    order:1;
    flex:1 1 auto;
    justify-content:flex-start;
    min-width:0;
  }
  .brand-logo{
    width:min(174px,55vw);
    max-height:38px;
  }
  .theme-toggle{
    order:2;
    width:42px;
    height:42px;
    flex:0 0 42px;
    margin-left:auto!important;
  }
  .menu-button{
    order:3;
    display:grid!important;
    place-items:center;
    gap:5px;
    width:42px;
    height:42px;
    flex:0 0 42px;
    margin-left:6px;
    padding:0;
    border-radius:50%;
  }
  .menu-button i{
    width:22px;
    height:2px;
    background:#fff;
    transition:transform .24s ease,opacity .2s ease;
  }
  .nav.open{
    max-height:410px;
    padding-bottom:16px!important;
    border-radius:24px!important;
  }
  .site-header.scrolled .nav.open{
    width:calc(100% - 16px)!important;
    margin-top:8px;
    border-radius:24px!important;
  }
  .nav.open .menu-button i:first-child{transform:translateY(3.5px) rotate(45deg)}
  .nav.open .menu-button i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  .nav-link{
    order:4;
    display:none;
    width:100%;
    padding:13px 8px!important;
    border-top:1px solid rgba(255,232,170,.18);
    font-size:12px;
    letter-spacing:.18em;
    text-align:center;
  }
  .nav.open .nav-link{display:block}

  .hero{
    padding:96px 0 52px;
  }
  .eyebrow{
    font-size:10px;
    letter-spacing:.2em;
  }
  h1{
    max-width:12ch;
    margin:18px auto 24px;
    font-size:clamp(42px,13vw,58px);
    line-height:.95;
    letter-spacing:-.055em;
  }
  .hero h1 br{display:block}
  .chips{
    gap:9px;
    justify-content:center;
  }
  .chips span,.tags span{
    padding:8px 11px;
    font-size:9px;
    letter-spacing:.1em;
  }
  .hero-copy{
    margin:34px auto 26px;
    font-size:17px;
    line-height:1.5;
  }
  .values{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px 18px;
    margin:24px 0 34px;
  }
  .values b{
    width:48px;
    height:48px;
    font-size:22px;
  }
  .values div{
    font-size:13px;
  }

  .hero-carousel{
    width:100%;
    margin:2px 0 0;
    padding:0 30px 40px;
  }
  .hero-carousel-viewport{
    height:300px;
    mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  }
  .hero-slide{
    top:18px;
    width:min(76vw,310px);
    height:250px;
    border-radius:22px;
    transform:translateX(calc(-50% + var(--offset)*80%)) scale(calc(1 - var(--distance)*.13));
  }
  .carousel-arrow{
    top:118px;
    width:42px;
    height:42px;
    font-size:18px;
  }
  .carousel-prev{left:0}
  .carousel-next{right:0}

  .section{padding:56px 0}
  .section-rule{
    margin-bottom:36px;
  }
  .section-title{
    margin-bottom:34px;
    font-size:clamp(34px,10vw,46px);
  }
  .section-title.right,.specialty-intro,.project-heading p{
    text-align:center;
  }
  .section-lead{
    margin:34px auto 20px;
    font-size:17px;
    line-height:1.5;
    text-align:center;
  }
  .section-lead br{display:none}

  .skill-grid,.project-grid,.specialty-grid,.about-grid{
    grid-template-columns:1fr!important;
  }
  .skill-grid{
    gap:22px;
  }
  .skill-card{
    width:min(100%,430px);
    margin-inline:auto;
    min-height:0;
    padding:24px 18px 64px;
    border-radius:26px;
  }
  .skill-card::after{border-radius:23px}
  .skill-card .app-icon{
    width:48px;
    height:48px;
    font-size:22px;
  }
  .skill-card h3{
    margin:8px 0 18px;
    font-size:20px;
  }
  .skill-visual{
    margin:0 -4px 18px;
    border-radius:20px;
  }
  .skill-card p{
    font-size:15px;
    text-align:center;
  }

  .timeline:before{
    left:24px;
    top:18px;
    bottom:18px;
  }
  .timeline-item{
    display:grid;
    grid-template-columns:58px 1fr;
    gap:0 14px;
    min-height:0;
    padding:28px 0;
    align-items:start;
  }
  .timeline-item>div,
  .timeline-item ul{
    grid-column:2;
  }
  .timeline-item i{
    position:relative!important;
    left:auto!important;
    grid-column:1;
    grid-row:1 / span 2;
    justify-self:start;
    width:48px;
    height:48px;
    margin-top:4px;
  }
  .timeline-item>div h3{
    font-size:17px;
    text-align:center;
  }
  .timeline-item em,.timeline-item strong{
    font-size:16px;
    text-align:center;
  }
  .timeline-item ul{
    margin:14px 0 0;
    padding-left:18px;
    font-size:14px;
  }

  .project-heading{
    display:block;
    margin-bottom:34px;
    text-align:center;
  }
  .project-card{
    padding:16px;
    border-radius:24px;
    text-align:center;
  }
  .project-card:hover{
    transform:none;
  }
  .project-card img{
    height:clamp(230px,66vw,330px);
    border-radius:18px;
  }
  .project-card button{
    gap:14px;
    text-align:left;
  }
  .project-card button b{
    width:44px;
    height:44px;
    flex:0 0 44px;
  }

  .specialty-intro{
    margin:-14px 0 34px;
    font-size:16px;
    line-height:1.55;
  }
  .specialty-card{
    min-height:0;
    padding:16px 16px 62px;
    text-align:center;
  }
  .specialty-card img{
    height:190px;
  }
  .specialty-card p{
    max-width:100%;
  }
  .specialty-card>b{
    width:62px;
    height:62px;
    border-width:12px;
    font-size:24px;
  }

  .inquiry-section{
    padding:50px 0 62px;
  }
  .inquiry-grid{
    grid-template-columns:1fr;
    gap:30px;
  }
  .inquiry-copy h2{
    font-size:clamp(32px,9vw,42px);
    text-align:center;
  }
  .inquiry-copy h2 br{display:none}
  .inquiry-copy p{
    font-size:16px;
    line-height:1.55;
    margin-inline:auto;
    text-align:center;
  }
  .contact-form{
    gap:18px;
    padding-top:0;
  }
  .contact-form input,
  .contact-form textarea{
    min-height:50px;
    padding:13px 18px;
    border-radius:22px;
    font-size:16px;
  }
  .contact-form textarea{
    min-height:120px;
  }
  .contact-form fieldset label{
    align-items:flex-start;
    font-size:15px;
    line-height:1.35;
  }
  .contact-form input[type="radio"]{
    width:22px!important;
    min-width:22px!important;
    max-width:22px!important;
    height:22px!important;
    min-height:22px!important;
    flex:0 0 22px!important;
    aspect-ratio:1/1;
    border-radius:50%!important;
    margin-top:1px;
  }
  .contact-form .button{
    justify-self:stretch;
    width:100%;
    margin-top:6px;
  }

  .about{
    padding:64px 0 70px;
  }
  .about-grid{
    gap:42px!important;
  }
  .big-logo{
    grid-row:auto!important;
  }
  .big-logo img{
    width:min(260px,74vw);
  }
  .about-label{
    gap:14px;
    flex-wrap:wrap;
    justify-content:center;
  }
  .about-label img{
    width:72px;
    height:72px;
  }
  .about h2{
    margin:30px 0 22px;
    font-size:clamp(32px,9vw,42px);
    text-align:center;
  }
  .about p{
    font-size:16px;
    margin-inline:auto;
    text-align:center;
  }
  .about-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
  }
  .about-actions .button{
    width:100%;
  }

  .site-footer{
    padding:48px 0 34px;
  }
  .footer-grid{
    grid-template-columns:1fr;
    gap:30px;
  }
  .footer-logo{
    width:min(280px,78vw);
  }
  .footer-nav{
    width:100%;
    min-width:0;
  }
  .footer-nav a{
    text-align:center;
    letter-spacing:.22em;
  }
  .footer-meta{
    justify-self:center;
    max-width:100%;
    text-align:center;
  }
  .footer-meta p{
    font-size:10px;
    line-height:1.7;
    letter-spacing:.22em;
  }
  .footer-meta a{
    overflow-wrap:anywhere;
    font-size:16px;
  }

  .project-modal{
    width:calc(100% - 24px);
    max-height:calc(100dvh - 32px);
  }
  .project-modal img{
    max-height:44dvh;
  }
  .project-modal>div{
    padding:22px;
  }
  .toast{
    left:14px;
    right:14px;
    bottom:18px;
    width:auto;
    text-align:center;
    transform:translateY(120px);
  }
  .toast.show{
    transform:translateY(0);
  }

  body.project-view .campaign-page{
    padding-top:74px;
  }
  .campaign-back{
    top:88px;
    left:14px;
    width:44px;
    height:44px;
  }
}

@media(max-width:520px){
  .container{width:calc(100% - 24px)}
  .site-header .nav{
    width:calc(100% - 16px)!important;
    padding-inline:12px!important;
  }
  .brand-logo{
    width:min(152px,48vw);
  }
  .theme-toggle,.menu-button{
    width:38px;
    height:38px;
    flex-basis:38px;
  }
  h1{
    font-size:clamp(38px,15vw,52px);
    max-width:13ch;
  }
  .chips{
    gap:8px;
  }
  .chips span{
    max-width:100%;
  }
  .values{
    gap:18px 12px;
  }
  .hero-carousel{
    padding-inline:24px;
  }
  .hero-carousel-viewport{
    height:282px;
  }
  .hero-slide{
    width:min(78vw,290px);
    height:232px;
  }
  .carousel-arrow{
    top:108px;
    width:38px;
    height:38px;
  }
  .skill-card{
    padding-inline:16px;
  }
  .project-card img{
    height:250px;
  }
  .specialty-card img{
    height:170px;
  }
  .campaign-page img{
    width:100%;
  }
}