/* GooGoGoGo contact page. Target: design/contact-concept.png. */

body{
  background:#050509;
}

.contact-hero{
  --contact-page:min(100vw,1536px);
  position:relative;
  isolation:isolate;
  min-height:calc(100vh - 72px);
  /* dvh tracks the mobile browser chrome collapsing; identical to vh on desktop */
  min-height:calc(100dvh - 72px);
  overflow:hidden;
  padding:1.15rem 0 2.5rem;
  border-bottom:1px solid var(--line);
  background:#050509;
}

.contact-hero::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  background-image:
    url("assets/hero/ref-v2/energy-grunge.png"),
    radial-gradient(circle at 18% 19%,rgba(23,201,241,.14),transparent 28%),
    radial-gradient(circle at 84% 45%,rgba(242,43,155,.16),transparent 31%),
    radial-gradient(circle at 50% 100%,rgba(150,56,244,.1),transparent 34%);
  background-size:34rem,auto,auto,auto;
  background-position:center;
  opacity:1;
}

.contact-hero::after{
  content:"";
  position:absolute;
  z-index:1;
  left:0;
  right:0;
  bottom:.4rem;
  height:4rem;
  pointer-events:none;
  background:
    linear-gradient(176deg,transparent 0 38%,rgba(247,247,244,.9) 39% 43%,transparent 44%),
    radial-gradient(circle at 18% 78%,rgba(242,43,155,.45),transparent 13%),
    radial-gradient(circle at 78% 82%,rgba(23,201,241,.35),transparent 13%);
  opacity:.8;
}

.contact-hero__inner{
  position:relative;
  z-index:2;
  width:var(--contact-page);
  min-height:calc(100vh - 5.95rem);
  min-height:calc(100dvh - 5.95rem);
  margin-inline:auto;
}

.contact-hero__head{
  position:relative;
  z-index:3;
  margin:0;
  padding:.7rem 2.1rem 0 10rem;
}

.contact-hero__head .eyebrow{
  display:none;
}

.contact-title{
  position:relative;
  z-index:2;
  margin:0;
  width:72.5rem;
  height:21.1rem;
  max-width:calc(100vw - 15rem);
  line-height:0;
}

.contact-title::after{
  display:none;
}

.contact-title__image{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:fill;
  user-select:none;
  pointer-events:none;
  filter:
    drop-shadow(0 0 1.15rem rgba(23,201,241,.1))
    drop-shadow(0 0 1.3rem rgba(242,43,155,.08));
}

.contact-grid{
  position:relative;
  z-index:4;
  display:grid;
  grid-template-columns:43.05rem 32.75rem;
  gap:2.05rem;
  align-items:start;
  margin-top:1.2rem;
  padding-left:3.2rem;
}

.contact-left,
.c-channels{
  min-width:0;
}

@media(min-width:744px){
  .c-channels{
    margin-left:-2.9rem;
  }
}

.c-card,
.c-channels{
  position:relative;
  border:2px solid rgba(247,247,244,.88);
  border-radius:.35rem;
  background:linear-gradient(145deg,rgba(8,8,13,.94),rgba(3,3,7,.9));
  box-shadow:
    0 1.4rem 2.4rem rgba(0,0,0,.48),
    inset 0 0 0 1px rgba(255,255,255,.05);
}

.c-card::before,
.c-card::after,
.c-channels::before,
.c-channels::after{
  content:"";
  position:absolute;
  pointer-events:none;
  background:rgba(247,247,244,.88);
  opacity:.9;
}

.c-card::before,
.c-channels::before{
  left:-.35rem;
  right:-.35rem;
  top:-.42rem;
  height:.2rem;
  transform:rotate(-.6deg);
}

.c-card::after,
.c-channels::after{
  left:-.38rem;
  right:-.24rem;
  bottom:-.38rem;
  height:.22rem;
  transform:rotate(.9deg);
}

.c-form-card{
  padding:1.55rem 2.35rem 1.65rem;
}

