/* ==========================================================================
   Q-WASA "Aurora" layer - the expressive finish over site.css + creative.css.
   Loaded last, so plain selectors here win on equal specificity.

   Contents
     1. Tokens and typography
     2. Page furniture: grain, scroll progress, aurora fields
     3. Scroll reveal
     4. The 3D card system
     5. Header and navigation
     6. Hero
     7. Home sections
     8. Interior pages
     9. Footer
    10. Motion and density preferences
   ========================================================================== */

/* -------------------------------------------------- 1. Tokens + typography */

:root{
  --font-display:"Sora","Segoe UI",Arial,sans-serif;
  --font-body:"Inter","Segoe UI",Arial,sans-serif;
  --font-accent:"Instrument Serif",Georgia,"Times New Roman",serif;

  --abyss:#03191f;
  --deep:#062a34;
  --ocean:#075463;
  --teal:#028094;
  --aqua:#6fe3d6;
  --lime:#d8ff68;
  --paper:#f4f6f1;
  --ink:#0d2b33;
  --muted:#5b7076;
  --line:#dde5e0;

  --radius:26px;
  --radius-lg:34px;

  /* A consistent elevation ramp: cards read as physical objects. */
  --e1:0 1px 2px rgba(6,42,52,.06), 0 4px 12px rgba(6,42,52,.05);
  --e2:0 2px 4px rgba(6,42,52,.06), 0 12px 28px rgba(6,42,52,.08);
  --e3:0 8px 16px rgba(6,42,52,.08), 0 28px 60px rgba(6,42,52,.14);
  --e4:0 18px 36px rgba(6,42,52,.12), 0 48px 96px rgba(6,42,52,.20);

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.22,.61,.36,1);
}

/* Several decorations are deliberately wider than the viewport: the rotated
   marquee band, the hero watermark, the aurora fields. `clip` contains them
   without creating a scroll container - `hidden` here would silently break the
   sticky header and the anchor scrolling. */
html,body{overflow-x:clip}

body{
  font-family:var(--font-body);
  font-size:16.5px;
  line-height:1.62;
  letter-spacing:-.011em;
  background:var(--paper);
  font-feature-settings:"cv11","ss01";
  text-rendering:optimizeLegibility;
}

h1,h2,h3,.brand>span{font-family:var(--font-display);font-weight:700}
h1,h2{letter-spacing:-.055em;line-height:1.02}
h1{font-size:clamp(46px,6.4vw,92px)}
h2{font-size:clamp(34px,4.3vw,62px)}
h3{font-size:21px;letter-spacing:-.03em;font-weight:650;line-height:1.24}

/* The editorial counterpoint: an italic serif against the geometric display
   face. This single pairing does most of the "designed" work on the page. */
em{
  font-family:var(--font-accent);
  font-style:italic;
  font-weight:400;
  font-size:1.1em;
  letter-spacing:-.015em;
  color:var(--teal);
}
.hero em,.about-overlay em,.help-strip em,.page-heading em{color:var(--aqua)}

