/* Transition Plans at COP31 — site styles.
   Base styles first, grouped by page section; responsive overrides at the end,
   widest breakpoint first. Breakpoints: 1500 / 1099 / 1050 / 760 / 400 / 380. */

@font-face { font-family: InterTight; src: url(assets/inter-tight.woff2); }
@font-face { font-family: Outfit; src: url(assets/outfit.woff2); font-weight: 700; }

:root {
  --navy: #092744;
  --ink: #112d44;
  --blue: #155bd7;
  --mint: #b5edce;
  --paper: #f5f6f2;
  --line: #d9e1e5;
  --muted: #506473;
}

/* ---------- Base ---------- */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 30px; }
body { margin: 0; color: var(--ink); font: 17px/1.55 InterTight, Arial, sans-serif; background: #fff; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.08; letter-spacing: -.035em; }
h1, h2 { font-family: Outfit, Arial, sans-serif; font-weight: 700; }
h1 { font-size: clamp(48px, 5.1vw, 72px); max-width: 650px; }
h2 { font-size: clamp(34px, 3.3vw, 46px); }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
a, button, summary { outline-offset: 5px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #367ff0; }

.wrap { width: min(1240px, calc(100% - 104px)); margin: auto; }
.skip { position: absolute; top: -100px; left: 20px; z-index: 10; padding: 12px; background: #fff; color: var(--navy); }
.skip:focus { top: 10px; }

.eyebrow { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: bold; letter-spacing: .15em; text-transform: uppercase; }
.eyebrow:before { content: ''; display: inline-block; width: 21px; height: 2px; background: currentColor; }

.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 34px;
  padding: 16px 23px; border: 1px solid transparent;
  background: var(--blue); color: #fff; text-decoration: none; font-size: 15px; line-height: 1.3;
}
.btn:hover { background: #104bb4; }
.btn.mint { background: var(--mint); color: var(--navy); }
.btn.mint:hover { background: #d0f7df; }
.arrow { font-size: 22px; line-height: 1; }
.quiet-link { font-size: 14px; text-underline-offset: 6px; }

/* ---------- Header ---------- */

.header { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 110px; }
.brand { display: flex; align-items: center; gap: 24px; text-decoration: none; }
.brand .climate { width: 206.4px; height: auto; }
.brand-divider { width: 1px; height: 50.4px; background: var(--line); }
/* The COP31 artwork has wide margins; the frame crops it to the logo. */
.cop-frame { display: block; position: relative; overflow: hidden; flex-shrink: 0; width: 166.8px; height: 72px; }
.brand .cop { position: absolute; max-width: none; height: auto; width: 391.32px; left: -112.26px; top: -74.04px; }
nav { display: flex; align-items: center; gap: 28px; font-size: 14px; }
nav a { text-decoration: none; }
nav a:hover { text-decoration: underline; }

/* ---------- Hero ---------- */

.hero { position: relative; overflow: hidden; isolation: isolate; background: var(--navy); color: #fff; }
.spectrum {
  position: relative; z-index: 2; height: 5px;
  background: linear-gradient(90deg, #e14c50 0%, #d97886 20%, #8c93b6 40%, #61adca 65%, #acd7d2 80%, #eee1ad 100%);
}
/* Decorative leaves merge with the navy; all foreground content stays above them. */
.hero-leaves {
  position: absolute; right: -4%; top: -5%; z-index: -2; width: 78%; height: 112%;
  object-fit: cover; object-position: 65% 40%; opacity: .88; filter: saturate(.65);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 27%, #000 68%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 27%, #000 68%);
  transform-origin: 80% 35%; animation: leaf-drift 12s ease-in-out infinite alternate; pointer-events: none;
}
.hero-shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, #092744 0%, rgba(9,39,68,.98) 35%, rgba(9,39,68,.72) 68%, rgba(9,39,68,.46) 100%);
}
.hero.motion-paused .hero-leaves, .hero.motion-offscreen .hero-leaves { animation-play-state: paused; }
@keyframes leaf-drift {
  from { transform: translate3d(0, 0, 0) scale(1.03) rotate(-.6deg); }
  to { transform: translate3d(-24px, 12px, 0) scale(1.12) rotate(1deg); }
}
.motion-toggle {
  position: absolute; right: 28px; bottom: 14px; z-index: 3; padding: 5px 10px;
  border: 1px solid #7392a380; border-radius: 2px; background: #092744aa; color: #d3e4eb;
  font-size: 10px; letter-spacing: .02em;
}
.motion-toggle:hover { background: #173e5b; }

.hero-grid {
  position: relative; z-index: 1; display: grid; grid-template-columns: 1.18fr 1fr; align-items: center; gap: 55px;
  padding-top: 66px; padding-bottom: 70px;
}
.hero .eyebrow { color: var(--mint); margin-bottom: 26px; }
.hero-sub { max-width: 490px; margin: 22px 0; color: #c7e7fa; font-size: 27px; line-height: 1.25; letter-spacing: -.015em; }
.hero-copy { max-width: 505px; margin-bottom: 20px; color: #d0dce6; font-size: 17px; line-height: 1.6; }
.hero-event { max-width: 550px; margin: 0 0 12px; color: #d0dce6; font-size: 15px; line-height: 1.6; }
.hero-register-note { max-width: 505px; margin-bottom: 25px; color: #c7e7fa; font-size: 15px; line-height: 1.6; }
.hero-links { display: flex; align-items: center; gap: 25px; }
.visual { position: relative; min-width: 0; }
.visual svg { display: block; width: 100%; height: auto; }

/* ---------- Event details strip and organisers ---------- */

.details { background: #f1f5f6; border-bottom: 1px solid var(--line); }
.details-grid { display: grid; grid-template-columns: 1.2fr .9fr 1.6fr .9fr; padding: 29px 0; }
.detail { padding-left: 30px; border-left: 1px solid #ccd7dd; }
.detail:first-child { padding-left: 0; border: 0; }
.detail-label { margin-bottom: 6px; color: #576d7c; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
.detail strong { display: block; font-size: 18px; line-height: 1.25; }
.detail small { color: var(--muted); font-size: 12px; }

.hosts { display: flex; align-items: center; gap: 38px; padding: 29px 0 32px; border-bottom: 1px solid var(--line); }
.host-label { margin-right: 10px; color: var(--muted); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
.host-logos { display: flex; flex: 1; align-items: center; gap: 48px; }
.host-logos img { object-fit: contain; }
.host-logos .lseg { width: 120px; height: 49px; }
.host-logos .xbrl { width: 104px; height: 45px; }
.ecco { font-family: Outfit; font-size: 28px; letter-spacing: -.05em; line-height: 1; }
.ecco small { display: block; margin-top: 5px; font: 10px InterTight; letter-spacing: .2em; }
.host-note { max-width: 190px; color: #526672; font-size: 11px; }

/* ---------- Content sections ---------- */

.section { padding: 90px 0; }
.section .eyebrow { color: var(--blue); margin-bottom: 22px; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 38px; }
.section-head p { max-width: 310px; color: var(--muted); font-size: 14px; }

/* About */
.intro { display: grid; grid-template-columns: 1fr 1.05fr; gap: 95px; }
.intro h2 { max-width: 440px; }
.intro-copy p { font-size: 19px; line-height: 1.65; }
.intro-copy p + p { margin-top: 20px; color: var(--muted); font-size: 16px; }
.audience { margin-top: 27px; padding-top: 17px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.8; }
.audience b { color: var(--ink); }
.takeaways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 42px; margin-top: 64px; }
.takeaway { padding-top: 20px; border-top: 1px solid #b9c9d2; }
.num { color: var(--blue); font: 13px InterTight; }
.takeaway h3 { margin: 18px 0 12px; font-family: Outfit; font-size: 23px; letter-spacing: -.02em; }
.takeaway p { color: var(--muted); font-size: 15px; line-height: 1.65; }

/* Inside the session */
.demonstration { background: #edf4f5; }
.demo-grid { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 95px; }
.demo-grid h2 { margin-bottom: 23px; font-size: 40px; }
.demo-grid p { color: var(--muted); font-size: 17px; }
.demo-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.demo-tags span { padding: 5px 11px; border: 1px solid #b4c7ce; color: #34576a; font-size: 11px; }
.flow { padding: 31px 35px; border: 1px solid #cedce1; background: #fff; }
.flow-label { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
.flow-label span:last-child { color: #22654a; }
.flow-step { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: start; gap: 18px; margin-top: 25px; }
.flow-step + .flow-step { padding-top: 20px; border-top: 1px solid #e3e9ec; }
.flow-step b { display: block; font-size: 17px; }
.flow-step small { display: block; margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.step-picture { display: block; width: 72px; height: 72px; object-fit: cover; border-radius: 4px; }

/* Programme */
.agenda { border-top: 2px solid var(--navy); }
.agenda-row { display: grid; grid-template-columns: 120px 1fr 110px; align-items: start; gap: 28px; padding: 25px 0; border-bottom: 1px solid var(--line); }
.agenda-row time { color: #34556d; font-size: 17px; }
.agenda-row h3 { font: 700 20px/1.3 Outfit; letter-spacing: -.015em; }
.agenda-row p { max-width: 690px; margin-top: 6px; color: var(--muted); font-size: 14px; }
.agenda-row.featured { margin: 0 -20px; padding-left: 20px; padding-right: 20px; background: #eff6f5; }
.format { padding-top: 6px; color: #4d6577; font-size: 10px; letter-spacing: .07em; text-align: right; text-transform: uppercase; }

/* Speakers */
.speakers { background: var(--paper); }
.speaker-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.speaker-art { display: flex; align-items: center; justify-content: center; overflow: hidden; aspect-ratio: 1 / 1; background: #e4eae7; }
.speaker-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.speaker-art img[alt="John Turner"] { object-position: center 28%; }
.speaker-art img[alt="Claudine Blamey"] { object-position: center 24%; }
.speaker-meta { padding-top: 16px; }
.speaker-meta span { color: #536d60; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.speaker-meta h3 { margin-top: 9px; font-family: Outfit; font-size: 21px; }
.speaker-meta p { margin-top: 7px; color: var(--muted); font-size: 13px; }
.speaker-meta .speaker-title { font-size: 14px; line-height: 1.5; }
.speaker-meta .speaker-org { margin-top: 5px; color: var(--ink); font-size: 13px; }
.speaker-profile { display: inline-block; margin-top: 12px; color: var(--blue); font-size: 11px; text-underline-offset: 4px; }

/* ---------- Join / registration ---------- */

.join { background: var(--navy); color: #fff; }
.join .eyebrow { color: var(--mint); }
.join-grid { display: grid; grid-template-columns: .65fr 1.35fr; align-items: start; gap: 60px; }
.join-grid > div:first-child { padding-top: 22px; }
.join h2 { max-width: 490px; font-size: 42px; }
.join p { max-width: 470px; margin-top: 22px; color: #cfdee8; }
.livestream-note { margin-top: 28px; padding: 20px 0; border-top: 1px solid #42617b; border-bottom: 1px solid #42617b; }
.livestream-label { color: var(--mint); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.join .livestream-note p { margin-top: 10px; font-size: 15px; line-height: 1.6; }
.join .livestream-note .livestream-link-note { margin-top: 10px; color: #b5cbd9; font-size: 12px; }
.join .join-venue { color: #b5cbd9; font-size: 14px; }
.calendar-link { display: inline-block; margin-top: 24px; color: var(--mint); }

.registration-box { padding: 28px 22px; border: 1px solid #d8e2e6; background: #fff; color: var(--ink); }
.registration-box h3 { margin: 15px 0 10px; font: 700 28px Outfit; }
.registration-box p { margin: 0 0 22px; font-size: 14px; }
.registration-box > p { color: var(--muted); }
/* Registration form folds out on request; the Google Form is only loaded when opened. */
.registration-box .register-toggle { width: 100%; margin-top: 2px; border: 0; background: var(--navy); }
.register-toggle[hidden] { display: none; }
.toggle-icon { position: relative; flex-shrink: 0; width: 14px; height: 14px; }
.toggle-icon:before, .toggle-icon:after {
  content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px;
  background: currentColor; transition: transform .25s ease;
}
.toggle-icon:after { transform: rotate(90deg); }
.register-toggle[aria-expanded="true"] .toggle-icon:after { transform: rotate(0); }
.native-form-link { display: inline-block; margin-top: 14px; color: #174da8; font-size: 13px; text-underline-offset: 3px; }
#registration-live { margin-top: 18px; }
#registration-live:not([hidden]) { animation: registration-open .35s ease-out; }
@keyframes registration-open { from { opacity: 0; transform: translateY(-8px); } }
/* Google Forms cannot report its height: the page script sets it from the frame width (FORM_HEIGHTS). 1900px is the fallback. */
#registration-live iframe { display: block; width: 100%; height: 1900px; border: 0; background: #fff; }
.registration-privacy { margin-top: 24px; padding-top: 20px; border-top: 1px solid #d8e2e6; color: var(--muted); font-size: 12px; }
.registration-privacy b { color: var(--ink); font-size: 13px; }
.registration-box .registration-privacy p { margin: 10px 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.registration-privacy a { color: #174da8; text-underline-offset: 3px; }
.registration-box .accreditation-note { margin: 20px 0 0; color: var(--muted); font-size: 12px; }

/* ---------- FAQ ---------- */

.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; }
.faqs details { border-top: 1px solid var(--line); }
.faqs details:last-child { border-bottom: 1px solid var(--line); }
summary { position: relative; padding: 21px 35px 21px 0; list-style: none; cursor: pointer; font-size: 17px; }
summary::-webkit-details-marker { display: none; }
summary:after { content: '+'; position: absolute; right: 0; top: 14px; color: var(--blue); font-size: 23px; }
details[open] summary:after { content: '−'; }
details p { padding: 0 25px 23px 0; color: var(--muted); font-size: 14px; line-height: 1.65; }

/* ---------- Footer ---------- */

footer { padding: 35px 0; border-top: 1px solid var(--line); background: #f8f9f7; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 35px; }
.footer-top img { width: 220px; }
.footer-copy { max-width: 540px; color: var(--muted); font-size: 12px; text-align: right; }

/* ---------- Responsive ---------- */

@media (min-width: 1500px) {
  .hero-grid { padding-top: 85px; }
}

@media (max-width: 1099px) {
  .speaker-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 35px 24px; }
}

@media (max-width: 1050px) {
  .wrap { width: calc(100% - 64px); }
  .header { gap: 18px; }
  nav { gap: 16px; }
  .brand { gap: 13px; }
  .brand .climate { width: 170.4px; }
  .cop-frame { width: 132px; height: 62.4px; }
  .brand .cop { width: 309.72px; left: -88.8px; top: -55.92px; }
  .hero-grid { gap: 20px; }
  h1 { font-size: 57px; }
  .hero-sub { font-size: 24px; }
  .details-grid { grid-template-columns: 1.2fr 1fr 1.45fr; }
  .detail:last-child { display: none; }
  .host-note { display: none; }
  .section { padding: 70px 0; }
  .intro, .demo-grid, .faq-grid { gap: 45px; }
}

@media (max-width: 760px) {
  .wrap { width: calc(100% - 40px); }

  .header { flex-direction: column; gap: 14px; height: auto; min-height: 136px; padding-top: 15px; padding-bottom: 15px; }
  .brand { justify-content: center; gap: 11px; }
  .brand .climate { width: 134.4px; }
  .brand-divider { height: 39.6px; }
  .cop-frame { width: 94.8px; height: 57.6px; }
  .brand .cop { width: 222.408px; left: -63.804px; top: -33.792px; }
  nav { width: 100%; justify-content: space-between; gap: 8px; font-size: 12px; }
  nav .btn { gap: 10px; padding: 10px; font-size: 12px; }

  .hero-leaves { width: 120%; right: -35%; object-position: 60% 30%; opacity: .65; }
  .hero-shade { background: linear-gradient(180deg, rgba(9,39,68,.96) 0%, rgba(9,39,68,.88) 45%, rgba(9,39,68,.56) 100%); }
  .motion-toggle { right: 20px; bottom: 17px; }
  .hero-grid { grid-template-columns: 1fr; gap: 22px; padding-top: 40px; padding-bottom: 45px; }
  h1 { font-size: 55px; }
  .hero .eyebrow { margin-bottom: 20px; font-size: 10px; }
  .hero-sub { margin: 19px 0; font-size: 26px; }
  .hero-copy { font-size: 16px; }
  .hero-event, .hero-register-note { font-size: 14px; }
  .hero-links { flex-wrap: wrap; gap: 20px; }
  .visual { width: 100%; max-width: 420px; margin: auto; }

  .details-grid { grid-template-columns: 1fr 1fr; gap: 20px; padding: 25px 0; }
  .detail { padding-left: 16px; }
  .detail:nth-child(3) { grid-column: 1 / -1; padding: 17px 0 0; border: 0; border-top: 1px solid #ccd7dd; }
  .detail strong { font-size: 17px; }
  .hosts { display: block; padding: 23px 0; }
  .host-label { display: block; margin-bottom: 17px; }
  .host-logos { gap: 25px; }
  .host-logos .lseg { width: 94px; height: 40px; }
  .host-logos .xbrl { width: 90px; height: 40px; }
  .ecco { font-size: 24px; }

  .section { padding: 55px 0; }
  .section-head { display: block; margin-bottom: 27px; }
  .section-head p { max-width: none; margin-top: 15px; }
  .intro, .demo-grid, .join-grid, .faq-grid { grid-template-columns: 1fr; gap: 28px; }
  .intro h2 { font-size: 38px; }
  .intro-copy p { font-size: 18px; }
  .takeaways { grid-template-columns: 1fr; gap: 25px; margin-top: 34px; }
  .takeaway { display: grid; grid-template-columns: 35px 1fr; column-gap: 13px; padding-top: 18px; }
  .takeaway .num { grid-row: 1 / 3; padding-top: 6px; }
  .takeaway h3 { margin: 0 0 9px; }
  .takeaway p { grid-column: 2; }
  .demo-grid h2 { font-size: 36px; }
  .flow { padding: 24px 18px; }
  .flow-label { gap: 20px; }
  .flow-label span:last-child { text-align: right; }
  .flow-step { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; }
  .flow-step b { font-size: 16px; }
  .step-picture { width: 52px; height: 52px; }
  .agenda-row { grid-template-columns: 67px 1fr; gap: 16px; padding: 22px 0; }
  .agenda-row time { font-size: 14px; }
  .agenda-row h3 { font-size: 18px; }
  .agenda-row.featured { margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
  .format { display: none; }
  .speaker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 18px; }
  .speaker-meta h3 { font-size: 20px; }
  .speaker-meta .speaker-title { font-size: 13px; }

  .join-grid > div:first-child { padding-top: 0; }
  .join h2 { font-size: 40px; }
  .registration-box { padding: 25px 20px; }
  .registration-box h3 { font-size: 25px; }
  #registration-live iframe { width: calc(100% + 40px); margin-left: -20px; }

  .footer-top { flex-direction: column; align-items: start; gap: 22px; }
  .footer-top img { width: 210px; }
  .footer-copy { max-width: 100%; text-align: left; }
}

@media (max-width: 380px) {
  .brand { gap: 8px; }
  .brand .climate { width: 114px; }
  .brand-divider { display: none; }
  .cop-frame { width: 78px; height: 48px; }
  .brand .cop { width: 183px; left: -52.5px; top: -27.84px; }
  nav .btn { gap: 7px; padding: 10px; font-size: 11px; }
  .host-logos { gap: 16px; }
  .host-logos .lseg, .host-logos .xbrl { width: 80px; }
  .speaker-meta h3 { font-size: 18px; }
  .speaker-meta span { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-leaves { animation: none; transform: none; }
  .motion-toggle { display: none; }
  #registration-live:not([hidden]) { animation: none; }
  .toggle-icon:before, .toggle-icon:after { transition: none; }
}