/* ==========================================================================
   A&G — site overrides (loaded LAST, so these win over template CSS)
   Small, targeted fixes on top of the pixelr template.
   ========================================================================== */

/* Header: nudge "MENU" a little further left and "GET A QUOTE" a little further
   right (they sat ~100px in from each edge). Transform = visual shift only, no
   layout reflow, logo stays centred. Desktop only (mobile header is different). */
@media (min-width: 1200px) {
  .header-section .header-left { transform: translateX(-60px); }
  .header-section .header-right { transform: translateX(60px); }
}

/* FIX: the decorative dashed vertical guides in the About section
   (.line-shape-1 / -3 shipped with z-index:2) were painting OVER the
   project images. Push every guide behind the section content. */
.line-shape-wrap > .line-shape-1,
.line-shape-wrap > .line-shape-2,
.line-shape-wrap > .line-shape-3,
.line-shape-wrap > .line-shape-4,
.line-shape-wrap > .line-shape-5 {
  z-index: 0 !important;
  pointer-events: none;
}

/* Lift the actual About content above the guides. */
.line-shape-wrap > .about-area {
  position: relative;
  z-index: 1;
}

/* FIX: Featured-projects images shipped with no set dimensions, so each card
   rendered at its photo's natural size (uneven heights/widths). Give every
   project image an identical footprint and cover-fit the photo — no stretch,
   no distortion, consistent cards as you scroll. */
.project-area-one .card-items .card-single-item .project-image {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  position: relative;
  border-radius: 14px;
}
/* !important is required: main.css ships a bare `img { height: auto !important }`
   (line ~16584) which otherwise beats this rule no matter how specific it is —
   leaving every project photo at its own natural height and collapsing lazy ones
   to 0. Cards show a clean cropped (cover) image; the FULL image appears in a
   cursor-following preview card on hover (see index.inline.js / .ag-cursor-card). */
.project-area-one .card-items .card-single-item .project-image img {
  width: 100%;
  height: clamp(300px, 40vw, 520px) !important;
  object-fit: cover !important;
  object-position: center;
  display: block;
}
@media (max-width: 767px) {
  .project-area-one .card-items .card-single-item .project-image img {
    height: clamp(260px, 70vw, 420px) !important;
  }
  /* On mobile the card is a column, and the `align-items:center` below stops the
     image from stretching — so it shrink-wraps to whatever width its own aspect
     ratio yields at the fixed height (248/220/205px instead of full-bleed).
     Force the image column full width. */
  .project-area-one .card-items .card-single-item .project-image {
    width: 100%;
    align-self: stretch;
  }
}

/* ── Client wall ──────────────────────────────────────────────────────────────
   A&G builds glazed façades, so the client wall is drawn as one: each name sits
   in a glass panel, panels joined by hairline aluminium mullions, scrolling as a
   continuous curtain-wall elevation. Replaces the previous look, where the
   theme's 290px logo-sized box (.brand-logo, built to hold a logo IMAGE) drew a
   second border around our wordmark chip — a box inside a box, in faded grey. */

/* 1. Retire the theme's outer box + its black hover-fill; the panel below is now
      the only frame. gap:0 also makes the marquee's translateX(-50%) land exactly
      on a panel edge, so the loop is seamless instead of jumping. */
.brand-area-one .marquee-content,
.brand-area-one .marquee-content-two { gap: 0; }
.brand-area-one .brand-logo {
  border: 0;
  width: auto;
  padding: 0;
}
.brand-area-one .brand-logo::before { display: none; }

/* 2. The glazing panel. Crisp edges (glass is cut, not rounded); the gradient is
      light raking across glass; the right hairline is the mullion joint. */
.brand-area-one .ag-client {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  white-space: nowrap;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.01em;
  color: #33505f;
  padding: 26px 38px;
  border: 0;
  border-right: 1px solid #d3dde4;
  border-radius: 0;
  background: linear-gradient(160deg, #f8fafb 0%, #eef3f6 55%, #e7edf1 100%);
  position: relative;
  transition: color .3s ease, background .3s ease;
}
/* the odd square bullet — removed; the panel is the treatment now */
.brand-area-one .ag-client::before { display: none; }

/* 3. Hover: the panel catches the light. Rows already pause on hover. */
.brand-area-one .ag-client::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--gt-theme);
  transform: scaleX(0);
  transition: transform .35s ease;
}
.brand-area-one .ag-client:hover {
  color: var(--ag-blue-deep);
  background: linear-gradient(160deg, #ffffff 0%, #f6f9fb 55%, #eef4f7 100%);
}
.brand-area-one .ag-client:hover::after { transform: scaleX(1); }

/* 4. Close the band top and bottom — the transoms — and let it fade out at both
      ends instead of hard-cutting at the viewport edge, so the wall reads as
      continuing past the frame rather than being chopped. */
.brand-area-one .marquee-wrap {
  border-top: 1px solid #d3dde4;
  border-bottom: 1px solid #d3dde4;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

@media (max-width: 767px) {
  .brand-area-one .ag-client { padding: 20px 24px; font-size: 15px; }
}
/* Don't scroll the wall for people who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  .brand-area-one .marquee-content,
  .brand-area-one .marquee-content-two { animation: none; }
}

/* The theme paints a 272px-wide, full-height BLACK bar behind the testimonial
   IMAGE column (main.css:21916, `.testimonial-content::before`). That image
   column (.testimonial-img-slider) isn't in this build, so the bar backs nothing
   and simply covers the client attribution — "Ar. Mahesh Kembavi / Kembavi
   Architecture Foundation" was hidden behind it, leaving only "OUNDATION" showing.
   It's display:none below 1400px, so it only ever appeared on wide screens. */
.testimonial-area-one .testimonial-wrapper .testimonial-content::before {
  display: none;
}

/* "Façade systems engineered to perform" was shattering into 4 cramped lines.
   Cause: this heading rides the THEME's bare `h2 { font-size: 90px }` (main.css:580)
   while main.css:19151 caps it at `max-width: 744px` — a measure the theme picked
   for its own short placeholder title. Our real copy needs ~1420px for one line at
   90px, so it could never fit. Put it on the site's OWN heading scale (.ag-h2 =
   clamp(30px,4.2vw,54px)), which the very next section already uses; at 54px the
   text needs ~850px, so it sits on one line and matches the page. */
.service-area-one .service-wrapper .section-title .title {
  font-size: clamp(30px, 4.2vw, 54px);
  line-height: 1.05;
  max-width: 900px;
}

/* Same `img { height: auto !important }` problem as above: every one of these
   intends to cover-fill a fixed-height container, but silently loses and renders
   at the photo's natural aspect instead — so cards overflow by up to 220px and
   object-fit never engages. (.ag-person__ph / .ag-perf__av are NOT listed: they
   use position:absolute + inset:0, so their height comes from the insets and
   they already render correctly.) */
.ag-card .thumb img,
.ag-news-card .thumb img,
.ag-svc__media img,
.ag-split .media img {
  height: 100% !important;
}
/* …and DON'T stretch the rotated title column to the image height — center it,
   so long project names (e.g. "Mahindra Vehicle Dev. Centre") are never clipped. */
.project-area-one .card-items .card-single-item {
  align-items: center;
}
.project-area-one .card-items .card-single-item .card-text-content .card-content .title {
  font-size: clamp(16px, 1.4vw, 22px);
  line-height: 1.1;
}

/* FIX: stray horizontal overflow from decorative template elements was
   shifting content left and clipping the right edge (e.g. the 3rd
   "Top Performers" card). Clip any horizontal spill site-wide.
   `clip` (not `hidden`) so it doesn't break sticky/scroll behaviour. */
html, body { overflow-x: clip; max-width: 100%; }

/* POLISH: "Our People" spotlight cards — subtle hover lift + cyan ring on
   the avatar so the (now photo) headshots feel intentional. */
.ag-perf__card { transition: transform .35s ease, box-shadow .35s ease; }
.ag-perf__card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(0,0,0,.55); }
.ag-perf__av { box-shadow: 0 0 0 4px rgba(0,163,196,.20); }
/* Homepage "Our People" is now admin-driven (any N up to 4). Flex the grid so
   3 or 4 spotlight cards both lay out cleanly instead of a rigid 3-up. */
.ag-perf { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)) !important; }

/* FIX: header had 60px of vertical padding (too tall). Tighten it. */
.header-1 .header-main { padding: 16px 0; }

/* FIX: "What our clients say" section shipped with an off-brand pink
   background (#F9EFF1) and a neon-lime decorative shape. Bring the A&G
   theme in: cool brand tint here + the shape image recoloured to cyan.
   (The black testimonial panel is intentionally kept.) */