.c-field{
  margin-bottom:.75rem;
}

.c-field__label{
  display:block;
  margin:0 0 .35rem;
  color:var(--ink);
  font-family:var(--display);
  font-size:1.18rem;
  font-weight:400;
  line-height:1;
  letter-spacing:0;
  text-transform:uppercase;
}

.c-field__control{
  position:relative;
}

.c-field__control input,
.c-field__control textarea{
  width:100%;
  padding:.65rem 3.05rem .65rem 1.35rem;
  border:1.5px solid rgba(247,247,244,.6);
  border-radius:.26rem;
  background:rgba(1,1,4,.88);
  color:var(--ink);
  font-family:var(--body);
  font-size:1rem;
  line-height:1.45;
  outline:0;
  transition:border-color var(--motion-fast) var(--motion-ease),box-shadow var(--motion-fast) var(--motion-ease),background var(--motion-fast) var(--motion-ease);
}

.c-field__control textarea{
  min-height:6.55rem;
  resize:vertical;
}

.c-field__control input::placeholder,
.c-field__control textarea::placeholder{
  color:#7d7b86;
}

.c-field__control input:focus,
.c-field__control textarea:focus{
  border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(23,201,241,.16),0 0 1.2rem rgba(23,201,241,.12);
}

.c-field__control input[aria-invalid="true"],
.c-field__control textarea[aria-invalid="true"]{
  border-color:#ff5876;
  box-shadow:0 0 0 3px rgba(255,88,118,.16);
}

.c-field__icon{
  position:absolute;
  right:.72rem;
  top:50%;
  transform:translateY(-50%);
  color:var(--cyan);
  font-size:2rem;
  pointer-events:none;
  filter:drop-shadow(0 .25rem 0 rgba(23,201,241,.25));
}

.c-field__control--area .c-field__icon{
  top:auto;
  right:.85rem;
  bottom:.65rem;
  transform:rotate(-17deg);
}

.c-form__error{
  min-height:1.15rem;
  margin:.1rem 0 .75rem;
  color:#ff758d;
  font-size:.86rem;
  font-weight:700;
}

.c-form__error[hidden]{
  display:none;
}

.c-send{
  width:100%;
  min-height:4.25rem;
  margin-top:.45rem;
  border:0;
  border-radius:999px;
  background:var(--lime);
  color:#050509;
  box-shadow:0 .9rem 1.8rem rgba(184,255,24,.12),inset 0 -.25rem 0 rgba(0,0,0,.12);
  font-family:var(--display);
  font-size:2.42rem;
  font-weight:400;
  line-height:1;
  letter-spacing:0;
  text-transform:uppercase;
}

.c-send iconify-icon{
  margin-left:1.2rem;
  font-size:2.75rem;
}

.c-send:hover{
  transform:translateY(-2px);
  box-shadow:0 1rem 2rem rgba(184,255,24,.2),inset 0 -.25rem 0 rgba(0,0,0,.12);
}

.c-send:disabled{
  opacity:.72;
  cursor:wait;
  transform:none;
}

.c-success{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:27rem;
  padding:2.6rem;
  border-color:rgba(184,255,24,.72);
  background:
    radial-gradient(circle at 32% 20%,rgba(184,255,24,.16),transparent 46%),
    linear-gradient(145deg,rgba(8,8,13,.94),rgba(3,3,7,.92));
}

.c-success[hidden]{
  display:none;
}

.c-success__title{
  margin:0;
  color:var(--lime);
  font-family:var(--display);
  font-size:5.4rem;
  font-weight:400;
  line-height:.88;
  letter-spacing:0;
  text-transform:uppercase;
}

.c-success__text{
  max-width:22rem;
  margin:1.25rem 0 0;
  color:#d7d6dc;
  font-size:1.25rem;
}

.c-channels{
  z-index:4;
  min-height:27.6rem;
  padding:2.25rem 2.35rem 1.8rem;
}

