/* ==========================================================================
   EmbryoNet AI Technologies — embryonet.ai
   Metrics and colours measured from the reference screenshots (2048px wide,
   1x scale). Container 1142px; header and footer are full-bleed.
   ========================================================================== */

:root{
  --blue:        #1B73E0;
  --blue-dark:   #0F5FC4;
  --blue-mid:    #2575DB;
  --blue-deep:   #045ECF;
  --cyan:        #4BC4F0;

  --grey-bg:     #F1EEF2;   /* header, hero, footer */
  --card:        #F4F5F7;   /* cards, technology panel */
  --white:       #FFFFFF;

  --text:        #14161A;
  --text-2:      #585859;
  --text-3:      #8A9099;
  --border:      #DCDCE0;
  --chip:        #E1DAE1;

  --serif: Georgia, "Times New Roman", Times, serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1142px;
  --gutter: clamp(1.25rem, 3vw, 2rem);
  --edge: 28px;             /* header / footer full-bleed padding */
  --header-h: 72px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--white); color:var(--text);
  font-family:var(--sans); font-size:15px; line-height:1.47;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ margin:0 0 .5em; }
p{ margin:0 0 1em; }
a{ color:inherit; }
img{ max-width:100%; display:block; }

.wrap{ width:min(100% - var(--gutter)*2, var(--wrap)); margin-inline:auto; }
.wrap-edge{ width:100%; padding-inline:var(--edge) 76px; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.hp{ position:absolute; left:-9999px; }

.skip-link{ position:absolute; left:-999px; top:0; z-index:200; background:var(--text); color:#fff; padding:.7rem 1rem; }
.skip-link:focus{ left:0; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:13px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; text-decoration:none;
  border-radius:999px; border:1.5px solid transparent; cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-white{ background:#fff; color:var(--blue); height:50px; padding:0 2.1rem; box-shadow:0 1px 10px rgba(20,22,26,.07); }
.btn-white:hover{ background:var(--blue); color:#fff; }
.btn-outline{ background:transparent; color:var(--blue); border-color:var(--blue); height:52px; padding:0 2.2rem; }
.btn-outline:hover{ background:var(--blue); color:#fff; }
.btn-outline-light{
  background:transparent; color:#fff; border-color:rgba(255,255,255,.85);
  text-transform:none; letter-spacing:0; font-weight:400; font-size:14px;
  height:32px; padding:0 1.5rem;
}
.btn-outline-light:hover{ background:#fff; color:var(--blue); }
.btn-blue{
  background:var(--blue); color:#fff; border-radius:8px;
  height:56px; padding:0 2.4rem; letter-spacing:.08em;
}
.btn-blue:hover{ background:var(--blue-dark); }

/* ── Header ───────────────────────────────────────────────── */
.site-header{ position:sticky; top:0; z-index:90; background:var(--grey-bg); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; height:var(--header-h); }

.logo{ display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.logo-mark{
  width:44px; height:44px; border-radius:50%; flex:none;
  background-image:var(--img-logo, none);
  background-size:cover; background-position:left center; background-repeat:no-repeat;
  background-color:transparent;
  background:
    var(--img-logo, none) left center/cover no-repeat,
    radial-gradient(circle at 36% 30%, #ffffff 0 12%, rgba(255,255,255,0) 30%),
    radial-gradient(circle at 46% 44%, #d9dade 0 22%, #a5a7ad 23% 40%, #eceded 41% 68%, #b9bbc0 69%, #8e9096 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.07);
}
.logo-type{ display:flex; flex-direction:column; line-height:1; }
.logo-type b{ font-size:25px; font-weight:700; letter-spacing:.015em; }
.logo-type i{ font-style:normal; font-size:8px; font-weight:600; letter-spacing:.13em; color:var(--text-2); margin-top:4px; }

.site-nav ul{ display:flex; gap:28px; list-style:none; margin:0; padding:0; }
.site-nav a{
  text-decoration:none; font-size:13px; font-weight:400;
  letter-spacing:.03em; text-transform:uppercase; color:var(--text);
  transition:color .15s ease;
}
.site-nav a:hover{ color:var(--blue); }
.site-nav a.is-active{ color:var(--cyan); }

.nav-toggle{ display:none; background:none; border:0; padding:.5rem; cursor:pointer; }
.bars,.bars::before,.bars::after{ display:block; width:22px; height:1.5px; background:var(--text); transition:transform .2s ease, opacity .2s ease; }
.bars::before,.bars::after{ content:""; position:relative; }
.bars::before{ top:-7px; } .bars::after{ top:5.5px; }
.nav-toggle[aria-expanded="true"] .bars{ background:transparent; }
.nav-toggle[aria-expanded="true"] .bars::before{ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after{ transform:translateY(-5.5px) rotate(-45deg); }

.scroll-progress{ height:4px; background:transparent; }
.scroll-progress i{ display:block; height:100%; width:0; background:var(--blue); }

/* ── Hero ─────────────────────────────────────────────────── */
.hero{
  position:relative; overflow:hidden; background:var(--grey-bg);
  min-height:calc(100vh - var(--header-h));
  display:flex; align-items:center;
  padding:4rem 0 5rem;
}
.hero-bg{
  position:absolute; left:-24%; top:50%; transform:translateY(-50%);
  width:min(88vw,1180px); aspect-ratio:1/1; pointer-events:none;
  background-image:var(--img-embryo), url('assets/figures/hero-bg.svg');
  background-position:center; background-size:contain; background-repeat:no-repeat;
  filter:blur(26px) saturate(.45); opacity:.85;
}
.hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:571px 1fr; gap:0; align-items:center; }

.hero-kicker{
  /* The original EmbryoNet hero uses a sturdy, traditional display serif.
     Georgia is a closer match than Playfair here, especially in the capitals
     and the heavier, less high-contrast strokes. */
  font-family:Georgia, "Times New Roman", serif;
  font-style:normal;
  font-weight:700;
  color:var(--blue);
  font-size:22px;
  line-height:1.16;
  letter-spacing:-.018em;
  margin:0 0 14px;
}
.hero h1{
  font-family:Georgia, "Times New Roman", serif;
  font-weight:700;
  font-size:clamp(2.3rem, 1rem + 3.6vw, 48px);
  line-height:1.08;
  letter-spacing:-.028em;
  margin:0 0 22px;
}
.hero-sub{ color:var(--text-2); font-size:15px; line-height:1.45; margin:0 0 32px; }

/* Specimen stage — coordinates lifted from the reference screenshot */
.hero-stage{ position:relative; height:600px; }
.spec{ position:absolute; margin:0; }
.spec .chip{ display:inline-block; margin:0 0 10px; }

.chip{
  font-size:15px; font-weight:700; line-height:1;
  padding:7px 10px; border-radius:4px; background:var(--chip); color:var(--text);
}
.chip-white{ background:#fff; }
.chip-blue{ background:var(--blue); color:#fff; font-size:13px; padding:6px 9px; }

.spec-img{
  display:block; position:relative;
  background-position:center; background-size:contain; background-repeat:no-repeat;
}

.spec-bmp{ left:104px; top:125px; }
.spec-bmp .spec-img{
  width:200px; height:200px;
  background-image:var(--img-spec-bmp);
}
.spec-ra{ left:376px; top:13px; }
.spec-ra .spec-img{
  width:104px; height:104px; margin-left:68px;
  background-image:var(--img-spec-ra);
}
.spec-wnt{ left:346px; top:330px; }
.spec-wnt .spec-img{
  width:122px; height:122px; margin-left:49px;
  background-image:var(--img-spec-wnt);
}
.bracket::before,.bracket::after{
  content:""; position:absolute; inset:-52px -55px;
  background:
    linear-gradient(var(--bk,#DEDCE0) 0 0) 0 0/24px 3px no-repeat,
    linear-gradient(var(--bk,#DEDCE0) 0 0) 0 0/3px 24px no-repeat;
}
.bracket::after{ transform:rotate(180deg); }

/* ── Technology ───────────────────────────────────────────── */
.technology{ position:relative; overflow:hidden; padding:60px 0 126px; background:#E7E6E8; }
.tech-bg{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(160deg,#F1EFF2,#E4E3E6);
}
.tech-bg span{
  position:absolute; display:block; border-radius:50%;
  background-image:var(--img-embryo), url('assets/figures/embryo.svg');
  background-size:contain; background-position:center; background-repeat:no-repeat;
  filter:blur(1.5px);
}
.tech-bg span:nth-child(1){ left:58%; top:6%;  width:270px; height:330px; opacity:.62; transform:rotate(-12deg); }
.tech-bg span:nth-child(2){ left:74%; top:34%; width:310px; height:380px; opacity:.75; transform:rotate(8deg); }
.tech-bg span:nth-child(3){ left:46%; top:58%; width:250px; height:305px; opacity:.55; transform:rotate(-6deg); }
.tech-bg span:nth-child(4){ left:83%; top:70%; width:290px; height:350px; opacity:.68; transform:rotate(14deg); }
.tech-bg span:nth-child(5){ left:14%; top:24%; width:230px; height:280px; opacity:.34; transform:rotate(10deg); }
.tech-card{
  position:relative; z-index:1;
  background:var(--card); border-radius:20px;
  width:min(100%,557px); padding:85px 60px 78px;
}
.tech-card h2{ font-family:var(--serif); font-weight:800; font-size:52px; line-height:1.05; margin:0 0 50px; }
.tech-card p{ color:var(--text); font-size:15px; line-height:1.55; }
.tech-card p:last-child{ margin-bottom:0; }

.term{ color:var(--blue); font-weight:700; text-decoration:none; }
.term:hover{ text-decoration:underline; }

/* ── News band ────────────────────────────────────────────── */
.news-band{
  background:linear-gradient(100deg,var(--blue),var(--blue-mid) 45%,var(--blue-deep));
  color:#fff; padding:24px 0;
}
.news-inner{ display:flex; align-items:center; justify-content:center; gap:50px; }
.news-logo{
  flex:none; width:170px; height:148px;
  background-image:var(--img-erc, none); background-size:contain;
  background-position:center; background-repeat:no-repeat; border-radius:6px;
}
.news-copy{ max-width:805px; }
.news-copy h2{ font-family:var(--sans); font-size:16px; font-weight:700; line-height:1.35; margin:0 0 10px; }
.news-copy p{ font-size:14.5px; line-height:1.55; margin:0; color:rgba(255,255,255,.96); }
.news-actions{ text-align:center; margin-top:9px; }

/* ── Section shell ────────────────────────────────────────── */
.section{ padding:96px 0; background:var(--white); }
.section-title{ font-family:var(--serif); font-weight:800; font-size:52px; line-height:1.05; margin:0 0 34px; }
.section-sub{ color:var(--text-2); font-size:15px; margin:0 0 48px; }
.section-head{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; margin-bottom:44px; flex-wrap:wrap; }
.section-head h2{ font-family:var(--serif); font-weight:800; font-size:52px; line-height:1.05; margin:0; }

.card{ background:var(--card); border-radius:14px; padding:30px 28px; }
.card h3{ font-size:15.5px; font-weight:700; line-height:1.4; margin:0 0 14px; }
.card p{ color:var(--text); font-size:14.5px; line-height:1.5; }

/* ── Services ─────────────────────────────────────────────── */
.svc-grid{ display:grid; grid-template-columns:repeat(24,1fr); gap:22px; }
.svc-a{ grid-column:span 10; }
.svc-b{ grid-column:span 5; }
.svc-c{ grid-column:span 9; }
.svc-d{ grid-column:span 13; }
.svc-e{ grid-column:span 11; }
.svc-grid .card{ display:flex; flex-direction:column; }
.svc-grid .card > p{ margin-bottom:0; }

.svc-fig{ position:relative; margin-top:auto; padding-top:20px; }
.e{ display:block; background-repeat:no-repeat; background-position:center; background-size:contain; }

/* Automated phenotypic analysis: three embryos + bracketed call-out */
.fig-cluster{ height:170px; }
.cluster-art{
  position:absolute; left:32%; top:6%; width:64%; height:88%; display:block;
  background-image:var(--img-svc-cluster), url('assets/figures/cluster.svg');
  background-size:contain; background-position:center; background-repeat:no-repeat;
}
.fig-cluster .chip-blue{ position:absolute; left:15%; top:53%; }
.bracket-blue::before,.bracket-blue::after{
  inset:-15px -11px;
  background:
    linear-gradient(var(--blue) 0 0) 0 0/18px 3px no-repeat,
    linear-gradient(var(--blue) 0 0) 0 0/3px 18px no-repeat;
}

/* Cross-species */
.fig-single{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.e-medaka{ width:110px; height:110px; background-image:var(--img-embryo), url('assets/figures/medaka.svg'); }
.fig-label{ font-size:13px; font-weight:700; letter-spacing:.05em; color:var(--blue); text-transform:uppercase; line-height:1; }
.fig-label-dim{ color:var(--text-3); }
.fig-single .fig-label{ align-self:flex-end; }

/* Custom AI: the in-card form teaser */
.svc-c{ position:relative; overflow:hidden; }
.svc-c::before{
  content:""; position:absolute; right:-10px; bottom:52px; width:190px; height:120px;
  background-image:var(--img-icon-bio, none), var(--img-icon-pharma, none);
  background-size:82px auto, 82px auto;
  background-position:right top, left bottom;
  background-repeat:no-repeat, no-repeat;
  opacity:.22; pointer-events:none;
}

/* High-throughput screening: untreated vs treated */
.fig-pair{ display:flex; gap:80px; justify-content:center; align-items:flex-end; }
.fig-pair figure{ margin:0; display:flex; flex-direction:column; align-items:center; gap:16px; }
.e-larva{ width:268px; height:88px; background-image:var(--img-untreated), url('assets/figures/larva.svg'); }
.e-lova{ width:135px; height:88px; background-image:var(--img-lovastatin), url('assets/figures/lovastatin.svg'); }

/* Toxicology: pErk → DRAQ7 */
.fig-arrow{ display:flex; gap:32px; align-items:center; justify-content:center; }
.fig-arrow figure{ margin:0; display:flex; flex-direction:column; gap:8px; }
.fig-arrow figcaption{ align-self:flex-start; }
.fig-arrow figure:last-of-type figcaption{ align-self:flex-end; }
.e-perk{ width:107px; height:95px; background-image:var(--img-perk), url('assets/figures/perk.svg'); }
.e-draq{ width:105px; height:95px; background-image:var(--img-draq7), url('assets/figures/draq7.svg'); }
.arrow{ width:105px; height:2px; background:var(--blue); position:relative; flex:none; margin-top:12px; }
.arrow::after{ content:""; position:absolute; right:-1px; top:-4px; border-left:9px solid var(--blue); border-block:5px solid transparent; }

.svc-foot{ display:grid; grid-template-columns:355px 1fr; gap:44px; margin-top:44px; }
.svc-foot p{ color:var(--text); font-size:14.5px; line-height:1.55; margin:0; }
.svc-foot a{ color:var(--blue); font-weight:700; text-decoration:none; }

/* ── Publications ─────────────────────────────────────────── */
.pub-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:43px; align-items:stretch; }
.pub{ display:flex; flex-direction:column; }
.pub-img{
  display:block; height:118px; margin:0 0 20px; border-radius:8px;
  background-image:var(--img), linear-gradient(150deg,#E7E6E9,#F3F3F5);
  background-size:contain, cover; background-repeat:no-repeat; background-position:center;
}
.pub h3{ font-size:14.5px; line-height:1.45; margin:0 0 12px; }
.cite{ font-size:12.5px; line-height:1.5; color:var(--text-2); flex:1; margin:0 0 18px; }
.read-more{ align-self:flex-end; color:var(--blue); font-weight:700; font-size:14px; text-decoration:none; }
.read-more:hover{ text-decoration:underline; }


.client-reach{
  position:relative;
  margin:-24px 0 44px;
  padding-left:18px;
  color:var(--text);
  font-size:14.5px;
  line-height:1.5;
  font-weight:500;
}
.client-reach::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--blue);
}

/* ── About ────────────────────────────────────────────────── */
.about-grid{ display:grid; grid-template-columns:457fr 630fr; gap:68px; align-items:start; }
.plate{
  aspect-ratio:457/453; border-radius:3px;
  background-image:var(--img-plate), url('assets/figures/plate.svg');
  background-size:cover; background-position:center;
}
.about-list{ display:grid; gap:54px; padding-top:4px; }
.about-list h3{ font-size:15.5px; font-weight:700; margin:0 0 12px; }
.about-list p{ color:var(--text); font-size:14.5px; line-height:1.5; margin:0; }

/* ── Team ─────────────────────────────────────────────────── */
.team-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:41px; }
.person{ grid-column:span 2; display:flex; flex-direction:column; min-height:310px; padding:32px 32px 28px 29px; }
.person-wide{ grid-column:span 3; min-height:300px; }
.bio{ font-size:15px; line-height:1.4; color:var(--text); margin:0; }
.person-foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-top:auto; padding-top:24px; }
.person-foot h3{ font-size:19px; font-weight:400; line-height:1.25; margin:0 0 4px; letter-spacing:-.005em; }
.role{ color:var(--text-3); font-size:15px; line-height:1.3; margin:0; }
.portrait{
  flex:none; width:155px; height:157px; border-radius:3px;
  background-image:var(--img), linear-gradient(160deg,#D8DADE,#EFEFF1);
  background-size:cover; background-position:center top;
}

/* ── Contact ──────────────────────────────────────────────── */
.contact-intro{ max-width:620px; margin-bottom:62px; }
.contact-intro p{ font-size:14.5px; line-height:1.5; margin:0 0 20px; }
.contact-grid{
  display:grid;
  grid-template-columns:minmax(300px,.9fr) minmax(420px,1.25fr);
  gap:64px;
  align-items:end;
}
.contact-people{ display:grid; gap:34px; align-self:start; }
.contact-people b{ font-size:14.5px; font-weight:700; }
.contact-people p{ font-size:14.5px; line-height:1.6; margin:2px 0 0; }
.contact-people a{ color:inherit; text-decoration:none; }
.contact-people a:hover{ color:var(--blue); }

.contact-links{ display:grid; gap:10px; }
.contact-link{
  display:flex;
  align-items:center;
  gap:13px;
  min-height:58px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(255,255,255,.72);
  color:var(--text);
  text-decoration:none;
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}
a.contact-link:hover{
  border-color:rgba(37,118,224,.42);
  background:#fff;
  color:var(--text);
  transform:translateY(-1px);
}
.contact-link span:last-child{ display:grid; gap:2px; }
.contact-link strong{ font-size:14px; font-weight:700; line-height:1.2; }
.contact-link small{ color:var(--text-3); font-size:12.5px; line-height:1.2; }
.contact-icon{
  flex:none;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
}
.linkedin-icon{
  border-radius:7px;
  background:var(--blue);
  color:#fff;
  font-size:17px;
  font-weight:700;
  font-family:Arial,Helvetica,sans-serif;
  line-height:1;
}
.location-icon{
  position:relative;
  width:30px;
  height:34px;
}
.location-icon::before{
  content:"";
  position:absolute;
  left:7px;
  top:3px;
  width:16px;
  height:20px;
  border:3px solid var(--blue);
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
}
.location-icon::after{
  content:"";
  position:absolute;
  left:13px;
  top:9px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--blue);
}
.contact-location{ cursor:default; }
.contact-visual{
  margin:0;
  justify-self:end;
  width:min(100%,620px);
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(47,61,90,.10);
  background:#eef4f9;
  box-shadow:0 22px 54px rgba(32,53,85,.13);
  transform:translateY(10px);
}
.contact-visual img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:2048/1146;
  object-fit:cover;
}


/* ── Footer ───────────────────────────────────────────────── */
.site-footer{ background:var(--grey-bg); padding:26px 0; }
.footer-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; }
.footer-inner p{ margin:0; font-size:14px; color:var(--text-2); }
.site-footer nav{ display:flex; gap:24px; }
.site-footer a{ font-size:14px; color:var(--text-2); text-decoration:none; }
.site-footer a:hover{ color:var(--blue); }

/* ── Floating CTA ─────────────────────────────────────────── */
.credits-cta{
  position:fixed; right:28px; bottom:28px; z-index:70;
  display:inline-flex; align-items:center; height:44px; padding:0 26px;
  background:var(--blue); color:#fff; text-decoration:none;
  font-size:14.5px; font-weight:600; border-radius:999px;
  box-shadow:0 4px 18px rgba(20,70,160,.30);
  transition:background .18s ease, transform .18s ease;
}
.credits-cta:hover{ background:var(--blue-dark); transform:translateY(-1px); }

/* ── Modals ───────────────────────────────────────────────── */
.modal[hidden]{ display:none; }
.modal{ position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:var(--gutter); }
.modal-backdrop{ position:absolute; inset:0; background:rgba(18,20,24,.55); }
.modal-panel{
  position:relative; background:#fff; border-radius:14px;
  padding:40px 40px 36px; width:min(100%,470px); max-height:88vh; overflow:auto;
}
.modal-panel h2{ font-family:var(--serif); font-weight:800; font-size:26px; line-height:1.2; margin:0 0 6px; }
.modal-sub{ color:var(--text-2); font-size:14.5px; margin:0 0 26px; }
.modal-close{ position:absolute; top:12px; right:16px; background:none; border:0; font-size:26px; line-height:1; color:var(--text-3); cursor:pointer; }
.modal-close:hover{ color:var(--text); }
.modal-def .modal-panel p{ color:var(--text-2); font-size:15px; line-height:1.55; margin:0; }
.def-eyebrow{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); margin:0 0 10px; }

/* ══════════ Responsive ══════════ */

/* Scale the hero stage down proportionally before it breaks */
@media (max-width: 1240px){
  .hero-grid{ grid-template-columns:1fr 1fr; }
  .hero-stage{ transform:scale(.8); transform-origin:left center; height:480px; }
}

@media (max-width: 1080px){
  .svc-a,.svc-b,.svc-c,.svc-d,.svc-e{ grid-column:span 12; }
  .pub-grid{ grid-template-columns:repeat(2,1fr); gap:32px; }
  .person,.person-wide{ grid-column:span 3; }
  .about-grid{ grid-template-columns:1fr 1fr; gap:44px; }
  .contact-grid{ grid-template-columns:minmax(280px,.9fr) minmax(380px,1.1fr); gap:40px; }
  .tech-card{ padding:60px 44px; }
  .tech-card h2,.section-title,.section-head h2{ font-size:44px; }
}

@media (max-width: 900px){
  .hero{ min-height:0; padding:56px 0 72px; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-stage{ transform:scale(.72); transform-origin:top left; height:440px; margin-top:24px; }
  .hero-bg{ left:-40%; width:120vw; opacity:.7; }
  .about-grid,.contact-grid,.svc-foot{ grid-template-columns:1fr; }
  .contact-visual{ justify-self:start; width:min(100%,680px); transform:none; }
  .news-inner{ flex-direction:column; text-align:center; gap:24px; }
  .news-logo{ width:130px; height:112px; }
  .fig-pair{ gap:40px; }
  .section{ padding:72px 0; }
  .technology{ padding:48px 0 84px; }
}

@media (max-width: 760px){
  :root{ --edge:20px; }
  .wrap-edge{ padding-inline:var(--edge); }
  .nav-toggle{ display:block; }
  .site-nav{
    position:absolute; left:0; right:0; top:100%; display:none;
    background:var(--grey-bg); border-bottom:1px solid var(--border);
    padding:.5rem var(--edge) 1.25rem;
  }
  .site-nav.is-open{ display:block; }
  .site-nav ul{ flex-direction:column; gap:0; }
  .site-nav a{ display:block; padding:.85rem 0; border-bottom:1px solid var(--border); }
  .credits-cta{ right:12px; bottom:12px; font-size:13px; height:40px; padding:0 18px; }
  .tech-card h2,.section-title,.section-head h2{ font-size:34px; }
  .tech-card{ padding:40px 26px; }
  .contact-intro{ margin-bottom:44px; }
  .contact-grid{ gap:36px; }
  .contact-link{ min-height:54px; }
}

@media (max-width: 620px){
  .pub-grid{ grid-template-columns:1fr; }
  .team-grid{ grid-template-columns:1fr; }
  .person,.person-wide{ grid-column:span 1; min-height:0; }
  .person-foot{ align-items:center; }
  .portrait{ width:118px; height:120px; }
  .fig-pair{ flex-direction:column; align-items:center; gap:24px; }
  .e-larva{ width:220px; height:72px; }
  .hero-stage{ transform:scale(.56); height:360px; }
  .fig-arrow{ gap:14px; }
  .arrow{ width:48px; }
}


/* ── Reveal on scroll ─────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}
.no-js .reveal{ opacity:1; transform:none; }


/* Defer below-the-fold rendering in supporting browsers. */
@supports (content-visibility:auto){
  .technology, .news-band, .section{ content-visibility:auto; contain-intrinsic-size:900px; }
}