.testimonial-area-one { background-color: #eef4f6; }

/* FIX: contact "locations" card sits on cyan; the muted sub-text (Chennai,
   Dubai…) was low-contrast. Make those lines white so they read clearly. */
.contact-area .contact-wrapper .contact-cta-wrap .contact-cta .text {
  color: rgba(255,255,255,.92);
}

/* FIX: footer newsletter input was oversized (100px tall pill). Slim + neaten. */
.footer-area-one .footer-wrapper .footer-top-right-content .form-control {
  height: 54px;
  font-size: 15px;
  line-height: normal;
  padding: 0 58px 0 22px;
  border-radius: 12px;
  margin-bottom: 12px;
}
.footer-area-one .footer-wrapper .footer-top-right-content .form-group .icon { right: 20px; }

/* ==========================================================================
   MOBILE POLISH — tighten oversized desktop spacing on small screens so the
   custom A&G sections don't leave huge empty gaps / over-tall heroes on phones.
   (The grids already collapse to 1 column via ag-brand.css.)
   ========================================================================== */
@media (max-width: 767px) {
  .ag-sec { padding: 62px 0; }
  .ag-sec.tight { padding: 46px 0; }
  .ag-page-hero { padding: 150px 0 58px; }
  .ag-page-hero .lead { font-size: 16px; }
  .ag-lead { font-size: 16px; }
}
@media (max-width: 480px) {
  .ag-sec { padding: 48px 0; }
  .ag-sec.tight { padding: 38px 0; }
  .ag-page-hero { padding: 128px 0 46px; }
}
/* prefer dynamic viewport height on phones to avoid the iOS Safari jump */
@media (max-width: 575px) {
  .ag-hero { min-height: 88dvh; }
}

/* FIX (critical mobile bug): several grids carry an INLINE grid-template-columns
   (e.g. milestones/how-we-work = repeat(4,1fr), project detail = 1.6fr 1fr).
   Inline styles outrank the stylesheet's responsive media queries, so those
   sections stayed 3–4 columns on phones and the text clipped. Force sane
   column counts on small screens regardless of the inline value. */
@media (max-width: 991px) {
  .ag-grid[style*="grid-template-columns"] { grid-template-columns: repeat(2, 1fr) !important; }
  .ag-split[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  .ag-grid[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}
/* never let a long word clip inside a card */
.ag-card h3, .ag-card p, .ag-card .meta,
.ag-award h3, .ag-award p { overflow-wrap: break-word; word-break: normal; }

/* ── Mobile usability polish ─────────────────────────────────────────────────
   Audited every page at 390px: no overflow, hero/menu/detail all read well.
   These are the two concrete fixes found. */

/* 1. iOS zoom-on-tap: Safari auto-zooms into any form field smaller than 16px,
   which was firing on every field of the Contact and Get-a-Quote forms (they
   were 14.5–15px). Force 16px on mobile so tapping a field never zooms. */
@media (max-width: 767px) {
  input:not([type="checkbox"]):not([type="radio"]),
  textarea,
  select,
  .form-control {
    font-size: 16px !important;
  }
}

/* 2. Bigger touch targets: footer navigation, social and service links had a
   ~19px tall tap area (fine to read, small to hit). Give them a comfortable
   ~44px target without changing the visual spacing much. */
@media (max-width: 767px) {
  .footer-area-one .footer-menu ul li a,
  .footer-area-one .footer-menu li a,
  .footer-widget .footer-menu li a,
  footer .footer-menu li a {
    display: inline-block;
    padding: 6px 0;
  }
}

/* Stop iOS from silently re-scaling text after orientation changes. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ── Services preview image ──────────────────────────────────────────────────
   Show the FULL image (contain) inside the fixed frame instead of cropping, and
   balance the two columns: stretch both to equal height and spread the service
   rows to fill, so "01" meets the top of the preview and "06" meets the bottom —
   no dead white space below the list. */
/* list is vertically centred next to the preview (theme default) — no forced
   stretch/space-between, which was blowing the row gaps wide open at some widths */
/* Align the services list (left) and the preview (right) at the TOP, not centred —
   they're different heights, so centring pushed the shorter list down and their
   tops didn't line up. */
.ag-svc { align-items: start; }
.ag-svc__media img { object-fit: cover !important; } /* clean cropped fill */

/* ── Cursor-following full-image preview ─────────────────────────────────────
   Project cards stay cropped; hovering one shows the full, uncropped photo in a
   small card that follows the cursor (wired in index.inline.js). Desktop only. */
.ag-cursor-card {
  position: fixed;
  top: 0; left: 0;
  z-index: 9999;
  pointer-events: none;
  padding: 6px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 30px 70px -18px rgba(8, 52, 76, .55);
  opacity: 0;
  transform: translate(-9999px, -9999px); /* JS sets this to follow the cursor */
  scale: .94;
  transition: opacity .16s ease, scale .16s ease;
  will-change: transform;
}
.ag-cursor-card.show { opacity: 1; scale: 1; }
.ag-cursor-card img {
  display: block;
  max-width: 340px;
  max-height: 74vh;
  width: auto;
  height: auto;
  border-radius: 9px;
}
@media (hover: none) { .ag-cursor-card { display: none !important; } }
/* The theme's custom "magic cursor" (.mouseCursor inner/outer) has no mouse to
   follow on touch devices, so it parks as a stray dot. Hide it there. */
@media (hover: none), (pointer: coarse) { .mouseCursor { display: none !important; } }
/* Brand wall: on touch, a tap sticks the :hover state and freezes the marquee
   (main.css sets animation-play-state:paused on hover). Keep it always moving on
   touch — no pause-on-touch interactivity. */
@media (hover: none), (pointer: coarse) {
  .brand-area-one .marquee-content:hover,
  .brand-area-one .marquee-content-two:hover { animation-play-state: running !important; }
}

/* ── Mobile clean-up pass ────────────────────────────────────────────────────
   Three readability/compactness wins found in a full mobile review. */

/* (a) Homepage "who we are" intro: main.css:7826 sets it ALL-CAPS, which is hard
   to read as a long paragraph on a phone. Sentence-case + comfortable size,
   matching the About page body. */
@media (max-width: 767px) {
  .about-wrapper .about-right-content .about-section-title .text {
    text-transform: none !important;
    font-size: 15.5px !important;
    line-height: 1.62 !important;
  }
}

/* (b) Homepage stats (Projects / Area / Years): were three cramped columns with
   labels wrapping. Stack them into clean full-width rows. */
@media (max-width: 767px) {
  .about-wrapper .about-right-content .about-main-content .about-info {
    flex-direction: column !important;
    gap: 0 !important;
  }
  .about-wrapper .about-right-content .about-main-content .about-info .about-info-item {
    margin-bottom: 18px !important;
  }
  .about-wrapper .about-right-content .about-main-content .about-info .about-info-item:last-child {
    margin-bottom: 0 !important;
  }
}

/* Team page: portrait photo frames (4:5) — headshots are portrait, and the
   founder's photo needs portrait orientation. object-position keeps faces (upper
   third) in view rather than centre-cropping them. */
.ag-person__ph { aspect-ratio: 4 / 5; }
.ag-person__ph img { object-position: center 22%; }

/* ── Recent Work: the rolling "RECENT WORK" headline is 120px (main.css:10047),
   which massively overflows a phone screen. Scale it down on mobile so it reads
   as a headline rather than being cut off on both sides. */
@media (max-width: 767px) {
  .project-area-one .project-wrapper .rolling-text .marquee-text {
    font-size: 46px !important;
    line-height: 48px !important;
    letter-spacing: -0.5px !important;
  }
  .project-area-one .project-wrapper .rolling-text .marquee-text span { margin: 0 18px !important; }
  .project-area-one .project-wrapper .wrapper-rolling-text { margin-bottom: 28px !important; }
}

/* ── Awards / recognitions on mobile: instead of one long single-column stack,
   lay them out as a 2-up grid of compact tiles — icon on top, then year, title
   and a short note. Reads as a tidy badge wall rather than a repetitive list. */
@media (max-width: 767px) {
  .ag-awards { grid-template-columns: 1fr 1fr !important; gap: 12px !important; margin-top: 24px !important; }
  .ag-award {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 9px !important;
    padding: 16px 14px !important;
  }
  .ag-award .ic { width: 42px !important; height: 42px !important; font-size: 18px !important; }
  .ag-award .yr { font-size: 13px !important; }
  .ag-award h3 { font-size: 14.5px !important; line-height: 1.25 !important; margin: 2px 0 4px !important; }
  .ag-award p { font-size: 12px !important; line-height: 1.5 !important; }
}

/* ── Mobile: homepage "Who we are" declutter ─────────────────────────────────
   On phones this section had three things fighting for the same space: the
   decorative dashed guide-lines bleeding through the text, a floating "ABOUT US"
   circle badge overlapping the heading, and a long ALL-CAPS heading reading as a
   wall of caps. Strip the desktop-only decoration and tighten the heading so the
   section can breathe. Layout/spacing only — no effect on desktop or tablet. */
@media (max-width: 767px) {
  /* dashed vertical guide-lines (main.css:16821, positioned at left:200px etc.)
     are pure desktop decoration; on a 390px screen they cut across the copy and
     can even push a horizontal scrollbar. Remove them. */
  .line-shape-wrap [class^="line-shape-"] { display: none !important; }

  /* floating "ABOUT US" circle badge — redundant on mobile (the nav, hero and
     footer all link to /about) and it overlaps the heading when the columns
     stack. Hide the whole decorative button cluster. */
  .about-wrapper .about-btn-content { display: none !important; }
  .about-wrapper .top-content { margin-bottom: 4px !important; }

  /* long ALL-CAPS statement heading: tighter leading + a touch smaller so it
     stops overflowing and reads as a headline, not a block of shouting. */
  .about-wrapper .about-right-content .about-section-title .title {
    font-size: 23px !important;
    line-height: 30px !important;
    margin-bottom: 20px !important;
  }
}

/* ==========================================================================
   Footer — CTA-led redesign (replaces the template's blue-heavy .footer-area-one)
   ========================================================================== */
.ag-footer {
  background: linear-gradient(180deg, #0a3a53 0%, #082e43 55%, #061f2e 100%);
  color: #b7c8d1;
  font-family: "Inter", sans-serif;
  padding-top: 60px;
}
.ag-footer .container { max-width: 1240px; }

/* CTA band */
.ag-footer__cta {
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
  flex-wrap: wrap;
  padding-bottom: 42px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.ag-footer__eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: #46c7e2; margin-bottom: 12px;
}
.ag-footer__cta-text h2 {
  font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase;
  letter-spacing: .5px; line-height: .98; color: #fff; margin: 0;
  font-size: clamp(30px, 4.4vw, 56px);
}
.ag-footer__cta-act { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.ag-footer__btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: #00a3c4; color: #06222f; font-weight: 700; font-size: 15px;
  padding: 15px 28px; border-radius: 40px; letter-spacing: .3px;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
  box-shadow: 0 14px 34px -12px rgba(0,163,196,.6);
}
.ag-footer__btn:hover { background: #22bcd9; transform: translateY(-2px); color: #06222f; text-decoration: none; box-shadow: 0 20px 42px -12px rgba(0,163,196,.7); }
.ag-footer__phone { color: #eaf5f9; font-weight: 600; font-size: 16px; display: inline-flex; align-items: center; gap: 9px; }
.ag-footer__phone i { color: #46c7e2; font-size: 14px; }
.ag-footer__phone:hover { color: #fff; text-decoration: none; }

/* links grid */
.ag-footer__grid {
  display: grid; grid-template-columns: 2.1fr 1fr 1.2fr 1fr; gap: 40px;
  padding: 48px 0 44px;
}
.ag-footer__logo { display: inline-block; margin-bottom: 18px; }
.ag-footer__tagline { font-size: 14.5px; line-height: 1.7; color: #9fb4bf; max-width: 340px; margin: 0 0 20px; }
.ag-footer__mail { color: #eaf5f9; font-weight: 600; font-size: 15px; border-bottom: 1px solid rgba(255,255,255,.25); padding-bottom: 2px; }
.ag-footer__mail:hover { color: #46c7e2; border-color: #46c7e2; text-decoration: none; }
.ag-footer__social { display: flex; gap: 10px; margin-top: 22px; }
.ag-footer__social a {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: #cfe0e8;
  font-size: 15px; transition: all .2s ease;
}
.ag-footer__social a:hover { background: #00a3c4; border-color: #00a3c4; color: #06222f; transform: translateY(-2px); }

.ag-footer__col h4 {
  font-family: "Inter", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: #6f8894; margin: 0 0 20px;
}
.ag-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ag-footer__col ul li a, .ag-footer__offices li { color: #c1d1da; font-size: 14.5px; transition: color .18s ease; }
.ag-footer__col ul li a { display: inline-block; }
.ag-footer__col ul li a:hover { color: #fff; text-decoration: none; padding-left: 4px; }
.ag-footer__offices li { color: #9fb4bf; }

/* bottom bar */
.ag-footer__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 22px 0 26px; border-top: 1px solid rgba(255,255,255,.1);
  font-size: 13px; color: #7f97a3;
}
.ag-footer__bottom a { color: #b7c8d1; font-weight: 600; }
.ag-footer__bottom a:hover { color: #46c7e2; text-decoration: none; }
.ag-footer__loc { color: #6f8894; }

@media (max-width: 900px) {
  .ag-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .ag-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .ag-footer { padding-top: 44px; }
  .ag-footer__cta { padding-bottom: 30px; }
  .ag-footer__cta-act { width: 100%; }
  .ag-footer__grid { grid-template-columns: 1fr 1fr; padding: 34px 0 30px; }
  .ag-footer__bottom { justify-content: center; text-align: center; }
}

/* ==========================================================================
   Compact dropdown menu — replaces the template's full-screen offcanvas.
   ========================================================================== */
/* Kill the full-screen menu + its dark overlay. */
.offcanvas__info, .offcanvas__overlay { display: none !important; }

.ag-menu {
  position: fixed;
  z-index: 1200;
  width: 268px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border: 1px solid #e6ecf0;
  border-radius: 16px;
  box-shadow: 0 28px 64px -18px rgba(8, 52, 76, .42);
  padding: 10px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.ag-menu.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.ag-menu[hidden] { display: none; }

/* Dim backdrop behind the mobile dropdown — makes outside-tap-to-close reliable
   on touch (a plain document-click can be swallowed by the tapped element). */
.ag-menu-backdrop {
  position: fixed; inset: 0; z-index: 1190;
  background: rgba(6, 28, 40, .28);
  opacity: 0; transition: opacity .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.ag-menu-backdrop.open { opacity: 1; }
.ag-menu-backdrop[hidden] { display: none; }

/* Enlarge the hamburger hit area on mobile to a comfortable ~44px tap target
   (the bars themselves are only ~11px tall). Negative margin keeps the visual
   position unchanged while padding expands what's tappable. */
@media (max-width: 1199px) {
  .header-right .header__hamburger .sidebar__toggle {
    padding: 16px 0; margin: -16px 0;   /* vertical-only tap target — horizontal padding overflowed the viewport */
    cursor: pointer; touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  /* The header-LEFT holds the desktop menu + desktop "MENU" toggle (both hidden
     on mobile) but still reserved ~100px of width, pushing the hamburger past
     the right edge where it got clipped. Remove it on mobile — the hamburger
     lives in header-right and the menu is the dropdown. */
  .header-1 .header-left { display: none; }
}
.ag-menu nav { display: flex; flex-direction: column; gap: 2px; }
.ag-menu a, .ag-menu__subtoggle {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: "Inter", sans-serif; font-size: 15px; font-weight: 600;
  color: #0d2a39; padding: 11px 14px; border-radius: 10px;
  background: transparent; border: 0; width: 100%; text-align: left; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.ag-menu a:hover, .ag-menu__subtoggle:hover { background: #eef4f6; color: #00628f; text-decoration: none; }
.ag-menu a.active { color: #00a3c4; }
.ag-menu__subtoggle i { font-size: 12px; color: #8aa0ac; transition: transform .2s ease; }
.ag-menu__grp.open .ag-menu__subtoggle i { transform: rotate(180deg); }
.ag-menu__sub {
  display: none; margin: 2px 6px 6px; padding-left: 12px;
  border-left: 2px solid #e4ebef;
}
.ag-menu__grp.open .ag-menu__sub { display: block; }
.ag-menu__sub a { font-size: 13.5px; font-weight: 500; color: #4d5a67; padding: 8px 12px; }
.ag-menu__sub a.ag-menu__all { color: #00628f; font-weight: 600; }

/* ==========================================================================
   Project grid — a clean, aligned row of uniform cards.
   Earlier this used [data-fit] to size each thumbnail to its photo's real
   aspect ratio, which made the cards stagger at different heights (see #29).
   The grid now uses the base .ag-card .thumb (aspect-ratio:4/3 + object-fit:
   cover), so every cover shot crops to an identical frame and the cards line
   up neatly. align-items:stretch equalises card height within each row so the
   tops AND bottoms align. (data-fit was removed from the markup in
   projects.astro; it is kept only on the detail-page hero below.)
   ========================================================================== */
#projectGrid { align-items: stretch; }
#projectGrid .ag-card .meta { flex: 1 0 auto; }
/* Project detail hero image shows the full photo whatever its shape. */
.ag-split .media[data-fit] img { object-fit: cover; }

/* ==========================================================================
   Company-name reveal — "A&G Facades" extends out from the logo at the top of
   the page, then retracts into the logo on scroll (see #agBrandlock script).
   ========================================================================== */
/* doubled class + !important beats bootstrap's .d-xl-block { display:block!important } */
/* NOTE: don't force display here — that would override bootstrap's `.d-none` and
   show this desktop-only centre logo on tablet/mobile too (two logos). The flex
   display is set inside the min-width:1200px block below, where this logo shows. */
.ag-brandlock.ag-brandlock { align-items: center; position: relative; vertical-align: middle; }
.ag-brandlock .header-logo { position: relative; z-index: 2; }  /* logo sits on top so the name emerges from behind it */
.ag-brandname {
  position: relative;
  z-index: 1;
  overflow: hidden;
  white-space: nowrap;
  max-width: 0;
  margin-left: 0;
  opacity: 0;
  transform: translateX(-26px);   /* tucked left, behind the logo */
  font-family: "Days", "Anton", sans-serif;   /* the brand font from the logo */
  font-weight: 400;
  font-size: 26px;
  letter-spacing: 0.3px;
  line-height: 1;
  text-transform: none;   /* "A&G Facades" mixed case, matching the logo */
  color: #fff;
  text-shadow: 0 1px 10px rgba(0,0,0,.35);
}
/* Brand display font (from the A&G logo lockup). */
@font-face {
  font-family: "Days";
  src: url("/assets/fonts/days.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* transitions enable only after load, so the first reveal animates in */
.ag-brandlock.anim .ag-brandname {
  transition: max-width .55s ease, opacity .4s ease, margin-left .55s ease, transform .55s ease;
}
/* open: the name slides out from behind the logo and unfurls */
.ag-brandlock.open .ag-brandname {
  max-width: 240px;
  opacity: 1;
  margin-left: 12px;
  transform: translateX(0);
}
/* on the sticky (white) header the name is retracted anyway; keep it dark just in case */
#header-sticky.sticky .ag-brandname { color: var(--ag-ink); text-shadow: none; }

/* Anchor the logo+name lockup dead-centre of the header, independent of the flex
   layout (which shifted the logo around at different widths and opened a gap).
   Because the whole lockup is centred with translate(-50%), it re-centres itself
   as the name unfolds — no width-specific tuning, tight to the logo always. */
@media (min-width: 1200px) {
  /* the logo is absolutely centred (below), so it no longer sets the header's
     height — give the header enough min-height that the 65px logo has breathing
     room top and bottom instead of touching the very top edge. */
  .header-1 .header-main { position: relative; min-height: 96px; }
  .sticky.header-1 .header-main { min-height: 80px; }
  .ag-brandlock.ag-brandlock {
    display: inline-flex !important;   /* beats .d-xl-block's display:block here only */
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
  }
}

/* Mobile / tablet: run the same "A&G Facades" reveal from the CORNER logo. The
   mobile lockup (#agBrandlockMobile) sits in the normal header flow (not centred),
   so we only need it to lay the icon + name inline. The name unfurls to the right
   of the logo, holds, then retracts — same intro as desktop. */
@media (max-width: 1199px) {
  #agBrandlockMobile.ag-brandlock { display: inline-flex !important; align-items: center; }
  /* keep the reveal a touch smaller so it never crowds the hamburger on narrow phones */
  #agBrandlockMobile .ag-brandname { font-size: 22px; }
  #agBrandlockMobile.ag-brandlock.open .ag-brandname { max-width: 180px; margin-left: 10px; }
}
@media (max-width: 360px) {
  #agBrandlockMobile .ag-brandname { font-size: 20px; }
}

/* ==========================================================================
   Homepage testimonials — less plain. Natural sentence case (was forced Title
   Case), a star rating, and an initials avatar chip (no photos, per client).
   ========================================================================== */
.testimonial-area-one .testimonial-slider-content .text { text-transform: none !important; }
.testimonial-area-one .testimonial-slider-content .icon svg path { fill: var(--ag-cyan, #00a3c4); }
.ag-testi-stars {
  color: #f0a92c; font-size: 18px; letter-spacing: 4px; margin: 4px 0 18px;
}
/* quote reads a touch larger and calmer */
.testimonial-area-one .testimonial-slider-content .text {
  color: #33505f; font-style: normal; font-weight: 500;
}
/* attribution row with the initials chip */
.testimonial-area-one .testimonial-slider-content .slider-button-content {
  display: flex !important; align-items: center; justify-content: flex-start !important;
  gap: 15px; margin-top: 8px;
}
.ag-testi-av {
  width: 50px; height: 50px; border-radius: 50%; flex: none;
  background: linear-gradient(150deg, var(--ag-blue, #00628f), var(--ag-blue-deep, #08344c));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: "Anton", sans-serif; font-size: 18px; letter-spacing: .5px;
}
.testimonial-area-one .testimonial-slider-content .bottom-title .title { margin: 0; }

/* Get-a-Quote testimonial quote glyph: the class name `.mark` collides with
   Bootstrap's `.mark`/`<mark>` highlight utility (bootstrap.min.css sets
   `background-color: var(--bs-highlight-bg)` = #fff3cd + padding), painting a
   pale-YELLOW band behind the quotation mark. We only want the big cyan glyph,
   so strip the inherited highlight background and padding. */
.ag-quote .mark { background: transparent !important; padding: 0 !important; }

/* ==========================================================================
   About — Vision & Mission cards (were plain). Icon + accent bar + a large
   faint watermark icon so the section reads richer without heavy graphics.
   ========================================================================== */
.ag-vm { gap: 26px; }
.ag-vm__card {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid #e7ebef; border-radius: 18px;
  padding: 40px 40px 42px;
  box-shadow: 0 20px 50px -34px rgba(8,52,76,.35);
  transition: transform .3s ease, box-shadow .3s ease;
}
.ag-vm__card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(8,52,76,.4); }
.ag-vm__card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--ag-cyan, #00a3c4), var(--ag-blue, #00628f));
}
.ag-vm__ic {
  width: 62px; height: 62px; border-radius: 15px;
  background: linear-gradient(150deg, var(--ag-blue, #00628f), var(--ag-blue-deep, #08344c));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 25px; margin-bottom: 22px; box-shadow: 0 12px 26px -12px rgba(0,98,143,.6);
}
.ag-vm .ag-eyebrow { display: block; margin-bottom: 12px; }
.ag-vm__card p { font-size: 17px; line-height: 1.8; color: var(--ag-steel, #4d5a67); margin: 0; position: relative; z-index: 1; }
/* big faint watermark icon in the corner */
.ag-vm__bg {
  position: absolute; right: -18px; bottom: -26px; font-size: 150px;
  color: var(--ag-blue, #00628f); opacity: .05; z-index: 0; pointer-events: none;
}
@media (max-width: 767px) { .ag-vm__card { padding: 30px 26px 32px; } .ag-vm__bg { font-size: 110px; } }

/* Preloader shows the A&G logo (mark) during page changes, with a soft pulse. */
.ag-loader-logo {
  width: 112px; height: auto; display: block;
  animation: agLoaderPulse 1.4s ease-in-out infinite;
}
@keyframes agLoaderPulse {
  0%, 100% { opacity: .5; transform: scale(.95); }
  50% { opacity: 1; transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) { .ag-loader-logo { animation: none; opacity: 1; } }

/* Get-a-Quote — "prefer to talk" phone callout */
.ag-quote-call { margin-top: 28px; padding-top: 24px; border-top: 1px solid #e7ebef; }
.ag-quote-tel { display: inline-flex; align-items: center; gap: 11px; margin-top: 10px; font-size: 24px; font-weight: 700; color: var(--ag-blue, #00628f); }
.ag-quote-tel i { font-size: 18px; color: var(--ag-cyan, #00a3c4); }
.ag-quote-tel:hover { color: var(--ag-blue-deep, #08344c); text-decoration: none; }

/* ==========================================================================
   About — Factory Setup section (admin-editable photo + YouTube video).
   Shows a clean "coming soon" placeholder until content is added.
   ========================================================================== */
.ag-factory-media { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; margin-top: 34px; }
.ag-factory-media .media { border-radius: 16px; overflow: hidden; background: #eef2f5; box-shadow: 0 22px 50px -30px rgba(8,52,76,.4); }
.ag-factory-media .media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ag-factory-vid { position: relative; aspect-ratio: 16 / 9; }
.ag-factory-vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ag-factory-soon {
  margin-top: 34px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 58px 24px; border: 2px dashed #cdd8df; border-radius: 18px;
  background: linear-gradient(160deg, #f6f9fb, #eef3f6); color: #7c8b95; text-align: center;
}
.ag-factory-soon i { font-size: 40px; color: #b7c6cf; }
.ag-factory-soon span { font-size: 15px; font-weight: 500; }

/* Brand tagline — "The Building Makeover Specialists" (hero + footer) */
.ag-hero__tagline {
  font-family: "Inter", sans-serif; font-weight: 700; font-size: 15px;
  letter-spacing: 3px; text-transform: uppercase; color: #46c7e2;
  margin: 20px 0 4px;
}
@media (max-width: 767px) { .ag-hero__tagline { font-size: 13px; letter-spacing: 2px; } }
.ag-footer__slogan {
  font-family: "Inter", sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: 2.5px; text-transform: uppercase; color: #46c7e2;
  margin: 14px 0 10px;
}

/* ==========================================================================
   First section covers the full viewport — the page hero fills the screen, so
   the next section only comes into view on scroll. (.ag-hero on the home page is
   already min-height:100vh.) svh keeps it right on mobile browser chrome.
   ========================================================================== */
.ag-page-hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 100px;   /* clear the fixed header */
  padding-bottom: 40px;
}

/* ==========================================================================
   Section eyebrow labels — centred + bold display font
   "Featured Projects" (recent work) and "What we do" (services) read as small
   thin labels; the client wants them centred and in a bolder, distinct font.
   Anton is the brand display face, so the eyebrow now reads as a strong label.
   ========================================================================== */
.project-area-one .project-wrapper .section-title { text-align: center; }
.service-area-one .service-wrapper .section-title { text-align: center; }
.project-area-one .project-wrapper .section-title .sub-title,
.service-area-one .service-wrapper .section-title .sub-title {
  font-family: "Anton", sans-serif;
  font-weight: 400;            /* Anton reads bold at 400 */
  font-size: 22px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* Remove the decorative dashed guide-lines everywhere (not just mobile) — they
   bleed through content on desktop too, e.g. across the "Meet the full team"
   button and the section eyebrows. */
.line-shape-wrap [class^="line-shape-"] { display: none !important; }

/* "Meet the full team" button — a distinct hover: a light shine sweeps across
   (different from the default lift), and no trailing arrow. */
.ag-btn--sweep { position: relative; overflow: hidden; }
.ag-btn--sweep::after {
  content: ""; position: absolute; top: 0; left: -130%;
  width: 55%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
  pointer-events: none;
}
.ag-btn--sweep:hover::after { left: 140%; }

/* ==========================================================================
   "What makes A&G different" — rebuilt (was a scattered parallax image collage
   that read as messy). Now a centred header, four differentiator cards and a
   clean milestone timeline, all on the site's design tokens.
   ========================================================================== */
.ag-diff-sec { background: var(--ag-paper, #f4f7f9); }
.ag-diff__head { text-align: center; max-width: 760px; margin: 0 auto 48px; }
.ag-diff__head .ag-eyebrow { color: var(--ag-blue-bright, #2bbfde); }
.ag-diff__lead { font-size: 17px; line-height: 1.7; color: var(--ag-steel, #56707f); margin: 16px 0 0; }

.ag-diff__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.ag-diff__card {
  background: #fff; border: 1px solid #e7ebef; border-radius: 16px; padding: 30px 26px;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.ag-diff__card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -24px rgba(13,31,63,.4); border-color: transparent; }
.ag-diff__ic {
  width: 54px; height: 54px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--ag-blue, #00628f), var(--ag-blue-deep, #08344c));
  color: #fff; font-size: 22px; margin-bottom: 18px;
}
.ag-diff__card h3 {
  font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: 20px; line-height: 1.12; color: var(--ag-ink, #0d2a39); margin: 0 0 10px;
}
.ag-diff__card p { font-size: 14.5px; line-height: 1.6; color: var(--ag-steel, #56707f); margin: 0; }

.ag-diff__timeline {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  margin-top: 46px; padding-top: 40px; border-top: 1px solid #dbe3e8;
}
.ag-diff__ms { text-align: center; }
.ag-diff__ms .yr { display: block; font-family: "Anton", sans-serif; font-size: 34px; color: var(--ag-blue, #00628f); line-height: 1; }
.ag-diff__ms .lb { display: block; font-size: 13.5px; color: var(--ag-steel, #56707f); margin-top: 8px; }

@media (max-width: 900px) {
  .ag-diff__grid { grid-template-columns: repeat(2, 1fr); }
  .ag-diff__timeline { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; }
}
@media (max-width: 520px) {
  .ag-diff__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Recognition showcase — premium section ported from the client's
   AwardShowcase.module.css (React/CSS-module → plain CSS, prefixed .ag-aws
   to avoid collisions). Replaces the earlier .ag-diff card grid.
   Content is the company's real, already-stated track record framed as
   recognition — NO fabricated external awards (per the component's README).
   ========================================================================== */
.ag-aws {
  --ink: #13232d; --muted: #637582; --blue: #006e94; --cyan: #08a8c8; --paper: #f4f6f7; --gold: #c7a45a;
  background: var(--paper); color: var(--ink);
  padding: clamp(4.5rem, 8vw, 8.5rem) 1.25rem;
  font-family: "Inter", sans-serif;
}
.ag-aws__shell { max-width: 1240px; margin: 0 auto; }
.ag-aws__intro { display: grid; grid-template-columns: 0.72fr 1.45fr; column-gap: 5rem; }
.ag-aws__eyebrow { color: var(--blue); font-size: .75rem; font-weight: 800; letter-spacing: .14em; margin: .7rem 0 0; text-transform: uppercase; }
.ag-aws__intro h2 { font-family: "Inter", sans-serif; font-weight: 800; font-size: clamp(2.6rem, 5.5vw, 5.25rem); letter-spacing: -.055em; line-height: .93; margin: 0; max-width: 850px; text-transform: none; color: var(--ink); }
.ag-aws__lede { color: var(--muted); font-size: 1.08rem; grid-column: 2; line-height: 1.75; margin: 2rem 0 4rem; max-width: 670px; }
.ag-aws__grid { display: grid; grid-template-columns: .9fr 1.35fr; gap: 1rem; }
.ag-aws__hero { align-items: center; background: var(--ink); color: #fff; display: flex; flex-direction: column; justify-content: center; min-height: 560px; overflow: hidden; padding: 3rem; position: relative; text-align: center; }
.ag-aws__shine { background: radial-gradient(circle, rgba(8,168,200,.24), transparent 64%); height: 520px; left: 50%; position: absolute; top: 35%; transform: translate(-50%,-50%); width: 520px; }
.ag-aws__laurel { color: var(--gold); height: 245px; position: absolute; top: 85px; width: 245px; }
.ag-aws__medal { display: flex; flex-direction: column; position: relative; z-index: 1; }
.ag-aws__medal span { color: #d7c18e; font-size: .67rem; font-weight: 800; letter-spacing: .25em; text-transform: uppercase; }
.ag-aws__medal strong { font-family: "Inter", sans-serif; font-size: clamp(2rem,4vw,3.45rem); letter-spacing: -.045em; line-height: .9; margin: .55rem 0 .8rem; text-transform: uppercase; }
.ag-aws__medal small { color: #aebbc2; font-size: .68rem; letter-spacing: .11em; text-transform: uppercase; }
.ag-aws__note { bottom: 2.2rem; color: #8fa0aa; font-size: .75rem; line-height: 1.5; margin: 0; max-width: 310px; position: absolute; }
.ag-aws__list { background: #fff; border: 1px solid #dce3e7; display: grid; }
.ag-aws__row { align-items: center; display: grid; gap: 1.5rem; grid-template-columns: 48px 1fr auto; padding: 2.35rem; transition: background-color .25s, transform .25s; }
.ag-aws__row + .ag-aws__row { border-top: 1px solid #e4e9ec; }
.ag-aws__row:hover { background: #f9fbfb; transform: translateX(-6px); }
.ag-aws__idx { color: var(--cyan); font-size: .72rem; font-weight: 800; }
.ag-aws__row p { color: var(--blue); font-size: .65rem; font-weight: 800; letter-spacing: .12em; margin: 0 0 .7rem; text-transform: uppercase; }
.ag-aws__row h3 { font-family: "Inter", sans-serif; font-weight: 700; font-size: clamp(1.2rem,2.25vw,1.8rem); letter-spacing: -.025em; line-height: 1.08; margin: 0 0 .65rem; text-transform: none; color: var(--ink); }
.ag-aws__row div > span { color: var(--muted); font-size: .82rem; }
.ag-aws__row > strong { color: #9aa8b0; font-size: .85rem; }
.ag-aws__metrics { border-bottom: 1px solid #ccd6db; border-top: 1px solid #ccd6db; display: grid; grid-template-columns: repeat(3,1fr) 1.25fr; margin-top: 4.5rem; }
.ag-aws__metric, .ag-aws__statement { min-height: 145px; padding: 2rem 2.1rem; }
.ag-aws__metric + .ag-aws__metric, .ag-aws__statement { border-left: 1px solid #ccd6db; }
.ag-aws__metric p { color: var(--blue); font-size: clamp(2.2rem,4vw,3.6rem); font-weight: 800; letter-spacing: -.06em; line-height: 1; margin: 0 0 .65rem; }
.ag-aws__metric p small { font-size: .68rem; letter-spacing: .03em; margin-left: .4rem; text-transform: uppercase; }
.ag-aws__metric span, .ag-aws__statement span { color: var(--muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.ag-aws__statement { background: var(--blue); color: #fff; }
.ag-aws__statement span { color: #a8deea; }
.ag-aws__statement p { font-size: 1.05rem; line-height: 1.45; margin: .85rem 0 0; max-width: 250px; }
@media (max-width: 850px) {
  .ag-aws__intro, .ag-aws__grid { grid-template-columns: 1fr; }
  .ag-aws__lede { grid-column: 1; margin-bottom: 2.5rem; }
  .ag-aws__intro { gap: 1rem; }
  .ag-aws__hero { min-height: 470px; }
  .ag-aws__metrics { grid-template-columns: 1fr 1fr; }
  .ag-aws__metric:nth-child(3), .ag-aws__statement { border-top: 1px solid #ccd6db; }
  .ag-aws__metric:nth-child(3) { border-left: 0; }
}
@media (max-width: 560px) {
  .ag-aws { padding-left: .85rem; padding-right: .85rem; }
  .ag-aws__row { gap: .8rem; grid-template-columns: 30px 1fr; padding: 1.5rem 1.15rem; }
  .ag-aws__row > strong { display: none; }
  .ag-aws__metrics { grid-template-columns: 1fr; }
  .ag-aws__metric, .ag-aws__statement { border-left: 0 !important; border-top: 1px solid #ccd6db; min-height: auto; }
  .ag-aws__metric:first-child { border-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .ag-aws__row { transition: none; } }

/* ==========================================================================
   Company roadmap / journey timeline — replaces the recognition showcase.
   A connected path of dated "stops": horizontal on desktop, a left-rail
   vertical timeline on mobile. Deep-blue band with cyan nodes.
   ========================================================================== */
.ag-road { background: var(--ag-blue-deep, #08344c); color: #fff; padding: clamp(70px, 9vw, 120px) 0; }
.ag-road__head { text-align: center; max-width: 720px; margin: 0 auto 60px; }
.ag-road__head .ag-eyebrow { color: var(--ag-glass, #2bbfde); }
.ag-road__head .ag-h2 { color: #fff; }
.ag-road__lede { color: #b7c6d1; font-size: 17px; line-height: 1.7; margin: 14px 0 0; }

.ag-road__track { list-style: none; margin: 0; padding: 15px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; position: relative; }
.ag-road__track::before {
  content: ""; position: absolute; top: 22px; left: 6%; right: 6%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(43,191,222,.55) 8%, rgba(43,191,222,.55) 92%, transparent);
}
.ag-road__stop { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ag-road__dot {
  width: 16px; height: 16px; border-radius: 50%; background: var(--ag-glass, #2bbfde);
  box-shadow: 0 0 0 6px rgba(43,191,222,.16); position: relative; z-index: 2; margin-bottom: 26px; flex: none;
}
.ag-road__card { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 24px 22px; width: 100%; transition: transform .3s ease, border-color .3s ease, background .3s ease; }
.ag-road__card:hover { transform: translateY(-5px); border-color: rgba(43,191,222,.5); background: rgba(255,255,255,.07); }
.ag-road__yr { display: block; font-family: "Anton", sans-serif; font-size: 30px; color: var(--ag-glass, #2bbfde); line-height: 1; margin-bottom: 10px; }
.ag-road__card h3 { font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; font-size: 18px; color: #fff; margin: 0 0 8px; line-height: 1.15; }
.ag-road__card p { font-size: 14px; line-height: 1.6; color: #a9bcc8; margin: 0; }

@media (max-width: 820px) {
  .ag-road__track { grid-template-columns: 1fr; gap: 0; padding: 0; }
  .ag-road__track::before { top: 8px; bottom: 8px; left: 7px; right: auto; width: 2px; height: auto;
    background: linear-gradient(180deg, transparent, rgba(43,191,222,.55) 3%, rgba(43,191,222,.55) 97%, transparent); }
  .ag-road__stop { flex-direction: row; align-items: flex-start; text-align: left; gap: 20px; padding-bottom: 26px; }
  .ag-road__stop:last-child { padding-bottom: 0; }
  .ag-road__dot { margin: 5px 0 0; }
  .ag-road__card { width: auto; }
}

/* ==========================================================================
   Homepage AWARDS — dynamic, admin-managed (getAwards()). Gold-medallion cards
   on a deep-blue band so the section reads as recognition, not a timeline.
   New awards added in Admin → Awards appear here automatically.
   ========================================================================== */
.ag-award-sec { background: var(--ag-blue-deep, #08344c); color: #fff; padding: clamp(70px, 9vw, 120px) 0; }
.ag-award-sec__head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.ag-award-sec__head .ag-eyebrow { color: #d8b662; }
.ag-award-sec__head .ag-h2 { color: #fff; }
.ag-award-sec__lede { color: #b7c6d1; font-size: 17px; line-height: 1.7; margin: 14px 0 0; }

.ag-award-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ag-medal {
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); border-radius: 18px;
  padding: 38px 28px 30px; text-align: center; position: relative; overflow: hidden;
  transition: transform .35s ease, border-color .35s ease, background .35s ease;
}
.ag-medal:hover { transform: translateY(-6px); border-color: rgba(216,182,98,.55); background: rgba(255,255,255,.07); }
.ag-medal::before {
  content: ""; position: absolute; top: -46px; left: 50%; transform: translateX(-50%);
  width: 180px; height: 130px; background: radial-gradient(ellipse, rgba(216,182,98,.22), transparent 70%); pointer-events: none;
}
.ag-medal__badge {
  width: 86px; height: 86px; margin: 0 auto 24px; border-radius: 50%; position: relative;
  background: linear-gradient(145deg, #ecd692 0%, #d4b264 45%, #b8923f 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 28px -8px rgba(184,146,63,.65), inset 0 1px 2px rgba(255,255,255,.55);
}
.ag-medal__badge i { font-size: 34px; color: #3d2f12; }
.ag-medal__badge img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ag-medal__yr {
  position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%);
  background: #0b2634; color: #ecd692; font-family: "Anton", sans-serif; font-size: 12px; letter-spacing: .5px;
  padding: 3px 11px; border-radius: 100px; border: 1px solid rgba(216,182,98,.55); white-space: nowrap;
}
.ag-medal h3 { font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; font-size: 19px; color: #fff; margin: 8px 0 8px; line-height: 1.15; }
.ag-medal__issuer { display: block; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #d8b662; font-weight: 700; margin-bottom: 12px; }
.ag-medal p { font-size: 14px; line-height: 1.6; color: #a9bcc8; margin: 0; }

@media (max-width: 900px) { .ag-award-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ag-award-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   "How we work" — ported from the How-It-Works React component (Tailwind +
   motion → plain HTML/CSS). Scattered pinned cards, ±8° tilt, an animated
   dashed connecting path. Brand palette + a clean bold number font.
   ========================================================================== */
.hiw { position: relative; background: #fff; padding: 70px 32px 90px; overflow: hidden; }
.hiw__grid { display: none; }   /* ruled-paper background removed */
.hiw__head { position: relative; z-index: 2; text-align: center; max-width: 940px; margin: 0 auto 40px; }
.hiw__head .ag-h2 { white-space: nowrap; }   /* keep the heading on one line */
@media (max-width: 620px) { .hiw__head .ag-h2 { white-space: normal; } }
.hiw__head .ag-eyebrow { color: var(--ag-blue-bright, #2bbfde); }
.hiw__lede { color: var(--ag-steel, #56707f); font-size: 16px; line-height: 1.65; margin: 12px 0 0; }

.hiw__stage { position: relative; z-index: 1; width: 100%; max-width: 1000px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 26px; }
.hiw__path { display: none; }

.hiw-card { position: relative; width: 100%; transition: transform .3s ease; }  /* mobile: upright, stacked */
.hiw-card__inner { background: #fff; padding: 8px; border-radius: 25px; border: 1px solid #eef1f4;
  box-shadow: 0 12px 26px -10px rgba(13,42,57,.28); }
.hiw-pin { width: 30px; height: 30px; display: block; margin: 6px auto 18px; color: var(--hiw-accent, #00628f); }
.hiw-card__body { border-radius: 16px; padding: 20px 18px; border: 1px solid var(--hiw-border, #d6e6ef); background: var(--hiw-bg, #eef4f8); }
.hiw-num { display: block; font-family: "Anton", sans-serif; font-size: 40px; line-height: 1; color: var(--hiw-accent, #00628f); margin-bottom: 16px; }
.hiw-card__body h3 { font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; font-size: 20px; color: #1f2e37; line-height: 1.08; margin: 0 0 8px; }
.hiw-issuer { display: block; font-size: 11.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--hiw-accent, #00628f); font-weight: 700; margin: 0 0 8px; }
.hiw-card__body p { color: #64757f; font-size: 14px; line-height: 1.5; margin: 0; }

/* brand-mapped colour themes */
.hiw--blue { --hiw-accent: #00628f; --hiw-bg: #eef4f8; --hiw-border: #d6e6ef; }
.hiw--cyan { --hiw-accent: #0891a6; --hiw-bg: #e7f6f9; --hiw-border: #cfeaf0; }
.hiw--gold { --hiw-accent: #b8923f; --hiw-bg: #faf4e6; --hiw-border: #f0e4c8; }

/* Desktop: scattered absolute layout + the animated dashed path */
@media (min-width: 768px) {
  /* stage height + each card's top/side/rotation come from inline custom props
     computed per-item in index.astro, so any number of cards lays out. */
  .hiw__stage { display: block; height: var(--stage-h, 1130px); }
  .hiw__path { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; color: #c3ced6; }
  .hiw__path path { animation: hiwDash 3s linear infinite; }
  .hiw-card { position: absolute; width: 280px; top: var(--top, 0); left: var(--sl, auto); right: var(--sr, auto); transform: rotate(var(--rot, 0deg)); }
  .hiw-card:hover { transform: rotate(var(--rot, 0deg)) scale(1.05); z-index: 30; }
}
@keyframes hiwDash { to { stroke-dashoffset: -140; } }
@media (prefers-reduced-motion: reduce) { .hiw__path path { animation: none; } }

/* dark-mode-ish safety: this section is always light, keep it readable */
.hiw, .hiw * { }

/* ==========================================================================
   About — "Milestones over time" as a WAVE roadmap. Milestones sit on a
   flowing wave line, cards alternating above (crest) and below (trough).
   Desktop = wave; mobile = clean vertical stack.
   ========================================================================== */
.ag-wave__track { position: relative; height: 520px; margin-top: 30px; }
.ag-wave__path { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; }

.ag-wave__stop { position: absolute; top: 0; bottom: 0; width: 240px; transform: translateX(-50%); z-index: 1; }
.ag-wave__dot {
  position: absolute; left: 50%; width: 18px; height: 18px; border-radius: 50%;
  transform: translate(-50%, -50%); background: #fff;
  border: 4px solid var(--ag-blue-bright, #2bbfde); box-shadow: 0 0 0 5px rgba(43,191,222,.18);
}
.ag-wave__stop.up   .ag-wave__dot { top: 190px; }
.ag-wave__stop.down .ag-wave__dot { top: 330px; }
/* connector stem between card and node */
.ag-wave__stop::after { content: ""; position: absolute; left: 50%; width: 2px; background: rgba(43,191,222,.4); transform: translateX(-50%); }
.ag-wave__stop.up::after   { top: 168px; height: 22px; }
.ag-wave__stop.down::after { top: 330px; height: 22px; }

.ag-wave__card {
  position: absolute; left: 50%; transform: translateX(-50%); width: 100%;
  background: #fff; border: 1px solid #e7ebef; border-radius: 16px; padding: 20px 20px 22px;
  box-shadow: 0 18px 40px -22px rgba(13,42,57,.35); text-align: center;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ag-wave__card:hover { transform: translateX(-50%) translateY(-5px); border-color: rgba(43,191,222,.55); box-shadow: 0 26px 50px -24px rgba(13,42,57,.45); }
.ag-wave__stop.up   .ag-wave__card { bottom: 352px; }   /* above the crest */
.ag-wave__stop.down .ag-wave__card { top: 352px; }       /* below the trough */
.ag-wave__yr { display: block; font-family: "Anton", sans-serif; font-size: 26px; color: var(--ag-blue-bright, #2bbfde); line-height: 1; margin-bottom: 8px; }
.ag-wave__card h3 { font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; font-size: 18px; color: var(--ag-ink, #0d2a39); line-height: 1.12; margin: 0 0 8px; }
.ag-wave__card p { font-size: 13.5px; line-height: 1.55; color: var(--ag-steel, #56707f); margin: 0; }

/* Mobile / tablet: drop the wave, stack the milestones cleanly */
@media (max-width: 860px) {
  .ag-wave__track { height: auto; display: flex; flex-direction: column; gap: 16px; }
  .ag-wave__path, .ag-wave__dot, .ag-wave__stop::after { display: none; }
  .ag-wave__stop { position: static; transform: none; width: 100%; }
  .ag-wave__card { position: static !important; transform: none !important; width: 100%; text-align: left; }
  .ag-wave__card:hover { transform: translateY(-4px) !important; }
}

/* Homepage contact heading "Request a façade consultation" — was pushed right by
   the theme's split (empty 33% left / 67% right heading) layout; centre it.
   Needs .contact-wrapper in the selector to beat the theme's width:67%. */
.contact-area .contact-wrapper .section-title-two { display: block !important; text-align: center; }
.contact-area .contact-wrapper .section-title-two .title-left-content { display: none; }
.contact-area .contact-wrapper .section-title-two .title-right-content { width: 100%; text-align: center; }
.contact-area .contact-wrapper .section-title-two .title-right-content .title { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   Mobile hero: let the hero CONTENT fill the first screen with a single CTA,
   and move the 500+ stats bar BELOW the fold so it appears only after scrolling
   (on desktop the stats stay in-view as before).
   ========================================================================== */
@media (max-width: 767px) {
  .ag-hero { display: block; min-height: 0; }
  .ag-hero__inner { min-height: 100svh; box-sizing: border-box; }
  /* one button only — hide the secondary "Request a consultation" */
  .ag-hero__cta .ag-btn.light-outline { display: none; }
  .ag-hero__cta .ag-btn { flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================================
   Contact info tiles on mobile — a neat 2×2 grid of compact cards.
   ========================================================================== */
@media (max-width: 575px) {
  .ag-info { grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }
  .ag-info .tile {
    padding: 18px 15px; border-radius: 14px;
    border: 1px solid #e7ebef; border-top: 3px solid var(--ag-blue-bright, #2bbfde);
  }
  .ag-info .tile .ic { width: 40px; height: 40px; margin-bottom: 12px; font-size: 17px; border-radius: 10px; }
  .ag-info .tile h3 { font-size: 15px; margin: 0 0 8px; }
  .ag-info .tile p, .ag-info .tile a { font-size: 12.5px; line-height: 1.55; }
}

/* ==========================================================================
   Factory page — big photo, machinery chips, and the "keep exploring" card grid
   ========================================================================== */
.ag-factory-photo { border-radius: 18px; overflow: hidden; box-shadow: 0 30px 70px -34px rgba(8,52,76,.5); }
.ag-factory-photo img { width: 100%; height: auto; display: block; }
.ag-factory-inside { max-width: 760px; }
.ag-factory-inside .ag-eyebrow { color: var(--ag-blue-bright, #2bbfde); }

.ag-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

/* neat "the rest of the story" card grid */
/* Bento grid (adapted from the 21st.dev bento pattern) — one large feature tile
   + varied cards, asymmetric and modern. */
.ag-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 158px; gap: 16px; margin-top: 44px; text-align: left; }
.ag-bento__card {
  position: relative; overflow: hidden; text-decoration: none; grid-column: span 2;
  display: flex; flex-direction: column; justify-content: space-between;
  background: #fff; border: 1px solid #e7ebef; border-radius: 20px; padding: 24px;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.ag-bento__card:hover { transform: translateY(-6px); box-shadow: 0 30px 55px -28px rgba(8,52,76,.5); border-color: rgba(43,191,222,.5); text-decoration: none; }
.ag-bento__card--feature { grid-column: span 2; grid-row: span 2; background: linear-gradient(155deg, #0d2a39 0%, #0a4058 100%); border-color: transparent; }
.ag-bento__card--feature:hover { border-color: transparent; box-shadow: 0 36px 66px -30px rgba(8,52,76,.65); }

.ag-bento__ic { width: 50px; height: 50px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: rgba(0,163,196,.12); color: var(--ag-blue, #00628f); font-size: 20px; }
.ag-bento__card--feature .ag-bento__ic { width: 58px; height: 58px; font-size: 24px; background: rgba(255,255,255,.14); color: #fff; }

.ag-bento__n { display: block; font-family: "Anton", sans-serif; font-size: 13px; letter-spacing: 1px; color: #c4d0d8; margin-bottom: 4px; }
.ag-bento__card--feature .ag-bento__n { color: rgba(255,255,255,.5); font-size: 15px; }
.ag-bento__lbl { display: block; font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; font-size: 18px; letter-spacing: .5px; color: var(--ag-ink, #0d2a39); line-height: 1.05; }
.ag-bento__card--feature .ag-bento__lbl { color: #fff; font-size: clamp(26px, 2.6vw, 34px); }
.ag-bento__desc { display: block; font-size: 14px; color: #b7c6d1; line-height: 1.55; margin-top: 10px; max-width: 32ch; }

.ag-bento__arrow { position: absolute; top: 22px; right: 22px; font-size: 13px; color: #c4d0d8; opacity: 0; transform: translate(-6px, 6px); transition: opacity .35s ease, transform .35s ease; }
.ag-bento__card:hover .ag-bento__arrow { opacity: 1; transform: translate(0, 0); color: var(--ag-blue-bright, #2bbfde); }
.ag-bento__card--feature .ag-bento__arrow { color: rgba(255,255,255,.55); }
.ag-bento__card--feature:hover .ag-bento__arrow { color: #fff; }

@media (max-width: 768px) {
  .ag-bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .ag-bento__card, .ag-bento__card--feature { grid-column: auto; grid-row: auto; min-height: 130px; }
}

/* Legal / content pages (privacy, terms) */
.ag-legal { max-width: 820px; }
.ag-legal p, .ag-legal li { color: var(--ag-steel, #56707f); font-size: 16px; line-height: 1.75; }
.ag-legal h2 { font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; font-size: 22px; color: var(--ag-ink, #0d2a39); margin: 34px 0 10px; }
.ag-legal ul { margin: 0 0 4px; padding-left: 20px; }
.ag-legal li { margin-bottom: 6px; }
.ag-legal a { color: var(--ag-blue, #00628f); font-weight: 600; }
.ag-legal a:hover { color: var(--ag-blue-bright, #2bbfde); }

/* Honeypot spam trap — visually hidden, off-screen (not display:none, which some bots skip). */
.ag-hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   Factory page — clean editorial redesign (calm deep-blue intro band, big
   photo, "label + content" sections, machinery icon grid). Distinct from the
   image-hero pages elsewhere.
   ========================================================================== */
.ag-fac-hero { background: linear-gradient(155deg, #0d2a39 0%, #08344c 60%, #0a3f5c 100%); color: #fff; padding: clamp(120px, 16vw, 150px) 0 clamp(80px, 10vw, 110px); }
.ag-fac-crumb { font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: #8fa9b8; margin-bottom: 22px; }
.ag-fac-crumb a { color: #8fa9b8; text-decoration: none; }
.ag-fac-crumb a:hover { color: #fff; }
.ag-fac-crumb .sep { opacity: .5; margin: 0 4px; }
.ag-fac-crumb .cur { color: var(--ag-glass, #2bbfde); }
.ag-fac-title { font-family: "Inter", sans-serif; font-weight: 800; font-size: clamp(38px, 6.5vw, 78px); line-height: 1.03; letter-spacing: -.03em; margin: 0; max-width: 16ch; color: #fff; }
.ag-fac-lead { max-width: 600px; margin: 24px 0 0; color: #c2d0da; font-size: 18px; line-height: 1.75; }

/* photo overlaps the band for a premium seam */
.ag-fac-photo-sec { background: transparent; padding: 0; }
.ag-fac-photo-sec .container { margin-top: clamp(-70px, -8vw, -50px); position: relative; z-index: 2; }
.ag-fac-photo { border-radius: 18px; overflow: hidden; box-shadow: 0 34px 80px -38px rgba(8,52,76,.6); background: #eef2f5; }
.ag-fac-photo img { width: 100%; height: auto; display: block; }
.ag-fac-photo .ag-factory-soon { min-height: 340px; }

/* label + content editorial split */
.ag-fac-split { display: grid; grid-template-columns: 210px 1fr; gap: 44px; align-items: start; }
.ag-fac-side { font-family: "Inter", sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ag-blue-bright, #2bbfde); padding-top: 8px; }
.ag-fac-main h2 { font-family: "Inter", sans-serif; font-weight: 800; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.02em; line-height: 1.15; color: var(--ag-ink, #0d2a39); margin: 0 0 16px; }
.ag-fac-main p { color: var(--ag-steel, #56707f); font-size: 17px; line-height: 1.8; margin: 0; max-width: 640px; }
.ag-fac-alt { background: var(--ag-paper, #f4f7f9); }
@media (max-width: 768px) { .ag-fac-split { grid-template-columns: 1fr; gap: 14px; } .ag-fac-side { padding-top: 0; } }

/* machinery icon grid */
.ag-mach { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 6px; }
.ag-mach__card { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #e7ebef; border-radius: 14px; padding: 16px 16px; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.ag-mach__card:hover { transform: translateY(-4px); border-color: rgba(43,191,222,.5); box-shadow: 0 20px 40px -26px rgba(13,42,57,.4); }
.ag-mach__ic { flex: none; width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, var(--ag-blue, #00628f), var(--ag-blue-deep, #08344c)); color: #fff; font-size: 18px; }
.ag-mach__name { font-size: 14px; line-height: 1.35; font-weight: 600; color: var(--ag-ink, #0d2a39); }
@media (max-width: 860px) { .ag-mach { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ag-mach { grid-template-columns: 1fr; } }

/* Accessibility: skip-to-content link (visible on keyboard focus) */
.ag-skip { position: absolute; left: -9999px; top: 0; z-index: 3000; background: var(--ag-blue, #00628f); color: #fff; padding: 12px 20px; border-radius: 0 0 8px 0; font-weight: 700; }
.ag-skip:focus { left: 0; }

/* ==========================================================================
   Client-reported fixes (15 Sep): founder/MD photo fit, award images, news
   gallery images shown in full.
   ========================================================================== */
/* Founder / MD photo — portrait frame so an uploaded headshot isn't cropped by
   the default 4:3 landscape media box. */
.ag-founder .media { aspect-ratio: 4 / 5; max-width: 460px; }
.ag-founder .media img { object-fit: cover; object-position: center 18%; }
@media (max-width: 767px) { .ag-founder .media { max-width: none; aspect-ratio: 4 / 5; } }

/* Award images (uploaded via admin) — show them, not just the icon. */
.ag-award .ic img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.hiw-card__img { width: 100%; height: 120px; object-fit: cover; border-radius: 10px; margin-bottom: 14px; display: block; }

/* News gallery — masonry columns so every uploaded photo shows in full (no crop),
   whatever its orientation. */
.ag-news-gallery { column-count: 2; column-gap: 16px; }
.ag-news-gallery__img { width: 100%; margin: 0 0 16px; border-radius: 14px; display: block; break-inside: avoid; }
@media (max-width: 640px) { .ag-news-gallery { column-count: 1; } }

/* Factory media gallery — admin-managed photos & videos (factory_media table).
   Two-column grid; video items span the full width and keep 16:9. */
.ag-fgal { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.ag-fgal__item { margin: 0; border-radius: 16px; overflow: hidden; background: #0d1b2a; box-shadow: 0 10px 30px rgba(13, 27, 42, 0.10); position: relative; }
.ag-fgal__item img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; display: block; }
.ag-fgal__item.is-video { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.ag-fgal__item.is-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.ag-fgal__item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 16px 12px; font-size: 13px; font-weight: 600; color: #fff; background: linear-gradient(to top, rgba(9, 18, 30, 0.78), rgba(9, 18, 30, 0)); }
@media (max-width: 640px) {
  .ag-fgal { grid-template-columns: 1fr; gap: 14px; }
  .ag-fgal__item.is-video { grid-column: auto; }
  .ag-fgal__item img { min-height: 200px; }
}