/* The shared .reveal animation ends on clip-path:inset(0), which clips to the
   panel's border-box and cut off the "Get in touch" tape that hangs above the
   top edge. Opt this panel out of the clip so the sticker stays fully visible. */
.js .c-channels.reveal,
.js .c-channels.reveal.is-visible{
  clip-path:none;
}

.c-tape{
  position:absolute;
  left:2.4rem;
  top:-1.15rem;
  display:inline-block;
  padding:.5rem 1.4rem .42rem;
  background:var(--purple);
  color:#050509;
  font-family:"Permanent Marker",var(--body);
  font-size:1.55rem;
  line-height:1;
  letter-spacing:0;
  text-transform:uppercase;
  transform:rotate(-3deg);
  color:#050509;
}

.c-email{
  display:flex;
  align-items:center;
  gap:.95rem;
  margin-top:1.15rem;
  color:var(--ink);
  font-family:var(--display);
  font-size:1.72rem;
  font-weight:400;
  line-height:1;
  letter-spacing:0;
  text-transform:uppercase;
}

.c-email iconify-icon{
  flex:0 0 auto;
  color:var(--cyan);
  font-size:2.9rem;
  filter:drop-shadow(0 .35rem 0 rgba(23,201,241,.25));
}

.c-email__addr{
  padding-bottom:.2rem;
  border-bottom:.34rem solid var(--pink);
  overflow-wrap:anywhere;
}

.c-email:hover .c-email__addr{
  color:var(--cyan);
}

.c-divider{
  margin:1.25rem 0 .95rem;
  border:0;
  border-top:1px solid rgba(247,247,244,.48);
}

.c-follow__label{
  display:flex;
  align-items:center;
  gap:.7rem;
  margin:0 0 .8rem;
  color:var(--ink);
  font-family:"Permanent Marker",var(--body);
  font-size:1.42rem;
  line-height:1;
  letter-spacing:0;
  text-transform:uppercase;
}

.c-follow__label iconify-icon{
  color:var(--ink);
  font-size:2.05rem;
  transform:rotate(25deg);
}

.c-social{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,4.55rem));
  gap:.72rem;
  justify-content:start;
}

.c-social__link{
  display:grid;
  place-items:center;
  width:100%;
  aspect-ratio:1;
  border:3px solid currentColor;
  border-radius:.45rem;
  font-size:2.45rem;
  transition:transform var(--motion-base) var(--motion-ease),box-shadow var(--motion-base) var(--motion-ease);
}

.c-social__link:hover{
  transform:translateY(-4px) rotate(-2deg);
}

.c-social__link--ig{
  color:var(--pink);
  box-shadow:0 0 1.2rem rgba(242,43,155,.18);
}

.c-social__link--x{
  color:#fff;
  border-color:#fff;
}

.c-social__link--tt{
  color:#050509;
  border-color:var(--lime);
  background:var(--lime);
}

.c-social__link--fb{
  color:var(--cyan);
  border-color:var(--cyan);
  box-shadow:0 0 1.2rem rgba(23,201,241,.18);
}

.c-badge{
  display:flex;
  align-items:center;
  gap:.9rem;
  width:100%;
  margin:1.35rem 0 0;
  padding:.7rem .95rem;
  border:2px solid var(--lime);
  border-radius:.3rem;
  color:var(--ink);
  font-family:var(--display);
  font-size:1.72rem;
  font-weight:400;
  line-height:1;
  letter-spacing:0;
  text-transform:uppercase;
  box-shadow:0 0 1rem rgba(184,255,24,.11);
}

.c-badge iconify-icon{
  flex:0 0 auto;
  color:var(--lime);
  font-size:2.85rem;
}

.c-badge strong{
  color:var(--lime);
  font-family:"Permanent Marker",var(--body);
  font-size:2.28rem;
  font-weight:400;
  letter-spacing:0;
}

.c-worldwide{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  gap:1rem;
  margin-top:1.15rem;
}

