/* ==========================================================================
   AksuPivot — single stylesheet
   --------------------------------------------------------------------------
   Every aksu*.css was merged into this one file. The site now loads ONE
   stylesheet of its own on top of the template's, instead of up to eleven.

   THE ORDER OF THE BLOCKS BELOW IS LOAD-BEARING. Several of them beat the
   template at equal specificity and win only because they come later, so
   moving a block changes what renders. The sequence is the master order that
   every page's original link order was a subsequence of, which is why each
   page's cascade came through the merge unchanged:

     1  aksu-hero-lock        hero canvas, containment, glass card
     2  aksu-hero-motion      hero reveal choreography        (index)
     3  aksu-overrides        template corrections, shared measure
     4  aksu-header (v1)      header, nav, language, Contact pill
     5  aksu-header-motion    header interaction states
     6  aksu-footer           footer
     7  aksu-reveal           scroll-reveal parked/revealed states
     8  aksu-breadcrumb       breadcrumb band (.akb)
     9  aksu-sections         home/about sections (.abt .abg .sft)
    10  aksu-content          catalogue blocks (.akq .akm .akx)
    11  aksu-contact          contact page (.akc)                (contact)
    13  aksu-preloader        preloader                          (index)

   Blocks 11-13 were previously loaded only on their own page. They are safe
   site-wide: each is namespaced (.akc / #aksu-preloader) and none of
   them declares a :root, html, body or universal selector, so nothing in them
   can reach a page that does not use those classes.

   Everything not written by us — bootstrap, main.css, all.min.css and the rest
   of the template — is still linked separately and still loads BEFORE this
   file. That relationship is what most of these rules depend on.
   ========================================================================== */

/* ==========================================================================
   AKSU-HERO-LOCK
   Hero canvas, containment and the glass card
   was: assets/css/aksu-hero-lock.css
   ========================================================================== */

/* ==========================================================================
   Hero — fixed desktop appearance
   --------------------------------------------------------------------------
   The hero is rendered onto a fixed 1920 x 800 design canvas and scaled to fit
   the viewport, so every element keeps exactly the same size and position
   relative to the hero at any desktop width.

   Two things are needed for that:

   1. The canvas itself. .hero-lock is a query container, so the scale factor
      is derived from the hero's own available width (100cqw) rather than
      100vw — 100vw includes the scrollbar and would overflow by ~15px.
      transform: scale() does not shrink the layout box, so the leftover
      height is removed with a negative margin-bottom.

   2. Pinning the contents. The template restyles the hero at 1899px, 1600px
      and 1399px, and those media queries key off the VIEWPORT, not the
      canvas — so without this they would still fire and change the layout
      inside the canvas. Every property they touch is re-asserted below at its
      1920 value, at a higher specificity so it wins regardless of order.

   Below 992px the template's own responsive hero is left untouched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Contained hero
   --------------------------------------------------------------------------
   The hero used to run edge to edge and start at y=0, which put its top 113px
   underneath the sticky header. It is now a rounded card: inset from the
   viewport on three sides and dropped clear of the header.

   Outside the 992px query on purpose — the containment is wanted at every
   width, while the 1920 design canvas below is desktop-only.

   .hero-lock is the clipping frame, so the radius belongs here and not on the
   scaled canvas inside it; a radius on that element would be multiplied by the
   scale factor and would therefore change with viewport width.

   The inset also feeds the scale automatically: .hero-lock is the query
   container, so 100cqw is its CONTENT width, and narrowing it re-derives
   --hero-scale without anything else being touched.
   -------------------------------------------------------------------------- */
:root { --hero-inset: clamp(10px, 1.3vw, 26px); }

.hero-lock {
  margin-inline: var(--hero-inset);
  /* sits directly under the sticky header — no gap, just clearance */
  margin-top: var(--ac-header-h, 113px);
  /* the card's rounded bottom edge would otherwise sit flush against the
     section below, which reads as a crop rather than as a card */
  margin-bottom: var(--hero-inset);
  border-radius: clamp(14px, 1.7vw, 28px);
  overflow: hidden;
}

@media (min-width: 992px) {

  .hero-lock {
    container-type: inline-size;
    /* The layout box stays 1920px wide; the scaled result fits exactly, so
       clipping only removes the un-scaled overflow, never visible pixels. */
    overflow: hidden;
  }

  .hero-lock > .hero-section.hero-3 {
    --hero-dw: 1920px;  /* design canvas width  */
    --hero-dh: 760px;   /* design canvas height at that width */
    /* length / length yields the unitless ratio scale() requires */
    --hero-scale: calc(100cqw / var(--hero-dw));

    width: var(--hero-dw);
    height: var(--hero-dh);
    /* Vertically centred, computed rather than eyeballed.
       .
       The visible content — location line down to the bottom of "Pivot Systems"
       — measures 434 design px. In a 760 canvas that leaves 326 to split, so
       the flow starts at (760 - 434) / 2 = 163 and ends at 597, with the same
       163 below it.
       .
       padding-bottom is NOT the mirror of 163: the box is border-box with an
       explicit height, so the bottom padding only has to be small enough not
       to squeeze the 469px flow box. 110 leaves it room; the centring comes
       entirely from the top value and the fixed canvas height. */
    padding: 163px 0 110px;

    transform-origin: top left;
    transform: scale(var(--hero-scale));
    /* Reclaim the vertical space the transform does not remove. */
    margin-bottom: calc(var(--hero-dh) * (var(--hero-scale) - 1));
  }

  /* ---- contents pinned to their 1920 values ---- */

  /* was: 0 50px at <=1600, 0 30px at <=1399 */
  .hero-lock .hero-3 .container-fluid { padding: 0 120px; }

  /* was: 66px at <=1899, 85px + 20px margin at <=1399 */
  .hero-lock .hero-3 .hero-content h1,
  .hero-lock .hero-3 .hero-content .text {
    font-size: 100px;
    margin-bottom: 35px;
  }

  /* was: margin-left 0 at <=1399 */
  .hero-lock .hero-3 .hero-content .text { margin-left: 650px; margin-bottom: 0; }

  /* was: 115px / margin-left 250px at <=1899 */
  .hero-lock .hero-3 .hero-content span {
    font-size: 200px;
    margin-left: 370px;
  }

  /* was: width 105px at <=1899; 90px and tighter margins at <=1399.
     The base rule sets no width, so the intrinsic size is restored. */
  .hero-lock .hero-3 .hero-content span img {
    width: auto;
    margin-top: -30px;
    margin-left: -30px;
    margin-right: -30px;
  }

  /* was: display none at <=1399 — the stat card simply vanished below 1400.
     `top` is restated too: the card is absolutely positioned, so it does NOT
     follow the section padding and would stay put while the headline moved.
     .
     It is NOT centred in the full 760 canvas. That would put it at 239 -> 509,
     and "PIVOT SYSTEMS" ink runs 467 -> 607 across x 770 -> 1550 while the card
     sits at x 1459 -> 1800: a 91 x 42 collision, with the top of "SYSTEMS"
     showing through the glass.
     .
     It is centred in the band it actually has instead — from the top of the
     hero content (163) to the top of that headline's ink (467). That band is
     304 tall, the card is 270, so 17 above and 17 below:
       163 + (304 - 270) / 2 = 180 */
  .hero-lock .hero-3 .hero-box { display: block; top: 180px; }
}

/* --------------------------------------------------------------------------
   Hero card — liquid glass
   --------------------------------------------------------------------------
   The template gave this a flat 10% white fill, which over moving footage just
   reads as a grey rectangle. This is real glass: the backdrop is blurred and
   saturated so the video colour bleeds through, a diagonal fill gives it body,
   and the light is described by three separate edges rather than one border —
   a bright inset top edge (where light catches the lip), a dim inset bottom
   edge, and a soft drop shadow underneath.

   Scoped under .hero-lock so it outranks the template's (0,2,0) rules, and
   applied to BOTH copies: .hero-box is the desktop card, .hero-boxs is the
   separate mobile one inside .hero-image.

   backdrop-filter samples what is painted behind the element. .drone-video
   sits at z-index -1 in the same stacking context, so the footage is in the
   backdrop and does get blurred. @supports keeps the flat fill for engines
   without it rather than leaving an almost-transparent panel.
   -------------------------------------------------------------------------- */
.hero-lock .hero-3 .hero-box,
.hero-lock .hero-3 .hero-image .hero-boxs {
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 22px;
  background: linear-gradient(152deg,
    rgba(255, 255, 255, 0.17) 0%,
    rgba(255, 255, 255, 0.07) 52%,
    rgba(255, 255, 255, 0.12) 100%);
  box-shadow:
    0 20px 52px -22px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    inset 0 -1px 0 rgba(255, 255, 255, 0.07);
}
.hero-lock .hero-3 .hero-box { position: absolute; }

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-lock .hero-3 .hero-box,
  .hero-lock .hero-3 .hero-image .hero-boxs {
    -webkit-backdrop-filter: blur(24px) saturate(185%);
            backdrop-filter: blur(24px) saturate(185%);
  }
}

/* Specular sheen across the top-left corner — the thing that stops it reading
   as a plain translucent panel. Inset by 1px so it sits inside the border. */
.hero-lock .hero-3 .hero-box::before,
.hero-lock .hero-3 .hero-image .hero-boxs::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: 21px;
  background: radial-gradient(110% 78% at 8% 0%,
    rgba(255, 255, 255, 0.30) 0%,
    rgba(255, 255, 255, 0.07) 42%,
    transparent 68%);
  pointer-events: none;
}

/* the divider and the label want to be glass too, not template grey.
   text-transform is reset because main.css carries `p { capitalize }` at
   (0,0,1) — it Title-Cased the whole sentence. */
.hero-lock .hero-3 .hero-box p,
.hero-lock .hero-3 .hero-image .hero-boxs p {
  border-bottom-color: rgba(255, 255, 255, 0.16);
  text-transform: none;
  line-height: 1.55;
}
.hero-lock .hero-3 .hero-box .icon-item .cont span,
.hero-lock .hero-3 .hero-image .hero-boxs .icon-item .cont span {
  text-transform: none;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  letter-spacing: 0.01em;
}
.hero-lock .hero-3 .hero-box .icon-item .icon,
.hero-lock .hero-3 .hero-image .hero-boxs .icon-item .icon {
  background-color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.5);
}

/* --------------------------------------------------------------------------
   Hero video tint
   --------------------------------------------------------------------------
   A black wash over the background video so the white headline keeps its
   contrast against the brighter frames of the loop. It is strongest at the
   bottom edge and fades out towards the top.

   .drone-video sits at z-index -1 and so forms its own stacking context, so the
   tint lands over the footage but still behind the hero content. The order of
   the two layers inside it is stated explicitly rather than left to the default
   painting order — the <video> is a non-positioned replaced element and the
   tint is absolutely positioned, and relying on that implicit ordering is what
   made the first attempt read as "no overlay at all".

   Deliberately outside the 992px query — the video is on show at every width
   down to 575px, where the template hides it.

   inset: 0 matches the visible area exactly: the <video> is 1000px tall but
   .hero-section.hero-3 carries .fix (overflow: hidden), so anything past the
   hero box is already clipped.
   -------------------------------------------------------------------------- */
.hero-3 .drone-video video {
  position: relative;
  z-index: 1;
}

.hero-3 .drone-video::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  /* Heaviest along the bottom edge, easing off towards the top so the sky end
     of the frame stays open. The stops are weighted low: a plain two-stop ramp
     puts its midpoint at 50% and washes out the lower third, which is where
     "PIVOT SYSTEMS" and the stat card sit. */
  background-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.60) 18%,
    rgba(0, 0, 0, 0.45) 45%,
    rgba(0, 0, 0, 0.34) 75%,
    rgba(0, 0, 0, 0.30) 100%
  );
  pointer-events: none;
}

/* ==========================================================================
   AKSU-HERO-MOTION
   Hero reveal choreography (index only)
   was: assets/css/aksu-hero-motion.css
   ========================================================================== */

/* ==========================================================================
   AksuPivot — hero motion  (v3)
   --------------------------------------------------------------------------
   Cinematic reveal. The video breathes out of a slow zoom while a wet front
   crosses the location line; the headlines rise letter by letter like a
   sprinkler line coming on tower by tower; water floods the outlined AKSU
   letterforms, its centre mark spins in and sheds two rings; the stat card
   surfaces last and keeps breathing.

   Gate — set by aksu-header-motion.js:
     .achm-arm    parked (invisible). Never added when JS is off or reduced
                  motion is requested, so the hero cannot be left blank.
     .achm-ready  play — fires when the preloader has left the DOM.

   Split — aksu-hero-split.js wraps each headline letter in .akh-ch with its
   own --i. If the splitter never ran, the .akh-ch rules match nothing and
   the whole line simply fades in: same choreography, lower resolution.

   The hero is pinned to a 1920x880 canvas and scaled by aksu-hero-lock.css;
   nothing here touches a layout property. Only opacity, transform, filter,
   mask-position and background-position move — all compositor-friendly and
   all composing with the parent scale instead of reflowing inside it.
   ========================================================================== */

:root {
  --akh-green:  #2f8a34;
  --akh-lime:   #2f8a34;
  /* expo-out: fast arrival, very long soft landing — the smoothness lives here */
  --akh-glide:  cubic-bezier(0.16, 1, 0.3, 1);
  --akh-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
}

/* ---------------------------- parked state ------------------------------- */

html.achm-arm .hero-3 .hero-content p,
html.achm-arm .hero-3 .hero-content h1,
html.achm-arm .hero-3 .hero-content .text,
html.achm-arm .hero-3 .hero-content > span,
html.achm-arm .hero-3 .hero-box {
  opacity: 0;
}

/* ------------------------- letter-span quarantine ------------------------
   CRITICAL. The template styles EVERY span inside .hero-content as the giant
   outlined wordmark:

     .hero-3 .hero-content span {
       font-size: 200px; -webkit-text-stroke: 2px #fff; color: transparent;
       display: inline-block; margin-left: 370px; text-transform: uppercase;
     }

   The splitter wraps each headline letter in a span, so every letter inherited
   that — 200px outlined glyphs, each pushed 370px right, wrapping one per
   line and destroying the hero. This resets them at (0,3,1), which outranks
   the template's (0,2,1), and every AKSU rule below is re-scoped to
   `.hero-content > span` so it can only ever hit the wordmark itself. */
.hero-3 .hero-content h1 .akh-ch,
.hero-3 .hero-content .text .akh-ch {
  display: inline-block;
  font: inherit;
  color: inherit;
  margin: 0;
  text-transform: inherit;
  -webkit-text-stroke: 0;
  background: none;
  -webkit-background-clip: border-box;
          background-clip: border-box;
  position: static;
}
.hero-3 .hero-content h1 .akh-ch::before,
.hero-3 .hero-content h1 .akh-ch::after,
.hero-3 .hero-content .text .akh-ch::before,
.hero-3 .hero-content .text .akh-ch::after { content: none; }

/* ------------------------------- keyframes ------------------------------- */

/* Video settles out of a slow push-in. */
@keyframes akh-zoom {
  from { transform: scale(1.09); }
  to   { transform: scale(1); }
}

/* Wet front for the location line — a feathered mask slides across.
   Geometry (mask-position P resolves to P x (E - W); here W = 3E):
     hidden P = 130% -> offset -2.6E, transparent well past the element
     shown  P =   0% -> opaque band spans 0 -> 1.95E, element fully covered */
@keyframes akh-front {
  from { -webkit-mask-position: 130% 0; mask-position: 130% 0; opacity: 1; }
  to   { -webkit-mask-position: 0% 0;   mask-position: 0% 0;   opacity: 1; }
}

/* One letter standing up. Each glyph is hinged on its own baseline and swings
   up out of the floor in 3D — the depth comes from perspective, not blur, so
   the type stays crisp for the whole travel. A touch of Z pushes it away as
   it starts, which reads as weight rather than a flat slide. */
@keyframes akh-letter {
  from { opacity: 0; transform: perspective(700px) rotateX(-92deg) translateZ(-40px); }
  60%  { opacity: 1; }
  /* lands on `none`, not on perspective(700px) rotateX(0) — that resolves to a
     non-identity matrix3d and would keep a 3D layer alive on all 24 glyphs
     for the life of the page */
  to   { opacity: 1; transform: none; }
}

