:root{--ink:#111;--paper:#f2f0ea;--acid:#d9ff45;--line:rgba(17,17,17,.18);--max:1500px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
a{color:inherit;text-decoration:none}
.wrap{width:min(calc(100% - 48px),var(--max));margin:auto}

/* HEADER */
header{
  position:fixed;z-index:100;top:0;left:0;right:0;
  padding:18px 0;background:rgba(242,240,234,.96);
  backdrop-filter:blur(10px);border-bottom:1px solid rgba(17,17,17,.06)
}
nav{position:relative;display:flex;align-items:center;min-height:22px;font-size:12px;text-transform:uppercase;letter-spacing:.11em}
.brand{font-weight:700}
.menu-state{position:fixed;opacity:0;pointer-events:none}
.menu-toggle{
  position:fixed;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  background:transparent;
  border:0;
  padding:0;
  margin:0;
  color:inherit;
  font-family:Arial,Helvetica,sans-serif;
  font-size:12px;
  font-weight:700;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.11em;
  cursor:pointer;
  user-select:none;
}

/* FULLSCREEN MENU */
.menu-overlay{
  position:fixed;z-index:1000;inset:0;background:#000;color:#fff;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s ease, visibility .22s ease;
}
.menu-state:checked ~ .menu-overlay{
  opacity:1;visibility:visible;pointer-events:auto;
}
.menu-state:checked ~ header{
  background:transparent;color:#fff;border-bottom-color:transparent;
}
.menu-state:checked ~ header .menu-toggle{visibility:hidden}
.menu-inner{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  position:relative;padding:100px 24px 48px;
}
.menu-close{
  position:fixed;z-index:1001;top:18px;left:50%;transform:translateX(-50%);
  appearance:none;-webkit-appearance:none;background:transparent !important;
  border:0 !important;outline:0;box-shadow:none !important;border-radius:0 !important;
  padding:0 !important;color:#fff;
  font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:700;
  line-height:1.2;text-transform:uppercase;
  letter-spacing:.11em;cursor:pointer
}
.menu-links{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:0;
}
.menu-links a{
  font-size:clamp(56px,7vw,112px);
  line-height:.92;letter-spacing:-.055em;
  font-weight:400;
}
.menu-links a:hover{opacity:.55}

main{padding-top:70px}
.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.16em}
.hero-home{min-height:calc(100vh - 70px);display:grid;grid-template-rows:1fr auto;padding:44px 0 30px}
.hero-copy{align-self:center;padding-top:3vh}
.hero-home h1{margin:0;font-size:clamp(70px,12vw,210px);line-height:.8;letter-spacing:-.075em;text-transform:uppercase}
.hero-sub{max-width:720px;font-size:clamp(18px,2vw,30px);line-height:1.08;margin:28px 0 0;letter-spacing:-.025em}
.home-links{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
.home-link{min-height:150px;padding:20px 22px 18px 0;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between}
.home-link:nth-child(2),.home-link:nth-child(3){padding-left:22px}.home-link:last-child{border-right:0}
.home-link h2{font-size:clamp(26px,3vw,46px);line-height:.95;margin:0;letter-spacing:-.045em;text-transform:uppercase}
.home-link p{max-width:330px;font-size:13px;line-height:1.4;margin:16px 0 0}.arrow{font-size:24px}
.page-hero{padding:90px 0 65px}.page-hero h1{font-size:clamp(68px,11vw,180px);line-height:.8;letter-spacing:-.07em;text-transform:uppercase;margin:15px 0 30px}
.page-hero p{max-width:820px;font-size:clamp(20px,2.2vw,34px);line-height:1.08;margin:0;letter-spacing:-.025em}
.case-grid{padding-bottom:100px}.case{border-top:1px solid var(--ink);padding:22px 0 42px;display:grid;grid-template-columns:180px 1fr;gap:28px}
.case-num{font-size:11px;text-transform:uppercase;letter-spacing:.12em}
.case-main h2{font-size:clamp(38px,5vw,78px);line-height:.92;letter-spacing:-.05em;margin:0 0 18px}
.case-main p{max-width:720px;font-size:16px;line-height:1.45;margin:0 0 28px}
.case-visual{aspect-ratio:16/8;background:#d8d2c5;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.fig-panel{width:72%;height:64%;display:grid;grid-template-columns:1.15fr .85fr;gap:12px}
.panel{background:#111;color:#fff;padding:20px}.panel.light{background:#f8f6f0;color:#111;border:1px solid rgba(0,0,0,.15)}
.mini{height:10px;background:currentColor;opacity:.14;margin:10px 0}.mini:nth-child(2){width:80%}.mini:nth-child(3){width:58%}
.flow{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;width:88%}
.flow span{border:2px solid #111;border-radius:999px;padding:14px 18px;font-weight:700;text-transform:uppercase;font-size:13px}.flow b{font-size:24px}
.campaigns{padding-bottom:100px}.campaign-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px 18px}
.campaign-card:nth-child(3n){grid-column:1/-1}.campaign-img{aspect-ratio:4/5;position:relative;overflow:hidden;background:#bbb}
.campaign-card:nth-child(3n) .campaign-img{aspect-ratio:16/7}.campaign-art{position:absolute;inset:0}
.summer{background:linear-gradient(145deg,#d8cfbd,#f7efdf 48%,#a4afa0)}.holiday{background:linear-gradient(145deg,#2d2825,#806a5a 50%,#d9c8af)}.fall{background:linear-gradient(120deg,#c9b396,#6d655d 48%,#ebdfca)}
.campaign-word{position:absolute;left:5%;bottom:6%;font-size:clamp(46px,7vw,110px);line-height:.8;letter-spacing:-.06em;text-transform:uppercase;font-weight:700;color:white;mix-blend-mode:difference}
.campaign-info{display:grid;grid-template-columns:1fr auto;gap:20px;border-top:1px solid var(--ink);padding-top:10px;margin-top:9px}
.campaign-info h2{font-size:19px;margin:0}.campaign-info p{font-size:10px;line-height:1.45;text-transform:uppercase;letter-spacing:.09em;margin:0;text-align:right}
.about-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:70px;padding-bottom:110px}.about-big{font-size:clamp(38px,5vw,76px);line-height:.94;letter-spacing:-.05em}
.about-copy{font-size:17px;line-height:1.55;max-width:760px}.about-copy p:first-child{margin-top:0}
.meta-block{margin-top:42px;padding-top:18px;border-top:1px solid var(--ink);display:grid;grid-template-columns:180px 1fr;gap:24px;font-size:13px;line-height:1.5}
.skills{display:flex;flex-wrap:wrap;gap:8px}.pill{border:1px solid #111;border-radius:999px;padding:9px 12px;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
footer{border-top:1px solid var(--ink);padding:20px 0 24px;font-size:11px;text-transform:uppercase;letter-spacing:.1em}.footer-row{display:flex;justify-content:space-between;gap:20px}

@media(max-width:800px){
  .wrap{width:min(calc(100% - 28px),var(--max))}
  .menu-links a{font-size:clamp(48px,15vw,82px)}
  .menu-close{top:24px}
  .hero-home{min-height:auto;padding-top:50px}
  .hero-home h1{font-size:clamp(62px,19vw,120px)}
  .home-links{grid-template-columns:1fr;margin-top:70px}
  .home-link,.home-link:nth-child(2),.home-link:nth-child(3){padding:18px 0;border-right:0;border-bottom:1px solid var(--line);min-height:120px}
  .home-link:last-child{border-bottom:0}.case,.about-grid{grid-template-columns:1fr}.case{gap:14px}
  .campaign-grid{grid-template-columns:1fr}.campaign-card:nth-child(3n){grid-column:auto}.campaign-card:nth-child(3n) .campaign-img{aspect-ratio:4/5}
  .meta-block{grid-template-columns:1fr}.footer-row{display:block;line-height:2}
}


/* --- TAIT-inspired menu refinement --- */
.menu-overlay .menu-inner{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:90px 24px 40px;
}

.menu-overlay .menu-links{
  width:min(640px, calc(100vw - 48px));
  margin-left:clamp(70px, 8vw, 155px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  gap:0;
}

.menu-overlay .menu-links a{
  position:relative;
  display:block;
  width:max-content;
  max-width:100%;
  padding-left:0;
  font-size:clamp(38px, 3.35vw, 58px);
  line-height:.94;
  letter-spacing:-.045em;
  font-weight:400;
  transition:padding-left .18s ease;
}

.menu-overlay .menu-links a::before{
  content:"→";
  position:absolute;
  left:0;
  top:50%;
  transform:translate(-120%, -54%);
  opacity:0;
  font-size:.9em;
  line-height:1;
  transition:opacity .14s ease, transform .18s ease;
}

.menu-overlay .menu-links a:hover,
.menu-overlay .menu-links a:focus-visible{
  padding-left:1.15em;
}

.menu-overlay .menu-links a:hover::before,
.menu-overlay .menu-links a:focus-visible::before{
  opacity:1;
  transform:translate(0, -54%);
}

@media (max-width:800px){
  .menu-overlay .menu-links{
    margin-left:18px;
    width:calc(100vw - 50px);
  }
  .menu-overlay .menu-links a{
    font-size:clamp(38px, 11vw, 58px);
  }
}


/* --- Menu position refinement: centered column under MENU --- */
.menu-overlay .menu-inner{
  min-height:100vh;
  display:block;
  padding:0;
}

.menu-overlay .menu-links{
  position:absolute;
  top:92px;
  left:50%;
  transform:translateX(-50%);
  width:max-content;
  max-width:calc(100vw - 48px);
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
}

.menu-overlay .menu-links a{
  font-size:clamp(38px, 3.15vw, 56px);
  line-height:.96;
}

@media (max-width:800px){
  .menu-overlay .menu-links{
    top:82px;
    left:50%;
    transform:translateX(-50%);
    width:max-content;
    max-width:calc(100vw - 32px);
    margin:0;
  }
  .menu-overlay .menu-links a{
    font-size:clamp(36px, 10vw, 52px);
  }
}