.c-worldwide__text{
  display:inline-block;
  width:max-content;
  max-width:100%;
  padding-bottom:.2rem;
  border-bottom:.28rem solid var(--purple);
  color:var(--ink);
  font-family:"Permanent Marker",var(--body);
  font-size:1.45rem;
  line-height:1;
  letter-spacing:0;
  text-transform:uppercase;
  transform:rotate(-3deg);
}

.c-worldwide iconify-icon{
  color:var(--lime);
  font-size:5.3rem;
  filter:drop-shadow(0 .25rem 0 rgba(184,255,24,.23));
}

.c-duck{
  position:absolute;
  z-index:5;
  top:24rem;
  right:2rem;
  bottom:auto;
  width:26rem;
  max-width:none;
  pointer-events:none;
  filter:drop-shadow(0 1.2rem 1.55rem rgba(0,0,0,.58));
  transform:rotate(1.5deg);
  animation:c-duck-float 5.8s var(--motion-ease) infinite alternate;
}

.c-splatter-duck{
  position:absolute;
  z-index:2;
  right:-4.6rem;
  top:32.8rem;
  bottom:auto;
  width:22rem;
  max-width:none;
  opacity:.98;
  pointer-events:none;
  transform:rotate(-18deg);
}

@keyframes c-duck-float{
  to{transform:translate3d(0,-.65rem,0) rotate(-1deg)}
}

.c-decor{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}

.c-decor img{
  position:absolute;
  max-width:none;
  filter:drop-shadow(0 .35rem .8rem rgba(0,0,0,.45));
}

.c-d-arrow{
  position:absolute;
  display:block;
  top:8.5rem;
  left:-2.7rem;
  width:12.1rem;
  aspect-ratio:1032/786;
  background:url("assets/contact/arrow.webp") center/contain no-repeat;
  filter:drop-shadow(0 .35rem .8rem rgba(0,0,0,.45));
  transform:rotate(8deg);
}

.c-d-splatter-teal{
  position:absolute;
  display:block;
  top:3.2rem;
  left:10.6rem;
  width:12rem;
  aspect-ratio:1165/1181;
  background:url("assets/contact/splatter-teal.webp") center/contain no-repeat;
  opacity:.72;
  mix-blend-mode:screen;
  filter:none;
}

.c-d-hitus{
  position:absolute;
  top:17.9rem;
  left:3.2rem;
  color:var(--ink);
  font-family:"Permanent Marker",var(--body);
  font-size:2.15rem;
  line-height:.95;
  letter-spacing:0;
  text-transform:uppercase;
  white-space:pre-line;
  transform:rotate(-8deg);
}

.c-d-scrawl{
  position:absolute;
  left:6.5rem;
  bottom:2.1rem;
  width:12.5rem;
  color:var(--ink);
  font-family:"Permanent Marker",var(--body);
  font-size:1.35rem;
  line-height:1.02;
  letter-spacing:0;
  text-align:center;
  text-transform:uppercase;
  transform:rotate(-4deg);
}

.c-d-bolt{
  position:absolute;
  right:.15rem;
  bottom:9.2rem;
  color:var(--ink);
  font-size:4.4rem;
  transform:rotate(17deg);
  filter:drop-shadow(0 0 .45rem rgba(255,255,255,.12));
}

/* Wide viewports: the inner column is capped at 1536px, so on very wide screens
   the duck (positioned inside it) reaches back over the right panel's globe /
   badge / social row. Push it into the right-hand margin so panel content stays
   clear and readable. */
@media(min-width:1537px) and (min-height:821px){
  .c-duck{
    right:-8rem;
  }

  .c-splatter-duck{
    right:-13rem;
  }
}

@media(max-width:743.98px) and (min-width:901px){
  .contact-grid{
    grid-template-columns:41rem 34rem;
    padding-left:3.2rem;
  }

  .c-duck{
    right:-4.2rem;
    width:23.5rem;
  }

  .c-splatter-duck{
    right:-10rem;
  }
}