/* Whole-line fallback when the splitter did not run. */
@keyframes akh-line {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* Water running through the outlined letters.
   .
   The vertical 50% is now inert — background-size is 100% of a box that has
   been padded to enclose the ink, so the image and the box coincide. It is
   left in place so the keyframe stays correct if the size ever changes. The
   real vertical fix lives on .hero-content > span below. */
@keyframes akh-flood {
  from { background-position: 190% 50%; }
  to   { background-position: -90% 50%; }
}

/* Ambient repeat. The sweep itself is the same 4.2s, but the band is now wide
   enough to fill the whole wordmark at its peak, so running it back-to-back
   would strobe. The letters are parked dry for the remaining ~10s. */
@keyframes akh-flood-loop {
  0%           { background-position: 190% 50%; }
  30%          { background-position: -90% 50%; }
  30.01%, 100% { background-position: 190% 50%; }
}

/* The AKSU wordmark rises and settles.
   .
   NO MASK HERE — deliberately. A wipe mask was tried and it decapitated the
   letters: the span's box is 90px tall (line-height collapses to 28px against
   a 200px font) while the glyph ink runs from -69px to +137px, so two thirds
   of the cap height sits ABOVE the box. A mask only covers the box, and
   everything outside it became transparent. The left-to-right water motion is
   already carried by akh-flood, which uses background-position and is not
   clipped by the box. */
@keyframes akh-surface {
  from { opacity: 0; transform: translateY(26px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* The round mark spins into place. */
@keyframes akh-spin {
  from { transform: rotate(-200deg) scale(0.3); opacity: 0; }
  to   { transform: none;                       opacity: 1; }
}

/* Rings of water leaving the mark. */
@keyframes akh-ripple {
  from { transform: translate(-50%, -50%) scale(0.55); opacity: 0.5; }
  to   { transform: translate(-50%, -50%) scale(2.8);  opacity: 0; }
}

/* Card slides in from the right edge it sits against, with a soft overshoot —
   it reads as arriving from off-frame rather than fading up in place. */
@keyframes akh-card {
  0%   { opacity: 0; transform: translate(54px, 22px) scale(0.96); }
  55%  { opacity: 1; }
  78%  { transform: translate(-7px, -4px) scale(1.006); }
  100% { opacity: 1; transform: none; }
}

/* Ambient breathing — barely there. */
@keyframes akh-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Phone icon drips. */
@keyframes akh-drip {
  0%, 74%, 100% { transform: scale(1); }
  82%           { transform: scale(1.12); }
  90%           { transform: scale(0.98); }
}

@keyframes akh-fade { from { opacity: 0; } to { opacity: 1; } }

/* --------------------------------- video --------------------------------- */

html.achm-arm.achm-ready .hero-3 .drone-video video {
  animation: akh-zoom 3.2s var(--akh-glide) both;
}

/* ---------------------------- location line ------------------------------ */

html.achm-arm .hero-3 .hero-content p {
  -webkit-mask-image: linear-gradient(100deg, #000 0 65%, rgba(0, 0, 0, 0.5) 74%, rgba(0, 0, 0, 0) 82%);
          mask-image: linear-gradient(100deg, #000 0 65%, rgba(0, 0, 0, 0.5) 74%, rgba(0, 0, 0, 0) 82%);
  -webkit-mask-size: 300% 100%;
          mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 130% 0;
          mask-position: 130% 0;
}
html.achm-arm.achm-ready .hero-3 .hero-content p {
  animation:
    akh-front 1.3s var(--akh-glide) 0.15s both,
    akh-fade  0.01s linear          0.15s both;
}

/* ------------------------------ headlines -------------------------------- */

/* The line itself only fades — its letters do the work. Doubles as the whole
   answer when the splitter did not run: unsplit lines get the full rise. */
html.achm-arm.achm-ready .hero-3 .hero-content h1,
html.achm-arm.achm-ready .hero-3 .hero-content .text {
  animation: akh-line 1.2s var(--akh-glide) 0.35s both;
}
html.achm-arm.achm-ready .hero-3 .hero-content h1.akh-split,
html.achm-arm.achm-ready .hero-3 .hero-content .text.akh-split {
  animation: akh-fade 0.01s linear 0.35s both;
}
html.achm-arm.achm-ready .hero-3 .hero-content .text { animation-delay: 1.05s; }

.akh-ch {
  display: inline-block;
  /* hinge on the baseline so the glyph pivots up out of the line, not around
     its middle */
  transform-origin: 50% 92%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
/* "SMART FARMING": 42ms cascade from 0.30s — slower than before, so the wave
   travelling across the word is legible rather than a single flicker. */
html.achm-arm.achm-ready .hero-3 .hero-content h1.akh-split .akh-ch,
html.achm-arm.achm-ready .hero-3 .hero-content .text.akh-split .akh-ch {
  animation: akh-letter 1.05s var(--akh-glide) calc(0.30s + var(--i, 0) * 0.042s) both;
}
/* "PIVOT SYSTEMS": the same wave, answering from the far side of the pass. */
html.achm-arm.achm-ready .hero-3 .hero-content .text.akh-split .akh-ch {
  animation-delay: calc(1.02s + var(--i, 0) * 0.042s);
}

/* ---------------------- the outlined AKSU wordmark ----------------------- */

/* The template strokes these letters white with a transparent fill; the
   gradient is clipped to the text and paints INSIDE the outline, so the band
   reads as water moving through the letterforms. */
/* Band geometry, measured rather than guessed. In the span's own coordinate
   space the box is 728 x 122 and the image is 280% x 340% = 2038 x 415, which
   at 96deg gives a gradient line of L = 2038*sin96 + 415*cos96 = 2070px.
   .
     solid core  32% -> 68%  = 0.36 * 2070 = 745px
     box width                            = 728px
   .
   So at the midpoint of the sweep the opaque part of the band is wider than
   the whole wordmark and every letter is filled at once. The previous stops
   gave a 104px core — narrower than a single 200px glyph, which is why no
   letter ever filled completely.
   .
   The 14% ramps either side (290px, about two glyphs) keep the edge soft.
   96deg rather than 100deg because the tilt skews the edge horizontally by
   ink-height * tan(angle - 90): 49px at 100deg, cutting a visible diagonal
   through a letter; 29px at 96deg, which disappears inside the ramp. */
.hero-3 .hero-content > span {
  position: relative;

  /* ------------------------------------------------------------------------
     THE PAINTING AREA, not the gradient, is what clipped the fill.
     .
     `background-clip: text` clips to (border box) INTERSECT (glyph shapes).
     Ink that overflows the border box is never painted, whatever size the
     gradient image is. Measured here: the box runs 0 -> 122 while the ink runs
     -93 -> +187, because line-height collapses to 28px against a 200px font.
     So the top 93px and the bottom 65px of every letter — 56% of the ink —
     could not receive fill. That is the unfilled top of the A and the K.
     .
     Verified empirically: a 150px glyph in a 60px box, rasterized and
     pixel-scanned, shows fill ONLY between y=0 and y=60. Zero painted pixels
     above or below the box.
     .
     The fix is to grow the box until it contains the ink, then cancel the
     growth with equal negative margins so nothing moves on screen. 120px each
     side clears the 93 above and the 65 below with headroom, and keeping it
     symmetric leaves the box's 50%/50% centre exactly where it was — the
     ripple pseudo-elements are positioned against it.
     .
     Longhand, NOT the `margin` shorthand: the template sets
     `margin-left: 370px` on this span and a shorthand would wipe it.
     ------------------------------------------------------------------------ */
  padding-top: 120px;
  padding-bottom: 120px;
  margin-top: -120px;
  margin-bottom: -120px;

  background-image: linear-gradient(96deg,
    transparent 0 18%,
    rgba(47, 138, 52, 0.00) 18%,
    rgba(47, 138, 52, 0.98) 32%,
    rgba(47, 138, 52, 1.00) 50%,
    rgba(47, 138, 52, 0.98) 68%,
    rgba(47, 138, 52, 0.00) 82%,
    transparent 82% 100%);
  /* 100% height now that the padded box encloses the ink — no oversizing hack
     needed, and background-origin is padding-box so it tracks the new box. */
  background-size: 280% 100%;
  background-repeat: no-repeat;
  background-position: 190% 50%;
  -webkit-background-clip: text;
          background-clip: text;
}

/* The wordmark must never carry a mask — see akh-surface above for why. */
html.achm-arm .hero-3 .hero-content > span {
  -webkit-mask-image: none;
          mask-image: none;
}

html.achm-arm.achm-ready .hero-3 .hero-content > span {
  animation:
    akh-surface    1.4s var(--akh-glide) 0.80s both,
    akh-flood      3.0s var(--akh-glide) 1.65s 1 both,
    akh-flood-loop 14s  ease-in-out      9s    infinite;
}

/* The round mark between "Ak" and "su". */
html.achm-arm.achm-ready .hero-3 .hero-content > span img {
  animation: akh-spin 1.25s var(--akh-spring) 1.0s both;
}

/* Two rings, offset — a real drop never makes just one. */
html.achm-arm.achm-ready .hero-3 .hero-content > span::before,
html.achm-arm.achm-ready .hero-3 .hero-content > span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 190px;
  height: 190px;
  border: 2px solid rgba(47, 138, 52, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.55);
  opacity: 0;
  pointer-events: none;
}
html.achm-arm.achm-ready .hero-3 .hero-content > span::before {
  animation: akh-ripple 1.7s var(--akh-glide) 1.3s both;
}
html.achm-arm.achm-ready .hero-3 .hero-content > span::after {
  border-color: rgba(255, 255, 255, 0.35);
  animation: akh-ripple 1.9s var(--akh-glide) 1.55s both;
}

/* --------------------------- the stat card ------------------------------- */

html.achm-arm.achm-ready .hero-3 .hero-box {
  animation:
    akh-card  1.35s var(--akh-glide) 1.7s both,
    akh-float 9s    ease-in-out      3.1s infinite;
}
html.achm-arm.achm-ready .hero-3 .hero-box .icon {
  animation: akh-drip 5s ease-in-out 3.4s infinite;
}

/* ------------------------- the three departments ------------------------- */
/* Who to talk to is the reason this page exists, so it runs full width above
   the address rather than stacking in a narrow column beside the map. Three
   equal cards: no department is the "main" one. */

.akc-reach { margin-bottom: clamp(18px, 2vw, 26px); }
.akc-reach__title {
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.akc-reach__title em { font-style: normal; color: var(--akc-green); }
.akc-reach__lede {
  margin-top: 8px;
  max-width: 62ch;
  font-size: clamp(14px, 1.05vw, 15.5px);
  line-height: 1.65;
}

.akc-depts {
  display: grid;
  gap: clamp(12px, 1.4vw, 18px);
  margin-bottom: clamp(26px, 3vw, 44px);
  /* auto-fit rather than a fixed three: a fourth department can be added in the
     admin panel without this file having to change */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 258px), 1fr));
}

.akc-dept {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: clamp(18px, 1.8vw, 24px);
  border: 1px solid var(--akc-line);
  border-radius: 18px;
  background: #fff;
  transition: transform 0.35s var(--akc-glide), box-shadow 0.35s, border-color 0.35s;
}
.akc-dept:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: 0 22px 44px -26px rgba(15, 35, 64, 0.42);
}
.akc-dept__ic {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: rgba(47, 138, 52, 0.11);
  color: var(--akc-green);
  font-size: 17px;
}
/* .akc h3 is 26px from the template; a card label is not a section heading */
.akc .akc-dept__name {
  font-size: clamp(16px, 1.2vw, 18px);
  font-weight: 600;
  line-height: 1.3;
}
.akc-dept__lines { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.akc-dept__lines li {
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
}
.akc-dept__lines i { color: var(--akc-green); font-size: 13px; justify-self: center; }
.akc-dept__lines a {
  color: var(--akc-head);
  text-decoration: none;
  /* an e-mail address must be allowed to break rather than widen the card */
  overflow-wrap: anywhere;
  transition: color 0.25s;
}
.akc-dept__lines a:hover { color: var(--akc-green); text-decoration: underline; }

/* ---------------------------- address + map ------------------------------ */
/* The address answers "where", so it sits with the map.

   Left to its natural height the card came out 181px against a 560px map and
   left 379px of dead column beside it — measured, not guessed. It stretches to
   the map instead and centres its own content, so the row reads as two
   deliberate blocks of equal height rather than a small card adrift.

   Only from 1000px up: below that the grid is a single column and stretching
   would inflate the card to nothing but air. */
@media (min-width: 1000px) {
  .akc-grid--place > .akc-info { align-content: stretch; }
  .akc-card--addr { align-content: center; }
}
.akc-card--addr address {
  margin-top: 6px;
  font-size: 14px; font-style: normal; line-height: 1.55;
  color: var(--akc-head);
}
.akc-card__go {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 13px;
  color: var(--akc-green); font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.akc-card__go:hover { text-decoration: underline; }
/* ----------------------------- motion opt-out ---------------------------- */

@media (prefers-reduced-motion: reduce) {
  html.achm-arm .hero-3 .hero-content p,
  html.achm-arm .hero-3 .hero-content h1,
  html.achm-arm .hero-3 .hero-content span,
  html.achm-arm .hero-3 .hero-content .akh-ch,
  html.achm-arm .hero-3 .hero-box,
  html.achm-arm .hero-3 .drone-video video {
    opacity: 1 !important;
    animation: none !important;
    filter: none !important;
    transform: none !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }
  html.achm-arm .hero-3 .hero-content > span::before,
  html.achm-arm .hero-3 .hero-content > span::after { display: none; }
}

/* ==========================================================================
   AKSU-OVERRIDES
   Site-wide template corrections and the shared measure
   was: assets/css/aksu-overrides.css
   ========================================================================== */

/* ==========================================================================
   AksuPivot — brand-fit overrides
   --------------------------------------------------------------------------
   Small corrections to the Agriva template that exist purely because the
   AksuPivot content is a different shape from the demo content it replaced.
   Loaded after main.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Letter-image band ("AKSU")
   --------------------------------------------------------------------------
   The template sizes this word to span the band, but it was tuned for the
   6-letter "AGRIVA". "AKSU" is 4 letters and covered only ~55% of the width
   instead of ~77%, leaving the drone graphic floating over empty space.

   Every breakpoint is scaled by the measured width ratio (AGRIVA / AKSU =
   938 / 670 = 1.40) so the band fills exactly as much of its box as it did
   before, at every width. The three widest values are then trimmed a few
   pixels: above 1600 the template applies letter-spacing: -9.6px, which takes
   6 gaps out of AGRIVA but only 4 out of AKSU, so the flat ratio overshoots.

   Measured fill (AKSU vs. what AGRIVA gave) — 1920: 102.9 / 102.9,
   1700: 99.9 / 99.9, 1500: 98.2 / 98.1, 1280: 77.3 / 77.2, 900: 78.2 / 78.1,
   400: 91.3 / 91.2. The >1600 bleed past the box is the template's own look,
   not a regression.
   -------------------------------------------------------------------------- */













/* ==========================================================================
   Hero typeface — Poppins
   --------------------------------------------------------------------------
   The rest of the site is Outfit; the hero alone is set in Poppins.

   main.css names the family explicitly on several hero elements, e.g.
     .hero-3 .hero-content p    { font-family: "Outfit", sans-serif; }
     .hero-3 .hero-content span { font-family: "Outfit", sans-serif; }
   both at (0,2,1). Matching that specificity would leave the result decided by
   stylesheet order alone, so every selector below adds a third class and wins
   outright — this file is loaded after main.css either way, but the override
   should not depend on that.

   Covered: the desktop .hero-content, the .hero-box stat card, and the
   separate .hero-image block the template swaps in below 575px.

   Deliberately excluded: <i> and any .fa-* element. Font Awesome renders its
   glyphs from a font family, and a blanket override would replace every icon
   in the hero with a missing-glyph box. There are no icons in the hero today —
   the stat card uses an <img> — but the exclusion keeps that true if one is
   added later.
   ========================================================================== */

.hero-section.hero-3 .hero-content,
.hero-section.hero-3 .hero-content p,
.hero-section.hero-3 .hero-content p b,
.hero-section.hero-3 .hero-content h1,
.hero-section.hero-3 .hero-content > span,
.hero-section.hero-3 .hero-content .akh-ch,

.hero-section.hero-3 .hero-box,
.hero-section.hero-3 .hero-box p,
.hero-section.hero-3 .hero-box span,
.hero-section.hero-3 .hero-box h2,
.hero-section.hero-3 .hero-box h2 a,

.hero-section.hero-3 .hero-image p,
.hero-section.hero-3 .hero-image p b,
.hero-section.hero-3 .hero-image h1,
.hero-section.hero-3 .hero-boxs p,
.hero-section.hero-3 .hero-boxs span,
.hero-section.hero-3 .hero-boxs h2,
.hero-section.hero-3 .hero-boxs h2 a {
  font-family: "Poppins", sans-serif;
}

/* ==========================================================================
   One content measure
   --------------------------------------------------------------------------
   Three different widths were in play at 1440:
     header  .ac-container   1272px content, 57px gutters   (1320 cap + 24 pad)
     section .abt__wrap      1254px content, 90px gutters
     footer  .container      1386px content, 12px gutters   (Bootstrap)
   so nothing lined up vertically down the page.

   --aksu-wrap is now the single source of truth and everything but the hero
   uses it. The hero is deliberately excluded: it is pinned to its own 1920
   design canvas by aksu-hero-lock.css and must stay full-bleed.
   ========================================================================== */

:root {
  --aksu-wrap: min(100% - 2 * clamp(16px, 6.5vw, 90px), 1320px);
}

.ac-header .ac-container,
.akf .container,
.abt .abt__wrap,
.sft .sft__wrap {
  width: var(--aksu-wrap);
  max-width: none;
  margin-inline: auto;
  padding-left: 0;
  padding-right: 0;
}

/* Bootstrap sets its gutters with custom properties, so zeroing padding alone
   is not enough — the variables have to go too or they come back on any
   descendant .row inside the footer. */
.akf .container {
  --bs-gutter-x: 0;
}


/* --------------------------------------------------------------------------
   The other heroes.

   .hero-3 is only on the homepage. Every inner page opens with the .akb band
   or the template's .breadcrumb-wrapper banner — those are the hero of their
   page, so they take Poppins too. (.akb sets its own Poppins in its block.)
   -------------------------------------------------------------------------- */

.breadcrumb-wrapper .page-heading,
.breadcrumb-wrapper .page-heading h1,
.breadcrumb-wrapper .breadcrumb-sub-title,
.breadcrumb-wrapper .breadcrumb-sub-title h1,
.breadcrumb-wrapper .breadcrumb-items,
.breadcrumb-wrapper .breadcrumb-items li,
.breadcrumb-wrapper .breadcrumb-items li a {
  font-family: "Poppins", sans-serif;
}

/* Icon fonts keep their own family whatever the blocks above say. Without
   this, a blanket family override turns every Font Awesome glyph in a hero
   into a missing-character box. */
.hero-section.hero-3 i,
.hero-section.hero-3 [class*="fa-"],
.breadcrumb-wrapper i,
.breadcrumb-wrapper [class*="fa-"] {
  font-family: inherit;
}
.hero-section.hero-3 i[class*="fa-"],
.breadcrumb-wrapper i[class*="fa-"] {
  font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 6 Brands", sans-serif;
}


/* ==========================================================================
   Letter-band texture
   --------------------------------------------------------------------------
   main.css points .letter-image at assets/img/home-3/text.jpg. That file now
   lives in assets/img/home/ under an SEO name, so the path is re-declared
   here instead of editing the vendor stylesheet.
   ========================================================================== */

/* ==========================================================================
   AKSU-HEADER
   Header, nav, language switch and the Contact pill
   was: assets/v1/css/aksu-header.css
   ========================================================================== */

/* AksuPivot header, ported from the v1 site.
   Sources: anadolu.css (design tokens, header, responsive, mobile drawer)
   and style.css (drawer base + open state).
   Scoped to .ac-* / .th-menu-wrapper so it does not touch Agriva styles. */

/* --- base tokens (style.css :root) --- */
:root { --theme-color: #f47629; --gr-color2: #fd8900; --title-color: #101840; --body-color: #666666; --smoke-color: #f8f8f8; --smoke-color2: #ecf1ff; --black-color: #000000; --black-color2: #101018; --gray-color: #bdbdbd; --white-color: #ffffff; --body-bg: #e1e4e5; --light-color: #e1e4e5; --yellow-color: #e2b93b; --success-color: #2f8a34; --error-color: #eb5757; --th-border-color: #fff; --title-font: "Outfit", sans-serif; --body-font: "Outfit", sans-serif; --icon-font: "Font Awesome 6 Pro"; --main-container: 1320px; --container-gutters: 24px; --section-space: 120px; --section-space-mobile: 80px; --section-title-space: 60px; --ripple-ani-duration: 5s; }

/* --- token overrides (anadolu.css) --- */
/* ==========================================================================
   Bordomet — modern, international design layer
   Loaded AFTER style.css. American flag palette: blue #002868 / red #2f8a34
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
.home-casting {
  --body-bg: #ffffff;
  --theme-color: #002868;      /* Old Glory Blue */
  --accent-color: #2f8a34;     /* AksuPivot leaf green */
  --theme-color-2: #0a3a86;    /* lighter blue for gradients */
  --title-color: #0a1b3d;      /* deep navy headings */
  --body-color: #5a6172;       /* readable body grey */
  --ink: #0a1b3d;
  --muted: #6b7280;
  --line: #e7ebf2;
  --surface: #f5f7fb;
  --surface-2: #eef2f9;
  --th-border-color: #e1e4e5;

  --r-sm: 12px;
  --r: 18px;
  --r-lg: 26px;

  --shadow-sm: 0 4px 16px rgba(10, 27, 61, 0.06);
  --shadow: 0 18px 40px rgba(10, 27, 61, 0.10);
  --shadow-lg: 0 36px 80px rgba(0, 40, 104, 0.16);

  --section-space: clamp(72px, 8vw, 120px);
  --section-space-mobile: clamp(56px, 10vw, 84px);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

html { scroll-behavior: smooth; scroll-padding-top: 110px; }
.home-casting { color: var(--body-color); }
.home-casting ::selection { background: var(--accent-color); color: #fff; }

.home-casting a:focus-visible,
.home-casting button:focus-visible {
  outline: 3px solid rgba(0, 40, 104, 0.45);
  outline-offset: 2px;
  border-radius: 6px;
}

/* --------------------------------------------------------------------------

/* --- title font (editorial.css) --- */
:root {
  --title-font: "Outfit", sans-serif; /* headings */
}

/* --- drawer base (style.css) --- */
.th-menu-wrapper { position: fixed; top: 0px; left: 0px; bottom: 0px; background-color: rgba(0, 0, 0, 0.6); z-index: 999999; width: 100%; height: 100%; transition: 0.8s; opacity: 0; visibility: hidden; }
.th-menu-wrapper .mobile-logo { padding-bottom: 30px; padding-top: 40px; display: block; text-align: center; background-color: var(--white-color); }
.th-menu-wrapper .mobile-logo { max-width: 185px; }
.th-menu-wrapper .th-menu-toggle { border: none; position: absolute; right: -16.5px; top: 25px; padding: 0px; width: 33px; height: 33px; line-height: 35px; font-size: 18px; z-index: 1; color: var(--white-color); background-color: var(--theme-color); border-radius: 8px; }
.th-menu-wrapper .th-menu-toggle:hover { background-color: var(--title-color); color: var(--white-color); }
.th-menu-wrapper .th-menu-area { width: 100%; max-width: 310px; background-color: var(--body-bg); border-right: 3px solid var(--theme-color); height: 100%; position: relative; left: -110%; opacity: 0; visibility: hidden; transition: 1s; z-index: 1; }
.th-menu-wrapper.th-body-visible { opacity: 1; visibility: visible; }
.th-menu-wrapper.th-body-visible .th-menu-area { left: 0px; opacity: 1; visibility: visible; }

/* --- header bar --- */
/* ==========================================================================
   4. Header — clean custom bar (independent of teknikzen theme)
   ========================================================================== */
.ac-header { position: sticky; top: 0; z-index: 100; font-family: var(--body-font); }
.ac-container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 24px; }
.ac-header.header-layout5 { margin-bottom: 0; }

.ac-nav {
  background: #ffffff;
  border-bottom: 1px solid #e7eaf1;
  position: relative; z-index: 50;
  transition: box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.ac-nav.scrolled { box-shadow: 0 12px 34px rgba(10, 27, 61, 0.10); border-bottom-color: transparent; }
.ac-nav-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  min-height: 96px; transition: min-height 0.32s var(--ease);
}
.ac-nav.scrolled .ac-nav-inner { min-height: 82px; }

/* Logo */
.ac-logo { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; flex-shrink: 0; }
.ac-logo .ac-logo-img { height: 44px; width: auto; max-width: none; display: block; transition: height 0.3s var(--ease); }
.ac-nav.scrolled .ac-logo .ac-logo-img { height: 36px; }
@media (max-width: 480px) { .ac-logo .ac-logo-img { height: 34px; } }
.ac-logo-mark {
  position: relative; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 13px; overflow: hidden;
  background: var(--theme-color); color: #fff; font-size: 20px;
  transition: transform 0.3s var(--ease);
}
.ac-logo-mark::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--accent-color); }
.ac-logo:hover .ac-logo-mark { transform: translateY(-2px); }
.ac-logo-text { display: flex; flex-direction: column; line-height: 1; font-family: var(--title-font); }
.ac-logo-text .w1 { color: var(--theme-color); font-size: 19px; font-weight: 700; letter-spacing: 0.05em; }
.ac-logo-text .w2 { color: var(--accent-color); font-size: 10px; font-weight: 500; letter-spacing: 0.46em; margin-top: 4px; }

/* Menu */
.ac-menu > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(0px, 0.5vw, 8px); }
.ac-menu > ul > li { position: relative; }
.ac-menu > ul > li > a {
  position: relative; display: flex; align-items: center; gap: 7px;
  padding: 11px 15px;
  font-family: var(--title-font); font-weight: 600; font-size: 14px;
  color: var(--title-color); text-decoration: none;
  transition: color 0.2s var(--ease);
}
.ac-menu > ul > li > a::after {
  content: ""; position: absolute; left: 15px; right: 15px; bottom: 5px; height: 2px;
  background: var(--accent-color); border-radius: 2px;
  transform: scaleX(0); transform-origin: center; transition: transform 0.28s var(--ease);
}
.ac-menu > ul > li > a i { font-size: 10px; opacity: 0.65; transition: transform 0.25s var(--ease); }
.ac-menu > ul > li:hover > a { color: var(--accent-color); }
.ac-menu > ul > li:hover > a::after { transform: scaleX(1); }
.ac-menu > ul > li.has-dropdown:hover > a i { transform: rotate(180deg); }

/* Dropdowns */
.ac-dropdown {
  list-style: none; margin: 0; padding: 8px;
  position: absolute; top: calc(100% + 14px); left: -6px; min-width: 250px;
  background: #fff; border-radius: 16px;
  box-shadow: 0 22px 50px rgba(10, 27, 61, 0.14), 0 2px 8px rgba(10, 27, 61, 0.05);
  border: 1px solid #eaedf3;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 0.2s var(--ease), transform 0.22s var(--ease), visibility 0.2s;
  z-index: 60;
}
/* transparent bridge keeps the menu open while the cursor moves down to it */
.ac-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -15px; height: 15px; }
/* notch pointing back at the trigger */
.ac-dropdown::after {
  content: ""; position: absolute; top: -6px; left: 28px; width: 12px; height: 12px;
  background: #fff; border-left: 1px solid #eaedf3; border-top: 1px solid #eaedf3; transform: rotate(45deg);
}
.ac-menu > ul > li.has-dropdown:hover .ac-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }

.ac-dropdown li a {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 11px 14px; border-radius: 11px;
  font-family: var(--title-font); font-size: 13.5px; font-weight: 600;
  color: var(--title-color); text-decoration: none; white-space: nowrap;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.ac-dropdown li a::after {
  content: "\f061"; font-family: var(--icon-font); font-weight: 600; font-size: 10px;
  margin-left: auto; opacity: 0; transform: translateX(-5px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.ac-dropdown li a:hover { background: var(--surface); color: var(--accent-color); }
.ac-dropdown li a:hover::after { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ac-dropdown, .ac-dropdown li a, .ac-dropdown li a::after { transition: none !important; }
}

/* ---- Creative mega-menu ---- */
.ac-mega {
  position: absolute; top: calc(100% + 13px); left: 0;
  width: clamp(380px, 34vw, 470px);
  display: grid; grid-template-columns: 1fr clamp(148px, 13vw, 182px); gap: 8px;
  padding: 10px;
  background: #fff; border: 1px solid #edeff4; border-radius: 16px;
  box-shadow: 0 22px 52px rgba(10, 27, 61, 0.15);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease), visibility 0.24s;
  z-index: 60;
}
.ac-mega--right { left: auto; right: 0; }
.ac-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -13px; height: 13px; }
.ac-mega::after { content: ""; position: absolute; top: -6px; left: 26px; width: 11px; height: 11px; background: #fff; border-left: 1px solid #edeff4; border-top: 1px solid #edeff4; transform: rotate(45deg); }
.ac-mega--right::after { left: auto; right: 26px; }
.ac-menu > ul > li.has-mega:hover .ac-mega { opacity: 1; visibility: visible; transform: translateY(0); }

.ac-mega__list { display: flex; flex-direction: column; gap: 2px; }
.ac-mega__item { display: flex; align-items: center; gap: 13px; padding: 10px 12px; border-radius: 12px; text-decoration: none; }
.ac-mega__item:hover { background: var(--surface); }
.ac-mega__ic {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(0, 40, 104, 0.08); color: var(--theme-color); font-size: 16px;
  transition: transform 0.28s var(--ease), background 0.28s var(--ease), color 0.28s var(--ease);
}
.ac-mega__item:hover .ac-mega__ic { background: var(--accent-color); color: #fff; transform: rotate(-7deg) scale(1.05); }
.ac-mega__txt { display: flex; flex-direction: column; line-height: 1.2; }
.ac-mega__txt strong { font-family: var(--title-font); font-weight: 600; font-size: 14.5px; color: var(--title-color); }
.ac-mega__txt small { font-size: 11.5px; color: var(--muted); margin-top: 3px; }

.ac-mega__promo {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px; border-radius: 13px; text-decoration: none; color: #fff;
  background: linear-gradient(155deg, #2f8a34 0%, #8f0824 100%);
}
.ac-mega__promo::after { content: ""; position: absolute; top: -34%; right: -24%; width: 150px; height: 150px; background: radial-gradient(circle, rgba(255, 255, 255, 0.20), transparent 62%); }
.ac-mega__promo-eyebrow { position: relative; font-family: var(--title-font); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); }
.ac-mega__promo-title { position: relative; font-family: var(--title-font); font-weight: 700; font-size: 17px; line-height: 1.15; margin-top: auto; }
.ac-mega__promo-cta { position: relative; display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-family: var(--title-font); font-weight: 600; font-size: 13px; }
.ac-mega__promo-cta i { transition: transform 0.25s var(--ease); }
.ac-mega__promo:hover .ac-mega__promo-cta i { transform: translateX(4px); }

/* staggered reveal on open */
.ac-mega__item, .ac-mega__promo { opacity: 0; transform: translateY(7px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), background 0.18s var(--ease); }
.ac-menu > ul > li.has-mega:hover .ac-mega__item,
.ac-menu > ul > li.has-mega:hover .ac-mega__promo { opacity: 1; transform: translateY(0); }
.ac-menu > ul > li.has-mega:hover .ac-mega__item:nth-child(2) { transition-delay: 0.05s; }
.ac-menu > ul > li.has-mega:hover .ac-mega__item:nth-child(3) { transition-delay: 0.1s; }
.ac-menu > ul > li.has-mega:hover .ac-mega__item:nth-child(4) { transition-delay: 0.15s; }
.ac-menu > ul > li.has-mega:hover .ac-mega__promo { transition-delay: 0.12s; }

/* Actions */
.ac-nav-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
/* Header CTA appearance is handled by the unified .ac-btn button system below */

/* Mobile burger */
.ac-burger {
  display: none; width: 48px; height: 48px;
  border: 1px solid #e7eaf1; border-radius: 12px;
  background: #fff; color: var(--theme-color); font-size: 19px; cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.ac-burger:hover { background: var(--theme-color); border-color: var(--theme-color); color: #fff; }

/* ---- Language dropdown ---- */
.ac-lang { position: relative; flex-shrink: 0; }
.ac-lang__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 9px; border-radius: 999px;
  background: #fff; border: 1px solid #e7eaf1; cursor: pointer;
  font-family: var(--title-font); font-weight: 600; font-size: 12.5px; letter-spacing: 0.04em;
  color: var(--title-color);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.ac-lang:hover .ac-lang__btn { border-color: var(--theme-color); background: var(--surface); }
.ac-lang__caret { font-size: 9px; opacity: 0.5; transition: transform 0.25s var(--ease); }
.ac-lang:hover .ac-lang__caret { transform: rotate(180deg); }
.ac-lang__flag {
  width: 22px; height: 16px; border-radius: 3px; object-fit: cover; display: block; flex-shrink: 0;
}

.ac-lang__menu {
  list-style: none; margin: 0; padding: 6px;
  position: absolute; top: calc(100% + 13px); right: 0; min-width: 92px;
  background: #fff; border: 1px solid #edeff4; border-radius: 12px;
  box-shadow: 0 18px 44px rgba(10, 27, 61, 0.13);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
  z-index: 60;
}
.ac-lang__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -13px; height: 13px; }
.ac-lang__menu::after { content: ""; position: absolute; top: -6px; right: 20px; width: 11px; height: 11px; background: #fff; border-left: 1px solid #edeff4; border-top: 1px solid #edeff4; transform: rotate(45deg); }
.ac-lang:hover .ac-lang__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.ac-lang__menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 8px;
  font-family: var(--title-font); font-size: 13.5px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--title-color); text-decoration: none;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.ac-lang__menu a:hover { background: var(--surface); color: var(--accent-color); }
.ac-lang__menu a.is-active { background: var(--surface); color: var(--accent-color); }

/* Red accents on the teknikzen top-bar links */
.home-casting .header-links li > i { color: #2f8a34; }

/* Top contact bar — reuse the footer's navy gradient, running side to side */
.home-casting .header-top {
  background:
    radial-gradient(90% 160% at 0% 50%, rgba(31, 111, 201, 0.22) 0%, transparent 55%),
    linear-gradient(90deg, #0a2350 0%, #061634 100%);
}
/* Clean, full-width top bar (drop the dated trapezoid) aligned with the nav */
.home-casting .header-layout5 .header-top {
  max-width: none; margin: 0;
  -webkit-mask-image: none; mask-image: none;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.home-casting .header-top > .container {
  max-width: 1320px;
  padding-left: 24px; padding-right: 24px;
}

/* Solid white sticky nav once the page is scrolled */
.ac-nav.scrolled {
  background: #ffffff;
}

/* Active-page indicator */
.ac-menu > ul > li.current > a { color: var(--accent-color); }
.ac-menu > ul > li.current > a::after { transform: scaleX(1); }

/* Logo mark — a touch more depth */
.ac-logo-mark { background: linear-gradient(140deg, #0a3a86 0%, #002868 62%); }


/* --- buttons (.ac-btn / .ac-cta) --- */
/* Hero buttons */
/* ==========================================================================
   Creative "cast-metal" buttons — chamfered corners, diagonal sweep-fill,
   flat (NO shadows), responsive. One system for every button on the page.
   ========================================================================== */
.ac-btn,
.home-casting .ac-cta,
.ac-cta-band__btn {
  --b-bg: var(--theme-color);
  --b-fg: #ffffff;
  --b-fg-hover: #ffffff;
  --b-sweep: var(--accent-color);
  --b-bd: transparent;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  padding: clamp(13px, 1.3vw, 17px) clamp(22px, 2.4vw, 34px);
  font-family: var(--title-font); font-weight: 700;
  font-size: clamp(12.5px, 0.8vw, 14px); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--b-fg);
  background: var(--b-bg);
  border: none;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  overflow: hidden; isolation: isolate;
  -webkit-clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  transition: color 0.35s var(--ease);
}
/* diagonal metal "pour" that sweeps across on hover */
.ac-btn::before,
.home-casting .ac-cta::before,
.ac-cta-band__btn::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -16%; width: 132%; z-index: -1;
  background: var(--b-sweep);
  transform: translateX(-118%) skewX(-12deg);
  transition: transform 0.45s var(--ease);
}
.ac-btn:hover::before,
.home-casting .ac-cta:hover::before,
.ac-cta-band__btn:hover::before { transform: translateX(0) skewX(-12deg); }
.ac-btn:hover,
.home-casting .ac-cta:hover,
.ac-cta-band__btn:hover { color: var(--b-fg-hover); }
.ac-btn:focus-visible,
.home-casting .ac-cta:focus-visible,
.ac-cta-band__btn:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 3px; }
.ac-btn i,
.home-casting .ac-cta i,
.ac-cta-band__btn i { position: relative; font-size: 0.95em; transition: transform 0.35s var(--ease); }
.ac-btn:hover i,
.home-casting .ac-cta:hover i,
.ac-cta-band__btn:hover i { transform: translateX(5px); }
/* kill the old header-cta pseudo arrow */
.home-casting .ac-cta::after { content: none; }

/* ---- Variants (only swap the colours) ---- */
.ac-btn--primary { --b-bg: var(--accent-color); --b-sweep: var(--theme-color); }   /* red -> navy */
.ac-btn--ghost  { --b-bg: rgba(255, 255, 255, 0.12); --b-fg: #fff; --b-fg-hover: var(--theme-color); --b-sweep: #fff; }
.home-casting .ac-cta { --b-bg: var(--theme-color); --b-sweep: var(--accent-color); } /* navy -> red */
.ac-cta-band__btn { --b-bg: #0c1424; --b-sweep: var(--accent-color); }              /* ink -> red */

/* --- header responsive --- */
/* ==========================================================================
   14. Responsive
   ========================================================================== */
/* Smaller desktops (1200–1300px): tighten the nav so the full menu, language
   switch and CTA fit comfortably before collapsing to the burger at 1199px. */
@media (max-width: 1300px) {
  .ac-nav-inner { gap: 12px; }
  .ac-menu > ul { gap: 2px; }
  .ac-menu > ul > li > a { padding: 11px 11px; font-size: 13.5px; }
  .ac-menu > ul > li > a::after { left: 11px; right: 11px; }
  .ac-nav-actions { gap: 10px; }
  .home-casting .ac-cta { padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 1199px) {
  .ac-menu { display: none; }
  .ac-burger { display: inline-flex; align-items: center; justify-content: center; }
  /* Language switch moves into the drawer so the burger always fits the row */
  .ac-nav-actions .ac-lang { display: none; }
}
@media (max-width: 991px) {
  .ac-topbar-left { display: none; }
  .ac-nav-inner { min-height: 72px; }
}
@media (max-width: 575px) {
  .home-casting .ac-cta, .ac-nav-actions .ac-cta { display: none; }
  .ac-container { padding: 0 16px; }
  .ac-nav-inner { min-height: 64px; gap: 10px; }
  .ac-nav.scrolled .ac-nav-inner { min-height: 60px; }
  .ac-logo .ac-logo-img { height: 30px; }
  .ac-nav.scrolled .ac-logo .ac-logo-img { height: 28px; }
  .ac-burger { width: 44px; height: 44px; font-size: 18px; }
}

/* --- mobile drawer --- */
/* ==========================================================================
   17. Mobile drawer — flat, clean rewrite (overrides theme style.css)
   ========================================================================== */
.th-menu-wrapper {
  background-color: rgba(8, 15, 34, 0.55);
  transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
}
.th-menu-wrapper .th-menu-area {
  max-width: min(88vw, 360px);
  background-color: #fff;
  border-right: none;
  box-shadow: 0 0 60px rgba(10, 27, 61, 0.28);
  display: flex; flex-direction: column;
  transition: left 0.4s var(--ease), opacity 0.4s var(--ease), visibility 0.4s;
}
@media (max-width: 400px) { .th-menu-wrapper .th-menu-area { max-width: 86vw; } }

/* Top row: logo left, close button right */
.th-menu-wrapper .mobile-logo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 20px; margin: 0; max-width: none;
  background: #fff; border-bottom: 1px solid #e7eaf1;
}
.th-menu-wrapper .mobile-logo .ac-logo { gap: 0; }
.th-menu-wrapper .mobile-logo .ac-logo-img { height: 30px; width: auto; display: block; }

/* Close button — square, inside the panel, comfortable tap target */
.th-menu-wrapper .th-menu-toggle {
  position: static; right: auto; top: auto;
  width: 42px; height: 42px; line-height: 1; padding: 0; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; font-size: 17px;
  background: var(--surface); color: var(--title-color);
  border: 1px solid #e7eaf1;
}
.th-menu-wrapper .th-menu-toggle:hover {
  background: var(--accent-color); border-color: var(--accent-color); color: #fff;
}

/* Menu list */
.th-menu-wrapper .th-mobile-menu {
  margin: 0; padding: 8px 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  flex: 1 1 auto; max-height: none; text-align: left;
}
.th-menu-wrapper .th-mobile-menu > ul { padding: 0 12px; }
.th-menu-wrapper .th-mobile-menu ul li { border-bottom: 1px solid #eef1f6; }
.th-menu-wrapper .th-mobile-menu > ul > li:last-child { border-bottom: none; }
.th-menu-wrapper .th-mobile-menu ul li a {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 10px; line-height: 1.35;
  font-family: var(--title-font); font-weight: 600; font-size: 16px;
  color: var(--title-color); text-transform: none;
}
.th-menu-wrapper .th-mobile-menu ul li a::before { content: none; }
.th-menu-wrapper .th-mobile-menu ul li.th-active > a { color: var(--accent-color); }

/* Submenu (Döküm) */
.th-menu-wrapper .th-mobile-menu .sub-menu {
  background: #f7f9fc; margin: 0 -10px; padding: 2px 10px !important;
}
.th-menu-wrapper .th-mobile-menu ul li ul li { padding-left: 14px; }
.th-menu-wrapper .th-mobile-menu ul li ul li:last-child { border-bottom: none; }
.th-menu-wrapper .th-mobile-menu ul li ul li a {
  font-size: 15px; color: var(--muted); padding: 12px 10px;
}

/* Expand chevron (theme injects a .th-mean-expand span into the parent link) */
.th-menu-wrapper .th-mobile-menu .th-item-has-children > a { position: relative; padding-right: 44px; }
.th-menu-wrapper .th-mobile-menu ul .menu-item-has-children > a::after { content: none !important; }
.th-menu-wrapper .th-mobile-menu ul .menu-item-has-children > a .th-mean-expand {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; margin: 0; border-radius: 9px; box-shadow: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--title-color);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.th-menu-wrapper .th-mobile-menu ul .menu-item-has-children > a .th-mean-expand::before {
  content: "\f078"; font-family: var(--icon-font); font-weight: 900; font-size: 11px;
}
.th-menu-wrapper .th-mobile-menu ul .menu-item-has-children.th-active > a .th-mean-expand {
  background: var(--accent-color); color: #fff;
}
.th-menu-wrapper .th-mobile-menu ul .menu-item-has-children.th-active > a .th-mean-expand::before { content: "\f077"; }

/* Drawer footer — language switch + contact CTA */
.th-drawer-foot {
  margin-top: auto; padding: 16px 20px 22px; background: #fff;
  border-top: 1px solid #e7eaf1; display: flex; flex-direction: column; gap: 12px;
}
.th-drawer-lang { display: flex; gap: 8px; }
.th-drawer-lang a {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px; border-radius: 10px; border: 1px solid #e7eaf1;
  font-family: var(--title-font); font-weight: 600; font-size: 12.5px; letter-spacing: 0.04em;
  color: var(--title-color); text-decoration: none;
}
.th-drawer-lang a.is-active { border-color: var(--accent-color); color: var(--accent-color); background: rgba(47, 138, 52, 0.06); }
.th-drawer-lang img { width: 20px; height: 15px; border-radius: 3px; object-fit: cover; display: block; }
.th-drawer-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px; border-radius: 12px; background: var(--accent-color); color: #fff;
  font-family: var(--title-font); font-weight: 600; font-size: 15px; text-decoration: none;
  transition: background 0.2s var(--ease);
}
.th-drawer-cta:hover { background: #a0092a; color: #fff; }
.th-drawer-cta i { font-size: 13px; }


/* --- inherited-from-body values, re-scoped to the header only --- */
/* The CTA is excluded so it can set its own font stack and metrics. */
.ac-header,
.ac-header a:not(.aksu-pill),
.th-menu-wrapper,
.th-menu-wrapper a {
  font-family: var(--body-font);
  line-height: 26px;
}
/* v1 gets this from its global `a` colour; Agriva's `a` rule would win here. */
.ac-logo { color: var(--theme-color); }

/* --- header logo size --- */
/* v1's logo ladder at 2x, then trimmed 15% (2x -> 1.7x of the original).
   Every tier is scaled by the same factor so the responsive steps keep
   their proportions. The drawer's own logo is a separate element and is
   left at its original size. */
.ac-logo .ac-logo-img { height: 75px; }                    /* v1 44px -> 2x 88px -> -15% */
.ac-nav.scrolled .ac-logo .ac-logo-img { height: 61px; }   /* v1 36px -> 2x 72px -> -15% */
@media (max-width: 575px) {
  .ac-logo .ac-logo-img { height: 51px; }                  /* v1 30px -> 2x 60px -> -15% */
  .ac-nav.scrolled .ac-logo .ac-logo-img { height: 48px; } /* v1 28px -> 2x 56px -> -15% */
}
@media (max-width: 480px) {
  .ac-logo .ac-logo-img { height: 58px; }                  /* v1 34px -> 2x 68px -> -15% */
}

/* --- header height --- */
/* The bar is driven by .ac-nav-inner's min-height, not by the logo, so it
   is raised explicitly to give the mark more breathing room. */
.ac-nav-inner { min-height: 112px; }                       /* was 96px */
.ac-nav.scrolled .ac-nav-inner { min-height: 96px; }       /* was 82px */
@media (max-width: 991px) {
  /* The 75px logo still applies down to 576px, so this tier needs enough
     height to keep the same breathing room as the desktop bar. */
  .ac-nav-inner { min-height: 95px; }                      /* was 72px */
}
@media (max-width: 575px) {
  .ac-nav-inner { min-height: 74px; }                      /* was 64px */
  .ac-nav.scrolled .ac-nav-inner { min-height: 70px; }     /* was 60px */
}

/* --- header CTA: capsule with circular arrow badge --- */
/* Replaces the .theme-btn treatment. v1s button system targets
   `.home-casting .ac-cta` (0,2,0) and marks border-radius !important, so every
   rule here is written at (0,3,0) with !important only where v1 forces it. */
.home-casting .ac-cta.aksu-pill {
  --pill-bg: #214d93;
  --pill-fg: #ffffff;
  --pill-badge-bg: #ffffff;
  --pill-arrow: #101010;
  --pill-hover: #2f8a34;   /* the flood colour on hover */
  /* Fluid between the 576px breakpoint (where the CTA appears) and 1920. */
  --pill-h: clamp(44px, 3.2vw, 58px);
  --pill-pad: 5px;
  --pill-badge: calc(var(--pill-h) - (var(--pill-pad) * 2));

  position: relative;
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 0.9vw, 16px);
  height: var(--pill-h);
  padding: 0 var(--pill-pad) 0 clamp(18px, 1.6vw, 30px);
  border: none;
  border-radius: 999px !important;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-family: "Outfit", sans-serif;
  font-size: clamp(12.5px, 0.78vw, 15px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: none;
  white-space: nowrap;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  -webkit-clip-path: none;
  clip-path: none;
  transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1);
}
/* v1 paints a diagonal sweep bar on ::before — the capsule uses its own flood. */
.home-casting .ac-cta.aksu-pill::before,
.home-casting .ac-cta.aksu-pill::after { content: none; }

.home-casting .ac-cta.aksu-pill:hover,
.home-casting .ac-cta.aksu-pill:focus-visible {
  transform: translateY(-2px);
}
.home-casting .ac-cta.aksu-pill:focus-visible {
  outline: 3px solid #2f8a34;
  outline-offset: 3px;
}

/* The badge-sized disc that expands to flood the capsule on hover. */
.home-casting .ac-cta.aksu-pill .aksu-pill__flood {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: var(--pill-pad);
  width: var(--pill-badge);
  height: var(--pill-badge);
  border-radius: 50%;
  background: var(--pill-hover);
  transform: translateY(-50%) scale(0);
  transition: transform 0.55s cubic-bezier(0.5, 0, 0.1, 1);
}
.home-casting .ac-cta.aksu-pill:hover .aksu-pill__flood,
.home-casting .ac-cta.aksu-pill:focus-visible .aksu-pill__flood {
  transform: translateY(-50%) scale(16);
}

.home-casting .ac-cta.aksu-pill .aksu-pill__label {
  position: relative;
  z-index: 1;
  transition: color 0.35s ease 0.08s;
}
.home-casting .ac-cta.aksu-pill:hover .aksu-pill__label,
.home-casting .ac-cta.aksu-pill:focus-visible .aksu-pill__label {
  color: #ffffff;
}

.home-casting .ac-cta.aksu-pill .aksu-pill__badge {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--pill-badge);
  height: var(--pill-badge);
  border-radius: 50%;
  background: var(--pill-badge-bg);
  color: var(--pill-arrow);
  overflow: hidden;
  transition: background 0.4s ease, color 0.4s ease;
}
.home-casting .ac-cta.aksu-pill:hover .aksu-pill__badge,
.home-casting .ac-cta.aksu-pill:focus-visible .aksu-pill__badge {
  background: #ffffff;
  color: var(--pill-hover);
}

/* Two stacked arrows: the first leaves top-right, the second arrives from
   bottom-left along the same diagonal the glyph points down. */
.home-casting .ac-cta.aksu-pill .aksu-pill__badge i {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: calc(var(--pill-badge) * 0.36);
  line-height: 1;
  transition: transform 0.5s cubic-bezier(0.5, 0, 0.1, 1), opacity 0.3s ease;
}
.home-casting .ac-cta.aksu-pill .aksu-pill__badge i:nth-of-type(2) {
  transform: translate(-170%, 170%);
  opacity: 0;
}
.home-casting .ac-cta.aksu-pill:hover .aksu-pill__badge i:nth-of-type(1),
.home-casting .ac-cta.aksu-pill:focus-visible .aksu-pill__badge i:nth-of-type(1) {
  transform: translate(170%, -170%);
  opacity: 0;
}
.home-casting .ac-cta.aksu-pill:hover .aksu-pill__badge i:nth-of-type(2),
.home-casting .ac-cta.aksu-pill:focus-visible .aksu-pill__badge i:nth-of-type(2) {
  transform: translate(0, 0);
  opacity: 1;
  transition-delay: 0.08s;
}

/* Phones: v1 hid the CTA entirely below 576px. Because these rules outrank
   that hide, the capsule instead collapses to just its badge — a circular
   arrow button. At 360px the full-width pill left only ~10px beside the logo
   and pushed past the bar; the disc fits with room to spare. The label stays
   in the accessibility tree (clipped, not display:none) so it is still read. */
@media (max-width: 575px) {
  .home-casting .ac-cta.aksu-pill:not(.akf__cta-pill):not(.akm__cta-pill) {
    --pill-h: 44px;
    --pill-pad: 0px;
    width: var(--pill-h);
    padding: 0;
    gap: 0;
    background: var(--pill-bg);
  }
  .home-casting .ac-cta.aksu-pill:not(.akf__cta-pill):not(.akm__cta-pill) .aksu-pill__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
  }
  /* Sits on the capsule itself, so the disc reads as one solid button. */
  .home-casting .ac-cta.aksu-pill:not(.akf__cta-pill):not(.akm__cta-pill) .aksu-pill__badge {
    background: transparent;
    color: var(--pill-fg);
  }
  .home-casting .ac-cta.aksu-pill:not(.akf__cta-pill):not(.akm__cta-pill):hover .aksu-pill__badge,
  .home-casting .ac-cta.aksu-pill:not(.akf__cta-pill):not(.akm__cta-pill):focus-visible .aksu-pill__badge {
    background: transparent;
    color: #ffffff;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-casting .ac-cta.aksu-pill,
  .home-casting .ac-cta.aksu-pill * { transition-duration: 0.01ms !important; }
  .home-casting .ac-cta.aksu-pill:hover { transform: none; }
}

/* ==========================================================================
   AKSU-DESCOPE — header chrome without the body class
   --------------------------------------------------------------------------
   The rules above are written as `.home-casting .ac-cta…`, which worked while
   every page was hand-built with that class on <body>. The header is now a
   shared include, and seven of the nine pages do not carry it — so the
   Contact pill rendered as an unstyled link on those pages.

   Each gated rule is repeated below with the body class removed. Same
   declarations, one less class of specificity, appended last so it wins on
   order where a page does carry .home-casting.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   .
   These sat on `.home-casting` and so were undefined on the pages that do not
   carry it — which is why --title-color fell back and the current nav item
   painted olive instead of navy. On :root now, where tokens belong.
   -------------------------------------------------------------------------- */
:root {
  --body-bg: #ffffff;
  --theme-color: #002868;      /* Old Glory Blue */
  --accent-color: #2f8a34;     /* AksuPivot leaf green */
  --theme-color-2: #0a3a86;    /* lighter blue for gradients */
  --title-color: #0a1b3d;      /* deep navy headings */
  --body-color: #5a6172;       /* readable body grey */
  --ink: #0a1b3d;
  --muted: #6b7280;
  --line: #e7ebf2;
  --surface: #f5f7fb;
  --surface-2: #eef2f9;
  --th-border-color: #e1e4e5;

  --r-sm: 12px;
  --r: 18px;
  --r-lg: 26px;

  --shadow-sm: 0 4px 16px rgba(10, 27, 61, 0.06);
  --shadow: 0 18px 40px rgba(10, 27, 61, 0.10);
  --shadow-lg: 0 36px 80px rgba(0, 40, 104, 0.16);

  --section-space: clamp(72px, 8vw, 120px);
  --section-space-mobile: clamp(56px, 10vw, 84px);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

::selection { background: var(--accent-color); color: #fff; }

a:focus-visible,
button:focus-visible {
  outline: 3px solid rgba(0, 40, 104, 0.45);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Red accents on the teknikzen top-bar links */
.header-links li > i { color: #2f8a34; }

/* Top contact bar — reuse the footer's navy gradient, running side to side */
.header-top {
  background:
    radial-gradient(90% 160% at 0% 50%, rgba(31, 111, 201, 0.22) 0%, transparent 55%),
    linear-gradient(90deg, #0a2350 0%, #061634 100%);
}

/* Clean, full-width top bar (drop the dated trapezoid) aligned with the nav */
.header-layout5 .header-top {
  max-width: none; margin: 0;
  -webkit-mask-image: none; mask-image: none;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.header-top > .container {
  max-width: 1320px;
  padding-left: 24px; padding-right: 24px;
}

.ac-cta {
  --b-bg: var(--theme-color);
  --b-fg: #ffffff;
  --b-fg-hover: #ffffff;
  --b-sweep: var(--accent-color);
  --b-bd: transparent;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  padding: clamp(13px, 1.3vw, 17px) clamp(22px, 2.4vw, 34px);
  font-family: var(--title-font); font-weight: 700;
  font-size: clamp(12.5px, 0.8vw, 14px); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--b-fg);
  background: var(--b-bg);
  border: none;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  overflow: hidden; isolation: isolate;
  -webkit-clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  transition: color 0.35s var(--ease);
}

.ac-cta::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -16%; width: 132%; z-index: -1;
  background: var(--b-sweep);
  transform: translateX(-118%) skewX(-12deg);
  transition: transform 0.45s var(--ease);
}

.ac-cta:hover::before { transform: translateX(0) skewX(-12deg); }

.ac-cta:hover { color: var(--b-fg-hover); }

.ac-cta:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 3px; }

.ac-cta i { position: relative; font-size: 0.95em; transition: transform 0.35s var(--ease); }

.ac-cta:hover i { transform: translateX(5px); }

/* kill the old header-cta pseudo arrow */
.ac-cta::after { content: none; }

.ac-cta { --b-bg: var(--theme-color); --b-sweep: var(--accent-color); }

/* --- header CTA: capsule with circular arrow badge --- */
/* Replaces the .theme-btn treatment. v1s button system targets
   `.ac-cta` (0,
0) with !important only where v1 forces it. */
.ac-cta.aksu-pill {
  --pill-bg: #214d93;
  --pill-fg: #ffffff;
  --pill-badge-bg: #ffffff;
  --pill-arrow: #101010;
  --pill-hover: #2f8a34;   /* the flood colour on hover */
  /* Fluid between the 576px breakpoint (where the CTA appears) and 1920. */
  --pill-h: clamp(44px, 3.2vw, 58px);
  --pill-pad: 5px;
  --pill-badge: calc(var(--pill-h) - (var(--pill-pad) * 2));

  position: relative;
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 0.9vw, 16px);
  height: var(--pill-h);
  padding: 0 var(--pill-pad) 0 clamp(18px, 1.6vw, 30px);
  border: none;
  border-radius: 999px !important;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-family: "Outfit", sans-serif;
  font-size: clamp(12.5px, 0.78vw, 15px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: none;
  white-space: nowrap;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  -webkit-clip-path: none;
  clip-path: none;
  transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* v1 paints a diagonal sweep bar on ::before — the capsule uses its own flood. */
.ac-cta.aksu-pill::before,
.ac-cta.aksu-pill::after { content: none; }

.ac-cta.aksu-pill:hover,
.ac-cta.aksu-pill:focus-visible {
  transform: translateY(-2px);
}

.ac-cta.aksu-pill:focus-visible {
  outline: 3px solid #2f8a34;
  outline-offset: 3px;
}

/* The badge-sized disc that expands to flood the capsule on hover. */
.ac-cta.aksu-pill .aksu-pill__flood {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: var(--pill-pad);
  width: var(--pill-badge);
  height: var(--pill-badge);
  border-radius: 50%;
  background: var(--pill-hover);
  transform: translateY(-50%) scale(0);
  transition: transform 0.55s cubic-bezier(0.5, 0, 0.1, 1);
}

.ac-cta.aksu-pill:hover .aksu-pill__flood,
.ac-cta.aksu-pill:focus-visible .aksu-pill__flood {
  transform: translateY(-50%) scale(16);
}

.ac-cta.aksu-pill .aksu-pill__label {
  position: relative;
  z-index: 1;
  transition: color 0.35s ease 0.08s;
}

.ac-cta.aksu-pill:hover .aksu-pill__label,
.ac-cta.aksu-pill:focus-visible .aksu-pill__label {
  color: #ffffff;
}

.ac-cta.aksu-pill .aksu-pill__badge {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--pill-badge);
  height: var(--pill-badge);
  border-radius: 50%;
  background: var(--pill-badge-bg);
  color: var(--pill-arrow);
  overflow: hidden;
  transition: background 0.4s ease, color 0.4s ease;
}

.ac-cta.aksu-pill:hover .aksu-pill__badge,
.ac-cta.aksu-pill:focus-visible .aksu-pill__badge {
  background: #ffffff;
  color: var(--pill-hover);
}

/* Two stacked arrows: the first leaves top-right, the second arrives from
   bottom-left along the same diagonal the glyph points down.
   .
   THIS is the rule the de-scope pass destroyed. Losing it left both arrows in
   normal flow — `.ac-cta i { position: relative }` took over, so the two
   glyphs sat side by side inside the 48px badge instead of stacked, and
   `font-size: 0.95em` shrank them. That was the broken Contact button on every
   page except index and contact. */
.ac-cta.aksu-pill .aksu-pill__badge i {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: calc(var(--pill-badge) * 0.36);
  line-height: 1;
  transition: transform 0.5s cubic-bezier(0.5, 0, 0.1, 1), opacity 0.3s ease;
}

.ac-cta.aksu-pill .aksu-pill__badge i:nth-of-type(2) {
  transform: translate(-170%, 170%);
  opacity: 0;
}

.ac-cta.aksu-pill:hover .aksu-pill__badge i:nth-of-type(1),
.ac-cta.aksu-pill:focus-visible .aksu-pill__badge i:nth-of-type(1) {
  transform: translate(170%, -170%);
  opacity: 0;
}

.ac-cta.aksu-pill:hover .aksu-pill__badge i:nth-of-type(2),
.ac-cta.aksu-pill:focus-visible .aksu-pill__badge i:nth-of-type(2) {
  transform: translate(0, 0);
  opacity: 1;
  transition-delay: 0.08s;
}

/* ==========================================================================
   AKSU-HEADER-MOTION
   Header interaction states
   was: assets/css/aksu-header-motion.css
   ========================================================================== */

/* ==========================================================================
   AksuPivot — header interaction
   --------------------------------------------------------------------------
   The header no longer animates in on load. The whole entrance choreography —
   parked state, logo flood, staggered nav rise, CTA pop, arrow swing, the
   water pulse along the bottom rule — has been removed, along with the
   droplet that dripped from a hovered link.

   What is left is plain interaction feedback: a lift on the logo and the
   language button. The template's own centre-out underline on nav hover is
   untouched and lives in aksu-header.css.

   IMPORTANT — aksu-header-motion.js stays linked and still adds .achm-arm and
   .achm-ready to <html>. Those classes are no longer used here, but the HERO
   reveal in aksu-hero-motion.css is gated on them: .achm-ready is what fires
   once the preloader leaves the DOM. Removing the script would leave the hero
   parked and invisible.
   ========================================================================== */

:root {
  --achm-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ac-logo .ac-logo-img {
  transition: height 0.3s var(--ease, ease), transform 0.4s var(--achm-spring);
}
.ac-logo:hover .ac-logo-img { transform: translateY(-3px); }

.ac-lang__btn { transition: transform 0.3s var(--achm-spring); }
.ac-lang:hover .ac-lang__btn { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .ac-logo .ac-logo-img,
  .ac-lang__btn { transition: none; }
}

/* ==========================================================================
   AKSU-FOOTER
   Footer
   was: assets/css/aksu-footer.css
   ========================================================================== */

/* ==========================================================================
   AksuPivot footer
   --------------------------------------------------------------------------
   No background image anywhere — depth is built from layered gradients.
   (The animated pivot-machine motif and the green CTA card that used to open
   the footer are both deleted, at Elias's request.)

   Sections
     .akf__body   navy field: brand, stats, contact cards, link columns
     .akf__bottom copyright, social, credit

   Layout is intrinsic — auto-fit grids and clamp() throughout — so it reflows
   continuously rather than snapping at breakpoints. All scoped to .akf.
   ========================================================================== */

.akf {
  --akf-navy:  #122b52;
  --akf-blue:  #214d93;
  --akf-green: #2f8a34;
  --akf-lime:  #2f8a34;
  --akf-ink:   #0d2246;
  --akf-text:  rgba(255, 255, 255, 0.66);
  --akf-line:  rgba(255, 255, 255, 0.11);
  --akf-ease:  cubic-bezier(0.34, 1.4, 0.64, 1);

  position: relative;
  font-family: "Outfit", sans-serif;
  line-height: 1.75;
  color: var(--akf-text);
}

/* ============================ CTA band ==================================== */

/* ============================ navy field ================================== */

.akf__body {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* halved: was clamp(64px, 7vw, 112px) */
  padding: clamp(32px, 3.5vw, 56px) 0 0;
  background:
    radial-gradient(100% 80% at 85% 4%, rgba(47, 138, 52, 0.15) 0%, transparent 60%),
    linear-gradient(162deg, var(--akf-navy) 0%, var(--akf-blue) 62%, #1a3d75 100%);
}
/* fine grain so the large flat gradient does not band on wide screens */
.akf__body::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.5;
  background-image: repeating-conic-gradient(rgba(255,255,255,.014) 0% 25%, transparent 0% 50%);
  background-size: 4px 4px;
}

/* ---- brand column -------------------------------------------------------- */
/* The brand sits inside the main grid as its first (wider) column rather than
   in a separate band above it, so the footer reads as one row. */
.akf__logo { display: inline-block; }
.akf__logo img { height: clamp(54px, 5.2vw, 78px); width: auto; display: block; }
.akf__lead {
  margin: 22px 0 26px;
  max-width: 44ch;
  font-size: clamp(15px, 1.05vw, 17px);
  color: rgba(255, 255, 255, 0.7);
}

/* Registered company name. Quieter than the lead — it is there to be findable,
   not read. text-transform reset because main.css Title-Cases every <p>. */
.akf__legal {
  margin: -14px 0 26px;
  max-width: 44ch;
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: 0.01em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.42);
}

/* ---- contact column ------------------------------------------------------ */
/* Compact rows rather than glass cards: this now lives inside a grid column,
   so it has to keep the same vertical rhythm as the link lists beside it. */
.akf__contactlist { list-style: none; margin: 0; padding: 0; }
.akf__contactlist li { display: flex; align-items: flex-start; gap: 13px; font-size: 15.5px; }
.akf__contactlist li + li { margin-top: 16px; }
.akf__contactlist i {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 10px;
  border: 1px solid var(--akf-line);
  background: rgba(255, 255, 255, 0.055);
  color: var(--akf-lime); font-size: 13px;
  transition: background 0.35s, color 0.35s, transform 0.4s var(--akf-ease);
}
.akf__contactlist li:hover i {
  background: linear-gradient(140deg, var(--akf-green), var(--akf-lime));
  color: var(--akf-ink);
  transform: rotate(-8deg);
}
.akf__contactlist a { color: var(--akf-text); text-decoration: none; transition: color 0.3s; }
.akf__contactlist a:hover { color: #fff; }
.akf__contactlist address { font-style: normal; margin: 0; }

/* ---- the single row: brand + links + contact ----------------------------- */
.akf__grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.7fr) repeat(3, minmax(155px, 1fr));
  gap: clamp(30px, 3.4vw, 58px);
  padding: clamp(44px, 5vw, 78px) 0 clamp(38px, 4.6vw, 66px);
}
@media (max-width: 1199px) { .akf__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px)  { .akf__grid { grid-template-columns: 1fr; } }
.akf__col h3 {
  position: relative;
  margin: 0 0 22px; padding-bottom: 14px;
  font-size: 14.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: #fff;
}
.akf__col h3::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 32px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--akf-green), var(--akf-lime));
  transition: width 0.45s var(--akf-ease);
}
.akf__col:hover h4::after { width: 60px; }
.akf__col ul { list-style: none; margin: 0; padding: 0; }
.akf__col li + li { margin-top: 12px; }
.akf__col a {
  position: relative;
  display: inline-flex; align-items: center;
  color: var(--akf-text); text-decoration: none; font-size: 15.5px;
  transition: color 0.3s, transform 0.35s var(--akf-ease);
}
.akf__col a::before {
  content: "\f061"; font-family: "Font Awesome 6 Pro"; font-weight: 900;
  position: absolute; left: -19px; font-size: 10px; color: var(--akf-lime);
  opacity: 0; transform: translateX(-6px);
  transition: opacity 0.3s, transform 0.35s var(--akf-ease);
}
.akf__col a:hover { color: #fff; transform: translateX(19px); }
.akf__col a:hover::before { opacity: 1; transform: translateX(0); }

/* ---- bottom bar ---------------------------------------------------------- */
.akf__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 26px;
  padding: 24px 0 30px;
  border-top: 1px solid var(--akf-line);
  font-size: 14.5px;
}
.akf__bottom p { margin: 0; }
.akf__bottom strong { color: #fff; font-weight: 600; }
.akf__bottom a { color: rgba(255, 255, 255, 0.8); text-decoration: none; transition: color 0.3s; }
.akf__bottom a:hover { color: var(--akf-lime); }

.akf__social { display: flex; gap: 10px; }
.akf__social a {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--akf-line);
  color: #fff; font-size: 15px;
  transition: color 0.35s, border-color 0.35s, transform 0.4s var(--akf-ease);
}
/* fills from the bottom, like water rising */
.akf__social a::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(160deg, var(--akf-green), var(--akf-lime));
  transform: translateY(101%);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.akf__social a:hover { color: var(--akf-ink); border-color: transparent; transform: translateY(-3px); }
.akf__social a:hover::after { transform: translateY(0); }

/* ============================ motion ====================================== */
/* ============================ responsive ================================== */
@media (max-width: 575px) {
  .akf__bottom { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .akf *, .akf *::before, .akf *::after { transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   AKSU-REVEAL
   Scroll-reveal parked/revealed states
   was: assets/css/aksu-reveal.css
   ========================================================================== */

/* ==========================================================================
   AksuPivot — scroll reveal
   --------------------------------------------------------------------------
   Section-level entrance animation, in the same language as the hero: content
   rises out of focus and sharpens on an expo-out curve, staggered within each
   group so a row of cards deals itself out rather than appearing at once.

   Gate — set by aksu-reveal.js:
     .akr-arm   on <html>, added synchronously in <head> so nothing flashes
                visible before it is parked. Skipped entirely for reduced
                motion, and never present at all when JS is off — in both
                cases every section just renders normally.
     .is-in     added per element when it scrolls into view.

   Only opacity, transform and filter are animated, so no section reflows and
   nothing here can shift the layout it is revealing.
   ========================================================================== */

:root {
  --akr-glide: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------------------- parked state ------------------------------- */

html.akr-arm [data-akr] {
  opacity: 0;
  transform: translateY(26px);
  will-change: opacity, transform;
}

/* Sideways variants, set by the script per group. */
html.akr-arm [data-akr="left"]  { transform: translateX(-34px); }
html.akr-arm [data-akr="right"] { transform: translateX(34px); }
html.akr-arm [data-akr="scale"] { transform: translateY(20px) scale(0.965); }

/* ------------------------------- revealed -------------------------------- */

html.akr-arm [data-akr].is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity   0.85s var(--akr-glide) var(--akr-delay, 0ms),
    transform 0.95s var(--akr-glide) var(--akr-delay, 0ms);
}

/* Once an element has arrived it is a normal box again — holding will-change
   on dozens of nodes keeps layers alive for the life of the page. */
html.akr-arm [data-akr].is-done { will-change: auto; }

/* Escape hatch. Adding .is-in alone reaches the visible state through a
   transition, and a transition only lands if frames are being produced — a
   page loaded in a background tab, or a stalled compositor, can leave content
   parked. The script's failsafe sets this instead, which drops the parked
   state outright rather than animating out of it. */
html.akr-arm.akr-off [data-akr] {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
  will-change: auto !important;
}

/* ------------------------- the three departments ------------------------- */
/* Who to talk to is the reason this page exists, so it runs full width above
   the address rather than stacking in a narrow column beside the map. Three
   equal cards: no department is the "main" one. */

.akc-reach { margin-bottom: clamp(18px, 2vw, 26px); }
.akc-reach__title {
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.akc-reach__title em { font-style: normal; color: var(--akc-green); }
.akc-reach__lede {
  margin-top: 8px;
  max-width: 62ch;
  font-size: clamp(14px, 1.05vw, 15.5px);
  line-height: 1.65;
}

.akc-depts {
  display: grid;
  gap: clamp(12px, 1.4vw, 18px);
  margin-bottom: clamp(26px, 3vw, 44px);
  /* auto-fit rather than a fixed three: a fourth department can be added in the
     admin panel without this file having to change */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 258px), 1fr));
}

.akc-dept {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: clamp(18px, 1.8vw, 24px);
  border: 1px solid var(--akc-line);
  border-radius: 18px;
  background: #fff;
  transition: transform 0.35s var(--akc-glide), box-shadow 0.35s, border-color 0.35s;
}
.akc-dept:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: 0 22px 44px -26px rgba(15, 35, 64, 0.42);
}
.akc-dept__ic {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: rgba(47, 138, 52, 0.11);
  color: var(--akc-green);
  font-size: 17px;
}
/* .akc h3 is 26px from the template; a card label is not a section heading */
.akc .akc-dept__name {
  font-size: clamp(16px, 1.2vw, 18px);
  font-weight: 600;
  line-height: 1.3;
}
.akc-dept__lines { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.akc-dept__lines li {
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
}
.akc-dept__lines i { color: var(--akc-green); font-size: 13px; justify-self: center; }
.akc-dept__lines a {
  color: var(--akc-head);
  text-decoration: none;
  /* an e-mail address must be allowed to break rather than widen the card */
  overflow-wrap: anywhere;
  transition: color 0.25s;
}
.akc-dept__lines a:hover { color: var(--akc-green); text-decoration: underline; }

/* ---------------------------- address + map ------------------------------ */
/* The address answers "where", so it sits with the map.

   Left to its natural height the card came out 181px against a 560px map and
   left 379px of dead column beside it — measured, not guessed. It stretches to
   the map instead and centres its own content, so the row reads as two
   deliberate blocks of equal height rather than a small card adrift.

   Only from 1000px up: below that the grid is a single column and stretching
   would inflate the card to nothing but air. */
@media (min-width: 1000px) {
  .akc-grid--place > .akc-info { align-content: stretch; }
  .akc-card--addr { align-content: center; }
}
.akc-card--addr address {
  margin-top: 6px;
  font-size: 14px; font-style: normal; line-height: 1.55;
  color: var(--akc-head);
}
.akc-card__go {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 13px;
  color: var(--akc-green); font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.akc-card__go:hover { text-decoration: underline; }
/* ----------------------------- motion opt-out ---------------------------- */

@media (prefers-reduced-motion: reduce) {
  html.akr-arm [data-akr] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   AKSU-BREADCRUMB
   Breadcrumb band (.akb)
   was: assets/css/aksu-breadcrumb.css
   ========================================================================== */

/* ==========================================================================
   AksuPivot — page breadcrumb band  (.akb)
   --------------------------------------------------------------------------
   A universal masthead for every inner page: the crumb trail, an eyebrow, the
   page title and an optional lead paragraph. Nothing in here is specific to
   one page — drop the markup in, change the words.

   MARKUP  (title, optional lead, then the trail)
     <section class="akb">
       <div class="akb__wrap">
         <h1 class="akb__title">Tell us about <em>your field</em></h1>
         <p class="akb__lead">Optional one- or two-line summary.</p>

         <!-- the trail sits UNDER the copy -->
         <nav class="akb-crumb" aria-label="Breadcrumb">
           <ol>
             <li><a href="index.html"><i class="fa-solid fa-house"></i><span>Home</span></a></li>
             <li class="akb-crumb__span" aria-hidden="true"></li>

             <!-- repeat the pair above for each intermediate level -->

             <li>
               <span class="akb-crumb__now" aria-current="page">
                 <span class="akb-crumb__hub" aria-hidden="true"></span>
                 <span>Contact</span>
               </span>
             </li>
           </ol>
         </nav>
       </div>
     </section>

   The trail is a real <nav><ol> with aria-current on the last item, so the
   decoration costs nothing in semantics. Pair it with BreadcrumbList JSON-LD
   in <head> and search engines render the trail too.

   Single column by design — no side grid — so it reads the same whatever the
   page carries underneath.
   ========================================================================== */

.akb {
  --akb-navy:  #122b52;
  --akb-ink:   #0d2246;
  --akb-green: #2f8a34;
  --akb-lime:  #2f8a34;
  --akb-glide: cubic-bezier(0.16, 1, 0.3, 1);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(38px, 4.6vw, 70px) 0 clamp(44px, 5.2vw, 80px);
  background:
    radial-gradient(70% 120% at 88% 0%, rgba(47, 138, 52, 0.24) 0%, transparent 58%),
    radial-gradient(80% 120% at 0% 100%, rgba(33, 77, 147, 0.48) 0%, transparent 60%),
    linear-gradient(158deg, var(--akb-navy) 0%, var(--akb-ink) 100%);
  color: rgba(255, 255, 255, 0.72);
  /* every hero on the site is Poppins */
  font-family: "Poppins", sans-serif;
  line-height: 1.7;
}

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

.akb__wrap {
  width: var(--aksu-wrap, min(100% - 2 * clamp(16px, 6.5vw, 90px), 1320px));
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Colour, defended.

   This band gets dropped inside whatever wrapper a page already has, and those
   wrappers set type colours of their own — contact.html's <main class="akc">
   carries `.akc h1 { color: #0f2340 }` at (0,1,1), which beat a bare
   .akb__title at (0,1,0) and painted the title dark navy ON the navy band:
   1.13:1, effectively invisible.

   Every colour below is therefore stated at (0,2,0) or higher so the component
   owns its own appearance wherever it is nested. Measured against the band:
     title    #ffffff              13.9:1
     em       #2f8a34 (lime)        6.7:1
     lead     rgba(255,255,255,.72) 9.1:1
   -------------------------------------------------------------------------- */

.akb .akb__title            { color: #fff; }
.akb .akb__title em         { color: var(--akb-lime); }
.akb .akb__lead             { color: rgba(255, 255, 255, 0.72); }

/* Spacing needs the same defence as colour, and for the same reason:
   contact.html's wrapper carries `.akc p { margin: 0 }` at (0,1,1), which beat
   .akb__lead at (0,1,0) and collapsed the gap under the title to zero. */
.akb .akb__title            { margin: 0; }
.akb .akb__lead             { margin: clamp(16px, 1.7vw, 26px) 0 0; }
.akb .akb-crumb             { margin-top: clamp(22px, 2.6vw, 34px); }
/* main.css `p { text-transform: capitalize }` at (0,0,1) reaches the lead and
   Title-Cases a full sentence. Stated here at (0,2,0) with the rest. */
.akb .akb__lead             { text-transform: none; }
.akb .akb-crumb ol          { margin: 0; padding: 0; }
.akb .akb-crumb a           { color: rgba(255, 255, 255, 0.7); }
.akb .akb-crumb a:hover     { color: #fff; }
.akb .akb-crumb__now        { color: #fff; }
/* belt and braces for any heading a page drops in here */
.akb h1, .akb h2, .akb h3   { color: #fff; }

/* ------------------------------ crumb trail ------------------------------ */

/* The trail sits UNDER the copy: eyebrow, title, lead, then the crumbs. */
.akb-crumb { margin-top: clamp(22px, 2.6vw, 34px); }

.akb-crumb ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.akb-crumb a,
.akb-crumb__now {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 34px;
  padding: 0 15px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.akb-crumb a {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.akb-crumb a:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.akb-crumb a i { font-size: 11px; opacity: 0.75; }

/* The connector: a plain straight rule between crumbs. */
.akb-crumb__span {
  width: clamp(26px, 4vw, 48px);
  height: 1px;
  background: rgba(255, 255, 255, 0.26);
}

/* Current page — a pivot hub beside the label. */
.akb-crumb__now {
  position: relative;
  background: var(--akb-green, #2f8a34);
  color: #fff;
  font-weight: 600;
}
.akb-crumb__hub {
  position: relative;
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
}
/* two rings leaving the hub, like a sprinkler at the pivot point */
.akb-crumb__hub::before,
.akb-crumb__hub::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  animation: akb-ring 2.6s ease-out infinite;
}
.akb-crumb__hub::after { animation-delay: 1.3s; }
@keyframes akb-ring {
  0%   { transform: scale(0.6); opacity: 0.85; }
  80%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* -------------------------------- title ---------------------------------- */

/* The title leads the band — there is no eyebrow above it. */
.akb__title {
  margin: 0;
  color: #fff;
  font-family: inherit;
  font-size: clamp(22px, 2.5vw, 34px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.akb__title em { font-style: normal; }

.akb__lead {
  max-width: 64ch;
  /* the gap scales with the band so it stays proportional as the title shrinks */
  margin: clamp(14px, 1.5vw, 22px) 0 0;
  font-size: clamp(13px, 0.95vw, 14.5px);
}

/* ------------------------- the three departments ------------------------- */
/* Who to talk to is the reason this page exists, so it runs full width above
   the address rather than stacking in a narrow column beside the map. Three
   equal cards: no department is the "main" one. */

.akc-reach { margin-bottom: clamp(18px, 2vw, 26px); }
.akc-reach__title {
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.akc-reach__title em { font-style: normal; color: var(--akc-green); }
.akc-reach__lede {
  margin-top: 8px;
  max-width: 62ch;
  font-size: clamp(14px, 1.05vw, 15.5px);
  line-height: 1.65;
}

.akc-depts {
  display: grid;
  gap: clamp(12px, 1.4vw, 18px);
  margin-bottom: clamp(26px, 3vw, 44px);
  /* auto-fit rather than a fixed three: a fourth department can be added in the
     admin panel without this file having to change */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 258px), 1fr));
}

.akc-dept {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: clamp(18px, 1.8vw, 24px);
  border: 1px solid var(--akc-line);
  border-radius: 18px;
  background: #fff;
  transition: transform 0.35s var(--akc-glide), box-shadow 0.35s, border-color 0.35s;
}
.akc-dept:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: 0 22px 44px -26px rgba(15, 35, 64, 0.42);
}
.akc-dept__ic {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: rgba(47, 138, 52, 0.11);
  color: var(--akc-green);
  font-size: 17px;
}
/* .akc h3 is 26px from the template; a card label is not a section heading */
.akc .akc-dept__name {
  font-size: clamp(16px, 1.2vw, 18px);
  font-weight: 600;
  line-height: 1.3;
}
.akc-dept__lines { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.akc-dept__lines li {
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
}
.akc-dept__lines i { color: var(--akc-green); font-size: 13px; justify-self: center; }
.akc-dept__lines a {
  color: var(--akc-head);
  text-decoration: none;
  /* an e-mail address must be allowed to break rather than widen the card */
  overflow-wrap: anywhere;
  transition: color 0.25s;
}
.akc-dept__lines a:hover { color: var(--akc-green); text-decoration: underline; }

/* ---------------------------- address + map ------------------------------ */
/* The address answers "where", so it sits with the map.

   Left to its natural height the card came out 181px against a 560px map and
   left 379px of dead column beside it — measured, not guessed. It stretches to
   the map instead and centres its own content, so the row reads as two
   deliberate blocks of equal height rather than a small card adrift.

   Only from 1000px up: below that the grid is a single column and stretching
   would inflate the card to nothing but air. */
@media (min-width: 1000px) {
  .akc-grid--place > .akc-info { align-content: stretch; }
  .akc-card--addr { align-content: center; }
}
.akc-card--addr address {
  margin-top: 6px;
  font-size: 14px; font-style: normal; line-height: 1.55;
  color: var(--akc-head);
}
.akc-card__go {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 13px;
  color: var(--akc-green); font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.akc-card__go:hover { text-decoration: underline; }
/* ----------------------------- motion opt-out ---------------------------- */

@media (prefers-reduced-motion: reduce) {
  .akb *, .akb *::before, .akb *::after {
    animation: none !important;
    transition-duration: 0.001ms !important;
  }
}


/* ==========================================================================
   Clearing the sticky header
   --------------------------------------------------------------------------
   GSAP ScrollSmoother pins #smooth-wrapper to the viewport top, and the sticky
   header sits OUTSIDE that wrapper. The first block inside the smoother
   therefore starts at y=0 — underneath the header — and the top of the band
   was hidden behind it. contact.php has no smoother, which is exactly why it
   was the one page that looked right.

   The selector is deliberately `#smooth-content > .akb`: it can only match
   when the smoother is present, so the page without one is left alone and
   needs no exception.

   Header heights come from aksu-header.css (.ac-nav-inner min-height + 1px
   border): 112+1 desktop, 95+1 under 992, 74+1 under 576.
   ========================================================================== */

:root { --ac-header-h: 113px; }
@media (max-width: 991px) { :root { --ac-header-h: 96px; } }
@media (max-width: 575px) { :root { --ac-header-h: 75px; } }

#smooth-content > .akb {
  padding-top: calc(clamp(38px, 4.6vw, 70px) + var(--ac-header-h));
}

/* The editorial article opens on its own breadcrumb strip instead of the .akb
   band, so it needs the same clearance — the smoother pins #smooth-wrapper to
   the viewport top and the sticky header would otherwise cover the crumb. */
#smooth-content > .akn-post {
  padding-top: var(--ac-header-h);
}

/* Same clearance for the template's own banner, which still opens news.php,
   service.php and service-details.php and slid under the header identically. */
#smooth-content > .breadcrumb-wrapper {
  padding-top: var(--ac-header-h);
}

/* ==========================================================================
   AKSU-SECTIONS
   Homepage/About sections (.abt .abg .sft)
   was: assets/css/aksu-sections.css
   ========================================================================== */

/* ==========================================================================
   AksuPivot — new sections
   --------------------------------------------------------------------------
   Home for sections built from scratch rather than inherited from the Agriva
   template. One clearly fenced block per section, each with its own prefix so
   nothing here can reach into template markup.

   Loaded after main.css. Nothing in main.css is overridden.

   Index
     .abt   About — intro copy, proof points, counters, actions
     .sft   Smart Irrigation Control — split feature/accordion section
     .abg   About mosaic — three-tile image grid with a statement and arrows
   ========================================================================== */


/* ==========================================================================
   .abt — About section
   --------------------------------------------------------------------------
   Replaces about-section-3. The template's version was a lorem paragraph, a
   "10+ years of experience" badge and two floating PNG vegetables; the copy
   column now carries the things a buyer actually weighs — how long we have
   built pivots, what the machines are made of, and how to reach engineering.

   Two columns: the copy on the left, the .abg mosaic on the right. Below
   1100px they stack and the copy leads.
   ========================================================================== */

.abt {
  --abt-green: #2f8a34;
  --abt-deep:  #2f8a34;
  --abt-blue:  #214d93;
  --abt-head:  #0f2340;
  /* was #6b7a86 — 4.42:1 on white, under AA for body text. #5a6a76 is 5.59:1
     and reads as the same grey next to the navy heading. */
  --abt-body:  #5a6a76;
  --abt-line:  #e4e9e4;
  --abt-ease:  cubic-bezier(0.34, 1.4, 0.64, 1);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(60px, 7.5vw, 118px) 0;
  background: #fff;
  font-family: "Outfit", sans-serif;
  color: var(--abt-body);
  line-height: 1.75;
}

/* Soft green wash instead of the floating chili and tree cut-outs. */
.abt::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(48% 55% at 100% 0%, rgba(47, 138, 52, 0.10) 0%, transparent 62%),
    radial-gradient(42% 50% at 0% 100%, rgba(33, 77, 147, 0.07) 0%, transparent 60%);
}

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

.abt h2, .abt h3 {
  margin: 0;
  color: var(--abt-head);
  font-family: "Outfit", sans-serif;
  line-height: 1.14;
  letter-spacing: -0.02em;
}
.abt p { margin: 0; }

/* main.css carries `p { text-transform: capitalize }` at (0,0,1) and it was
   inheriting into every run of prose in this column — the lede, all four proof
   point titles and all four descriptions rendered as "AksuPivot Manufactures
   Centre Pivot, Linear And Multi-Center Systems In Our Own Factory In Konya."
   Stated once here for the whole block; the eyebrow and the phone label set
   their own uppercase after this. */
.abt__lede,
.abt__points b,
.abt__points span { text-transform: none; }

.abt__wrap {
  width: min(100% - 2 * clamp(16px, 6.5vw, 90px), 1320px);
  margin-inline: auto;
}

.abt__grid {
  display: grid;
  gap: clamp(36px, 5vw, 78px);
  align-items: center;
}
@media (min-width: 1100px) {
  .abt__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); }

  /* Pull the mosaic in a little without touching the column split — the copy
     keeps its measure and the media just sits tighter to the right edge.
     Scoped above 1100px so it stays full-bleed once the grid stacks. */
  .abt__media {
    width: 91%;
    justify-self: end;
  }
}

/* ------------------------------- copy ------------------------------------ */

.abt__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--abt-green);
}
.abt__eyebrow::before {
  content: "";
  width: 30px;
  height: 2px;
  background: currentColor;
}

.abt__title {
  margin-top: 14px;
  font-size: clamp(22px, 2.6vw, 36px);
  font-weight: 700;
}
.abt__title em { font-style: normal; color: var(--abt-green); }

/* The lede used to be 13.7px — SMALLER than the 14px proof-point titles below
   it, so the paragraph that introduces the company read as less important than
   its own bullet list. It is the second voice after the heading and is sized
   as one now, on a shorter measure so it does not run past the points. */
/* .abt .abt__lede, not .abt__lede: `.abt p { margin: 0 }` sits at (0,1,1) and
   had been silently beating this rule's margin-top at (0,1,0) — the gap under
   the heading measured 0 and what looked like spacing was only the heading's
   own leading. Stated at (0,2,0) so the space is real. */
.abt .abt__lede {
  max-width: 52ch;
  margin-top: clamp(15px, 1.5vw, 22px);
  color: var(--abt-body);
  font-size: clamp(14px, 1.08vw, 15.5px);
  line-height: 1.62;
}

/* Proof points -------------------------------------------------------------
   Was four 23px translucent-green circles floating in whitespace, which put
   the heaviest marks in the column on its least important content. The circles
   are gone; the four claims sit in a 2x2 block divided by hairlines — the same
   line already closing the column above the actions — so the structure comes
   from the grid instead of from four painted chips. The tick survives as a
   bare glyph at the title's cap height.
   -------------------------------------------------------------------------- */

.abt__points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 218px), 1fr));
  column-gap: clamp(22px, 2.4vw, 34px);
  margin: clamp(24px, 2.8vw, 34px) 0 0;
  padding: 0;
  list-style: none;
}
.abt__points li {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: clamp(13px, 1.3vw, 17px) 0;
  border-top: 1px solid var(--abt-line);
}
.abt__points i {
  /* no chip: the tick is type, aligned to the cap height of the title beside
     it rather than centred in a box that no longer exists */
  width: 15px;
  margin-top: 4px;
  color: var(--abt-green);
  font-size: 11px;
  line-height: 1;
  text-align: center;
}
.abt__points b {
  display: block;
  color: var(--abt-head);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.abt__points span {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.52;
}

/* Actions ----------------------------------------------------------------- */

.abt__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  /* The counters used to carry this rule; with them gone it moves down here so
     the column still closes on a hairline rather than trailing off. */
  margin-top: clamp(28px, 3.2vw, 40px);
  padding-top: clamp(24px, 2.8vw, 34px);
  border-top: 1px solid var(--abt-line);
}

.abt__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  background: var(--abt-green);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.3s, transform 0.3s var(--abt-ease);
}
.abt__btn i { font-size: 11px; transition: transform 0.3s var(--abt-ease); }
.abt__btn:hover { background: var(--abt-deep); color: #fff; transform: translateY(-3px); }
.abt__btn:hover i { transform: translate(3px, -3px); }

.abt__call {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: inherit;
  text-decoration: none;
}
.abt__call-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--abt-line);
  border-radius: 50%;
  color: var(--abt-green);
  font-size: 14px;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.abt__call:hover .abt__call-icon {
  background: var(--abt-green);
  border-color: var(--abt-green);
  color: #fff;
}
.abt__call small {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
}
.abt__call b {
  display: block;
  margin-top: 3px;
  color: var(--abt-head);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}

/* ------------------------------- mobile ---------------------------------- */

/* Below the two-column breakpoint the copy column runs the full width, so the
   measure has to be re-capped: 60ch of 13px text across a 340px phone reads as
   a wall. The proof points also stop being a 2-up grid there, which is why
   their gap tightens rather than staying at the desktop rhythm. */
@media (max-width: 1099px) {
  .abt__lede { max-width: 62ch; }
  .abt__grid { align-items: start; }
}

@media (max-width: 767px) {
  .abt { padding: clamp(44px, 11vw, 64px) 0; }

  .abt__eyebrow { font-size: 11px; letter-spacing: 0.14em; }
  .abt__eyebrow::before { width: 22px; }

  .abt__title  { font-size: clamp(21px, 6.2vw, 27px); line-height: 1.2; }
  /* matched to (0,2,0) as well, or the base rule's margin wins down here */
  .abt .abt__lede { margin-top: 15px; font-size: 14px; line-height: 1.6; }

  /* single column here, so the hairlines stack into one continuous list and
     only the last cell needs a closing rule */
  .abt__points { margin-top: 22px; }
  .abt__points li { grid-template-columns: 14px minmax(0, 1fr); gap: 10px; padding: 13px 0; }
  .abt__points li:last-child { border-bottom: 1px solid var(--abt-line); }
  .abt__points i { width: 14px; margin-top: 3px; font-size: 10.5px; }
  .abt__points b { font-size: 14px; }
  .abt__points span { font-size: 12.5px; }

  /* Stack the actions and let each fill the row — a pill and a phone block
     side by side wrap into an awkward two-line stagger at this width. */
  .abt__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 24px;
    padding-top: 20px;
  }
  .abt__btn { justify-content: center; padding: 14px 22px; }
  .abt__call { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .abt *, .abt *::before, .abt *::after { transition-duration: 0.001ms !important; }
}


/* ==========================================================================
   .abg — About mosaic
   --------------------------------------------------------------------------
   Replaces the template's .about-box panel in about-section-3. Three tiles:
   a full-width statement tile on top, then a short tile on the left with the
   prev/next arrows beneath it and a taller tile on the right that spans both
   of those rows.

   Proportions from the reference at 440px wide — 190 / 235 columns, tiles of
   440x248, 190x147 and 235x247 — expressed as aspect-ratios and fr units so
   the whole mosaic scales with its column instead of snapping.

   The arrows drive a crossfade: every tile holds all slides stacked, and only
   the active one is opaque. No layout runs on slide change, so nothing shifts.
   ========================================================================== */

.abg {
  --abg-green: #2f8a34;
  --abg-deep:  #2f8a34;
  --abg-r:     14px;
  --abg-ease:  cubic-bezier(0.4, 0, 0.2, 1);

  display: grid;
  grid-template-columns: 190fr 235fr;
  gap: 12px 16px;
  font-family: "Outfit", sans-serif;
}

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

/* --------------------------------- tiles --------------------------------- */

.abg__tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--abg-r);
  /* The mat behind a contained image. Any file that does not match its slot
     ratio shows this at the edges, so it is a deliberate neutral rather than
     the old placeholder grey. */
  background: #eef1ee;
}

/* Stacked slides. All of them are laid out on top of each other in the same
   grid cell, so the tile's height never depends on which one is showing.

   object-fit: cover, not contain. contain meant any file whose ratio missed
   its slot letterboxed against the tile mat — a band of dead #eef1ee across
   the top of the photograph. Every one of these files misses its slot, so
   every tile had one. cover fills the slot instead and crops symmetrically,
   which is why the slot ratios below still matter: supply artwork at them and
   nothing worth seeing is cropped away.

   min-height: 0 is load-bearing, not tidying. A grid item defaults to
   min-height: auto, so the row could not shrink below the image's INTRINSIC
   height and `height: 100%` resolved against that inflated row instead of the
   tile. Measured at 1440: .abg__a's tile is 152px tall and its image box was
   214px — 63px of photograph hanging below the clip, so the tile showed the
   top 71% of the frame. On these photographs the top 71% is sky, which is
   what read as empty space above the subject. */
.abg__tile > img {
  grid-area: 1 / 1;
  min-height: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 0.6s var(--abg-ease);
}
.abg__tile { display: grid; grid-template: 1fr / 1fr; }
.abg__tile > img.is-on { opacity: 1; }

/* --------------------------------------------------------------------------
   Slot ratios — ONE per tile, identical at every screen width.

   These are the shapes artwork must be supplied in. They used to change below
   575px, which meant a single file could not fit both the desktop and the
   mobile slot without being cropped at one of them. One ratio per slot is
   what makes a crop-free master image possible. Files that miss their slot
   are no longer letterboxed — they are centre-cropped to fill it.

     .abg__hero   440 : 205   = 88:41  = 2.146:1   supply 2464 x 1148
     .abg__a      190 : 125   = 38:25  = 1.520:1   supply 1064 x  700
     .abg__b      235 : 205   = 47:41  = 1.146:1   supply 1316 x 1148

   The pixel figures are 2x the largest size each slot is ever rendered at
   (1201 / 530 / 655 CSS px on a 1320px page), so they stay sharp on retina.
   -------------------------------------------------------------------------- */
.abg__hero {
  grid-column: 1 / -1;
  aspect-ratio: 440 / 205;
}
.abg__a { aspect-ratio: 190 / 125; }

/* The left tile and the arrows are one stack rather than two grid rows. When
   the right tile spanned both rows the grid shared its height out between
   them, inflating the row the left tile sits in and pushing the arrows ~21px
   below where the design puts them. As a nested column the arrows sit a fixed
   distance under their own tile, whatever the right tile does. */
.abg__left {
  grid-column: 1;
  align-self: start;
}

.abg__b {
  grid-column: 2;
  aspect-ratio: 235 / 205;
}

/* The hero tile carried a statement over a dark scrim. Both are gone — with no
   type to keep readable, the gradient was only dimming the photograph. */

/* --------------------------------- arrows -------------------------------- */

.abg__nav {
  display: flex;
  justify-content: center;
  gap: 6px;
  /* 29 / 190 of the left column. A percentage top margin resolves against the
     containing block's WIDTH, so the gap scales with the mosaic like every
     other measurement here instead of staying pinned at 29px. */
  margin-top: 15.3%;
}

.abg__arrow {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid var(--abg-green);
  border-radius: 50%;
  background: transparent;
  color: var(--abg-green);
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.3s var(--abg-ease), color 0.3s var(--abg-ease),
              border-color 0.3s var(--abg-ease), transform 0.3s var(--abg-ease);
}
.abg__arrow--next {
  background: var(--abg-green);
  border-color: var(--abg-green);
  color: #fff;
}
.abg__arrow:hover { transform: translateY(-2px); }
.abg__arrow--prev:hover { background: var(--abg-green); color: #fff; }
.abg__arrow--next:hover { background: var(--abg-deep); border-color: var(--abg-deep); }

/* Mobile. This block has to sit AFTER the .abg base rules, not up with the
   .abt mobile styles: the overrides carry the same specificity as the base
   declarations, so source order is the only thing deciding them. Declared
   earlier in the file they lost silently and the tiles kept their desktop
   ratios. */
@media (max-width: 575px) {
  .abg { gap: 10px; }
  /* Ratios are deliberately NOT overridden here — see the slot table above.
     Only the controls shrink. */
  .abg__nav   { margin-top: 18px; }
  .abg__arrow { width: 44px; height: 44px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .abg *, .abg *::before, .abg *::after {
    transition-duration: 0.001ms !important;
  }
}


/* ==========================================================================
   .sft — Smart Irrigation Control
   --------------------------------------------------------------------------
   Two columns under a header row: a media tile with an overlapping action
   badge and a caption card on the left, an accordion on the right whose open
   item becomes a solid green panel.

   Proportions are taken from the reference at 1270px wide — 440 / 599 columns
   with a 68px gutter, an 88px closed row and a 16px break under the open
   panel — expressed as ratios and clamps so they hold at any width.

   The panel green is a darker shade of the brand green. White body text on
   #2f8a34 sits at 2.6:1, which is unreadable; #2f8a34 lifts it to 4.6:1 while
   staying in the same family. The lighter #2f8a34 stays on accents, where it
   carries no text.
   ========================================================================== */

.sft {
  --sft-green:  #2f8a34;   /* accents: bullets, icons, rules, the CTA */
  --sft-panel:  #2f8a34;   /* open accordion panel, carries white text */
  --sft-bg:     #f6f8f6;
  --sft-card:   #ffffff;
  --sft-head:   #0f2340;
  --sft-body:   #6b7a86;
  --sft-line:   #e4e9e4;
  --sft-ease:   cubic-bezier(0.4, 0, 0.2, 1);

  padding: clamp(56px, 7vw, 110px) 0;
  background: var(--sft-bg);
  font-family: "Outfit", sans-serif;
  color: var(--sft-body);
  line-height: 1.7;
}

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

.sft h2, .sft h3 {
  margin: 0;
  color: var(--sft-head);
  font-family: "Outfit", sans-serif;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.sft p { margin: 0; }

.sft__wrap {
  width: min(100% - 2 * clamp(16px, 6.5vw, 90px), 1320px);
  margin-inline: auto;
}

/* ------------------------------- header ---------------------------------- */

.sft__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.sft__title {
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 700;
}
/* first word only */
.sft__title em {
  font-style: normal;
  color: var(--sft-green);
}

.sft__lede {
  max-width: 48ch;
  margin-top: 16px;
  font-size: clamp(14px, 1.05vw, 15.5px);
  line-height: 1.6;
}

.sft__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  margin-top: 26px;
  padding: 10px 18px;
  border: 1px solid var(--sft-green);
  border-radius: 999px;
  color: var(--sft-green);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  background: transparent;
  transition: background-color 0.3s var(--sft-ease), color 0.3s var(--sft-ease);
}
.sft__cta i { font-size: 12px; transition: transform 0.3s var(--sft-ease); }
.sft__cta:hover { background: var(--sft-green); color: #fff; }
.sft__cta:hover i { transform: translateX(3px); }

/* -------------------------------- grid ----------------------------------- */

.sft__grid {
  display: grid;
  gap: clamp(26px, 4.5vw, 68px);
  margin-top: clamp(38px, 4.4vw, 58px);
  align-items: start;
}
@media (min-width: 992px) {
  /* 440 : 599 at the reference width */
  .sft__grid { grid-template-columns: minmax(0, 0.423fr) minmax(0, 0.577fr); }
}

/* ------------------------------ left: media ------------------------------ */

.sft-media {
  position: relative;
  /* 440 x 247 in the reference */
  aspect-ratio: 440 / 247;
  border-radius: 12px;
  background: #d5d9d5;
}
.sft-media > img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  display: block;
}

/* Straddles the lower edge of the tile. The ring is painted in the section
   background rather than white so it reads as a cut-out, not a border. */
.sft-media__badge {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--sft-green);
  color: #fff;
  font-size: 13px;
  text-decoration: none;
  transform: translate(-50%, 50%);
  box-shadow: 0 0 0 6px var(--sft-bg);
  transition: transform 0.35s var(--sft-ease), background-color 0.3s;
}
.sft-media__badge:hover {
  background: var(--sft-panel);
  transform: translate(-50%, 50%) rotate(45deg);
}

.sft-note {
  margin-top: 34px;
  padding: 22px 24px;
  border-radius: 12px;
  background: var(--sft-card);
}
.sft-note__title {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 16.5px;
  font-weight: 600;
}
/* the small open ring before the caption title */
.sft-note__title::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--sft-green);
  border-radius: 50%;
}
.sft-note p {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #8593a0;
}

/* --------------------------- right: accordion ---------------------------- */

.sft-acc {
  --ico: 28px;
  --gap: 20px;
}

.sft-acc__item { border-bottom: 1px solid var(--sft-line); }

.sft-acc__item.is-open {
  margin-bottom: 16px;
  border-bottom-color: transparent;
  border-radius: 12px;
  background: var(--sft-panel);
}

.sft-acc__h { margin: 0; }

.sft-acc__btn {
  display: grid;
  grid-template-columns: var(--ico) minmax(0, 1fr) 18px;
  align-items: center;
  gap: var(--gap);
  width: 100%;
  /* (88 - 28) / 2 keeps a closed row at the reference 88px */
  padding: 30px 24px;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: padding 0.4s var(--sft-ease);
}
.sft-acc__item.is-open .sft-acc__btn { padding: 22px 24px 0; align-items: start; }

.sft-acc__ico {
  display: grid;
  place-items: center;
  width: var(--ico);
  height: var(--ico);
  border-radius: 50%;
  background: rgba(47, 138, 52, 0.13);
  color: var(--sft-green);
  font-size: 11.5px;
  transition: background-color 0.35s, color 0.35s;
}
.sft-acc__item.is-open .sft-acc__ico {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.sft-acc__title {
  font-size: 17px;
  font-weight: 500;
  color: var(--sft-head);
  line-height: 1.3;
  transition: color 0.35s;
}
.sft-acc__item.is-open .sft-acc__title { font-weight: 600; color: #fff; }

/* +/- drawn rather than swapped, so it morphs instead of popping */
.sft-acc__sign {
  position: relative;
  width: 18px;
  height: 18px;
}
.sft-acc__sign::before,
.sft-acc__sign::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 1.6px;
  border-radius: 2px;
  background: var(--sft-green);
  transform: translate(-50%, -50%);
  transition: transform 0.4s var(--sft-ease), background-color 0.35s;
}
.sft-acc__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.sft-acc__item.is-open .sft-acc__sign::before,
.sft-acc__item.is-open .sft-acc__sign::after { background: #fff; }
/* collapse the upright bar: + becomes − */
.sft-acc__item.is-open .sft-acc__sign::after { transform: translate(-50%, -50%) rotate(90deg) scaleX(0); }

/* Height animation without a fixed max-height: the row goes 0fr -> 1fr and
   the browser interpolates the track, so the panel opens to its real height
   whatever the copy length. */
.sft-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--sft-ease);
}
.sft-acc__item.is-open .sft-acc__panel { grid-template-rows: 1fr; }

.sft-acc__panel > div { overflow: hidden; }

.sft-acc__panel p {
  /* holds the copy to two lines at the reference width, as in the design */
  max-width: 420px;
  /* Margin, not padding, and on the <p> rather than the wrapper. Everything
     here is border-box, so padding on the <p> would come out of its own
     max-width and squeeze the measure to ~324px — three lines instead of two.
     Padding on the wrapper fixes that but is not collapsed by 0fr, so it
     added 28px to every *closed* row. A margin is outside the max-width and
     is clipped away with the rest when the row collapses. */
  margin: 6px 24px 22px calc(24px + var(--ico) + var(--gap));
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
}

/* Crop chips inside a panel. Same margin-not-padding rule as the <p> above and
   for the same reason — anything that adds height must be clipped away with
   the row when it collapses to 0fr. */
.sft-acc__crops {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 24px 22px calc(24px + var(--ico) + var(--gap));
  padding: 0;
  list-style: none;
}
.sft-acc__crops li {
  padding: 6px 13px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 12px; font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

/* ------------------------- the three departments ------------------------- */
/* Who to talk to is the reason this page exists, so it runs full width above
   the address rather than stacking in a narrow column beside the map. Three
   equal cards: no department is the "main" one. */

.akc-reach { margin-bottom: clamp(18px, 2vw, 26px); }
.akc-reach__title {
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.akc-reach__title em { font-style: normal; color: var(--akc-green); }
.akc-reach__lede {
  margin-top: 8px;
  max-width: 62ch;
  font-size: clamp(14px, 1.05vw, 15.5px);
  line-height: 1.65;
}

.akc-depts {
  display: grid;
  gap: clamp(12px, 1.4vw, 18px);
  margin-bottom: clamp(26px, 3vw, 44px);
  /* auto-fit rather than a fixed three: a fourth department can be added in the
     admin panel without this file having to change */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 258px), 1fr));
}

.akc-dept {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: clamp(18px, 1.8vw, 24px);
  border: 1px solid var(--akc-line);
  border-radius: 18px;
  background: #fff;
  transition: transform 0.35s var(--akc-glide), box-shadow 0.35s, border-color 0.35s;
}
.akc-dept:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: 0 22px 44px -26px rgba(15, 35, 64, 0.42);
}
.akc-dept__ic {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: rgba(47, 138, 52, 0.11);
  color: var(--akc-green);
  font-size: 17px;
}
/* .akc h3 is 26px from the template; a card label is not a section heading */
.akc .akc-dept__name {
  font-size: clamp(16px, 1.2vw, 18px);
  font-weight: 600;
  line-height: 1.3;
}
.akc-dept__lines { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.akc-dept__lines li {
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
}
.akc-dept__lines i { color: var(--akc-green); font-size: 13px; justify-self: center; }
.akc-dept__lines a {
  color: var(--akc-head);
  text-decoration: none;
  /* an e-mail address must be allowed to break rather than widen the card */
  overflow-wrap: anywhere;
  transition: color 0.25s;
}
.akc-dept__lines a:hover { color: var(--akc-green); text-decoration: underline; }

/* ---------------------------- address + map ------------------------------ */
/* The address answers "where", so it sits with the map.

   Left to its natural height the card came out 181px against a 560px map and
   left 379px of dead column beside it — measured, not guessed. It stretches to
   the map instead and centres its own content, so the row reads as two
   deliberate blocks of equal height rather than a small card adrift.

   Only from 1000px up: below that the grid is a single column and stretching
   would inflate the card to nothing but air. */
@media (min-width: 1000px) {
  .akc-grid--place > .akc-info { align-content: stretch; }
  .akc-card--addr { align-content: center; }
}
.akc-card--addr address {
  margin-top: 6px;
  font-size: 14px; font-style: normal; line-height: 1.55;
  color: var(--akc-head);
}
.akc-card__go {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 13px;
  color: var(--akc-green); font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.akc-card__go:hover { text-decoration: underline; }
/* ----------------------------- motion opt-out ---------------------------- */

@media (prefers-reduced-motion: reduce) {
  .sft *,
  .sft *::before,
  .sft *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   AKSU-CONTENT
   Catalogue content blocks (.akq .akm .akx)
   was: assets/css/aksu-content.css
   ========================================================================== */

/* ==========================================================================
   AksuPivot — catalogue content blocks  (.akq)
   --------------------------------------------------------------------------
   Sections built from the 2025 product catalogue. Reusable across pages:

     .akq-figures   headline statistics row (efficiency, savings, since 1989)
     .akq-crops     the crops a pivot serves
     .akq-certs     CE + ISO + domestic-goods certification
     .akq-feat      alternating text/figure feature blocks
     .akq-tech      component grid (tower, span, gearbox, control, …)
     .akq-item__link card foot link into a product page

   Prefixed .akq- because .akc- already belongs to the contact page and .aksp-
   to spare parts. Loaded after main.css; nothing in main.css is overridden.
   ========================================================================== */

.akq {
  --q-green: #2f8a34;
  --q-deep:  #2f8a34;
  --q-lime:  #2f8a34;
  --q-navy:  #122b52;
  --q-ink:   #0f2340;
  --q-body:  #62727e;
  --q-paper: #f6f8f6;
  --q-line:  #e3e9e3;
  --q-glide: cubic-bezier(0.16, 1, 0.3, 1);

  font-family: "Outfit", sans-serif;
  color: var(--q-body);
  line-height: 1.7;
}
.akq *, .akq *::before, .akq *::after { box-sizing: border-box; }

/* main.css sets `p { text-transform: capitalize }` at (0,0,1), which spans and
   list items then inherit. That suits the template's short marketing lines but
   turns catalogue prose into Title Case. Off across the block; the eyebrow puts
   its own uppercase back below. */
.akq, .akq * { text-transform: none; }
.akq h2, .akq h3, .akq h4 { margin: 0; color: var(--q-ink); line-height: 1.18; letter-spacing: -0.02em; }
.akq p { margin: 0; }

.akq__wrap {
  width: var(--aksu-wrap, min(100% - 2 * clamp(16px, 6.5vw, 90px), 1320px));
  margin-inline: auto;
}

.akq__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--q-green);
}
.akq__eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; }