p{font-size:16px;line-height:1.7;color:var(--muted)}
.eyebrow{
  font-family:var(--font-body);
  font-size:10.5px;font-weight:700;letter-spacing:.2em;
  display:inline-flex;align-items:center;gap:9px;
}
.meta{font-size:11.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--teal)}
.fine-print{font-size:12.5px;line-height:1.6;color:#8399a0}

.container{width:min(1320px,calc(100% - 88px))}
.section{padding-block:clamp(72px,9vw,132px)}

/* Buttons: pill, weighted, with a sheen that sweeps on hover. */
.button{
  position:relative;overflow:hidden;
  border-radius:100px;min-height:56px;padding:15px 27px;
  font-family:var(--font-body);font-size:13.5px;font-weight:650;letter-spacing:-.005em;
  gap:18px;
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),background .3s;
}
.button::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);
  transform:translateX(-120%);transition:transform .8s var(--ease-out);
}
.button:hover::before{transform:translateX(120%)}
.button:hover{transform:translateY(-4px);box-shadow:var(--e3)}
.button .icon{transition:transform .45s var(--ease-out)}
.button:hover .icon{transform:translateX(4px)}
.primary{background:var(--deep)}
.lime{background:var(--lime);color:var(--abyss)}
.lime:hover{background:#e6ff94;box-shadow:0 18px 44px rgba(216,255,104,.42)}

.text-link{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:650;font-size:14px;color:var(--teal);
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1.5px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .5s var(--ease-out);
}
.text-link:hover{background-size:100% 1.5px}
.text-link:hover .icon{transform:translateX(4px)}
.text-link .icon{transition:transform .4s var(--ease-out)}

/* ------------------------------------- 2. Grain, scroll progress, aurora */

/* A fine film grain over the whole page. It is what stops large flat colour
   fields from looking like flat colour fields. */
.grain{
  position:fixed;inset:-50%;z-index:9998;pointer-events:none;
  opacity:.032;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain-drift 7s steps(6) infinite;
}
@keyframes grain-drift{
  0%,100%{transform:translate(0,0)}
  16%{transform:translate(-3%,2%)}
  33%{transform:translate(2%,-3%)}
  50%{transform:translate(-2%,-2%)}
  66%{transform:translate(3%,1%)}
  83%{transform:translate(1%,3%)}
}

.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:9999;
  transform-origin:0 50%;transform:scaleX(var(--progress,0));
  background:linear-gradient(90deg,var(--aqua),var(--lime) 55%,#8affe0);
  box-shadow:0 0 18px rgba(111,227,214,.6);
}
/* Where the browser supports scroll-driven animation, run it off the
   compositor instead of the scroll handler. */
@supports (animation-timeline:scroll()){
  .scroll-progress{
    transform:scaleX(0);
    animation:progress-grow linear both;
    animation-timeline:scroll(root block);
  }
  @keyframes progress-grow{to{transform:scaleX(1)}}
}

/* Slow-drifting colour fields. Used behind dark sections. */
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.aurora span{
  position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;
  animation:aurora-float 22s var(--ease-soft) infinite alternate;
}
.aurora span:nth-child(1){width:46vw;height:46vw;left:-12%;top:-18%;background:radial-gradient(circle,#0bb6c4,transparent 68%)}
.aurora span:nth-child(2){width:38vw;height:38vw;right:-8%;top:8%;background:radial-gradient(circle,#1f5ce0,transparent 66%);animation-delay:-7s}
.aurora span:nth-child(3){width:34vw;height:34vw;left:28%;bottom:-20%;background:radial-gradient(circle,#b6f24a,transparent 64%);opacity:.28;animation-delay:-13s}
@keyframes aurora-float{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(4%,-6%,0) scale(1.18)}
}

/* ---------------------------------------------------- 3. Scroll reveal */

/* Gated on html.anim, which an inline head script sets before first paint, so
   there is no flash of hidden content when scripting is unavailable. */
html.anim :where(
  .section-heading,.service-card,.news-card,.project-card,.gallery-card,
  .tender-row,.contact-card,.document-card,.article-detail,.mission-row,
  .checklist>div,.faq-list details,.about-visual,.about-copy,.conservation>*,
  .archive-panel,.info-banner,.connection-grid>*,.complaint-layout>*,
  .page-heading .container>*,.help-strip>.container>*
){
  opacity:0;
  /* `translate`, not `transform`: the 3D card system owns `transform`, and the
     two would otherwise overwrite each other. These longhands compose. */
  translate:0 34px;
  transition:opacity .85s var(--ease-out),translate .85s var(--ease-out);
  transition-delay:calc(var(--i,0)*80ms);
}
html.anim .is-in{opacity:1;translate:none}

/* Headings wipe up from behind a mask rather than simply fading. */
html.anim .reveal-mask{display:block;overflow:hidden;padding-bottom:.08em}
html.anim .reveal-mask>span{
  display:block;
  transform:translate3d(0,102%,0);
  transition:transform 1.05s var(--ease-out);
  transition-delay:calc(var(--i,0)*90ms);
}
html.anim .is-in .reveal-mask>span,html.anim .reveal-mask.is-in>span{transform:none}

/* --------------------------------------------- 4. The 3D card system */

/* Each card carries its own perspective, so tilt reads correctly regardless of
   where the card sits in the grid. --rx/--ry are written by aurora.js from
   pointer position; --mx/--my drive the glare. */
/* The class is doubled deliberately. site.css already ships
   `.service-card:hover{transform:translateY(-8px)}` at (0,2,0); a single
   `.card3d` is (0,1,0) and would lose the hover state to it. Doubling matches
   that weight, and this sheet loads last, so the 3D transform wins. The lift
   those rules wanted still happens - it moved into --ty. */
.card3d.card3d{
  position:relative;
  transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,var(--ty,0px),0) scale(var(--sc,1));
  transform-style:preserve-3d;
  transition:transform .75s var(--ease-out),box-shadow .75s var(--ease-out);
}
.card3d.card3d.is-tilting{transition:transform .12s linear,box-shadow .5s var(--ease-out)}

/* The glare: a soft highlight that tracks the pointer across the surface. */
.card3d::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.34),transparent 62%);
  opacity:0;transition:opacity .5s var(--ease-out);
  pointer-events:none;z-index:3;
}
.card3d.is-tilting::after,.card3d:hover::after{opacity:1}

/* Depth layers. Anything marked .lift floats above the card face. */
.card3d .lift{transform:translateZ(var(--lift,38px));transform-style:preserve-3d}
.card3d .lift-sm{transform:translateZ(18px)}
.card3d .lift-lg{transform:translateZ(64px)}

/* Service cards: the flagship 3D treatment on the home page. */
.service-grid{gap:24px}
.service-card{
  position:relative;overflow:hidden;
  border-radius:var(--radius-lg);
  box-shadow:var(--e2);
  isolation:isolate;
}
.service-card:hover{box-shadow:var(--e4)}
.service-card>*{position:relative;z-index:2}
/* A second surface behind the content catches the tilt and gives the card a
   visible thickness at its edges. */
.service-card::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(150deg,rgba(255,255,255,.26),transparent 46%);
  transform:translateZ(1px);
}
.service-card .service-illustration{
  transform:translateZ(26px) scale(1);
  transition:transform .8s var(--ease-out),opacity .6s;
  opacity:.16;
}
.service-card:hover .service-illustration{transform:translateZ(58px) scale(1.14) rotate(-5deg);opacity:.26}
.service-card .service-content{transform:translateZ(42px)}
.service-card .service-top{transform:translateZ(30px)}
.service-card .icon-tile{
  transition:transform .7s var(--ease-out),background .4s;
  transform:translateZ(0)
}
.service-card:hover .icon-tile{transform:translateZ(30px) scale(1.06)}
.service-card h3{font-size:clamp(24px,2.3vw,32px);letter-spacing:-.04em}
.service-card .card-arrow{
  transition:transform .6s var(--ease-out);
  transform:translateZ(24px)
}
.service-card:hover .card-arrow{transform:translateZ(52px) translate(5px,-5px)}

/* News, project, gallery, contact and document cards share the system with a
   lighter lift, so the page has one depth language rather than five. */
.news-card,.project-card,.contact-card,.document-card,.gallery-card,.tender-row{
  border-radius:var(--radius);
  box-shadow:var(--e1);
  transition:transform .7s var(--ease-out),box-shadow .7s var(--ease-out);
}
.news-card:hover,.project-card:hover,.contact-card:hover,
.document-card:hover,.gallery-card:hover,.tender-row:hover{box-shadow:var(--e3)}

.news-card{overflow:hidden;background:#fff}
.news-card .news-image{overflow:hidden;border-radius:var(--radius) var(--radius) 0 0;display:block;position:relative}
.news-card .news-image img{transition:transform 1.1s var(--ease-out);width:100%}
.news-card:hover .news-image img{transform:scale(1.07)}
.news-card .news-body{transform:translateZ(30px)}
.news-card h3 a{background-image:linear-gradient(currentColor,currentColor);background-size:0 1.5px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .5s var(--ease-out)}
.news-card:hover h3 a{background-size:100% 1.5px}

.image-arrow,.card-arrow{
  transition:transform .6s var(--ease-out),background .4s,color .4s;
}
.news-image .image-arrow,.gallery-card .image-arrow{
  position:absolute;right:16px;top:16px;
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--deep);
  transform:translateZ(40px) scale(.85);opacity:0;
  box-shadow:var(--e2);
}
.news-card:hover .image-arrow,.gallery-card:hover .image-arrow{transform:translateZ(40px) scale(1);opacity:1}

.gallery-card{overflow:hidden;background:#fff}
.gallery-card button{display:block;position:relative;width:100%;border:0;padding:0;background:none;overflow:hidden}
.gallery-card img{transition:transform 1.2s var(--ease-out);width:100%}
.gallery-card:hover img{transform:scale(1.08)}
.gallery-card figcaption{transform:translateZ(26px)}

.project-card{overflow:hidden;background:#fff}
.project-card .project-art{position:relative;overflow:hidden}
.project-card .project-art .icon{transition:transform .9s var(--ease-out);transform:translateZ(30px)}
.project-card:hover .project-art .icon{transform:translateZ(60px) scale(1.12) rotate(-6deg)}
.project-card .project-body{transform:translateZ(24px)}

.contact-card{position:relative;overflow:hidden}
.contact-card>*{transform:translateZ(32px)}
.contact-card h2{font-size:clamp(26px,2.6vw,38px)}

.document-card{background:#fff}
.document-card>*{transform:translateZ(20px)}

/* -------------------------------------------------- 5. Header + nav */

.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(244,246,241,.72);
  backdrop-filter:saturate(1.6) blur(18px);
  -webkit-backdrop-filter:saturate(1.6) blur(18px);
  border-bottom:1px solid transparent;
  transition:background .5s var(--ease-out),border-color .5s,box-shadow .5s,height .5s;
}
.site-header.is-stuck{
  background:rgba(244,246,241,.9);
  border-bottom-color:rgba(6,42,52,.1);
  box-shadow:0 10px 40px rgba(6,42,52,.07);
}
.nav-shell{height:92px;transition:height .5s var(--ease-out)}
.site-header.is-stuck .nav-shell{height:74px}

.nav-shell nav>a{
  position:relative;font-weight:550;font-size:13.5px;
  padding-block:6px;
}
.nav-shell nav>a:not(.nav-complaint)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .55s var(--ease-out);
}
.nav-shell nav>a:not(.nav-complaint):hover::after,
.nav-shell nav>a[aria-current=page]::after{transform:scaleX(1);transform-origin:0 50%}
.nav-complaint{font-weight:650;box-shadow:var(--e1);transition:transform .45s var(--ease-out),box-shadow .45s,background .3s}
.nav-complaint:hover{transform:translateY(-2px);box-shadow:var(--e2)}

/* ---------------------------------------------------------- 6. Hero */

.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--abyss)}
.hero>.container,.hero .hero-bottom{position:relative;z-index:2}
.hero .hero-gridlines{z-index:1}
.hero h1{
  font-size:clamp(50px,7.4vw,108px);
  letter-spacing:-.062em;
  font-weight:750;
}
.hero h1 span:not(.headline-period){
  background:linear-gradient(104deg,var(--aqua) 8%,#9df3ff 42%,var(--lime) 92%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.hero-copy>p{font-size:clamp(16px,1.35vw,19px);color:#a8c6ce;max-width:34ch}
.hero .status-dot{
  width:7px;height:7px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 0 0 rgba(216,255,104,.7);
  animation:pulse-dot 2.4s var(--ease-soft) infinite;
}
@keyframes pulse-dot{
  to{box-shadow:0 0 0 14px rgba(216,255,104,0)}
}
.hero-watermark{
  font-family:var(--font-display);font-weight:800;
  letter-spacing:-.07em;
  opacity:.035;
}

/* The sculpture breathes. Its pointer tilt is owned by site.js via [data-tilt],
   so this uses the `translate` property and never touches `transform`. */
.hero-art{perspective:1400px}
.water-sculpture,#water-canvas{
  animation:sculpture-float 9s var(--ease-soft) infinite alternate;
}
@keyframes sculpture-float{
  from{translate:0 -10px}
  to{translate:0 14px}
}
.scene-halo{
  background:radial-gradient(circle,rgba(111,227,214,.42),transparent 62%);
  animation:halo-breathe 8s var(--ease-soft) infinite alternate;
}
@keyframes halo-breathe{from{transform:scale(.92);opacity:.7}to{transform:scale(1.12);opacity:1}}

.scene-card{
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;
  box-shadow:0 24px 60px rgba(0,0,0,.34);
}

.hero-bottom span b{font-family:var(--font-display);color:var(--lime)}

/* Marquee: doubled track, seamless loop, pausing on hover. */
.flow-band{background:var(--lime);color:var(--abyss);overflow:hidden}
.flow-band>div{display:flex;width:max-content;animation:marquee 34s linear infinite}
.flow-band:hover>div{animation-play-state:paused}
.flow-band span{
  font-family:var(--font-display);font-weight:700;
  letter-spacing:-.035em;white-space:nowrap;padding-right:.4em;
}
.flow-band i{font-style:normal;opacity:.45}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ------------------------------------------------- 7. Home sections */

.notice-bar{border-block:1px solid var(--line);background:#fff}
.notice-badge{
  background:var(--deep);color:var(--lime);
  border-radius:100px;padding:6px 13px;
  font-size:10px;font-weight:700;letter-spacing:.16em;
}

.section-heading h2{font-size:clamp(36px,4.8vw,72px);line-height:1.01;letter-spacing:-.06em}

.about-section{position:relative;isolation:isolate}
.about-visual{position:relative;overflow:hidden;border-radius:var(--radius-lg);box-shadow:var(--e3)}
.about-visual img{transition:transform 1.4s var(--ease-out)}
.about-visual:hover img{transform:scale(1.05)}
.about-stamp{animation:stamp-spin 26s linear infinite}
@keyframes stamp-spin{to{rotate:360deg}}
.mission-row{transition:transform .5s var(--ease-out)}
.mission-row:hover{transform:translateX(8px)}

.conservation{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--radius-lg);
  background:linear-gradient(140deg,var(--abyss),#0a3f66 58%,#06657a);
  box-shadow:var(--e4);
}
.conservation>*{position:relative;z-index:2}
.conservation h2,.conservation .eyebrow{color:#fff}
.conservation p{color:#9fc4d2}
.calculator{
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.15);
  border-radius:var(--radius);
}
.calc-result strong{
  font-family:var(--font-display);
  font-size:clamp(46px,5.2vw,78px);
  letter-spacing:-.055em;color:var(--lime);
  font-variant-numeric:tabular-nums;
}
#water-minutes{accent-color:var(--lime)}

.checklist{
  background:#fff;border-radius:var(--radius-lg);box-shadow:var(--e3);
}
.checklist>div{transition:transform .5s var(--ease-out),background .4s}
.checklist>div:hover{transform:translateX(7px);background:rgba(2,128,148,.05)}

.faq-list details{
  border-radius:18px;
  transition:background .45s var(--ease-out),box-shadow .45s,transform .45s;
}
.faq-list details[open]{background:#fff;box-shadow:var(--e2)}
.faq-list summary{
  font-family:var(--font-display);font-weight:600;
  font-size:17px;letter-spacing:-.025em;
  list-style:none;cursor:pointer;
}
.faq-list summary::-webkit-details-marker{display:none}

.help-strip{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--lime);color:var(--abyss);
}
.help-strip h2{font-size:clamp(36px,4.6vw,68px)}
.help-strip .eyebrow{color:rgba(3,25,31,.6)}
.help-strip em{color:var(--deep)}

/* ------------------------------------------------ 8. Interior pages */

.page-heading{position:relative;overflow:hidden;isolation:isolate;background:var(--abyss);color:#fff}
.page-heading>.container{position:relative;z-index:2}
.page-heading h1{font-size:clamp(42px,5.6vw,84px)}
.page-heading p{color:#a8c6ce;max-width:52ch}
.breadcrumb{font-size:12px;letter-spacing:.06em;color:#7fa3ad}

.filter{
  border-radius:100px;font-weight:600;font-size:13px;
  transition:background .35s,color .35s,transform .45s var(--ease-out),box-shadow .45s;
}
.filter:hover{transform:translateY(-2px)}
.filter.active{background:var(--deep);color:var(--lime);box-shadow:var(--e2)}

.tender-row{background:#fff;transition:transform .55s var(--ease-out),box-shadow .55s}
.tender-row:hover{transform:translateY(-4px)}

.complaint-form{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--e3)}
.complaint-form input,.complaint-form textarea{
  border-radius:14px;
  transition:border-color .35s,box-shadow .35s,background .35s;
}
.complaint-form input:focus,.complaint-form textarea:focus{
  border-color:var(--teal);
  box-shadow:0 0 0 4px rgba(2,128,148,.13);
}

.lightbox{border:0;border-radius:var(--radius);box-shadow:var(--e4);padding:0}
.lightbox::backdrop{background:rgba(3,25,31,.82);backdrop-filter:blur(8px)}

/* ------------------------------------------------------- 9. Footer */

.site-footer{position:relative;overflow:hidden;isolation:isolate;background:var(--abyss);color:#cfe3e8}
.site-footer>*{position:relative;z-index:2}
.site-footer h3{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--aqua);font-family:var(--font-body);font-weight:700}
.site-footer a{transition:color .3s,transform .4s var(--ease-out)}
.site-footer a:hover{color:var(--lime)}
.footer-grid>div>a{display:block}
.footer-grid>div>a:hover{transform:translateX(5px)}

/* ------------------------------ 10. Motion and density preferences */

@media (max-width:900px){
  .container{width:min(1320px,calc(100% - 44px))}
  /* Tilt is a pointer affordance; on touch it only causes jitter. */
  .card3d.card3d{transform:none!important}
  .card3d::after{display:none}
  .card3d .lift,.card3d .lift-sm,.card3d .lift-lg,
  .service-card .service-content,.service-card .service-top,
  .service-card .service-illustration,.service-card .card-arrow,
  .news-card .news-body,.project-card .project-body,
  .contact-card>*,.document-card>*,.gallery-card figcaption{transform:none}
  .hero h1{font-size:clamp(40px,10.5vw,62px)}
}

@media (max-width:520px){
  .container{width:min(1320px,calc(100% - 32px))}
  .section{padding-block:60px}
  h1{font-size:clamp(34px,10vw,48px)}
  h2{font-size:clamp(27px,7.6vw,38px)}
  .button{width:100%}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  html.anim :where(.section-heading,.service-card,.news-card,.project-card,
    .gallery-card,.tender-row,.contact-card,.document-card,.article-detail,
    .mission-row,.checklist>div,.faq-list details,.about-visual,.about-copy,
    .conservation>*,.archive-panel,.info-banner,.connection-grid>*,
    .complaint-layout>*,.page-heading .container>*,.help-strip>.container>*){
    opacity:1;translate:none;
  }
  html.anim .reveal-mask>span{transform:none}
  .card3d.card3d{transform:none!important}
  .grain{animation:none}
}

/* Without scripting nothing is ever revealed, so show everything outright. */
.no-js .grain,.no-js .scroll-progress{display:none}

/* The lime mark closes the headline, so it sits like punctuation rather than
   floating as a separate bullet. */
.headline-period{
  font-size:.2em;
  margin-left:.06em;
  vertical-align:.14em;
  -webkit-text-fill-color:var(--lime);
  color:var(--lime);
}