@media(min-width:901px) and (max-height:820px){
  .contact-hero{
    padding-top:.35rem;
    padding-bottom:.8rem;
  }

  .contact-hero::after{
    bottom:-.8rem;
  }

  .contact-hero__inner{
    min-height:calc(100vh - 4.4rem);
    min-height:calc(100dvh - 4.4rem);
  }

  .contact-hero__head{
    padding-top:.85rem;
    padding-left:15.1rem;
  }

  .contact-title{
    width:71rem;
    max-width:calc(100vw - 15rem);
  }

  .contact-grid{
    margin-top:.75rem;
  }

  .c-duck{
    right:1.45rem;
    bottom:-.4rem;
    width:22.7rem;
  }

  .c-splatter-duck{
    right:-5.6rem;
    bottom:9.9rem;
    width:19rem;
  }
}

@media(max-width:743.98px){
  .contact-hero{
    min-height:0;
    padding:2rem 0 2.8rem;
  }

  .contact-hero::after{
    height:2.4rem;
  }

  .contact-hero__inner{
    width:min(100% - 2.25rem,42rem);
    min-height:0;
  }

  .contact-hero__head{
    padding:0;
  }

  .contact-title{
    display:block;
    width:100%;
    max-width:none;
    line-height:0;
  }

  .contact-title::after{
    display:none;
  }

  .contact-grid{
    grid-template-columns:1fr;
    gap:1.4rem;
    margin-top:2rem;
    padding-left:0;
  }

  .c-form-card,
  .c-channels{
    padding:1.55rem;
  }

  .c-field__label{
    font-size:1.08rem;
  }

  .c-field__control input,
  .c-field__control textarea{
    font-size:16px;
  }

  .c-send{
    min-height:4.1rem;
    font-size:2.2rem;
  }

  .c-channels{
    min-height:0;
  }

  .c-email{
    font-size:1.45rem;
  }

  .c-social__link{
    font-size:2.35rem;
  }

  .c-badge{
    align-items:center;
    font-size:1.45rem;
  }

  .c-badge strong{
    font-size:2rem;
  }

  .c-duck{
    position:relative;
    right:auto;
    bottom:auto;
    display:block;
    width:min(70vw,23rem);
    margin:2.1rem auto 0;
    animation:none;
  }

  .c-splatter-duck{
    right:50%;
    bottom:2rem;
    width:20rem;
    transform:translateX(63%) rotate(-18deg);
    opacity:.75;
  }

  .c-d-arrow,
  .c-d-crown-l,
  .c-d-crown-r,
  .c-d-splatter-teal,
  .c-d-spray,
  .c-d-smiley,
  .c-d-hitus,
  .c-d-scrawl,
  .c-d-bolt,
  .c-d-x{
    display:none;
  }
}

@media(max-width:520px){
  .contact-hero__inner{
    width:min(100% - 1.5rem,42rem);
  }

  .contact-title{
    width:106%;
    margin-left:-3%;
  }

  .contact-title::after{
    display:none;
  }

  .c-form-card,
  .c-channels{
    padding:1.15rem;
  }

  .c-tape{
    left:1.25rem;
    font-size:1.2rem;
  }

  .c-email{
    align-items:flex-start;
    gap:.7rem;
    font-size:1.14rem;
  }

  .c-email iconify-icon{
    font-size:2.45rem;
  }

  .c-social{
    gap:.55rem;
    grid-template-columns:repeat(4,minmax(0,3.9rem));
  }

  .c-social__link{
    font-size:2rem;
  }

  .c-badge{
    gap:.6rem;
    padding:.7rem .75rem;
    font-size:1.08rem;
  }

  .c-badge iconify-icon{
    font-size:2.4rem;
  }

  .c-badge strong{
    font-size:1.55rem;
  }

  .c-worldwide{
    grid-template-columns:1fr;
  }

  .c-worldwide iconify-icon{
    font-size:4.4rem;
  }

  .c-success{
    min-height:17rem;
    padding:1.6rem;
  }

  .c-success__title{
    font-size:3.4rem;
  }
}