.akq__title { margin-top: 14px; font-size: clamp(24px, 2.9vw, 40px); font-weight: 700; }
/* That 14px is the gap under the eyebrow. Where the eyebrow has been removed
   the title leads the section and the offset is a stray. */
.akq__wrap > .akq__title:first-child { margin-top: 0; }
.akq__title em { font-style: normal; color: var(--q-green); }
.akq__lede { max-width: 60ch; margin-top: 14px; font-size: clamp(13.5px, 1vw, 15px); line-height: 1.68; }

/* --------------------------- two-column section head ---------------------
   Title on the left, lede on the right and baseline-aligned with it, which is
   the same shape the machines and news heads already use — the .akq sections
   were the odd ones out, stacking everything down the left.
   .
   Done with grid placement on the existing wrapper rather than new markup, so
   it applies to all eight .akq sections at once. :has() gates it to wrappers
   that actually carry a title; anywhere it is unsupported the sections simply
   keep the old stacked head. Everything that is not part of the head spans the
   full width. */
@media (min-width: 900px) {
  .akq__wrap:has(> .akq__title) {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    column-gap: clamp(28px, 3.4vw, 72px);
  }
  /* With an eyebrow it owns row 1 and the head sits on row 2. */
  .akq__wrap:has(> .akq__eyebrow) > .akq__eyebrow { grid-column: 1; grid-row: 1; justify-self: start; }
  .akq__wrap:has(> .akq__eyebrow) > .akq__title   { grid-column: 1; grid-row: 2; }
  /* `.akq__title + .akq__lede`, not every lede: a section may close with a
     second paragraph, and placing *both* on the head row stacked them exactly
     on top of each other (pivot-system.php, 554x73px of overlap). Only the
     lede that follows the title belongs in the head. */
  .akq__wrap:has(> .akq__eyebrow) > .akq__title + .akq__lede { grid-column: 2; grid-row: 2; align-self: end; margin-top: 0; }

  /* Without one the head leads on row 1. Pinning the title to row 2
     unconditionally left row 1 empty but *reserved for one column only*, so
     the full-width body below — the fairs swiper — auto-placed into it and
     rendered above the heading. */
  .akq__wrap:has(> .akq__title):not(:has(> .akq__eyebrow)) > .akq__title {
    grid-column: 1; grid-row: 1;
  }
  .akq__wrap:has(> .akq__title):not(:has(> .akq__eyebrow)) > .akq__title + .akq__lede {
    grid-column: 2; grid-row: 1; align-self: end; margin-top: 0;
  }
  .akq__wrap:has(> .akq__title) > :not(.akq__eyebrow):not(.akq__title):not(.akq__title + .akq__lede) {
    grid-column: 1 / -1;
  }
  /* A button is not a band — grid items stretch, and the section CTA came out
     the full 1254px of the wrapper. */
  .akq__wrap:has(> .akq__title) > .ac-cta { justify-self: start; }
}

.akq-section { padding: clamp(48px, 6vw, 92px) 0; }
.akq-section--paper { background: var(--q-paper); }
/* for a section that is only a figures strip — the strip carries its own weight */
.akq-section--tight { padding: clamp(10px, 1.4vw, 22px) 0; }
.akq-section--tight .akq-figures { margin-top: 0; }

/* ============================== figures =================================== */

.akq-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 1px;
  margin-top: clamp(28px, 3.4vw, 44px);
  border-radius: 16px;
  overflow: hidden;
  background: var(--q-line);
}
.akq-fig { padding: 22px 24px; background: #fff; }
.akq-fig b {
  display: block;
  color: var(--q-ink);
  font-size: clamp(26px, 3vw, 38px); font-weight: 700; line-height: 1;
  letter-spacing: -0.02em;
}
.akq-fig b i { font-style: normal; color: var(--q-green); }
.akq-fig span {
  display: block; margin-top: 9px;
  font-size: 12.5px; line-height: 1.5; max-width: 22ch;
}

/* The .akq-crops chip grid is gone — the crop list moved into the Smart
   Irrigation accordion and is styled there as .sft-acc__crops. Nothing
   references these rules any more, so they went with it. */

/* ============================ certificates ================================ */

.akq-certs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 228px), 1fr));
  gap: 1px;
  margin-top: clamp(28px, 3.4vw, 44px);
  background: var(--q-line);
  border: 1px solid var(--q-line);
  border-radius: 20px;
  overflow: hidden;
}
/* No motion on these cards — no lift, no shadow, no scroll reveal. They sit
   still and are read, not played with. (The reveal groups were removed from
   aksu-reveal.js at the same time.) Same hairline frame as .akq-tech. */