@media(prefers-reduced-motion:reduce){
  .c-duck{
    animation:none;
  }
}

/* Contact page phone composition. */
@media(max-width:743.98px){
  .contact-hero{min-height:0;padding:24px 0 38px;overflow:hidden}
  .contact-hero__inner{width:calc(100% - 24px);min-height:0}
  .contact-hero__head{padding:0}
  /* The bleed used to push the artwork past the hero's overflow:hidden and shave
     the leg off the K in TALK. Keep the ink inside the frame. */
  .contact-title{display:block;width:100%;height:auto;max-width:none;margin-left:0;object-fit:contain;object-position:center}
  .contact-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:20px;padding:0}
  .c-form-card,.c-channels{padding:18px 14px;border-color:rgba(255,255,255,.28);background:rgba(5,5,9,.9);backdrop-filter:blur(10px)}
  .c-field{gap:7px}.c-field__label{font-size:1rem}
  .c-field__control input,.c-field__control textarea{min-height:52px;padding-inline:14px;font-size:16px;scroll-margin-block:96px 124px}
  .c-field__control textarea{min-height:148px;padding-block:13px}
  .c-form__error{font-size:.95rem;line-height:1.5}
  .c-send{min-height:56px;font-size:1.85rem;touch-action:manipulation}
  .c-channels{min-height:0;padding-top:38px}
  .c-email{gap:10px;min-height:48px;font-size:1rem;overflow-wrap:anywhere;touch-action:manipulation}
  .c-social{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .c-social__link{min-height:54px;font-size:1.8rem;touch-action:manipulation}
  .c-badge{padding:12px;font-size:1rem}.c-badge strong{font-size:1.45rem}
  .c-worldwide{grid-template-columns:1fr;gap:14px}
  .c-duck{position:relative;top:auto;right:auto;bottom:auto;display:block;width:min(82vw,360px);height:auto;margin:10px auto -8px;object-fit:contain;transform:rotate(1.5deg);animation:none}
  .c-splatter-duck{top:auto;right:50%;bottom:28px;width:250px;height:auto;object-fit:contain;transform:translateX(66%) rotate(-16deg);opacity:.52}
  .c-success{min-height:0;padding:32px 18px}.c-success__title{font-size:clamp(3rem,15vw,3.8rem)}
}

@media(max-width:390px){.contact-title{width:104%;margin-left:-2%}.c-form-card,.c-channels{padding-inline:12px}}

@media(hover:none),(pointer:coarse){.c-send:active,.c-social__link:active{transform:scale(.97)}}

/* WhatsApp CTA — deliberately NOT inside .c-social above: that grid sits under a
   "Follow us" heading, and WhatsApp is a way to reach us, not a feed to follow.
   Brand green rather than the page palette, because on this one control the
   instant recognition is worth more than palette purity. */
.c-wa{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  margin-top:1.1rem;
  padding:.72rem 1.15rem;
  border:3px solid #25d366;
  border-radius:.45rem;
  background:#25d366;
  color:#050509;
  font-weight:800;
  font-size:1.05rem;
  text-decoration:none;
  transition:transform var(--motion-base) var(--motion-ease),box-shadow var(--motion-base) var(--motion-ease);
}

.c-wa iconify-icon{font-size:1.5rem}

.c-wa:hover{
  transform:translateY(-4px) rotate(-2deg);
  box-shadow:0 0 1.2rem rgba(37,211,102,.35);
}

@media (prefers-reduced-motion:reduce){
  .c-wa{transition:none}
  .c-wa:hover{transform:none}
}