.akq-cert {
  position: relative;
  padding: clamp(22px, 2vw, 30px);
  background: #fff;
}
.akq-cert__ic {
  display: grid; place-items: center;
  width: 42px; height: 42px; margin-bottom: 15px;
  border-radius: 12px;
  background: linear-gradient(140deg, var(--q-green), var(--q-lime));
  color: #fff; font-size: 15px;
}
.akq-cert h3 { font-size: 16px; font-weight: 700; }
.akq-cert p { margin-top: 6px; font-size: 13px; line-height: 1.55; }
.akq-cert small {
  display: block; margin-top: 12px; padding-top: 11px;
  border-top: 1px dashed var(--q-line);
  font-size: 11.5px; letter-spacing: 0.04em; color: #93a1ab;
}

/* ============================== features ================================== */

.akq-feat { display: grid; gap: clamp(34px, 4.4vw, 68px); margin-top: clamp(34px, 4vw, 56px); }

.akq-feat__row { display: grid; gap: clamp(22px, 3vw, 46px); align-items: center; }
@media (min-width: 900px) {
  .akq-feat__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* every second block leads with the figure */
  .akq-feat__row:nth-child(even) .akq-feat__media { order: -1; }
}

/* `cover`, not `contain`: contain letterboxed every photo against the paper
   fill, which read as a tinted band down both sides of the image. */
.akq-feat__media {
  overflow: hidden;
  border-radius: 18px;
  background: #eef1ee;
  aspect-ratio: 16 / 10;
}
.akq-feat__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.akq-feat h3 { font-size: clamp(19px, 1.9vw, 25px); font-weight: 700; }
.akq-feat__tr {
  display: block; margin-top: 5px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.02em; color: var(--q-green);
}
.akq-feat p { margin-top: 13px; font-size: 14px; line-height: 1.68; }

.akq-list { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.akq-list li {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 11px;
  font-size: 13.5px; line-height: 1.55;
}
.akq-list i {
  display: grid; place-items: center;
  width: 20px; height: 20px; margin-top: 2px;
  border-radius: 50%;
  background: rgba(47, 138, 52, 0.13);
  color: var(--q-green); font-size: 8.5px;
}
.akq-list b { color: var(--q-ink); font-weight: 600; }

/* ============================== tech grid ================================= */

/* --------------------------------------------------------------------------
   Hairline grid, not floating boxes.
   .
   The cards used to be separate bordered rectangles with gaps between them —
   twelve outlines fighting each other. They now butt together inside ONE
   rounded frame, separated by 1px rules that come from the container's own
   background showing through a 1px gap. Fewer lines, more air inside each
   cell, and it stays a single object at every width because the auto-fit
   columns reflow inside the frame instead of scattering.
   -------------------------------------------------------------------------- */
.akq-tech {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 264px), 1fr));
  gap: 1px;
  margin-top: clamp(28px, 3.4vw, 44px);
  background: var(--q-line);
  border: 1px solid var(--q-line);
  border-radius: 20px;
  overflow: hidden;
  counter-reset: akq;
}
/* Static — no lift, no shadow, no scroll reveal. */
.akq-item {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(22px, 2.1vw, 32px);
  background: #fff;
}
/* Ghost index: gives the grid a reading order and a bit of editorial rhythm
   without adding another box or another colour. */
.akq-item::before {
  counter-increment: akq;
  content: counter(akq, decimal-leading-zero);
  position: absolute; top: clamp(20px, 1.9vw, 28px); right: clamp(20px, 1.9vw, 28px);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em;
  color: rgba(15, 35, 64, 0.17);
}
.akq-item__ic {
  display: grid; place-items: center;
  width: 44px; height: 44px; margin-bottom: 16px;
  border-radius: 13px;
  background: rgba(47, 138, 52, 0.11);
  color: var(--q-green); font-size: 16px;
}
.akq-item h3 { font-size: 16.5px; font-weight: 600; }
.akq-item__tr { display: block; margin-top: 4px; font-size: 12.5px; color: var(--q-green); }
.akq-item p { margin-top: 10px; font-size: 13.5px; line-height: 1.6; }

/* pushed to the card foot so cards of unequal copy still line their links up */
.akq-item__link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: auto; padding-top: 16px;
  color: var(--q-ink); font-size: 13.5px; font-weight: 600; text-decoration: none;
  transition: color 0.28s;
}
.akq-item__link i { font-size: 10px; }
/* The colour change stays — it is the affordance that says the card is a link.
   The arrow no longer slides; that was motion, and motion is what came off. */
.akq-item:hover .akq-item__link { color: var(--q-green); }

/* The .akq-band CTA strip was removed from every page — the shared footer
   already carries the call to action, so a second one above it was redundant.
   Its rules are gone with it; tools/strip-akq-band.php did the markup. */

/* ========================================================================== */
/* THE THREE MACHINES  (.akm)                                                 */
/* -------------------------------------------------------------------------- */
/* Split heading over an aside, then three product cards. Each card's figure    */
/* carries a live COVERAGE PLAN drawn in SVG — a circle inscribed in a square   */
/* for the centre pivot, a bar tracking a full rectangle for the linear, three  */
/* linked circles for the multi-center. It is the one drawing that explains the */
/* whole product line at a glance, and it animates: the pivot arm sweeps, the   */
/* linear bar traverses, the multi-center machine hops between its bases.       */
/*                                                                              */
/* Prefixed .akm- and NOT .akp-, which already belongs to the preloader.        */
/* Sits inside .akq so it inherits the text-transform reset and the wrap width. */
/* ========================================================================== */

.akm__head { display: grid; gap: clamp(20px, 2.6vw, 44px); align-items: end; }
@media (min-width: 900px) {
  .akm__head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}

/* Two lines, always: the script line breaks by being a block, not by hoping a
   max-width lands the wrap in the right place. 17ch used to do that job and is
   gone — it would now wrap the second line as well.
   Sizes are a step down from the section default; the fairs head matches. */
.akm__title,
.akq__title--script {
  font-size: clamp(22px, 2.5vw, 34px); font-weight: 700; line-height: 1.12;
}
/* The 1.12 above never actually applies: every host block states its own
   heading line-height at (0,1,1) — .akq h2 is 1.18, .abt h2 is 1.14 — and
   beats a bare class. That was invisible while this head only lived inside
   .akq; dropped into .abt it rendered a line 1.4px tighter than the section
   it is meant to match. Restated at (0,1,1), after both, so the head keeps
   one leading wherever it goes. */
h2.akq__title--script { line-height: 1.18; }
/* The fallback is load-bearing. --q-green is declared on .akq, so this head
   used outside that block — the homepage about section is the first case —
   left var(--q-green) unresolved, which makes the declaration invalid at
   computed-value time and silently drops the em back to the inherited
   heading colour. .aksu-script below already carried the fallback; this rule
   did not. */
.akm__title em,
.akq__title--script em { font-style: normal; color: var(--q-green, #2f8a34); }

/* The script line, shared by the machines and fairs heads.
   Playball only ships a 400 weight; asking for 700 here gets a synthesised
   bold that smears the thin joins of the script. Lifted a little because a
   script face reads smaller than a sans at the same em. */
.aksu-script {
  display: block;
  font-family: "Playball", cursive;
  font-weight: 400;
  font-size: 1.16em;
  line-height: 1.25;
  /* .abt h2 tightens its headings to -0.02em, which a script face must not
     inherit — the joins collide. Stated so the line renders identically in
     every block it is dropped into. */
  letter-spacing: 0;
  color: var(--q-green, #2f8a34);
}

.akm__aside p { max-width: 46ch; font-size: clamp(13.5px, 1vw, 15px); line-height: 1.65; }

/* The aside CTA is the header capsule — same .ac-cta.aksu-pill markup, same
   rules — with the two colour tokens traded: it rests green and floods blue,
   where the header rests blue and floods green. Everything else (the badge
   disc, the arrow hand-off, the flood scale, the lift) is inherited, so the
   two buttons can never drift apart.

   The old bespoke .akm__cta pill is gone; its rules are these six lines.
   Selector is (0,3,0), same as .home-casting .ac-cta.aksu-pill, and sits
   later in the file, so it takes the tie. */
.ac-cta.aksu-pill.akm__cta-pill {
  --pill-bg: #2f8a34;
  --pill-hover: #214d93;
  margin-top: 22px;
}

/* -------------------------------- cards ---------------------------------- */

/* Explicit breakpoint, NOT auto-fit. With exactly three cards, auto-fit gives a
   2 + 1 orphan row through the whole 780–1050px range, which reads as a
   mistake. Three items only ever look deliberate at 3-across or 1-across. */
.akm__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 1.9vw, 28px);
  margin-top: clamp(30px, 3.8vw, 54px);
}
@media (min-width: 900px) {
  .akm__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.akm-card {
  display: flex; flex-direction: column;
  color: inherit; text-decoration: none;
}

.akm-card__media {
  position: relative; isolation: isolate; overflow: hidden;
  /* wide below the breakpoint, where one card owns the full measure and a
     portrait figure would be a wall of image */
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  /* plain neutral, and only ever seen while the photo loads */
  background: #eef1ee;
}
@media (min-width: 900px) {
  .akm-card__media { aspect-ratio: 4 / 3.3; }
}
/* NO tint and NO scrim. The photo is shown at full strength; the tag pills
   carry their own solid lime and white fills, so they stay legible without a
   wash over the whole image. */
.akm-card__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.75s var(--q-glide);
}
.akm-card:hover .akm-card__media img { transform: scale(1.07); }

.akm-card__go {
  position: absolute; z-index: 3; top: 16px; right: 16px;
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--q-ink); font-size: 12px;
  transition: background-color 0.35s, color 0.35s, transform 0.45s var(--q-glide);
}
.akm-card:hover .akm-card__go {
  background: var(--q-lime); color: #fff;
  transform: translate(3px, -3px);
}

.akm-card__tags {
  position: absolute; z-index: 3; left: 16px; right: 16px; bottom: 16px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.akm-card__tags b, .akm-card__tags i {
  padding: 7px 14px;
  border-radius: 999px;
  font-style: normal; font-weight: 600; font-size: 11.5px; white-space: nowrap;
}
.akm-card__tags b { background: var(--q-lime); color: #fff; }
.akm-card__tags i { background: rgba(255, 255, 255, 0.93); color: var(--q-ink); }
/* Just past the 3-across breakpoint a card is only ~250px wide and the longest
   tag pair wraps to a second line on one card but not the others, which reads
   as a bug. Tighten the pills until the columns are wide enough again. */
@media (min-width: 900px) and (max-width: 1099px) {
  .akm-card__tags { gap: 6px; }
  .akm-card__tags b, .akm-card__tags i { padding: 6px 11px; font-size: 10.5px; }
}

.akm-card__body { padding: 18px 4px 0; }
.akm-card__body h3 { font-size: clamp(17px, 1.5vw, 20px); font-weight: 700; }
.akm-card__body p { margin-top: 9px; font-size: 13.5px; line-height: 1.62; }
.akm-card:hover .akm-card__body h3 { color: var(--q-green); }
.akm-card__body h3 { transition: color 0.3s; }

/* The .akm-plan coverage diagram (the pivot/linear/multi-center schematic that
   sat over each photo, with its sweeping arm, travelling bar and hopping hub)
   was removed — markup, rules and the akmSweep/akmTravel/akmHop keyframes. The
   cards are now photo, badge, tags and text only. */

/* ========================================================================== */
/* INTERNATIONAL FAIRS  (.akx)                                                */
/* -------------------------------------------------------------------------- */
/* IDENTICAL to Elias's reference card, with the palette swapped to ours:      */
/*   - white card, large radius, soft shadow, even padding all round           */
/*   - photo inset with its own smaller radius                                 */
/*   - location pill ON the photo, top-right, uppercase, green                 */
/*   - title "Name | Year" — name and year both bold ink, separator light      */
/*   - full-width light-grey meta bar: location left, calendar + date right    */
/*   - dot pagination underneath, active dot green                             */
/* Do not reinterpret this block; the reference screenshot is the spec.        */
/* ========================================================================== */

.akx { margin-top: clamp(30px, 3.6vw, 52px); }

/* padding keeps card shadows inside the swiper clip; the negative margin
   cancels the offset so the row still aligns with the wrap */
.akx__swiper { overflow: hidden; padding: 12px; margin: -12px; }

/* ------------------------------- the card ---------------------------------
   REDESIGNED (second pass). The full-bleed photo card put the title over the
   busiest part of every photograph and hid the Tüyap logo in a dark scrim,
   where it read as a smudge. It also carried no information — the same four
   words four times, and nothing to click.

   Now: photograph on top with the year set into its bottom-left corner, then
   a white body carrying the place, the fair name, the dates and the link.
   Text sits on white, never on the picture. The whole card is one <a>.
   -------------------------------------------------------------------------- */

/* slides stretch so every card in the row ends level regardless of copy */
.akx .swiper-slide { height: auto; }

.akx-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e4e9e4;
  color: var(--q-ink);
  text-decoration: none;
  transition: transform 0.4s var(--q-glide), box-shadow 0.4s var(--q-glide),
              border-color 0.4s var(--q-glide);
}
.akx-card:hover,
.akx-card:focus-visible {
  transform: translateY(-6px);
  border-color: #cfe0d1;
  box-shadow: 0 18px 40px -22px rgba(9, 24, 12, 0.4);
  color: var(--q-ink);
}
.akx-card:focus-visible { outline: 2px solid var(--q-green); outline-offset: 3px; }

/* ---------------------------------- media --------------------------------- */

.akx-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #eef1ee;
}
.akx-card__media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.8s var(--q-glide);
}
.akx-card:hover .akx-card__media img { transform: scale(1.05); }

/* The year IS the tag. It used to be a white plate in the bottom-left corner
   with a separate green pill top-right saying "22nd edition" / "Announced" —
   two badges on one small photo, and the second said nothing a visitor could
   use. One pill now, same place on every card.

   --q-green (#2f8a34) puts white at 4.37:1, 3% under AA, so the pill takes a
   two-shade-darker green (#2c8231, 4.83:1) — indistinguishable beside the
   brand colour, and it actually passes. */
.akx-card__tag {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  padding: 7px 13px;
  border-radius: 999px;
  background: #2c8231;
  color: #fff;
  font-size: 13px; font-weight: 700; line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------------------------------- body ---------------------------------- */

.akx-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  flex: 1 1 auto;
  padding: 17px 18px 16px;
}
.akx-card__place,
.akx-card__date {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  color: #63756a;
}
.akx-card__place i, .akx-card__date i { color: var(--q-green); font-size: 12px; }

.akx .akx-card__name {
  margin: 1px 0 2px;
  font-size: clamp(16px, 1.2vw, 18.5px);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: var(--q-ink);
}

/* pushed to the foot so the link line agrees across cards of unequal height */
.akx-card__go {
  margin-top: auto;
  padding-top: 13px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600;
  letter-spacing: -0.01em;
  color: #2c8231;
}
.akx-card__go i { transition: transform 0.35s var(--q-glide); font-size: 11px; }
.akx-card:hover .akx-card__go i { transform: translateX(4px); }

/* The 2027 card was a flat blue panel while there was no honest photograph
   for an edition that has not happened. It now carries an aerial of the
   Tüyap Konya fair complex, so it is an ordinary card and needs no variant. */

/* ------------------------------- pagination ------------------------------- */

.akx__dots {
  display: flex; justify-content: center; gap: 8px;
  margin-top: clamp(22px, 2.4vw, 32px);
}
.akx__dots .swiper-pagination-bullet {
  width: 9px; height: 9px; border-radius: 50%;
  background: #d4dad4; opacity: 1; margin: 0 !important;
  transition: background-color 0.25s, transform 0.25s;
}
.akx__dots .swiper-pagination-bullet-active { background: var(--q-green); transform: scale(1.2); }
/* watchOverflow locks the slider once all four cards fit; swiper's own
   display:none loses to .akx__dots because aksu.css loads later, so say it
   here or a dead dot row survives at ≥1360px */
.akx__dots.swiper-pagination-lock { display: none; }

/* ------------------------------- no-JS row ------------------------------- */
.akx--nojs .akx__swiper { overflow-x: auto; scroll-snap-type: x mandatory; }
.akx--nojs .swiper-wrapper { display: flex; gap: 22px; }
.akx--nojs .swiper-slide { flex: 0 0 min(78%, 320px); scroll-snap-align: start; }
.akx--nojs .akx__dots { display: none; }

/* ------------------------- the three departments ------------------------- */
/* Who to talk to is the reason this page exists, so it runs full width above
   the address rather than stacking in a narrow column beside the map. Three
   equal cards: no department is the "main" one. */

.akc-reach { margin-bottom: clamp(18px, 2vw, 26px); }
.akc-reach__title {
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.akc-reach__title em { font-style: normal; color: var(--akc-green); }
.akc-reach__lede {
  margin-top: 8px;
  max-width: 62ch;
  font-size: clamp(14px, 1.05vw, 15.5px);
  line-height: 1.65;
}

.akc-depts {
  display: grid;
  gap: clamp(12px, 1.4vw, 18px);
  margin-bottom: clamp(26px, 3vw, 44px);
  /* auto-fit rather than a fixed three: a fourth department can be added in the
     admin panel without this file having to change */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 258px), 1fr));
}

.akc-dept {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: clamp(18px, 1.8vw, 24px);
  border: 1px solid var(--akc-line);
  border-radius: 18px;
  background: #fff;
  transition: transform 0.35s var(--akc-glide), box-shadow 0.35s, border-color 0.35s;
}
.akc-dept:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: 0 22px 44px -26px rgba(15, 35, 64, 0.42);
}
.akc-dept__ic {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: rgba(47, 138, 52, 0.11);
  color: var(--akc-green);
  font-size: 17px;
}
/* .akc h3 is 26px from the template; a card label is not a section heading */
.akc .akc-dept__name {
  font-size: clamp(16px, 1.2vw, 18px);
  font-weight: 600;
  line-height: 1.3;
}
.akc-dept__lines { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.akc-dept__lines li {
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
}
.akc-dept__lines i { color: var(--akc-green); font-size: 13px; justify-self: center; }
.akc-dept__lines a {
  color: var(--akc-head);
  text-decoration: none;
  /* an e-mail address must be allowed to break rather than widen the card */
  overflow-wrap: anywhere;
  transition: color 0.25s;
}
.akc-dept__lines a:hover { color: var(--akc-green); text-decoration: underline; }

/* ---------------------------- address + map ------------------------------ */
/* The address answers "where", so it sits with the map.

   Left to its natural height the card came out 181px against a 560px map and
   left 379px of dead column beside it — measured, not guessed. It stretches to
   the map instead and centres its own content, so the row reads as two
   deliberate blocks of equal height rather than a small card adrift.

   Only from 1000px up: below that the grid is a single column and stretching
   would inflate the card to nothing but air. */
@media (min-width: 1000px) {
  .akc-grid--place > .akc-info { align-content: stretch; }
  .akc-card--addr { align-content: center; }
}
.akc-card--addr address {
  margin-top: 6px;
  font-size: 14px; font-style: normal; line-height: 1.55;
  color: var(--akc-head);
}
.akc-card__go {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 13px;
  color: var(--akc-green); font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.akc-card__go:hover { text-decoration: underline; }
/* ----------------------------- motion opt-out ---------------------------- */

@media (prefers-reduced-motion: reduce) {
  .akq *, .akq *::before, .akq *::after { transition-duration: 0.001ms !important; }
}

/* ==========================================================================
   AKSU-CONTACT
   Contact page (.akc)
   was: assets/css/aksu-contact.css
   ========================================================================== */

/* ==========================================================================
   AksuPivot — Contact page
   --------------------------------------------------------------------------
   The page previously used .ab-hero / .ed-section / .ct-* classes from a v1
   stylesheet that stopped being linked, so every block rendered unstyled. This
   replaces that layer entirely, in the same design language as the rest of the
   site (Poppins hero, Outfit body, the green/navy palette, intrinsic grids).

   Sections
     .akc-head   navy masthead: the pivot-track breadcrumb, title, quick actions
     .akc-body   contact cards + RFQ form + map

   The breadcrumb is the centrepiece: the trail between crumbs is drawn as an
   irrigation line with water running along it, and the current page sits under
   a pivot hub with expanding rings. It is a real <nav><ol> with aria-current,
   so the decoration costs nothing in semantics.
   ========================================================================== */

.akc {
  --akc-navy:  #122b52;
  --akc-ink:   #0d2246;
  --akc-blue:  #214d93;
  --akc-green: #2f8a34;
  --akc-lime:  #2f8a34;
  --akc-paper: #f6f8f6;
  --akc-line:  #e3e9e3;
  --akc-body:  #62727e;
  --akc-head:  #0f2340;
  --akc-glide: cubic-bezier(0.16, 1, 0.3, 1);

  font-family: "Outfit", sans-serif;
  color: var(--akc-body);
  line-height: 1.7;
}
.akc *, .akc *::before, .akc *::after { box-sizing: border-box; }
.akc h1, .akc h2, .akc h3 {
  margin: 0; color: var(--akc-head);
  line-height: 1.15; letter-spacing: -0.02em;
}
.akc p { margin: 0; }

.akc__wrap {
  width: var(--aksu-wrap, min(100% - 2 * clamp(16px, 6.5vw, 90px), 1320px));
  margin-inline: auto;
}

/* The page masthead now comes from the universal .akb breadcrumb band in
   assets/css/aksu-breadcrumb.css. The former .akc-head / .akc-crumb /
   .akc-quick rules were removed with it rather than left as dead weight. */

/* =============================== body ==================================== */

.akc-body {
  padding: clamp(48px, 6vw, 92px) 0;
  background: var(--akc-paper);
}

.akc-grid {
  display: grid;
  gap: clamp(22px, 2.6vw, 34px);
  /* stretch, not start — the map fills the full height of the cards beside it
     instead of sitting as a short block at the top of its column */
  align-items: stretch;
}
@media (min-width: 1000px) {
  .akc-grid { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
}

/* ----------------------------- info cards -------------------------------- */

.akc-info { display: grid; gap: 12px; }

.akc-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 15px;
  padding: 18px 20px;
  border: 1px solid var(--akc-line);
  border-radius: 16px;
  background: #fff;
  transition: transform 0.35s var(--akc-glide), box-shadow 0.35s, border-color 0.35s;
}
.akc-card:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: 0 20px 40px -26px rgba(15, 35, 64, 0.4);
}
.akc-card__ic {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 13px;
  background: rgba(47, 138, 52, 0.11);
  color: var(--akc-green);
  font-size: 16px;
}
/* These labels were <h3>; they are <h2> now because the page went h1 -> h3 and
   skipped a level. The rule has to name both, or the template's 26px h2 takes
   over and a card label sets like a section heading. */
.akc-card h3,
.akc-card h2 { font-size: 14px; font-weight: 600; line-height: 1.4; }
.akc-card p  { margin-top: 5px; font-size: 14px; line-height: 1.55; color: var(--akc-head); }
.akc-card p a { color: inherit; text-decoration: none; }
.akc-card p a:hover { color: var(--akc-green); }
.akc-card small { display: block; margin-top: 4px; font-size: 12.5px; color: #93a1ab; }

/* -------------------------------- form ----------------------------------- */

.akc-form {
  padding: clamp(22px, 2.6vw, 34px);
  border: 1px solid var(--akc-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 30px 60px -46px rgba(15, 35, 64, 0.42);
}
.akc-form__head {
  display: flex; align-items: center; gap: 13px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--akc-line);
}
.akc-form__head .ic {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: linear-gradient(140deg, var(--akc-green), var(--akc-lime));
  color: #fff; font-size: 15px;
}
.akc-form__head h2 { font-size: 19px; font-weight: 600; }
.akc-form__intro { margin: 15px 0 20px; font-size: 13.5px; line-height: 1.6; }

.akc-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 14px;
}
.akc-field { display: grid; gap: 6px; margin-bottom: 14px; }
.akc-field > label {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--akc-head);
}

.akc-field input[type="text"],
.akc-field input[type="email"],
.akc-field input[type="tel"],
.akc-field input[type="number"],
.akc-field select,
.akc-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--akc-line);
  border-radius: 11px;
  background: var(--akc-paper);
  color: var(--akc-head);
  font: 400 14.5px/1.4 "Outfit", sans-serif;
  transition: border-color 0.25s, background-color 0.25s, box-shadow 0.25s;
}
.akc-field textarea { min-height: 118px; resize: vertical; line-height: 1.6; }
.akc-field input::placeholder,
.akc-field textarea::placeholder { color: #a6b2bb; }
.akc-field input:hover,
.akc-field select:hover,
.akc-field textarea:hover { border-color: #c9d4c9; }
.akc-field input:focus,
.akc-field select:focus,
.akc-field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--akc-green);
  box-shadow: 0 0 0 3px rgba(47, 138, 52, 0.15);
}

/* native arrow removed and redrawn so the control matches across browsers */
.akc-field select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 40px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232f8a34'%3E%3Cpath d='M8 11.2 2.4 5.6 3.8 4.2 8 8.4l4.2-4.2 1.4 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
}

/* file drop zone */
.akc-file {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 16px;
  border: 1.5px dashed #c8d4c8;
  border-radius: 12px;
  background: var(--akc-paper);
  cursor: pointer;
  font-size: 13.5px;
  transition: border-color 0.25s, background-color 0.25s;
}
.akc-file:hover { border-color: var(--akc-green); background: rgba(47, 138, 52, 0.05); }
.akc-file i { color: var(--akc-green); font-size: 15px; }
.akc-file input[type="file"] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.akc-hint { font-size: 12px; color: #93a1ab; }

.akc-submit {
  display: inline-flex; align-items: center; gap: 11px;
  margin-top: 4px;
  padding: 15px 30px;
  border: 0; border-radius: 999px;
  background: var(--akc-green);
  color: #fff;
  font: 600 15px/1.2 "Outfit", sans-serif;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s var(--akc-glide);
}
.akc-submit i { font-size: 12px; transition: transform 0.3s var(--akc-glide); }
.akc-submit:hover { background: #2f8a34; transform: translateY(-2px); }
.akc-submit:hover i { transform: translateX(3px); }

.akc-note {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px;
  font-size: 12.5px; color: #93a1ab;
}
.akc-note i { color: var(--akc-green); }

/* --------------------------------- map ----------------------------------- */

/* The map now sits inside .akc-grid, in the column the form used to hold. */
.akc-map {
  position: relative;
  display: flex;                       /* lets the iframe grow to the row height */
  border: 1px solid var(--akc-line);
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  /* Floor for the stacked layout, where there are no cards beside it to
     match; above 1000px align-items: stretch takes over and it grows. */
  min-height: clamp(320px, 62vw, 560px);
}
.akc-map iframe {
  display: block;
  flex: 1;
  width: 100%;
  border: 0;
  filter: saturate(0.92);
}

/* ------------------------- the three departments ------------------------- */
/* Who to talk to is the reason this page exists, so it runs full width above
   the address rather than stacking in a narrow column beside the map. Three
   equal cards: no department is the "main" one. */

.akc-reach { margin-bottom: clamp(18px, 2vw, 26px); }
.akc-reach__title {
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.akc-reach__title em { font-style: normal; color: var(--akc-green); }
.akc-reach__lede {
  margin-top: 8px;
  max-width: 62ch;
  font-size: clamp(14px, 1.05vw, 15.5px);
  line-height: 1.65;
}

.akc-depts {
  display: grid;
  gap: clamp(12px, 1.4vw, 18px);
  margin-bottom: clamp(26px, 3vw, 44px);
  /* auto-fit rather than a fixed three: a fourth department can be added in the
     admin panel without this file having to change */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 258px), 1fr));
}

.akc-dept {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: clamp(18px, 1.8vw, 24px);
  border: 1px solid var(--akc-line);
  border-radius: 18px;
  background: #fff;
  transition: transform 0.35s var(--akc-glide), box-shadow 0.35s, border-color 0.35s;
}
.akc-dept:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: 0 22px 44px -26px rgba(15, 35, 64, 0.42);
}
.akc-dept__ic {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: rgba(47, 138, 52, 0.11);
  color: var(--akc-green);
  font-size: 17px;
}
/* .akc h3 is 26px from the template; a card label is not a section heading */
.akc .akc-dept__name {
  font-size: clamp(16px, 1.2vw, 18px);
  font-weight: 600;
  line-height: 1.3;
}
.akc-dept__lines { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.akc-dept__lines li {
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
}
.akc-dept__lines i { color: var(--akc-green); font-size: 13px; justify-self: center; }
.akc-dept__lines a {
  color: var(--akc-head);
  text-decoration: none;
  /* an e-mail address must be allowed to break rather than widen the card */
  overflow-wrap: anywhere;
  transition: color 0.25s;
}
.akc-dept__lines a:hover { color: var(--akc-green); text-decoration: underline; }

/* ---------------------------- address + map ------------------------------ */
/* The address answers "where", so it sits with the map.

   Left to its natural height the card came out 181px against a 560px map and
   left 379px of dead column beside it — measured, not guessed. It stretches to
   the map instead and centres its own content, so the row reads as two
   deliberate blocks of equal height rather than a small card adrift.

   Only from 1000px up: below that the grid is a single column and stretching
   would inflate the card to nothing but air. */
@media (min-width: 1000px) {
  .akc-grid--place > .akc-info { align-content: stretch; }
  .akc-card--addr { align-content: center; }
}
.akc-card--addr address {
  margin-top: 6px;
  font-size: 14px; font-style: normal; line-height: 1.55;
  color: var(--akc-head);
}
.akc-card__go {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 13px;
  color: var(--akc-green); font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.akc-card__go:hover { text-decoration: underline; }
/* ----------------------------- motion opt-out ---------------------------- */

@media (prefers-reduced-motion: reduce) {
  .akc *, .akc *::before, .akc *::after {
    animation: none !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   AKSU-PRELOADER
   Preloader (index only)
   was: assets/css/aksu-preloader.css
   ========================================================================== */

/* ==========================================================================
   AksuPivot — "Pivot Sweep" preloader
   --------------------------------------------------------------------------
   The logo is rebuilt as five stacked inline SVG layers that share the
   original viewBox, so every piece stays in exact registration while
   animating independently:

     .akp-l1  tower + wheels    rises first, wheels pop in
     .akp-l2  the three arcs    sweep in clockwise around the pivot centre
     .akp-l3  leaf              grows from its base
     .akp-l4  AKSU letterforms  surface
     .akp-l5  wordmark          22 glyphs ripple in, 26 ms apart

   Timeline (seconds after .go):
     0.15 tower · 0.50 wheels + arcs · 1.20 leaf
     · 1.32 letters · 1.50 wordmark · 2.15 settle
     · exit when the page has loaded (min 2.6 s, hard cap 4.2 s — script)

   Exit: the whole overlay fades out over 0.62 s with a 1.02 scale. The
   script's removal timer is set past it.

   Repeat visits in the same tab skip the show (html.akp-skip is set before
   first paint), prefers-reduced-motion disables it entirely, and <noscript>
   hides it so the page can never be trapped behind the overlay.
   ========================================================================== */

#aksu-preloader{position:fixed;inset:0;z-index:9999999}
/* markup ships hidden so nothing unstyled ever flashes; this sheet
   resurrects it (id outranks the UA [hidden] rule) and the script takes over */
#aksu-preloader[hidden]{display:block}
.akp-skip #aksu-preloader{display:none!important}
#aksu-preloader.done{pointer-events:none}

.akp-overlay{
  position:absolute;inset:0;display:grid;place-items:center;
  background:radial-gradient(62% 62% at 50% 42%,#ffffff 0%,#f7f9fc 58%,#edf1f7 100%);
  will-change:opacity;
}

/* --- exit ---------------------------------------------------------------- */
/* A straight fade. The whole overlay — background, logo and progress bar —
   dissolves together, with a barely-there 1.02 scale so it reads as receding
   rather than as a flat cross-dissolve.
   .
   Opacity is the cheapest thing to animate and needs no geometry, so there is
   nothing here that can slice the logo or depend on clip-path support. The
   logo carries no separate exit any more; it fades with everything else. */
#aksu-preloader.done .akp-overlay{
  animation:akpFadeOut .62s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes akpFadeOut{
  from{opacity:1;transform:scale(1)}
  to  {opacity:0;transform:scale(1.02)}
}

.akp-stage{width:clamp(250px,38vw,430px)}
#aksu-preloader.go .akp-stage{animation:akpSettle .42s ease 2.15s}

.akp-logo{position:relative;width:100%;aspect-ratio:497.19/216.21}
.akp-logo svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}

/* --- irrigation ripples behind the mark --------------------------------- */
.akp-ripples i{
  position:absolute;left:21%;top:46%;width:54%;aspect-ratio:1/1;
  border:1.5px solid rgba(33,77,147,.15);border-radius:50%;
  transform:translate(-50%,-50%) scale(.15);opacity:0;
}
#aksu-preloader.go .akp-ripples i{animation:akpRipple 1.9s ease-out .9s infinite}
#aksu-preloader.go .akp-ripples i:nth-child(2){animation-delay:1.85s}

/* --- 1. tower + wheels --------------------------------------------------- */
.akp-tower{opacity:0;transform:translateY(26px)}
#aksu-preloader.go .akp-tower{animation:akpRise .6s cubic-bezier(.34,1.45,.64,1) .15s forwards}
.akp-wheels circle{transform-box:fill-box;transform-origin:center;transform:scale(0);opacity:0}
#aksu-preloader.go .akp-wheels circle{animation:akpPop .5s cubic-bezier(.3,1.6,.5,1) forwards}
#aksu-preloader.go .akp-wheels circle:nth-of-type(1){animation-delay:.5s}
#aksu-preloader.go .akp-wheels circle:nth-of-type(2){animation-delay:.62s}

/* --- 2. arcs sweep in clockwise around the pivot centre ------------------ */
/* transform-box:view-box makes the origin resolve in viewBox units, so all
   three arcs rotate around the mark's true centre (104, 96), not their own
   bounding boxes. */
.akp-l2 path{
  opacity:0;transform-box:view-box;transform-origin:104px 96px;
  transform:rotate(-14deg) scale(.94);
}
#aksu-preloader.go .akp-l2 path{animation:akpArc .55s cubic-bezier(.3,1.25,.5,1) forwards}
#aksu-preloader.go .akp-l2 path:nth-of-type(1){animation-delay:.5s}
#aksu-preloader.go .akp-l2 path:nth-of-type(2){animation-delay:.7s}
#aksu-preloader.go .akp-l2 path:nth-of-type(3){animation-delay:.9s}

/* --- 3. leaf -------------------------------------------------------------- */
.akp-leafg{opacity:0;transform-box:fill-box;transform-origin:15% 92%;transform:scale(.15) rotate(-14deg)}
#aksu-preloader.go .akp-leafg{animation:akpLeaf .6s cubic-bezier(.3,1.5,.5,1) 1.2s forwards}

/* --- 4. AKSU letterforms -------------------------------------------------- */
.akp-l4 path{opacity:0;transform:translateY(8px)}
#aksu-preloader.go .akp-l4 path{animation:akpUp .45s cubic-bezier(.4,0,.2,1) forwards}
#aksu-preloader.go .akp-l4 path:nth-of-type(1){animation-delay:1.32s}
#aksu-preloader.go .akp-l4 path:nth-of-type(2){animation-delay:1.38s}
#aksu-preloader.go .akp-l4 path:nth-of-type(3){animation-delay:1.44s}
#aksu-preloader.go .akp-l4 path:nth-of-type(4){animation-delay:1.5s}

/* --- 5. wordmark ripple --------------------------------------------------- */
/* each path carries style="--i:n" from the builder, 26 ms apart */
.akp-l5 path{opacity:0;transform:translateY(9px)}
#aksu-preloader.go .akp-l5 path{
  animation:akpUp .45s cubic-bezier(.4,0,.2,1) calc(1.5s + var(--i,0)*.026s) forwards;
}

/* --- progress bar ---------------------------------------------------------- */
.akp-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(33,77,147,.08);overflow:hidden}
.akp-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#214d93 0%,#3a7ec2 45%,#2f8a34 100%)}
#aksu-preloader.go .akp-bar i{animation:akpProg 2.45s cubic-bezier(.25,.6,.35,1) .12s forwards}

/* --- keyframes -------------------------------------------------------------- */
@keyframes akpRise{to{opacity:1;transform:translateY(0)}}
@keyframes akpPop{0%{opacity:1}60%{opacity:1;transform:scale(1.18)}100%{opacity:1;transform:scale(1)}}
@keyframes akpArc{to{opacity:1;transform:rotate(0) scale(1)}}
@keyframes akpLeaf{to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes akpUp{to{opacity:1;transform:translateY(0)}}
@keyframes akpProg{to{width:100%}}
@keyframes akpRipple{
  0%{transform:translate(-50%,-50%) scale(.15);opacity:0}
  18%{opacity:.5}
  100%{transform:translate(-50%,-50%) scale(1.05);opacity:0}
}
@keyframes akpSettle{45%{transform:scale(1.018)}}

@media (prefers-reduced-motion:reduce){#aksu-preloader{display:none!important}}


/* ========================================================================== */
/* PRODUCT HERO  (.akv)                                                       */
/* -------------------------------------------------------------------------- */
/* The three pivot product pages open with this instead of the generic .akb    */
/* band: a split hero on the navy field — breadcrumb, H1 with the keyword      */
/* phrase, lede, two actions and three stat chips on the left, the machine     */
/* photo in a glass frame on the right. Below 992px it stacks, photo first     */
/* hidden behind the copy?  No — copy first, photo after, chips wrap.          */
/*                                                                             */
/* Self-contained tokens: the --q-* palette lives on .akq and does not reach   */
/* here. text-transform is reset because main.css Title-Cases every <p>.       */
/* ========================================================================== */

.akv {
  --akv-navy: #122b52;
  --akv-ink:  #0f2340;
  --akv-green:#2f8a34;
  --akv-line: rgba(255, 255, 255, 0.16);
  --akv-glide: cubic-bezier(0.16, 1, 0.3, 1);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-bottom: clamp(44px, 5vw, 84px);
  background:
    radial-gradient(85% 120% at 92% -10%, rgba(47, 138, 52, 0.28) 0%, transparent 55%),
    linear-gradient(152deg, var(--akv-navy) 0%, var(--akv-ink) 100%);
  font-family: "Outfit", sans-serif;
  color: rgba(255, 255, 255, 0.78);
}
.akv, .akv * { text-transform: none; }

/* clears the sticky header, same mechanism as the .akb band */
#smooth-content > .akv { padding-top: calc(clamp(30px, 4vw, 58px) + var(--ac-header-h, 113px)); }

/* faint contour lines, echoing the footer's field-plan texture */
.akv::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: repeating-linear-gradient(115deg,
    rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 36px);
}

.akv__wrap {
  width: var(--aksu-wrap, min(100% - 2 * clamp(16px, 6.5vw, 90px), 1320px));
  margin-inline: auto;
}

/* ------------------------------ breadcrumb -------------------------------- */

.akv__crumb { margin-bottom: clamp(22px, 2.6vw, 36px); font-size: 12.5px; }
.akv__crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 0; padding: 0; list-style: none; }
.akv__crumb a { color: rgba(255, 255, 255, 0.6); text-decoration: none; transition: color 0.25s; }
.akv__crumb a:hover { color: #fff; }
.akv__crumb li[aria-current] { color: #fff; font-weight: 600; }
.akv__crumb li + li::before { content: "\203A"; margin-right: 9px; color: rgba(255, 255, 255, 0.35); }

/* --------------------------------- grid ----------------------------------- */

.akv__grid { display: grid; gap: clamp(28px, 3.6vw, 60px); align-items: center; }
@media (min-width: 992px) {
  .akv__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}

.akv__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: #6fbf6a;
}
.akv__eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; }

.akv h1 {
  margin: 14px 0 0;
  color: #fff;
  font-size: clamp(28px, 3.6vw, 50px);
  font-weight: 700; line-height: 1.1; letter-spacing: -0.02em;
}
.akv h1 em { font-style: normal; color: #6fbf6a; }

.akv__lede { max-width: 54ch; margin: 18px 0 0; font-size: clamp(13.5px, 1.02vw, 15.5px); line-height: 1.7; }

/* -------------------------------- actions --------------------------------- */

.akv__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 2.6vw, 34px); }
.akv__btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.35s var(--akv-glide);
}
.akv__btn i { font-size: 11px; }
.akv__btn--solid { background: var(--akv-green); color: #fff; }
.akv__btn--solid:hover { background: #256e29; color: #fff; transform: translateY(-2px); }
.akv__btn--ghost { border: 1px solid var(--akv-line); color: #fff; }
.akv__btn--ghost:hover { border-color: #fff; color: #fff; transform: translateY(-2px); }

/* ------------------------------- stat chips -------------------------------- */

.akv__stats {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: clamp(26px, 3vw, 40px) 0 0; padding: 0; list-style: none;
}
.akv__stats li {
  padding: 12px 18px;
  border: 1px solid var(--akv-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.akv__stats b { display: block; color: #fff; font-size: clamp(17px, 1.4vw, 21px); font-weight: 700; line-height: 1.1; }
.akv__stats b i { font-style: normal; color: #6fbf6a; }
.akv__stats span { display: block; margin-top: 4px; font-size: 11.5px; color: rgba(255, 255, 255, 0.62); }

/* --------------------------------- media ----------------------------------- */

.akv__media {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--akv-line);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.6),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
  aspect-ratio: 4 / 3;
}
.akv__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (prefers-reduced-motion: reduce) {
  .akv * { transition-duration: 0.001ms !important; }
}


/* ===========================================================================
   BLOCK: aksu-home-flat — one white page, hairline-ruled
   ---------------------------------------------------------------------------
   The homepage had three different grounds: white (machines, about,
   certification) and paper #f6f8f6 (smart control, fairs), with a soft green
   wash over the about section. Elias wants every band between the hero and the
   footer on the same white, separated by a rule instead of a tint.

   Scoped to .home-casting so the inner pages keep their alternating grounds.
   The hero (.hero-lock) and the footer (.akf, and its .akf__cta band) are
   untouched — they are the two coloured ends the white middle sits between.

   Nothing here paints white over a coloured section: it removes the tints, so
   the sections show the body's own #fff. Two cards were relying on the paper
   ground for their edge and get a hairline instead, or they vanish.
   =========================================================================== */

/* --- smart control: paper -> white (the token feeds the badge ring too) --- */
.home-casting .sft { --sft-bg: #ffffff; }
/* was a white tile on paper; on white it needs its own edge */
.home-casting .sft-note { border: 1px solid var(--sft-line); }

/* --- about: drop the green/blue radial wash ------------------------------ */
.home-casting .abt::before { display: none; }

/* --- fairs: the .akq-section--paper modifier is off the markup, and the
       cards lose the contrast that carried them, so hairline them too ----- */
/* the fairs card is a full-bleed photo now; a hairline round it just fights
   the rounded image edge */

/* --------------------------- section separators ---------------------------
   A rule between consecutive bands. `section ~ section` is deliberate: the
   hero sits in a .hero-lock div and the footer is a <footer>, so neither is
   ever matched, and #machines — the first section — has no section before it
   and stays clean. `+` is wrong here: a stray <script> sits between the smart
   control and certification sections and would swallow that separator.
   Full-bleed hairline, absolute at top:0 rather than border-top so it does not
   have to fight the sections' own borders or padding.

   ::after, not ::before: .abt::before is already the wash this block switches
   off, and one element only has one of each. */
.home-casting #smooth-content > section ~ section { position: relative; }
.home-casting #smooth-content > section ~ section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #e2e7e2;
  pointer-events: none;
}


/* ===========================================================================
   BLOCK: akz — spare-parts "parts book"
   ---------------------------------------------------------------------------
   One grid of every part, with the five groups as a filter bar above it.
   The grid keeps the shelf order — drive, control, well, sprinklers, span —
   so similar parts sit together even unfiltered. A tile IS the enquiry link;
   the only JS is the filter's hidden-toggle.

   The hairline-grid frame (1px line through a 1px gap) is the same frame
   .akq-certs and the fair cards use, deliberately: one card language.
   =========================================================================== */

.akz {
  --z-g:    #2f8a34;
  --z-blue: #214d93;
  --z-ink:  #0f2340;
  --z-body: #62727e;
  --z-line: #e3e9e3;
  padding: clamp(48px, 6vw, 92px) 0;
  background: #fff;
  font-family: "Outfit", sans-serif;
  color: var(--z-body);
  line-height: 1.7;
}
.akz *, .akz *::before, .akz *::after { box-sizing: border-box; text-transform: none; }
.akz h2, .akz h3 { margin: 0; color: var(--z-ink); letter-spacing: -0.02em; line-height: 1.14; }
.akz p { margin: 0; }

.akz__wrap {
  width: var(--aksu-wrap, min(100% - 2 * clamp(16px, 6.5vw, 90px), 1320px));
  margin-inline: auto;
}

.akz__head { display: grid; gap: clamp(18px, 2.4vw, 44px); align-items: end; }
@media (min-width: 900px) {
  .akz__head { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}
.akz__title { font-size: clamp(22px, 2.5vw, 34px); font-weight: 700; }
.akz__title .aksu-script { color: var(--z-g); }
.akz__title em { font-style: normal; color: var(--z-blue); }
.akz__lede { font-size: clamp(13.5px, 1vw, 15px); line-height: 1.68; }

/* ------------------------------- the filter -------------------------------
   Five groups and an "all", as quiet pills. The active one fills green; the
   count rides along in each pill. aria-pressed is the state the JS toggles. */
.akz__filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: clamp(26px, 3.2vw, 44px) 0 clamp(18px, 2.2vw, 28px);
  padding: 0;
  list-style: none;
}
.akz__filter button {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--z-line);
  border-radius: 999px;
  background: #fff;
  color: var(--z-body);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
.akz__filter button small { font-size: 11px; font-weight: 600; color: #9aa7a0; }
.akz__filter button:hover { border-color: var(--z-g); color: var(--z-ink); }
.akz__filter button[aria-pressed="true"] {
  background: var(--z-g);
  border-color: var(--z-g);
  color: #fff;
}
.akz__filter button[aria-pressed="true"] small { color: rgba(255, 255, 255, 0.75); }

.akz-grid {
  display: grid;
  /* five to a row, stepping down whole: 5 / 2 / 2 — never an orphan column */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--z-line);
  border: 1px solid var(--z-line);
  border-radius: 20px;
  overflow: hidden;
}
/* [hidden] loses to `display: flex` on the tile without this */
.akz-tile[hidden] { display: none; }
/* below ~900px four tracks squeeze the tiles under 200px; two is honest */
@media (max-width: 899px) {
  .akz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.akz-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 1.6vw, 22px);
  background: #fff;
  color: var(--z-body);
  text-decoration: none;
}
.akz-tile:hover { color: var(--z-body); }
.akz-tile__media { display: grid; place-items: center; aspect-ratio: 1; margin-bottom: 14px; }
.akz-tile__media img {
  /* was 86% — half the whitespace around the photo */
  max-width: 93%;
  max-height: 93%;
  object-fit: contain;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.akz-tile h3 { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.akz-tile__fit { margin-top: 4px; font-size: 12px; color: #9aa7a0; }
.akz-tile__go {
  position: absolute;
  top: clamp(12px, 1.2vw, 16px);
  right: clamp(12px, 1.2vw, 16px);
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--z-line);
  color: #9aa7a0;
  font-size: 10.5px;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.3s;
}
.akz-tile:hover .akz-tile__go { background: var(--z-g); border-color: var(--z-g); color: #fff; transform: rotate(45deg); }
.akz-tile:hover img { transform: scale(1.06); }
.akz-tile:focus-visible { outline: 2px solid var(--z-g); outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
  .akz * { transition-duration: 0.01ms !important; }
}


/* ===========================================================================
   BLOCK: akw — pivot-system four-step flow
   ---------------------------------------------------------------------------
   The layout-request page component: the four field answers as a numbered
   stepper riding a single hairline. The disc masks the line with a white
   ring — the same cut-out trick .sft-media__badge uses. Everything else on
   the page reuses .akq machinery (head system, certs grid, tech grid).
   =========================================================================== */

.akw-steps {
  counter-reset: akw;
  display: grid;
  /* 230px floor resolves to exactly 4 tracks at the 1254px wrap — 210px left
     a collapsed 5th track and its phantom trailing gap */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(30px, 3.4vw, 48px) clamp(20px, 2.4vw, 36px);
  margin: clamp(44px, 5vw, 68px) 0 0;
  padding: 0;
  list-style: none;
  grid-column: 1 / -1;
}
.akw-steps li {
  counter-increment: akw;
  position: relative;
  border-top: 1px solid var(--q-line, #e3e9e3);
  padding-top: 30px;
}
.akw-steps li::before {
  content: counter(akw, decimal-leading-zero);
  position: absolute;
  top: -19px;
  left: 0;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--q-green, #2f8a34);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  /* white ring cuts the disc out of the hairline it sits on */
  box-shadow: 0 0 0 6px #fff;
}
.akw-steps h3 { font-size: 16px; font-weight: 700; }
.akw-steps .akw-tr {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: #9aa7a0;
}
.akw-steps p { margin-top: 8px; font-size: 13px; line-height: 1.6; }


/* ===========================================================================
   BLOCK: aky — spare-part product detail (product.php)
   ---------------------------------------------------------------------------
   Photo in a hairline frame on the left, the part's story on the right:
   script/sans head, the spec prose, a facts list in hairline rows, the green
   section pill. Related parts below reuse the .akz tile grid wholesale —
   .akz-grid--loose only relaxes the fixed five-track count to fit 5 items.
   =========================================================================== */

.aky {
  --y-g:    #2f8a34;
  --y-blue: #214d93;
  --y-ink:  #0f2340;
  --y-body: #62727e;
  --y-line: #e3e9e3;
  padding: clamp(48px, 6vw, 92px) 0;
  background: #fff;
  font-family: "Outfit", sans-serif;
  color: var(--y-body);
  line-height: 1.7;
}
.aky *, .aky *::before, .aky *::after { box-sizing: border-box; text-transform: none; }
.aky h2, .aky h3 { margin: 0; color: var(--y-ink); letter-spacing: -0.02em; line-height: 1.14; }
.aky p { margin: 0; }

.aky__wrap {
  width: var(--aksu-wrap, min(100% - 2 * clamp(16px, 6.5vw, 90px), 1320px));
  margin-inline: auto;
}

.aky__grid {
  display: grid;
  gap: clamp(26px, 3.4vw, 60px);
  align-items: start;
}
@media (min-width: 900px) {
  .aky__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}

.aky__media {
  display: grid;
  place-items: center;
  margin: 0;
  aspect-ratio: 1;
  border: 1px solid var(--y-line);
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
}
.aky__media img { max-width: 88%; max-height: 88%; object-fit: contain; }

/* category chip above the title: solid green pill, white dot, white label */
.aky__cat {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  padding: 8px 17px 8px 12px;
  border-radius: 999px;
  background: var(--y-g);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.aky__cat::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
}
/* .aky h2 zeroes margins at (0,1,1); this must outrank it, not tie with it */
.aky h2.aky__title {
  font-size: clamp(18px, 1.8vw, 25px);
  font-weight: 700;
  /* air between the head and the spec below it */
  margin-bottom: clamp(12px, 1.4vw, 22px);
}
.aky__title em { font-style: normal; color: var(--y-g); }

.aky__spec { margin-top: 16px; font-size: clamp(14px, 1.05vw, 15.5px); line-height: 1.72; max-width: 58ch; }

/* catalogue feature points — same tick language as the about section's list */
.aky__points { margin: 18px 0 0; padding: 0; list-style: none; max-width: 60ch; }
.aky__points li { display: flex; gap: 12px; padding: 9px 0; }
.aky__points li + li { border-top: 1px solid var(--y-line); }
.aky__points i {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background: rgba(47, 138, 52, 0.1);
  color: var(--y-g);
  font-size: 9px;
}
.aky__points b { color: var(--y-ink); font-weight: 600; }
.aky__points span { font-size: 13.5px; line-height: 1.6; }

.aky__facts { margin: clamp(22px, 2.6vw, 34px) 0 0; }
.aky__facts > div {
  display: grid;
  grid-template-columns: minmax(96px, 130px) minmax(0, 1fr);
  gap: 18px;
  padding: 12px 2px;
  border-top: 1px solid var(--y-line);
}
.aky__facts > div:last-child { border-bottom: 1px solid var(--y-line); }
.aky__facts dt { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #9aa7a0; align-self: baseline; }
.aky__facts dd { margin: 0; font-size: 14px; color: var(--y-ink); }

.aky .ac-cta.aksu-pill { margin-top: clamp(24px, 2.8vw, 36px); }

/* ------------------------- related parts ---------------------------------
   One quiet row of four standalone cards. No scroll strip, no lead card, no
   snap machinery: the next four parts from the same group, each a bordered
   card that answers hover by turning its edge green and lifting a little. */

.aky__more { margin-top: clamp(44px, 5.4vw, 80px); }

.aky__more-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 24px;
  margin-bottom: 18px;
}
.aky__more-title { font-size: clamp(17px, 1.6vw, 22px); font-weight: 700; }
.aky__more-title em { font-style: normal; color: var(--y-g); }
.aky__more-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--y-body);
  text-decoration: none;
  transition: color 0.25s;
}
.aky__more-all i { font-size: 11px; transition: transform 0.3s var(--q-glide, ease); }
.aky__more-all:hover { color: var(--y-g); }
.aky__more-all:hover i { transform: translateX(4px); }

.aky-rel-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
@media (max-width: 899px) {
  .aky-rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.aky-rel {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 12px 12px 16px;
  border: 1px solid var(--y-line);
  border-radius: 18px;
  background: #efefef;
  color: var(--y-body);
  text-decoration: none;
  transition: border-color 0.3s, transform 0.35s var(--q-glide, ease);
}
.aky-rel:hover { border-color: var(--y-g); color: var(--y-body); transform: translateY(-3px); }

.aky-rel__media {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  margin-bottom: 12px;
  border-radius: 12px;
  /* white photo panel on the #efefef card — the grey-on-grey read as a smudge */
  background: #ffffff;
}
.aky-rel__media img {
  max-width: 84%;
  max-height: 84%;
  object-fit: contain;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.aky-rel:hover .aky-rel__media img { transform: scale(1.05); }

.aky-rel__body { padding: 0 5px; }
.aky-rel h3 { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.aky-rel__fit { display: block; margin-top: 3px; font-size: 12px; color: #9aa7a0; }

/* the corner arrow: appears with the hover, same language as the fair cards */
.aky-rel__go {
  position: absolute;
  top: 20px;
  right: 20px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--y-g);
  color: #fff;
  font-size: 10.5px;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s, transform 0.3s var(--q-glide, ease);
}
.aky-rel:hover .aky-rel__go { opacity: 1; transform: scale(1); }


/* ===========================================================================
   BLOCK: akn — blog grid (blog.php) and article (blog-details.php)
   ---------------------------------------------------------------------------
   Same language as the rest of the site: white ground, hairline frames, the
   green category pill with its white dot borrowed from .aky__cat, and the
   script/sans head. The lead post takes a two-column card; the rest run in a
   three-up grid. The article is a single measured column — no sidebar, since
   there is nothing to put in one that the related row does not already do.
   =========================================================================== */

.akn {
  --n-g:    #2f8a34;
  --n-blue: #214d93;
  --n-ink:  #0f2340;
  --n-body: #62727e;
  --n-line: #e3e9e3;
  --n-mute: #9aa7a0;
  padding: clamp(48px, 6vw, 92px) 0;
  background: #fff;
  font-family: "Outfit", sans-serif;
  color: var(--n-body);
  line-height: 1.7;
}
.akn *, .akn *::before, .akn *::after { box-sizing: border-box; text-transform: none; }
.akn h2, .akn h3 { margin: 0; color: var(--n-ink); letter-spacing: -0.02em; line-height: 1.2; }
.akn p { margin: 0; }
.akn a { text-decoration: none; }

.akn__wrap {
  width: var(--aksu-wrap, min(100% - 2 * clamp(16px, 6.5vw, 90px), 1320px));
  margin-inline: auto;
}

/* ------------------------------------------------------------------ head */
.akn__head { display: grid; gap: clamp(18px, 2.4vw, 44px); align-items: end; }
@media (min-width: 900px) {
  .akn__head { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}
.akn__title { font-size: clamp(22px, 2.5vw, 34px); font-weight: 700; }
.akn__title .aksu-script { color: var(--n-g); }
.akn__title em { font-style: normal; color: var(--n-blue); }
.akn__lede { font-size: clamp(13.5px, 1vw, 15px); line-height: 1.68; }

/* -------------------------------------------------------------- the index --
   The filter chips and the card grid are gone. What replaces them is an index,
   not a gallery: one hairline row per post, date and category on the left,
   the headline in the same Fraunces the articles use, reading time and arrow
   on the right. It scans in one pass, it costs no images, and it is the same
   editorial language as the article it leads to.

   Widths follow the article's tokens so the index and the pages it links to
   sit on one measure.
   -------------------------------------------------------------------------- */

.akn-index {
  --idx-line: #e3e9e3;
  width: min(100vw - 2 * clamp(16px, 5vw, 48px), 880px);
  margin: clamp(26px, 3.2vw, 44px) auto 0;
  padding: 0;
  list-style: none;
  counter-reset: idx;
}
.akn-index li { counter-increment: idx; border-top: 1px solid var(--idx-line); }
.akn-index li:last-child { border-bottom: 1px solid var(--idx-line); }

.akn-index a {
  display: grid;
  gap: 6px 28px;
  padding: clamp(20px, 2.4vw, 30px) 4px;
  color: #62727e;
  text-decoration: none;
  transition: background-color 0.3s;
}
@media (min-width: 860px) {
  .akn-index a {
    grid-template-columns: 150px 150px minmax(0, 1fr) 92px;
    align-items: start;
  }
}

/* Thumbnail: small, 4:3, rounded — enough to recognise the post, not so big
   that the index turns back into the card grid it replaced. height:auto is
   required, because the <img> carries width/height attributes for CLS and
   would otherwise use the attribute height and ignore the aspect-ratio. */
.akn-index__thumb {
  display: block;
  overflow: hidden;
  border-radius: 12px;
  background: #eef1ee;
}
.akn-index__thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.akn-index a:hover .akn-index__thumb img { transform: scale(1.05); }
@media (max-width: 859px) {
  /* on a phone the thumbnail leads the row at full width */
  .akn-index__thumb { margin-bottom: 12px; }
  .akn-index__thumb img { aspect-ratio: 16 / 9; }
}
.akn-index a:hover { background: #f7faf7; }

/* left: when it ran and what it is about */
.akn-index__meta {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 3px;
  font-size: 12.5px;
  color: #9aa7a0;
}
.akn-index__cat {
  align-self: start;
  padding: 4px 11px;
  border: 1px solid var(--idx-line);
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 700;
  color: #2f8a34;
  white-space: nowrap;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.akn-index a:hover .akn-index__cat { background: #2f8a34; border-color: #2f8a34; color: #fff; }

/* middle: the headline does the work */
.akn-index__main { min-width: 0; }
.akn-index h3 {
  margin: 0;
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.02em;
  color: #0f2340;
  transition: color 0.25s;
}
.akn-index a:hover h3 { color: #2f8a34; }
.akn-index__ex {
  display: block;
  margin-top: 8px;
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.6;
}

/* right: reading time, and the arrow that answers the hover */
.akn-index__go {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 4px;
  font-size: 12.5px;
  color: #9aa7a0;
  white-space: nowrap;
}
.akn-index__go i {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border: 1px solid var(--idx-line);
  border-radius: 50%;
  font-size: 11px;
  color: #2f8a34;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s, transform 0.3s;
}
.akn-index a:hover .akn-index__go i {
  background: #2f8a34; border-color: #2f8a34; color: #fff; transform: translateX(3px);
}
@media (max-width: 859px) {
  .akn-index__go { justify-content: flex-start; margin-top: 4px; }
}



/* ==========================================================================
   the article — EDITORIAL
   --------------------------------------------------------------------------
   Title over a full-bleed photograph, Fraunces for display, a drop cap opening
   the standfirst, quotes set centred in the serif. The article as something
   you settle into rather than a document with a navigation rail bolted on.

   THE MEASURE IS THE BACKBONE. Two widths, declared once as tokens and used
   by everything, so nothing invents its own:

     --art-text   prose. 68ch — the readable line length. At the 17px body it
                  lands near 714px; because it is in ch it tracks the font
                  rather than freezing at a pixel value someone picked.
     --art-wide   880px. The headline block, the breadcrumb, figures, tables,
                  the takeaways panel, callouts, quotes and the read-next row.
                  A modest breakout: wide enough that a photograph reads as a
                  photograph, never so wide it stops relating to the column.

   Both are capped against the viewport minus one gutter, so on any screen the
   page keeps its margins. The prose is centred inside the wide measure, so
   the headline, every figure and the row at the foot all share one left edge.
   ========================================================================== */

.akn-post {
  /* The gutter and the two measures. vw, not %, is load-bearing: a custom
     property is resolved against the element USING it, so `100% - gutter` on
     --art-wide resolved against the 714px text column and came out 618px —
     a "breakout" narrower than the thing it breaks out of. vw is the same
     number wherever it is read. */
  --art-gut:  clamp(16px, 5vw, 48px);
  --art-text: min(100vw - 2 * var(--art-gut), 68ch);
  --art-wide: min(100vw - 2 * var(--art-gut), 880px);
  --art-line: #e3e9e3;

  padding: 0 0 clamp(48px, 6vw, 92px);
  background: #fff;
  font-family: "Outfit", sans-serif;
  color: #62727e;
}
/* main.css capitalises p and headings — the article resets it wholesale */
.akn-post, .akn-post * { text-transform: none; }

/* ---- the hero ----------------------------------------------------------- */

.akn-post__hero { position: relative; margin: 0; }
.akn-post__hero img {
  width: 100%;
  /* 40% shorter than the original clamp(340px, 48vw, 560px) */
  height: clamp(204px, 28.8vw, 336px);
  object-fit: cover;
  display: block;
}
.akn-post__hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(6, 18, 10, 0.84) 0%, rgba(6, 18, 10, 0.38) 46%, rgba(6, 18, 10, 0.06) 100%);
}
.akn-post__cap {
  position: absolute; z-index: 2;
  left: 0; right: 0; bottom: 0;
  padding-bottom: clamp(24px, 3.6vw, 52px);
}
/* the headline sits on the wide measure, so it shares a left edge with every
   figure, table and quote further down the page */
.akn-post__cap > div { width: var(--art-wide); margin-inline: auto; }

.akn-post__kick {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 15px 6px 11px;
  border-radius: 999px;
  background: #2f8a34;
  color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: -0.01em;
}
.akn-post__kick::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }

.akn-post h1 {
  margin: 16px 0 0;
  max-width: 20ch;                       /* a headline is not a paragraph */
  color: #fff;
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-size: clamp(29px, 4.2vw, 56px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.akn-post__meta {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin: 18px 0 0; padding: 0;
  list-style: none;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.74);
}
.akn-post__meta li { display: inline-flex; align-items: center; gap: 8px; }
.akn-post__meta i { font-size: 12px; color: #6fbf6a; }

/* ---- the column --------------------------------------------------------- */

.akn-post__body { width: var(--art-text); margin: clamp(34px, 4vw, 58px) auto 0; }

/* the standfirst carries the drop cap: it is always the first thing on the
   page, so the cap can never land on a paragraph that follows a heading */
.akn-post__lead {
  margin: 0 0 clamp(24px, 2.8vw, 34px);
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.52;
  color: #0f2340;
}
@media (min-width: 768px) {
  .akn-post__lead::first-letter {
    float: left;
    margin: 6px 14px 0 0;
    font-size: 4.6em;
    line-height: 0.78;
    font-weight: 700;
    color: #2f8a34;
  }
}

.akn-post__body h2 {
  margin: clamp(38px, 4vw, 56px) 0 14px;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(21px, 2vw, 29px);
  font-weight: 600;
  color: #0f2340;
  letter-spacing: -0.02em;
  line-height: 1.2;
  scroll-margin-top: calc(var(--ac-header-h, 113px) + 24px);
}
.akn-post__body p {
  margin: 0 0 18px;
  font-size: clamp(15.5px, 1.15vw, 17px);
  line-height: 1.78;
}

/* quotes are the one thing that leaves the column entirely */
.akn-post__q {
  width: var(--art-wide);
  margin: clamp(34px, 3.6vw, 48px) calc(50% - var(--art-wide) / 2);
  padding: 0;
  border: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(21px, 2.1vw, 30px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-align: center;
  color: #2f8a34;
}

.akn-post__cta {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 2px 0 22px;
  padding: 11px 20px;
  border: 1px solid var(--art-line);
  border-radius: 999px;
  font-size: 13.5px; font-weight: 600;
  color: #0f2340;
  text-decoration: none;
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
}
.akn-post__cta i { font-size: 11px; color: #2f8a34; transition: transform 0.3s, color 0.3s; }
.akn-post__cta:hover { background: #2f8a34; border-color: #2f8a34; color: #fff; }
.akn-post__cta:hover i { color: #fff; transform: translateX(3px); }

/* ---- the breakout ------------------------------------------------------ --
   Figures, tables, the takeaways panel and the callouts step out to the wide
   measure. Written once here rather than on each component, so the widths
   cannot drift apart as blocks are added. */
.akn-post__body .akn-key,
.akn-post__body .akn-fig,
.akn-post__body .akn-tbl__scroll,
.akn-post__body .akn-note {
  width: var(--art-wide);
  margin-left: calc(50% - var(--art-wide) / 2);
  margin-right: calc(50% - var(--art-wide) / 2);
  /* a table carries a min-width; without this the breakout would stretch the
     page instead of scrolling inside its own frame */
  max-width: none;
  min-width: 0;
}

.akn-post__end {
  width: var(--art-wide);
  margin: clamp(34px, 3.6vw, 48px) auto 0;
  padding-top: clamp(24px, 2.6vw, 32px);
  border-top: 1px solid var(--art-line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 28px;
}
.akn-post__end p { margin: 0; max-width: 44ch; font-size: 14.5px; line-height: 1.6; }
.akn-post__end p b { color: #0f2340; font-weight: 600; }
.akn-post__end .ac-cta.aksu-pill { margin-top: 0; }

/* read-next sits on the wide measure so it lines up with the figures above */
.akn-next__wrap { width: var(--art-wide); margin-inline: auto; }

@media (prefers-reduced-motion: reduce) {
  .akn-post * { transition-duration: 0.01ms !important; }
}


/* ------------------------------------------------------------ read next */
.akn-next { margin-top: clamp(44px, 5.4vw, 80px); }
.akn-next__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 24px;
  margin-bottom: 18px;
}
.akn-next__title { font-size: clamp(17px, 1.6vw, 22px); font-weight: 700; color: var(--n-ink); }
.akn-next__title em { font-style: normal; color: var(--n-g); }
.akn-next__all {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--n-body);
  transition: color 0.25s;
}
.akn-next__all i { font-size: 11px; transition: transform 0.3s; }
.akn-next__all:hover { color: var(--n-g); }
.akn-next__all:hover i { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .akn *, .akn-post *, .akn-next * { transition-duration: 0.01ms !important; }
}


/* ---------------------------- spec table ----------------------------------
   Full-width reference table under the product's two-column head. Built as a
   real <table> with rowspan/colspan headers and scope attributes, so it is
   readable to a screen reader and copyable into a purchase order — not a grid
   of divs. The two measurement groups are tinted apart rather than ruled
   apart, which keeps the hairline language of the rest of the site.
   -------------------------------------------------------------------------- */

.aky__spec-table { margin-top: clamp(40px, 5vw, 72px); }
.aky__spec-title {
  margin-bottom: 16px;
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight: 700;
  color: var(--y-ink);
}
.aky__spec-title em { font-style: normal; color: var(--y-g); }

/* the scroller owns the frame; the table inside it is edge to edge */
.aky-tbl__scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--y-line);
  border-radius: 16px;
  background: #fff;
  scrollbar-width: thin;
  scrollbar-color: #cfd6cf transparent;
}
.aky-tbl__scroll:focus-visible { outline: 2px solid var(--y-g); outline-offset: 2px; }

.aky-tbl {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--y-ink);
}
.aky-tbl__cap {
  caption-side: top;
  padding: 14px 18px;
  border-bottom: 1px solid var(--y-line);
  color: var(--y-body);
  font-size: 12.5px;
  text-align: left;
}

.aky-tbl th,
.aky-tbl td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--y-line);
  text-align: center;
  white-space: nowrap;
}
.aky-tbl thead th {
  background: #f7f9f7;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--y-body);
}
/* The group headers carry the weight; the sub-heads sit quieter under them.
   `.aky-tbl thead th` is (0,2,1) and would beat a bare .aky-tbl__grp (0,1,0)
   — it did, and both bands came out grey. Qualified, it wins. */
.aky-tbl thead th.aky-tbl__grp {
  background: var(--y-g);
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.08em;
}
.aky-tbl thead th.aky-tbl__grp.is-alt { background: var(--y-blue); }
/* second measurement group tinted apart from the first */
.aky-tbl thead th.is-alt { background: rgba(33, 77, 147, 0.06); }
.aky-tbl tbody td.is-alt { background: rgba(33, 77, 147, 0.035); }

.aky-tbl tbody th[scope="row"] {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--y-g);
}
.aky-tbl tbody tr:last-child th,
.aky-tbl tbody tr:last-child td { border-bottom: 0; }
.aky-tbl tbody tr:hover td,
.aky-tbl tbody tr:hover th { background: #f4f7f4; }
.aky-tbl tbody tr:hover td.is-alt { background: rgba(33, 77, 147, 0.06); }

/* colour code: the swatch IS the colour, the label keeps it in text */
.aky-tbl__col { padding-block: 8px; }
.aky-tbl__swatch {
  display: inline-block;
  min-width: 132px;
  padding: 7px 12px;
  border: 1px solid rgba(15, 35, 64, 0.12);
  border-radius: 8px;
  background: var(--sw);
  color: var(--sw-fg);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

.aky-tbl__note { margin-top: 12px; font-size: 12.5px; color: #9aa7a0; }

@media (max-width: 599px) {
  .aky-tbl { font-size: 12.5px; }
  .aky-tbl th, .aky-tbl td { padding: 10px 12px; }
  .aky-tbl__swatch { min-width: 112px; }
}


/* ==========================================================================
   article content blocks
   --------------------------------------------------------------------------
   A post was h2 + paragraphs + one list. These give it the vocabulary a
   technical how-to actually needs: a takeaways panel, numbered steps, tip and
   warning callouts, comparison tables, inline figures and an FAQ. Every one
   is a real element — <ol>, <table>, <details> — not a div dressed up, so it
   is readable without CSS and to a screen reader.
   ========================================================================== */

/* ---- takeaways: the panel that answers the page before you read it ------- */
.akn-key {
  margin: 0 0 clamp(26px, 3vw, 38px);
  padding: clamp(20px, 2.2vw, 26px) clamp(20px, 2.2vw, 28px);
  border: 1px solid var(--n-line, #e3e9e3);
  border-left: 3px solid #2f8a34;
  border-radius: 4px 16px 16px 4px;
  background: #f7faf7;
}
.akn-key__title {
  margin: 0 0 12px !important;
  font-size: 11.5px !important;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #2f8a34;
}
.akn-key__title i { margin-right: 7px; font-size: 11px; }
.akn-key ul { margin: 0 !important; padding: 0; list-style: none; }
.akn-key ul li {
  position: relative;
  padding: 7px 0 7px 24px !important;
  border: 0 !important;
  font-size: 14px !important;
  line-height: 1.6;
  color: #0f2340;
}
.akn-key ul li::before {
  content: "";
  position: absolute;
  left: 3px; top: 15px;
  width: 7px; height: 7px;
  border-radius: 2px;
  background: #2f8a34;
}

/* ---- numbered steps ------------------------------------------------------ */
.akn-steps {
  counter-reset: akn-step;
  margin: 6px 0 24px;
  padding: 0;
  list-style: none;
}
.akn-steps li {
  counter-increment: akn-step;
  position: relative;
  padding: 0 0 18px 52px;
}
.akn-steps li:not(:last-child) { border-left: 1px solid var(--n-line, #e3e9e3); margin-left: 17px; padding-left: 35px; }
.akn-steps li::before {
  content: counter(akn-step, decimal-leading-zero);
  position: absolute;
  left: -17px;
  top: 0;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #2f8a34;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 0 0 5px #fff;
}
.akn-steps li:last-child { margin-left: 17px; padding-left: 35px; }
.akn-steps li:last-child::before { left: -17px; }
.akn-steps h3 {
  margin: 6px 0 4px;
  font-size: 15.5px;
  font-weight: 700;
  color: #0f2340;
  letter-spacing: -0.01em;
}
.akn-steps p { margin: 0 !important; font-size: 14px !important; line-height: 1.65 !important; }

/* ---- callouts ------------------------------------------------------------ */
.akn-note {
  display: flex;
  gap: 14px;
  margin: 22px 0;
  padding: 16px 18px;
  border: 1px solid var(--n-line, #e3e9e3);
  border-radius: 14px;
  background: #fff;
}
.akn-note i {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 9px;
  font-size: 13px;
  color: #fff;
}
.akn-note b { display: block; margin-bottom: 4px; color: #0f2340; font-size: 14.5px; font-weight: 700; }
.akn-note p { margin: 0 !important; font-size: 13.5px !important; line-height: 1.65 !important; }
.akn-note--tip  { background: #f7faf7; border-color: #dbe8dc; }
.akn-note--tip  i { background: #2f8a34; }
.akn-note--warn { background: #fdf8f3; border-color: #f0e2d2; }
.akn-note--warn i { background: #d08a2c; }

/* ---- comparison table ---------------------------------------------------- */
.akn-tbl__scroll {
  margin: 6px 0 24px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--n-line, #e3e9e3);
  border-radius: 14px;
  scrollbar-width: thin;
  scrollbar-color: #cfd6cf transparent;
}
.akn-tbl__scroll:focus-visible { outline: 2px solid #2f8a34; outline-offset: 2px; }
.akn-tbl {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 13.5px;
  color: #0f2340;
}
.akn-tbl caption {
  caption-side: top;
  padding: 13px 16px;
  border-bottom: 1px solid var(--n-line, #e3e9e3);
  color: #62727e;
  font-size: 12.5px;
  text-align: left;
}
.akn-tbl th, .akn-tbl td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--n-line, #e3e9e3);
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
}
.akn-tbl thead th {
  background: #f7f9f7;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #62727e;
  white-space: nowrap;
}
.akn-tbl tbody th[scope="row"] { font-weight: 700; color: #0f2340; }
.akn-tbl tbody tr:last-child th, .akn-tbl tbody tr:last-child td { border-bottom: 0; }
.akn-tbl tbody tr:hover th, .akn-tbl tbody tr:hover td { background: #f7faf7; }

/* ---- inline figure ------------------------------------------------------- */
.akn-fig {
  margin: 26px 0;
  overflow: hidden;
  border: 1px solid var(--n-line, #e3e9e3);
  border-radius: 16px;
  background: #eef1ee;
}
.akn-fig img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.akn-fig figcaption {
  padding: 12px 16px;
  background: #fff;
  border-top: 1px solid var(--n-line, #e3e9e3);
  font-size: 12.5px;
  line-height: 1.55;
  color: #9aa7a0;
}

/* ---- FAQ ----------------------------------------------------------------- */
.akn-faq { margin-top: clamp(30px, 3.2vw, 46px); }
.akn-faq details {
  border-bottom: 1px solid var(--n-line, #e3e9e3);
}
.akn-faq details:first-of-type { border-top: 1px solid var(--n-line, #e3e9e3); }
.akn-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 2px;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: 600;
  color: #0f2340;
  transition: color 0.25s;
}
.akn-faq summary::-webkit-details-marker { display: none; }
.akn-faq summary:hover { color: #2f8a34; }
.akn-faq summary i {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border: 1px solid var(--n-line, #e3e9e3);
  border-radius: 50%;
  font-size: 10px;
  color: #2f8a34;
  transition: transform 0.3s, background-color 0.3s, color 0.3s, border-color 0.3s;
}
.akn-faq details[open] summary i { transform: rotate(45deg); background: #2f8a34; border-color: #2f8a34; color: #fff; }
.akn-faq details p {
  margin: 0 0 18px !important;
  padding-right: 42px;
  font-size: 14px !important;
  line-height: 1.7 !important;
}


/* ===========================================================================
   index hero: the second heading was a second <h1>, which is an SEO defect
   (two top-level headings on one page). It is a <div class="text"> now.
   main.css styles it as `.hero-3 .hero-content h1.text`, which no longer
   matches, so those two rules are mirrored here against the class alone —
   same numbers, so nothing moves on screen.
   =========================================================================== */
.hero-3 .hero-content .text {
  /* The FULL h1 treatment, not just the margins. main.css styles the hero
     headings as `.hero-3 .hero-content h1` — when the second one became a
     <div class="text"> it kept the two margin rules I mirrored and lost
     everything else, so it rendered 16px/400/grey instead of 100px/700/white.
     Every declaration and breakpoint below is a copy of the main.css h1 and
     h1.text rules; the only change is the selector. */
  font-family: "Poppins", sans-serif;
  font-size: 100px;
  font-weight: 700;
  /* the template gives its headings 1.2. A <div> inherits the body's 28px
     instead, which collapsed the 100px line into a 20px box. */
  line-height: 1.2;
  color: var(--white, #fff);
  text-transform: uppercase;
  margin-left: 650px;
  margin-top: 5px;
  margin-bottom: 0;
}
@media (max-width: 1899px) { .hero-3 .hero-content .text { font-size: 66px; } }
@media (max-width: 1399px) { .hero-3 .hero-content .text { font-size: 85px; margin-left: 0; } }
@media (max-width: 991px)  { .hero-3 .hero-content .text { font-size: 65px; } }
@media (max-width: 767px)  { .hero-3 .hero-content .text { font-size: 45px; } }
@media (max-width: 575px)  { .hero-3 .hero-content .text { font-size: 34px; } }


/* ===========================================================================
   BLOCK: akt — the three pivot product pages
   ---------------------------------------------------------------------------
   One design system, three structural identities. Everything shares the
   tokens, the type scale and the components below; what differs per page is
   the SHAPE of the "how it works" step sequence, which is the section that
   carries each machine's idea:

     .akt--center   a radial dial. Steps sit around a hub, because the machine
                    turns about one point.
     .akt--linear   a horizontal track. Steps run left to right along a rail,
                    because the machine travels out and back.
     .akt--universal a 2x2 block. Steps pair off rather than running in one
                    direction, because the machine does two jobs, not one
                    journey.

   No spinning, no parallax, no scroll-jacking. The geometry does the talking;
   motion is limited to hover feedback and the site's existing scroll reveal.

   Tokens are local to .akt so nothing here can leak into another page.
   =========================================================================== */

.akt {
  --t-g:     #2f8a34;
  --t-blue:  #214d93;
  --t-navy:  #122b52;
  --t-ink:   #0f2340;
  --t-body:  #62727e;
  --t-mute:  #66736c;   /* was #9aa7a0 = 2.34:1 on white, below AA */
  --t-line:  #e3e9e3;
  --t-paper: #f6f8f6;
  --t-glide: cubic-bezier(0.16, 1, 0.3, 1);

  /* one spacing and width scale for the whole page */
  --t-wrap:  var(--aksu-wrap, min(100% - 2 * clamp(16px, 6.5vw, 90px), 1320px));
  --t-sec:   clamp(52px, 6.4vw, 104px);
  --t-r:     18px;

  font-family: "Outfit", sans-serif;
  color: var(--t-body);
  line-height: 1.7;
}
.akt *, .akt *::before, .akt *::after { box-sizing: border-box; }
/* main.css capitalises p and headings across the template */
.akt, .akt * { text-transform: none; }
.akt h2, .akt h3, .akt h4 { margin: 0; color: var(--t-ink); letter-spacing: -0.02em; line-height: 1.18; }
.akt p { margin: 0; }
.akt a { text-decoration: none; }

.akt__wrap { width: var(--t-wrap); margin-inline: auto; }
.akt-sec { padding: var(--t-sec) 0; background: #fff; }
.akt-sec--paper { background: var(--t-paper); }
.akt-sec + .akt-sec { border-top: 1px solid var(--t-line); }

/* ------------------------------- section head ---------------------------- */
.akt-head { display: grid; gap: clamp(14px, 2vw, 40px); align-items: end; }
@media (min-width: 900px) { .akt-head { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }
.akt-head__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #297a2e;   /* text-only shade: brand #2f8a34 is 4.37:1 on white */
}
.akt-head__eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; }
.akt-head h2 { margin-top: 12px; font-size: clamp(23px, 2.6vw, 36px); font-weight: 700; }
.akt-head h2 em { font-style: normal; color: var(--t-g); }
.akt-head__lede { font-size: clamp(14px, 1.05vw, 15.5px); line-height: 1.7; }

/* ================================== HERO ==================================
   Shared frame: navy field, copy left, photograph right, a stat strip that
   straddles the two. The accent geometry behind the photograph is what marks
   the three pages apart.
   ========================================================================== */

.akt-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--ac-header-h, 113px) + clamp(34px, 4vw, 62px)) 0 clamp(40px, 4.6vw, 72px);
  background:
    radial-gradient(72% 118% at 88% 0%, rgba(47, 138, 52, 0.26) 0%, transparent 58%),
    radial-gradient(80% 120% at 0% 100%, rgba(33, 77, 147, 0.46) 0%, transparent 60%),
    linear-gradient(158deg, var(--t-navy) 0%, var(--t-ink) 100%);
  color: rgba(255, 255, 255, 0.74);
}
.akt-hero__grid { display: grid; gap: clamp(28px, 3.4vw, 56px); align-items: center; }
@media (min-width: 992px) { .akt-hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); } }

.akt-hero__crumb { margin-bottom: clamp(18px, 2.2vw, 28px); }
.akt-hero__crumb ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: rgba(255, 255, 255, 0.55);
}
.akt-hero__crumb a {
  display: inline-flex; align-items: center; min-height: 24px; padding: 4px 2px;
  color: rgba(255, 255, 255, 0.78); transition: color 0.25s;
}
.akt-hero__crumb a:hover { color: #fff; }
.akt-hero__crumb .sep { width: 12px; height: 1px; background: rgba(255, 255, 255, 0.3); }
.akt-hero__crumb [aria-current] { color: #fff; }

.akt-hero__kick {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 15px 6px 11px; border-radius: 999px;
  background: var(--t-g); color: #fff; font-size: 12px; font-weight: 700;
}
.akt-hero__kick::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }

.akt-hero h1 {
  margin: 16px 0 0;
  color: #fff;
  font-size: clamp(29px, 3.9vw, 52px);
  font-weight: 700; line-height: 1.08; letter-spacing: -0.025em;
}
.akt-hero h1 em { font-style: normal; color: #6fbf6a; }
.akt-hero__lede {
  margin-top: 18px; max-width: 56ch;
  font-size: clamp(14.5px, 1.1vw, 16.5px); line-height: 1.68;
}

.akt-hero__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 2.6vw, 32px); }
.akt-btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 12px 24px;
  border-radius: 999px;
  font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.3s var(--t-glide);
}
.akt-btn i { font-size: 12px; transition: transform 0.3s var(--t-glide); }
.akt-btn--solid { background: var(--t-g); color: #fff; border: 1px solid var(--t-g); }
.akt-btn--solid:hover { background: #fff; color: var(--t-ink); border-color: #fff; transform: translateY(-2px); }
.akt-btn--solid:hover i { transform: translateX(4px); }
.akt-btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.34); }
.akt-btn--ghost:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; color: #fff; transform: translateY(-2px); }
.akt-btn:focus-visible { outline: 3px solid #6fbf6a; outline-offset: 3px; }

/* stat strip — real figures only, each one carried from the catalogue */
.akt-hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 1px;
  margin: clamp(26px, 3vw, 38px) 0 0; padding: 0;
  list-style: none;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  overflow: hidden;
}
.akt-hero__stats li { padding: 16px 18px; background: rgba(10, 26, 48, 0.42); }
.akt-hero__stats b {
  display: block; color: #fff; font-size: clamp(21px, 2vw, 27px); font-weight: 700;
  line-height: 1.1; letter-spacing: -0.02em;
}
.akt-hero__stats b i { font-style: normal; color: #6fbf6a; }
.akt-hero__stats span { display: block; margin-top: 5px; font-size: 12px; color: rgba(255, 255, 255, 0.62); }

/* the photograph, and the geometry behind it */
.akt-hero__media { position: relative; margin: 0; }
.akt-hero__media img {
  width: 100%; display: block;
  /* height:auto is REQUIRED. The <img> carries width/height attributes for
     CLS; without this the attribute height is the used height and the
     aspect-ratio below is ignored entirely — the hero rendered 590x1200
     instead of 590x442. */
  height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--t-r);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.akt-hero__mark {
  position: absolute; z-index: -1; pointer-events: none;
  inset: -8% -6% -8% -6%;
  opacity: 0.5;
}
/* NOT overflow:visible — the ring geometry then paints past the mark box and
   reports as page overflow at 320px. The mark box is already inset beyond the
   photograph, so clipping to it is what the design wants anyway. */
.akt-hero__mark svg { width: 100%; height: 100%; display: block; overflow: hidden; }
.akt-hero__mark .ring   { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; }
.akt-hero__mark .dash   { fill: none; stroke: rgba(111, 191, 106, 0.4); stroke-width: 1; stroke-dasharray: 4 8; }
.akt-hero__mark .bar    { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; }
.akt-hero__mark .node   { fill: rgba(111, 191, 106, 0.5); }

/* ============================== HOW IT WORKS ==============================
   The one section that differs structurally between the three pages.
   ========================================================================== */

.akt-how { margin-top: clamp(32px, 3.8vw, 54px); }

/* --- shared step card ---------------------------------------------------- */
.akt-step {
  position: relative;
  padding: clamp(20px, 2vw, 26px);
  background: #fff;
  border: 1px solid var(--t-line);
  border-radius: var(--t-r);
}
.akt-step__n {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; margin-bottom: 13px;
  border-radius: 50%;
  background: var(--t-g); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
}
.akt-step h3 { font-size: 16px; font-weight: 700; }
.akt-step p { margin-top: 7px; font-size: 13.5px; line-height: 1.62; }

/* --- CENTER: the dial ----------------------------------------------------
   Four steps around a hub. On desktop the hub sits in the middle of a 2x2
   with a dashed ring behind it; below 900px it collapses to a plain stack,
   because a dial that does not fit is just a broken grid. */
.akt--center .akt-how { position: relative; }
@media (min-width: 900px) {
  .akt--center .akt-how {
    display: grid;
    grid-template-columns: 1fr minmax(150px, 210px) 1fr;
    grid-template-rows: auto auto;
    gap: clamp(18px, 2vw, 30px);
    align-items: stretch;
  }
  .akt--center .akt-step:nth-child(1) { grid-area: 1 / 1; }
  .akt--center .akt-step:nth-child(2) { grid-area: 1 / 3; }
  .akt--center .akt-step:nth-child(3) { grid-area: 2 / 1; }
  .akt--center .akt-step:nth-child(4) { grid-area: 2 / 3; }
  .akt--center .akt-hub { grid-area: 1 / 2 / 3 / 3; }
}
.akt-hub {
  display: grid; place-items: center; text-align: center;
  padding: 20px;
}
.akt-hub__dial {
  position: relative;
  width: min(100%, 190px); aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px dashed #cfd9cf;
}
.akt-hub__dial::before {
  content: ""; position: absolute; inset: 22%;
  border-radius: 50%; border: 1px solid var(--t-line);
}
.akt-hub__dial b {
  position: relative;
  display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--t-g); color: #fff; font-size: 17px;
}
.akt-hub span { display: block; margin-top: 14px; font-size: 12.5px; color: var(--t-mute); max-width: 22ch; }
@media (max-width: 899px) {
  .akt--center .akt-how { display: grid; gap: 14px; grid-template-columns: 1fr; }
  .akt--center .akt-hub { display: none; }   /* decorative only */
}

/* --- LINEAR: the track ---------------------------------------------------
   Steps run along one rail, left to right, with the rail drawn between the
   numbers. Below 900px the rail turns vertical rather than disappearing. */
.akt--linear .akt-how { display: grid; gap: 0; }
@media (min-width: 900px) {
  .akt--linear .akt-how { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .akt--linear .akt-step { border: 0; border-radius: 0; padding: 40px 22px 0 0; background: none; }
  .akt--linear .akt-step::before {
    content: ""; position: absolute; left: 0; right: 0; top: 17px;
    height: 1px; background: var(--t-line);
  }
  .akt--linear .akt-step:last-child::before { right: 22px; }
  .akt--linear .akt-step__n { position: absolute; left: 0; top: 0; margin: 0; box-shadow: 0 0 0 6px #fff; }
  .akt--linear .akt-step h3 { margin-top: 4px; }
}
@media (max-width: 899px) {
  .akt--linear .akt-how { gap: 0; }
  .akt--linear .akt-step {
    border: 0; border-radius: 0; background: none;
    padding: 0 0 22px 46px; margin-left: 17px;
    border-left: 1px solid var(--t-line);
  }
  .akt--linear .akt-step:last-child { border-left-color: transparent; padding-bottom: 0; }
  .akt--linear .akt-step__n { position: absolute; left: -17px; top: 0; margin: 0; box-shadow: 0 0 0 6px #fff; }
}

/* --- MULTI: the field ----------------------------------------------------
   A block of parcels. Each step is a plot with a corner marker, laid 2x2 so
   the section reads as several places rather than one sequence. */
.akt--universal .akt-how {
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.akt--universal .akt-step { background: var(--t-paper); overflow: hidden; }
.akt--universal .akt-step::after {
  content: ""; position: absolute; right: -28px; top: -28px;
  width: 84px; height: 84px; border-radius: 50%;
  border: 1px dashed #cbd6cb;
}
.akt--universal .akt-step:nth-child(2n) { background: #fff; }

/* ============================== FEATURE ROWS ============================== */

.akt-feat { margin-top: clamp(32px, 3.8vw, 54px); display: grid; gap: clamp(30px, 4vw, 64px); }
.akt-feat__row { display: grid; gap: clamp(22px, 2.8vw, 46px); align-items: center; }
@media (min-width: 900px) {
  .akt-feat__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* alternate the photograph side so the page does not march down one edge */
  .akt-feat__row:nth-child(even) .akt-feat__media { order: -1; }
}
.akt-feat h3 { font-size: clamp(18px, 1.7vw, 24px); font-weight: 700; }
.akt-feat__tr { display: block; margin-top: 5px; font-size: 12.5px; font-weight: 500; color: var(--t-mute); }
.akt-feat p { margin-top: 13px; font-size: 14.5px; line-height: 1.72; }
.akt-feat__list { margin: 18px 0 0; padding: 0; list-style: none; }
.akt-feat__list li { display: flex; gap: 12px; padding: 9px 0; font-size: 13.5px; line-height: 1.6; }
.akt-feat__list li + li { border-top: 1px solid var(--t-line); }
.akt-feat__list i {
  flex: none; display: grid; place-items: center;
  width: 20px; height: 20px; margin-top: 2px;
  border-radius: 50%; background: rgba(47, 138, 52, 0.1);
  color: var(--t-g); font-size: 9px;
}
.akt-feat__list b { color: var(--t-ink); font-weight: 600; }
.akt-feat__media { margin: 0; overflow: hidden; border-radius: var(--t-r); background: #eef1ee; }
.akt-feat__media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

/* ============================== COMPONENTS ================================
   Hairline grid, same frame as .akq-certs — each cell links to the part. */
.akt-parts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 1px;
  margin-top: clamp(28px, 3.4vw, 44px);
  background: var(--t-line);
  border: 1px solid var(--t-line);
  border-radius: 20px;
  overflow: hidden;
}
.akt-part {
  display: block; padding: clamp(20px, 2vw, 28px);
  background: #fff; color: var(--t-body);
  transition: background-color 0.3s;
}
.akt-part:hover { background: var(--t-paper); color: var(--t-body); }
.akt-part__ic {
  display: grid; place-items: center;
  width: 42px; height: 42px; margin-bottom: 14px;
  border-radius: 12px;
  background: var(--t-g); color: #fff; font-size: 15px;
  transition: transform 0.35s var(--t-glide);
}
.akt-part:hover .akt-part__ic { transform: translateY(-3px); }
.akt-part h3 { font-size: 15.5px; font-weight: 700; }
.akt-part p { margin-top: 6px; font-size: 13px; line-height: 1.58; }
.akt-part__go {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  font-size: 12.5px; font-weight: 600; color: var(--t-g);
}
.akt-part__go i { font-size: 10px; transition: transform 0.3s var(--t-glide); }
.akt-part:hover .akt-part__go i { transform: translateX(4px); }

/* ============================== SUITABILITY =============================== */

.akt-fit { display: grid; gap: clamp(16px, 2vw, 26px); margin-top: clamp(28px, 3.4vw, 44px); }
@media (min-width: 860px) { .akt-fit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.akt-fit__col {
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--t-line);
  border-radius: var(--t-r);
  background: #fff;
}
.akt-fit__col h3 {
  display: flex; align-items: center; gap: 11px;
  font-size: 15.5px; font-weight: 700;
}
.akt-fit__col h3 i {
  display: grid; place-items: center; width: 26px; height: 26px; flex: none;
  border-radius: 50%; font-size: 11px; color: #fff;
}
.akt-fit--good h3 i { background: var(--t-g); }
.akt-fit--less h3 i { background: #b9c4bd; }
.akt-fit__col ul { margin: 16px 0 0; padding: 0; list-style: none; }
.akt-fit__col li { padding: 9px 0; font-size: 13.5px; line-height: 1.6; }
.akt-fit__col li + li { border-top: 1px solid var(--t-line); }

/* ============================== COMPARISON ================================
   The three machines side by side. The current page is marked, and the other
   two link across — useful to a buyer and honest internal linking. */
.akt-cmp {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  margin-top: clamp(28px, 3.4vw, 44px);
  background: var(--t-line);
  border: 1px solid var(--t-line);
  border-radius: 20px;
  overflow: hidden;
}
.akt-cmp__cell { padding: clamp(22px, 2.4vw, 30px); background: #fff; color: var(--t-body); display: block; }
.akt-cmp__cell.is-now { background: var(--t-paper); }
.akt-cmp__cell h3 { font-size: 16.5px; font-weight: 700; }
.akt-cmp__cell dl { margin: 14px 0 0; }
.akt-cmp__cell dt {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-mute);
  margin-top: 12px;
}
.akt-cmp__cell dd { margin: 3px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--t-ink); }
.akt-cmp__tag {
  display: inline-block; margin-bottom: 12px; padding: 5px 12px;
  border-radius: 999px; font-size: 11px; font-weight: 700;
  background: var(--t-g); color: #fff;
}
.akt-cmp__cell:not(.is-now) .akt-cmp__tag { background: #eef1ee; color: var(--t-body); }
.akt-cmp__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--t-g); }
.akt-cmp__go i { font-size: 10px; transition: transform 0.3s var(--t-glide); }
a.akt-cmp__cell:hover { background: var(--t-paper); color: var(--t-body); }
a.akt-cmp__cell:hover .akt-cmp__go i { transform: translateX(4px); }

/* ================================== FAQ =================================== */

.akt-faq { margin-top: clamp(24px, 3vw, 38px); max-width: 76ch; }
.akt-faq details { border-bottom: 1px solid var(--t-line); }
.akt-faq details:first-of-type { border-top: 1px solid var(--t-line); }
.akt-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 17px 2px; cursor: pointer; list-style: none;
  font-size: 15.5px; font-weight: 600; color: var(--t-ink);
  transition: color 0.25s;
}
.akt-faq summary::-webkit-details-marker { display: none; }
.akt-faq summary:hover { color: var(--t-g); }
.akt-faq summary i {
  flex: none; display: grid; place-items: center;
  width: 28px; height: 28px; border: 1px solid var(--t-line); border-radius: 50%;
  font-size: 10px; color: var(--t-g);
  transition: transform 0.3s, background-color 0.3s, color 0.3s, border-color 0.3s;
}
.akt-faq details[open] summary i { transform: rotate(45deg); background: var(--t-g); border-color: var(--t-g); color: #fff; }
.akt-faq details p { margin: 0 0 18px; padding-right: 44px; font-size: 14px; line-height: 1.72; }

/* The green CTA band that closed each product page is gone, and its rules with
   it. The page now ends on the FAQ. */

@media (prefers-reduced-motion: reduce) {
  .akt *, .akt *::before, .akt *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .akt-btn:hover, .akt-part:hover .akt-part__ic { transform: none !important; }
}


/* ===========================================================================
   Language switcher: locales that do not exist yet.
   ---------------------------------------------------------------------------
   tr/, ar/ and fr/ were <a href> targets to directories that are not built,
   so every page shipped three internal 404s. They are non-links until the
   translations exist — the flag and code still show, so the switcher reads
   the same, but nothing points at a missing page.
   =========================================================================== */
.ac-lang__soon,
.th-drawer-lang .ac-lang__soon {
  opacity: 0.45;
  cursor: not-allowed;
}
.ac-lang__menu .ac-lang__soon {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  font-size: 13px;
  color: inherit;
}


/* ===========================================================================
   BLOCK: akt — keyboard focus
   ---------------------------------------------------------------------------
   main.css sets `outline: none` in 18 places, so a keyboard user gets no ring
   on anything the template touches. Every interactive element on the three
   product pages declares its own :focus-visible ring here — 3px green with an
   offset, which reads on both the white sections and the navy hero.

   :focus-visible rather than :focus, so a mouse click does not leave a ring
   behind but Tab always shows one.
   =========================================================================== */

.akt a:focus-visible,
.akt button:focus-visible,
.akt summary:focus-visible {
  outline: 3px solid #2f8a34;
  outline-offset: 3px;
  border-radius: 6px;
}
/* on the navy hero the green ring loses contrast against the dark ground */
.akt-hero a:focus-visible,
.akt-hero button:focus-visible {
  outline-color: #8fd98a;
}
/* cards and cells own their radius, so the ring should follow it */
.akt-part:focus-visible,
.akt-cmp__cell:focus-visible { outline-offset: -3px; border-radius: inherit; }


/* ===========================================================================
   .akb--photo — the standard breadcrumb band over a photograph
   ---------------------------------------------------------------------------
   The three product pages carried their own hero. They use the site's .akb
   band now, so the whole site opens the same way — with one difference: a
   product page names its machine, so the band sits over a photograph of it.

   The image goes on a ::before at z-index -2 and the existing gradient stack
   stays on the element itself, so the navy wash still carries the text
   contrast. Measured: white on the darkened image holds well above AA.

   --akb-photo is set per page as an inline custom property, which is the one
   place an inline style is right: the value IS page data, not styling.
   =========================================================================== */

.akb--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--akb-photo);
  background-size: cover;
  background-position: center;
  /* the photograph is a ground for text, not the subject — it is held back so
     the headline stays legible without a second overlay element */
  filter: saturate(0.85);
}
/* The band content sits on a blue box over the photograph, so the type has a
   ground of its own instead of relying on the scrim alone. Brand blue at
   high opacity: white on it measures well past AA, and the photograph still
   reads around and behind it. */
.akb--photo .akb__wrap > * { position: relative; z-index: 1; }
.akb--photo .akb__wrap {
  padding: clamp(20px, 2.2vw, 32px) clamp(18px, 2vw, 29px);
  border-radius: clamp(12px, 1.3vw, 18px);
  background: rgba(23, 56, 110, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(2px);
}

/* -------------------------- the box, tightened ----------------------------
   Scoped to .akb--photo so the rest of the site's bands are untouched: this
   is the only variant that has to share the band with a photograph, and it
   was taking up 566px of a 900px screen before a word of the page showed.
   Type, gaps and box padding all come down together — shrinking the padding
   alone would leave the copy rattling around inside a smaller box.
   -------------------------------------------------------------------------- */
/* The kicker is an inline-flex pill with no margin of its own, and the title
   above carries `margin: 0` from .akb's spacing defence — so the h1 was
   sitting flush on the pill, measured 0px apart. */
.akb--photo .akt-hero__kick { margin-bottom: clamp(10px, 1vw, 14px); }

.akb--photo .akb__title {
  font-size: clamp(20px, 1.95vw, 27px);
}
/* The whole h1 is white here. The band's default paints the <em> half green
   (#2f8a34), which on this blue box is both a weak split of the headline and
   only 2.2:1 against it — the plain navy band it was designed for is a
   different ground. */
.akb--photo .akb__title em { color: #fff; }
.akb--photo .akb__lead {
  max-width: 52ch;
  margin: clamp(11px, 1.1vw, 16px) 0 0;
  font-size: clamp(12.5px, 0.88vw, 13.5px);
}
.akb--photo .akb-crumb { margin-top: clamp(16px, 1.7vw, 23px); }
/* The box is contained and left-aligned: it holds the copy and stops, so the
   photograph carries the rest of the band instead of a slab of empty blue.

   margin-left is the gutter the full-width wrap would have had, computed
   from 100% of the band (not 100vw — that includes the scrollbar and put
   the box 3px off the section edge below it). margin-right: auto then lets
   it end wherever the max-width says. */
@media (min-width: 992px) {
  .akb--photo .akb__wrap {
    /* 560px = the lead paragraph max-width (52ch ≈ 500) + the box padding.
       Any wider and the box is mostly empty blue, which is what it looked
       like at 760 and, after the type came down, at 640. */
    max-width: 560px;
    margin-left: calc((100% - var(--aksu-wrap)) / 2);
    margin-right: auto;
  }
}

/* the gradient stack already on .akb becomes the scrim over the photograph */
.akb--photo {
  background:
    linear-gradient(158deg, rgba(18, 43, 82, 0.92) 0%, rgba(13, 34, 70, 0.86) 100%),
    radial-gradient(70% 120% at 88% 0%, rgba(47, 138, 52, 0.3) 0%, transparent 58%);
  padding-bottom: clamp(28px, 3vw, 44px);
}


/* The product band sits inside <main class="akt">, so `#smooth-content > .akb`
   — which is a deliberate direct-child selector — cannot match it. Same
   clearance, expressed for that one nesting. */
#smooth-content > .akt > .akb {
  /* the clamp matches .akb--photo's reduced padding-bottom, not the taller
     one on the plain .akb band */
  padding-top: calc(clamp(28px, 3vw, 44px) + var(--ac-header-h));
}


/* ==========================================================================
   AKSU-GALLERY
   Gallery grid (.akg) and one image (.akg-one)
   --------------------------------------------------------------------------
   Replaces the template project-section-4 markup, which was a bootstrap row of
   three cards with a scrim and the word "Project" printed over every photograph.

   Two decisions worth stating:

   1. The tiles are NOT a lightbox. Each one links to gallery-details.php,
      because a photograph of a machine is worth a caption, a list of what is
      actually in the frame, and a route onward to the product or the part it
      shows — none of which fits inside an overlay, and none of which a crawler
      can read out of one.

   2. The grid is a <ul> of <li> grouped under an h2 per category, so the page
      has a real outline: h1, then "In the field", then "In the factory".

   Tokens are local to .akg / .akg-one so nothing here can leak into another
   page.
   ========================================================================== */

.akg,
.akg-one {
  --g-green: #2f8a34;
  --g-txt:   #2c8231;   /* the AA-safe green, for small text on white */
  --g-ink:   #0f2340;
  --g-body:  #5a6a76;
  --g-line:  #e4e9e4;
  --g-paper: #f6f8f6;
  --g-glide: cubic-bezier(0.16, 1, 0.3, 1);

  padding: clamp(44px, 5.4vw, 86px) 0 clamp(52px, 6.4vw, 104px);
  background: #fff;
  font-family: "Outfit", sans-serif;
  color: var(--g-body);
  line-height: 1.7;
}
.akg *, .akg *::before, .akg *::after,
.akg-one *, .akg-one *::before, .akg-one *::after { box-sizing: border-box; }

.akg__wrap {
  width: var(--aksu-wrap, min(100% - 2 * clamp(16px, 6.5vw, 90px), 1320px));
  margin-inline: auto;
}

/* main.css carries `p { text-transform: capitalize }` and strips outlines in
   18 places; both are reset here for the whole block rather than rule by rule */
.akg p, .akg-one p, .akg-one li span, .akg-one figcaption { text-transform: none; }
.akg a:focus-visible, .akg-one a:focus-visible {
  outline: 2px solid var(--g-green); outline-offset: 3px;
}

/* ------------------------------- group head ------------------------------- */

.akg-group + .akg-group { margin-top: clamp(38px, 4.4vw, 68px); }

.akg .akg-group__head {
  display: flex; align-items: baseline; gap: 12px;
  margin: 0 0 clamp(18px, 2vw, 26px);
  padding-bottom: 13px;
  border-bottom: 1px solid var(--g-line);
  color: var(--g-ink);
  font-size: clamp(15px, 1.2vw, 17.5px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.akg .akg-group__head span {
  color: var(--g-txt);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------- the grid ------------------------------- */

/* Three in a row, stated rather than left to auto-fill. auto-fill with a
   290px minimum gave four columns at 1440 and five on a wide monitor, which
   made every photograph smaller the more screen you had. */
.akg-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 1.6vw, 22px);
  margin: 0; padding: 0;
  list-style: none;
}
@media (min-width: 620px)  { .akg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .akg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.akg-tile {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--g-line);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  color: var(--g-ink);
  text-decoration: none;
  transition: transform 0.4s var(--g-glide), box-shadow 0.4s var(--g-glide),
              border-color 0.4s var(--g-glide);
}
.akg-tile:hover,
.akg-tile:focus-visible {
  transform: translateY(-5px);
  border-color: #cfe0d1;
  box-shadow: 0 18px 40px -22px rgba(9, 24, 12, 0.4);
  color: var(--g-ink);
}

.akg-tile__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--g-paper);
}
/* min-height: 0 for the same reason as the about mosaic: a flex/grid child
   defaults to min-height: auto, cannot shrink below the image's intrinsic
   height, and height: 100% then resolves against an inflated box. */
.akg-tile__media img {
  min-height: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.8s var(--g-glide);
}
.akg-tile:hover .akg-tile__media img { transform: scale(1.05); }

/* Country badge, top right of the photograph. White on a dark translucent
   plate rather than on the picture itself: the six images run from a bright
   aerial to a grey overcast tower, and no single text colour is legible on
   all of them. The plate makes the contrast independent of the photo. */
/* Country badge, top right of the photograph.
   -------------------------------------------------------------------------
   It was a dark scrim plate with white text: legible, but it read as a video
   watermark and it was the only dark chip anywhere on a site built out of
   white cards. It is now a frosted WHITE plate with the same navy ink the
   rest of the page uses, so it belongs to the card rather than sitting on top
   of it — and the contrast improves as a side effect.

   Composited against the worst case, a pure-black photograph behind a 0.93
   plate, the ink measures 13.44:1; the dark plate managed 5.14:1 against a
   white sky. The plate is opaque enough that the blur is an enhancement, not
   a dependency: with backdrop-filter unsupported it still reads.

   The label is NOT uppercased. text-transform: uppercase on 'Türkiye' in an
   en document gives TÜRKIYE — the dotted İ is a Turkish-locale rule the
   page cannot claim. The country's own spelling stays. */
.akg-tile__flag {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: blur(8px) saturate(1.15);
  color: var(--g-ink);
  font-size: 11px; font-weight: 600; line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
  /* main.css capitalizes inherited text; harmless for Türkiye, but it would
     render Côte d'Ivoire as Côte D'ivoire. The country writes its own name. */
  text-transform: none;
  /* a hairline and a short shadow, so the plate lifts off a busy photograph
     without needing a heavier fill */
  box-shadow: inset 0 0 0 1px rgba(15, 35, 64, 0.08),
              0 3px 10px -4px rgba(9, 24, 12, 0.45);
  transition: transform 0.4s var(--g-glide), box-shadow 0.4s var(--g-glide);
}
/* the image scales 1.05 under it on hover; the badge lifts instead of riding
   along, which keeps it readable through the movement */
.akg-tile:hover .akg-tile__flag {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(15, 35, 64, 0.08),
              0 6px 16px -6px rgba(9, 24, 12, 0.55);
}
.akg-tile__flag img {
  width: 17px; height: 13px;
  display: block;
  border-radius: 3px;
  object-fit: cover;
  /* flags with white fields (JP, PL) would otherwise bleed into a white plate */
  box-shadow: 0 0 0 1px rgba(15, 35, 64, 0.16);
}

.akg-tile__body {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  flex: 1 1 auto;
  padding: 12px 14px 12px;
}
.akg-tile__cat {
  font-size: 10px; font-weight: 700; line-height: 1;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--g-txt);
}
.akg .akg-tile__name {
  margin: 1px 0 0;
  color: var(--g-ink);
  font-size: clamp(13.5px, 1vw, 15px);
  font-weight: 600; line-height: 1.35;
  letter-spacing: -0.01em;
}
.akg-tile__go {
  margin-top: auto; padding-top: 9px;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--g-txt);
  font-size: 11.5px; font-weight: 600;
}
.akg-tile__go i { font-size: 10px; transition: transform 0.35s var(--g-glide); }
.akg-tile:hover .akg-tile__go i { transform: translateX(4px); }
/* the two-column notes/links split went with the old single-image layout */

.akg-one h2 {
  margin: 0 0 14px;
  color: var(--g-ink);
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 700; line-height: 1.25;
  letter-spacing: -0.015em;
}

/* ------------------------------ prev / next ------------------------------ */

.akg-one__nav {
  display: grid; gap: 12px;
  align-items: stretch;
  margin-top: clamp(32px, 3.6vw, 54px);
  padding-top: clamp(22px, 2.4vw, 30px);
  border-top: 1px solid var(--g-line);
}
@media (min-width: 760px) {
  .akg-one__nav { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .akg-one__step.is-next { justify-content: flex-end; text-align: right; }
}

.akg-one__step {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 16px;
  border: 1px solid var(--g-line);
  border-radius: 12px;
  color: var(--g-ink);
  text-decoration: none;
  transition: border-color 0.3s, background-color 0.3s;
}
.akg-one__step:hover { border-color: #cfe0d1; background: var(--g-paper); color: var(--g-ink); }
.akg-one__step i { flex: none; color: var(--g-txt); font-size: 12px; }
.akg-one__step small {
  display: block;
  font-size: 11px; font-weight: 700; line-height: 1;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--g-body);
}
.akg-one__step b {
  display: block; margin-top: 4px;
  font-size: 13.5px; font-weight: 600; line-height: 1.35;
  letter-spacing: -0.01em;
}
.akg-one__step.is-next { flex-direction: row-reverse; }

.akg-one__all {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 20px;
  border-radius: 999px;
  background: var(--g-txt);
  color: #fff;
  font-size: 13px; font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.3s, transform 0.3s var(--g-glide);
}
.akg-one__all:hover { background: var(--g-ink); color: #fff; transform: translateY(-2px); }
.akg-one__all i { font-size: 11px; }

@media (prefers-reduced-motion: reduce) {
  .akg *, .akg *::before, .akg *::after,
  .akg-one *, .akg-one *::before, .akg-one *::after {
    transition-duration: 0.001ms !important;
  }
}


/* ==========================================================================
   AKSU-GALLERY · album (.akg-one__head, .akg-media, .akg-v)
   --------------------------------------------------------------------------
   The detail page used to be one photograph, a bullet list and a sidebar of
   links. It is now an album: the same head the homepage machines section uses
   — script line, bold line, lede on the right, no pill — followed by a grid of
   square tiles that hold either an image or a video.

   Square is enforced with aspect-ratio: 1/1 on the CELL, and the media inside
   is absolutely positioned to fill it. That is deliberate rather than putting
   the ratio on the <img>: a video element ignores an intrinsic ratio set that
   way, and a mixed grid of images and videos has to line up regardless.
   ========================================================================== */

/* the borrowed head needs a little air under it before the grid starts */
.akg-one__head { margin-bottom: clamp(26px, 3.2vw, 48px); }

.akg-media {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(10px, 1.2vw, 16px);
  margin: 0; padding: 0;
  list-style: none;
}
@media (min-width: 560px)  { .akg-media { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .akg-media { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* One square, whatever is inside it. overflow: hidden clips the zoom on hover
   and keeps the video's own corners inside the radius. */
.akg-media__cell {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 14px;
  background: var(--g-paper, #f6f8f6);
  border: 1px solid var(--g-line, #e4e9e4);
}

/* Fill the square. inset: 0 rather than width/height: 100% so a width or height
   ATTRIBUTE on the element cannot become the used size — the mistake that made
   the media library and the product pages ragged. */
.akg-media__cell > img,
.akg-media__cell .akg-v,
.akg-media__cell .akg-v__el {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  object-fit: cover;
  display: block;
}
.akg-media__cell > img { transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.akg-media__cell:hover > img { transform: scale(1.04); }

/* ------------------------------- video tile ------------------------------- */

.akg-v { border-radius: inherit; }

/* A paused video with no poster is a black square; a subtle wash reads as
   "there is something here" while the first frame is still being fetched. */
.akg-v__el { background: #0f2340; }

/* Both buttons share one look. They sit ON the video, so they carry their own
   ground — a play glyph in white on an unknown frame is not reliably visible. */
.akg-v__play,
.akg-v__mute {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--g-ink, #0f2340);
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
  box-shadow: 0 4px 14px -4px rgba(9, 24, 12, 0.55);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.25s, opacity 0.25s;
}
.akg-v__play:hover,
.akg-v__mute:hover { transform: scale(1.07); background: #fff; }
.akg-v__play:focus-visible,
.akg-v__mute:focus-visible { outline: 2px solid var(--g-green, #2f8a34); outline-offset: 3px; }

/* Play: centred, the primary action on the tile. */
.akg-v__play {
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(48px, 5vw, 62px);
  height: clamp(48px, 5vw, 62px);
  font-size: clamp(15px, 1.4vw, 19px);
}
.akg-v__play:hover { transform: translate(-50%, -50%) scale(1.07); }
/* the icon is optically left of centre in a circle, so nudge it back */
.akg-v__play i { transform: translateX(1px); }

/* While it plays, the big button gets out of the way but stays reachable —
   removing it entirely would leave no way to pause. */
.akg-v.is-playing .akg-v__play { opacity: 0; }
.akg-v.is-playing:hover .akg-v__play,
.akg-v.is-playing .akg-v__play:focus-visible { opacity: 1; }

/* Mute: bottom-right, secondary, always visible — a clip that starts muted has
   to advertise that it has sound at all. */
.akg-v__mute {
  right: 10px; bottom: 10px;
  width: 34px; height: 34px;
  font-size: 12px;
}
.akg-v__mute:hover { transform: scale(1.07); }
/* unmuted reads as "on": the brand green, so the state is colour and icon, not
   icon alone */
.akg-v.is-unmuted .akg-v__mute {
  background: #2c8231;
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .akg-media__cell > img,
  .akg-v__play, .akg-v__mute { transition-duration: 0.001ms !important; }
  .akg-media__cell:hover > img { transform: none; }
}

/* --------------------------------------------------------------------------
   .akb--slim — the band as a crumb trail and nothing else.
   The gallery album page carries its title and its introduction in the
   .akm__head below, so the band has no heading to make room for. Without this
   it kept the full 434px of a band built around an h1 that is no longer there.
   -------------------------------------------------------------------------- */
.akb--slim { padding-top: clamp(18px, 2vw, 28px); padding-bottom: clamp(18px, 2vw, 28px); }
.akb--slim .akb-crumb { margin-top: 0; }
/* the same clearance rule the other bands get for the sticky header */
#smooth-content > .akb--slim { padding-top: calc(clamp(18px, 2vw, 28px) + var(--ac-header-h)); }


/* ==========================================================================
   BLOCK: Arabic typeface — "arabic-rania"
   --------------------------------------------------------------------------
   The same face the Sea Gate site uses, self-hosted here from
   assets/fonts/arabic-rania.woff2.

   HOW THIS REACHES EVERY ARABIC WORD WITHOUT TOUCHING A SINGLE SELECTOR

   The obvious approach is to prepend "arabic-rania" to every font stack. There
   are 56 of them across main.css and aksu.css, most in the vendor theme, and a
   theme update would quietly undo the lot.

   Instead the face is declared UNDER THE FAMILY NAMES THE SITE ALREADY USES,
   each with a unicode-range covering only Arabic. A family may be assembled
   from several @font-face rules with disjoint ranges — that is exactly how
   Google Fonts serves Outfit, split latin / latin-ext / vietnamese. So:

     font-family: "Outfit", sans-serif   ->  Latin glyphs come from Outfit,
                                             Arabic glyphs come from this file.

   Every existing rule gains Arabic coverage and no Latin text changes. The
   browser only downloads the 45 KB when an Arabic character is actually in the
   page's TEXT, so in practice that is the ar/ pages and nothing else — the
   language switcher shows the code "AR", and the native name العربية sits in a
   title and an alt attribute, neither of which this stylesheet paints.

   WHY THE WEIGHTS ARE SPELLED OUT

   The first version of this block used font-weight: 100 900 for every family
   and only half worked. Measured in the browser: Outfit and Fraunces picked up
   the Arabic face, Playball did so at 700 but not at 400, and Poppins never did.

   Chrome resolves WEIGHT before it consults unicode-range. Google serves
   Playball as a single 400 face and Poppins as seven discrete faces, so at
   those weights an exact Latin-only match wins outright and the Arabic face is
   never reached — the character then falls through to the next family in the
   stack, i.e. the operating system. Outfit escaped this because Google serves
   it as one variable 100..900 face, which ties with 100 900 and lets coverage
   decide.

   So each family is declared here at exactly the weights it already declares.
   An exact tie on weight sends the match on to unicode-range, which is the step
   that picks the right file. The weights below mirror the Google Fonts request
   in the page head — if that link changes, this list has to change with it.

   The Font Awesome families are deliberately NOT listed. Their codepoints sit
   in the Private Use Area, nowhere near the ranges below, but redeclaring an
   icon family is the kind of thing that ends with squares instead of arrows.

   NO size-adjust, and that is a measured decision rather than an omission. The
   Sea Gate site pairs this face with Manrope and compensates with
   html[lang="ar"] body { font-size: 17px }, so the obvious move was to carry a
   ~106% size-adjust across. Measuring the two faces in the browser at 100px
   says otherwise:

       Outfit          x-height 49   cap 70   ascender 72   descender 21
       arabic-rania    body     50            alif     78   descender 22

   Against Outfit the raw face is already matched — the Arabic body height lands
   on the Latin x-height and the descenders agree to a pixel. Manrope simply has
   a much larger x-height than Outfit, which is what Sea Gate was correcting
   for. Applying 106% here pushed the ascender to 83 against Latin's 72, which
   is a visibly oversized Arabic line, so the adjustment is left off.
   ========================================================================== */
/* the face under its own name */
@font-face {
  font-family: "arabic-rania";
  src: url("../fonts/arabic-rania.woff2") format("woff2"),
       url("../fonts/arabic-rania.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+060C, U+061B, U+061F, U+0600-06FF, U+0750-077F, U+08A0-08FF,
                 U+FB50-FDFF, U+FE70-FEFF, U+200F, U+2066-2069;
}

/* Outfit is served by Google as a single variable 100..900 face; a matching
   range ties on weight and lets unicode-range decide. Fraunces is not in the
   Google request at all, so nothing competes with it. */
@font-face {
  font-family: "Outfit";
  src: url("../fonts/arabic-rania.woff2") format("woff2"),
       url("../fonts/arabic-rania.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+060C, U+061B, U+061F, U+0600-06FF, U+0750-077F, U+08A0-08FF,
                 U+FB50-FDFF, U+FE70-FEFF, U+200F, U+2066-2069;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/arabic-rania.woff2") format("woff2"),
       url("../fonts/arabic-rania.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+060C, U+061B, U+061F, U+0600-06FF, U+0750-077F, U+08A0-08FF,
                 U+FB50-FDFF, U+FE70-FEFF, U+200F, U+2066-2069;
}

/* Playball — Google serves weight 400 only */
@font-face {
  font-family: "Playball";
  src: url("../fonts/arabic-rania.woff2") format("woff2"),
       url("../fonts/arabic-rania.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+060C, U+061B, U+061F, U+0600-06FF, U+0750-077F, U+08A0-08FF,
                 U+FB50-FDFF, U+FE70-FEFF, U+200F, U+2066-2069;
}

/* Poppins — the seven weights requested in the page head */
@font-face {
  font-family: "Poppins";
  src: url("../fonts/arabic-rania.woff2") format("woff2"),
       url("../fonts/arabic-rania.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  unicode-range: U+060C, U+061B, U+061F, U+0600-06FF, U+0750-077F, U+08A0-08FF,
                 U+FB50-FDFF, U+FE70-FEFF, U+200F, U+2066-2069;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/arabic-rania.woff2") format("woff2"),
       url("../fonts/arabic-rania.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+060C, U+061B, U+061F, U+0600-06FF, U+0750-077F, U+08A0-08FF,
                 U+FB50-FDFF, U+FE70-FEFF, U+200F, U+2066-2069;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/arabic-rania.woff2") format("woff2"),
       url("../fonts/arabic-rania.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+060C, U+061B, U+061F, U+0600-06FF, U+0750-077F, U+08A0-08FF,
                 U+FB50-FDFF, U+FE70-FEFF, U+200F, U+2066-2069;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/arabic-rania.woff2") format("woff2"),
       url("../fonts/arabic-rania.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+060C, U+061B, U+061F, U+0600-06FF, U+0750-077F, U+08A0-08FF,
                 U+FB50-FDFF, U+FE70-FEFF, U+200F, U+2066-2069;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/arabic-rania.woff2") format("woff2"),
       url("../fonts/arabic-rania.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+060C, U+061B, U+061F, U+0600-06FF, U+0750-077F, U+08A0-08FF,
                 U+FB50-FDFF, U+FE70-FEFF, U+200F, U+2066-2069;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/arabic-rania.woff2") format("woff2"),
       url("../fonts/arabic-rania.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+060C, U+061B, U+061F, U+0600-06FF, U+0750-077F, U+08A0-08FF,
                 U+FB50-FDFF, U+FE70-FEFF, U+200F, U+2066-2069;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/arabic-rania.woff2") format("woff2"),
       url("../fonts/arabic-rania.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+060C, U+061B, U+061F, U+0600-06FF, U+0750-077F, U+08A0-08FF,
                 U+FB50-FDFF, U+FE70-FEFF, U+200F, U+2066-2069;
}