/* ═══ 平板层 744–1200 ═══
   contact.css 里被抬上来的是两块:900 段(把内容宽度锁死 42rem=672px)和
   767 段(表单栅格 1fr)。两块叠一起 → 平板上一个 834 宽的屏只用 672px，
   表单和联系方式还上下堆着，页高 2845px vs 桌面 1341px。 */
/* ⚠️ 2026-08-29 修:这里原先写的是 (min-width:744px) and (max-width:743.98px) —— 两个条件数学上不可能同时成立,**整块从来没有生效过**。
   注释写的是「平板层 744–1200」,所以是把 1200 误写成了手机档的 743.98。
   后果不报错、不报警:平板(744–1200)上这些声明全部缺席,只能回落到基础层。
   全站同样的笔误共 6 处、涉及 5 个文件、86 条声明;work-pages.css 更是两个死块、
   零个活块 —— 也就是 /work 的案例页在平板上根本没有平板样式。
   桌面零风险:max-width:1200px 与 >=1201px 数学不相交。 */
@media (min-width:744px) and (max-width:1200px){
  .contact-hero__inner{width:min(100% - 3rem,62rem)}
  .contact-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:1.5rem;margin-top:1.6rem;padding-left:0}
  .c-worldwide{grid-template-columns:auto minmax(0,1fr);gap:14px}
}

/* ── 平板段(744–1200):放开 contact hero 的视口高度下限 ─────────────────────
   `.contact-hero` 和 `.contact-hero__inner` 的 `min-height:calc(100dvh - …)`
   在**桌面上是不生效的** —— 1440×900 时它算出来 828px,而 hero 天然内容高 1035px,
   内容赢。所以它在桌面只是个兜底。

   平板竖屏反过来了:744×1133 上它算出 1061px,而等比后的内容只有 535px,
   于是下限赢,hero 被顶高一倍(实测 +585px)。

   这里不需要换算成 vw:内容本身已经是 rem/vw 驱动的,把下限拿掉,
   它自己就落在等比高度上。`.contact-hero__inner` 是普通块不是 grid,
   高度不参与任何垂直分布,放开是安全的。 */
@media (min-width:744px) and (max-width:1200px){
  .contact-hero,.contact-hero__inner{min-height:0}
}

/* ── 平板段(744–1200):鸭子进流,不再盖住 GET IN TOUCH 面板 ── 2026-09-05 ─────
   桌面上 .c-duck 绝对定位在面板右外侧(top:24rem;right:2rem;width:26rem),1440 宽时
   右边有三分之一屏给它站。根字号回到 12px 之后(见 content-pages.css 末尾那块),
   744–1200 宽这个位置正好压在面板上:邮箱、FOLLOW US、四个社交按钮、24H、AVAILABLE
   全被鸭子挡住(09-05 实测 744 和 1024)。照手机段的做法让它进流、居中排在面板内容
   下面,泼溅挪到它背后。桌面 ≥1201 不在本块里。 */
@media (min-width:744px) and (max-width:1200px){
  .c-duck{position:relative;top:auto;right:auto;bottom:auto;display:block;width:min(42%,20rem);margin:1.6rem auto -.4rem;animation:none}
  .c-splatter-duck{right:50%;top:auto;bottom:1rem;width:18rem;transform:translateX(60%) rotate(-18deg);opacity:.75}
}

/* 2026-09-06 页眉由 nav.js 异步注入,注入前 #gg-nav-mount 是 0 高的空 div,注入那一刻整页下移 ——
   每页 CLS 0.038、首页手机 0.099(09-06 实测)。按三档预留页眉高度(手机 64 / 平板 54 / 桌面 3.75vw,
   与 nav.js 里 .gg-nav 的高度一致);nav.js 注入后把 mount 设成 display:contents,这条预留自动失效,
   所以落定后的版式一像素不变。 */
#gg-nav-mount{min-height:64px}
@media (min-width:744px) and (max-width:1200px){#gg-nav-mount{min-height:54px}}
@media (min-width:1201px){#gg-nav-mount{min-height:3.75vw}}