/* Anika Global — full stylesheet.
   Lives here rather than in style.css so that CSS-combining plugins and
   hosts that special-case the theme root stylesheet cannot take the whole
   design down. style.css keeps only the header WordPress requires. */

/* ==========================================================================
   1. Fonts (Nunito, self-hosted — no Google Fonts request, GDPR friendly)
   ========================================================================== */

/* cyrillic-ext 300 */
@font-face{font-family:'Nunito';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/nunito-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
/* cyrillic 300 */
@font-face{font-family:'Nunito';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/nunito-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
/* vietnamese 300 */
@font-face{font-family:'Nunito';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/nunito-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
/* latin-ext 300 */
@font-face{font-family:'Nunito';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/nunito-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* latin 300 */
@font-face{font-family:'Nunito';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/nunito-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* cyrillic-ext 400 */
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/nunito-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
/* cyrillic 400 */
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/nunito-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
/* vietnamese 400 */
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/nunito-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
/* latin-ext 400 */
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/nunito-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* latin 400 */
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/nunito-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* cyrillic-ext 600 */
@font-face{font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/nunito-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
/* cyrillic 600 */
@font-face{font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/nunito-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
/* vietnamese 600 */
@font-face{font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/nunito-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
/* latin-ext 600 */
@font-face{font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/nunito-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* latin 600 */
@font-face{font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/nunito-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* cyrillic-ext 700 */
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/nunito-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
/* cyrillic 700 */
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/nunito-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
/* vietnamese 700 */
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/nunito-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
/* latin-ext 700 */
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/nunito-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* latin 700 */
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/nunito-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* cyrillic-ext 800 */
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/nunito-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
/* cyrillic 800 */
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/nunito-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
/* vietnamese 800 */
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/nunito-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
/* latin-ext 800 */
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/nunito-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* latin 800 */
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/nunito-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* cyrillic-ext 900 */
@font-face{font-family:'Nunito';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/nunito-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
/* cyrillic 900 */
@font-face{font-family:'Nunito';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/nunito-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
/* vietnamese 900 */
@font-face{font-family:'Nunito';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/nunito-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
/* latin-ext 900 */
@font-face{font-family:'Nunito';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/nunito-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* latin 900 */
@font-face{font-family:'Nunito';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/nunito-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ==========================================================================
   2. Design tokens
   ========================================================================== */

:root{
  --ag-navy:#123047;
  --ag-navy-deep:#0B2536;
  --ag-blue:#1B8ED6;
  --ag-blue-hover:#33A0E0;
  --ag-blue-dark:#0E6FB0;
  --ag-mist:#EDF3F8;
  --ag-white:#FFFFFF;
  --ag-body:#51677A;
  --ag-muted:#7A8B99;
  /* Small quiet text on a TINTED card. --ag-body clears AA on white (5.88:1)
     but only reaches 4.48:1 against the darkest part of the enquiry card's
     gradient, which is under the line for 12px text. This is the same grey a
     shade further down, and measures 5.74:1 there. */
  --ag-body-on-tint:#44576A;
  --ag-on-dark:#B4C7D6;
  --ag-on-dark-muted:#8FA3B3;
  --ag-cta-body:#DCE7F0;
  --ag-line:rgba(18,48,71,.12);
  --ag-line-strong:rgba(18,48,71,.14);
  --ag-line-dark:rgba(255,255,255,.14);
  --ag-shell:1280px;
  --ag-gutter:clamp(20px,5vw,72px);
  --ag-section-y:clamp(80px,10vw,140px);
  --ag-ease:cubic-bezier(.16,1,.3,1);
  --ag-radius:8px;
}

/* ==========================================================================
   3. Base
   ========================================================================== */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ag-mist);
  color:var(--ag-navy);
  /* Matches the source design exactly. Keep the fallback as the plain generic —
     inserting system-ui changes the metrics of glyphs Nunito does not ship
     (the → arrow in the buttons), which shifts button widths. */
  font-family:'Nunito',sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
a{color:var(--ag-blue);text-decoration:none}
a:hover{color:var(--ag-blue-dark)}
::selection{background:var(--ag-blue);color:#fff}
img{max-width:100%;height:auto}
h1,h2,h3,h4,p{margin:0}
button{font-family:inherit}

.ag-shell{max-width:var(--ag-shell);margin:0 auto;width:100%}
.ag-section{padding:var(--ag-section-y) var(--ag-gutter)}
.ag-section--mist{background:var(--ag-mist)}
.ag-section--white{background:var(--ag-white)}
.ag-section--navy{background:var(--ag-navy);color:var(--ag-white)}

.ag-skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--ag-navy);color:#fff;padding:12px 20px;border-radius:0 0 8px 0}
.ag-skip-link:focus{left:0;color:#fff}

:where(a,button,input,textarea,select):focus-visible{
  outline:2px solid var(--ag-blue);
  outline-offset:3px;
  border-radius:4px;
}

/* Shared type ------------------------------------------------------------- */

.ag-eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ag-blue);margin-bottom:20px;
}
.ag-h2{
  font-weight:800;font-size:clamp(34px,5vw,58px);
  line-height:1.05;letter-spacing:-.01em;margin:0;
}
.ag-lede{font-size:17px;line-height:1.75;color:var(--ag-body)}
.ag-section--navy .ag-lede{color:var(--ag-on-dark)}

/* Buttons ----------------------------------------------------------------- */

.ag-btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--ag-blue);color:var(--ag-white);
  font-weight:600;font-size:14px;letter-spacing:.02em;
  padding:16px 30px;border-radius:100px;border:0;cursor:pointer;
  transition:background .3s ease,transform .3s ease;
}
.ag-btn:hover,.ag-btn:focus{background:var(--ag-blue-hover);color:#fff;transform:translateY(-2px)}
.ag-btn--sm{font-size:13px;padding:12px 22px;gap:9px}
.ag-btn--lg{padding:17px 34px}
.ag-btn__arrow{font-size:16px}
.ag-btn--sm .ag-btn__arrow{font-size:15px}

.ag-link-underline{
  display:inline-flex;align-items:center;gap:10px;color:inherit;
  font-weight:500;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:4px;
  transition:border-color .3s ease;
}
.ag-link-underline:hover{border-color:#fff;color:inherit}

.ag-link-dark{
  font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ag-navy);border-bottom:1px solid var(--ag-navy);padding-bottom:4px;
  transition:opacity .3s ease;
}
.ag-link-dark:hover{color:var(--ag-navy);opacity:.6}

/* Reveal animation -------------------------------------------------------- */

[data-reveal]{
  opacity:0;transform:translateY(28px);
  transition:opacity .8s var(--ag-ease),transform .8s var(--ag-ease);
}
[data-reveal].is-visible{opacity:1;transform:none}
.no-js [data-reveal]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1!important;transform:none!important;transition:none}
}

/* ==========================================================================
   4. Navigation
   ========================================================================== */

/* The solid ("scrolled") bar is the default on every page, including the top
   of the homepage. The transparent-over-hero variant is opt-in via
   Appearance → Customize → Header, which adds .ag-nav--overlay. */
.ag-nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:15px var(--ag-gutter);
  background:rgba(237,243,248,.92);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(18,48,71,.08);
  color:var(--ag-navy);
  transition:background .5s ease,color .5s ease,box-shadow .5s ease,padding .4s ease;
}
/* Non-sticky header: sits in the normal flow at the top of the page. */
.ag-nav--static{position:relative}
body.ag-header-static{padding-top:0}

/* Content clears the fixed bar. Measured at runtime into --ag-header-h. */
body{padding-top:var(--ag-header-h,76px)}
body.ag-header-overlay{padding-top:0}

/* Optional transparent-over-hero mode */
.ag-nav--overlay:not(.is-solid){
  background:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:none;
  color:var(--ag-white);
  padding-top:22px;padding-bottom:22px;
}

.ag-nav__brand{display:flex;align-items:center;position:relative;flex:0 0 auto}
.ag-nav__brand img{height:var(--ag-logo-h,46px);width:auto;display:block;transition:opacity .45s ease}
.ag-nav__brand .ag-logo--white{position:absolute;inset:0;opacity:0}
.ag-nav--overlay:not(.is-solid) .ag-nav__brand .ag-logo--white{opacity:1}
.ag-nav--overlay:not(.is-solid) .ag-nav__brand .ag-logo--color{opacity:0}
.ag-nav__brand-text{font-weight:800;font-size:22px;letter-spacing:.02em;color:inherit}

.ag-nav__menu{
  display:flex;align-items:center;gap:clamp(14px,2vw,34px);
  list-style:none;margin:0;padding:0;
  font-size:13px;font-weight:500;letter-spacing:.04em;
}
.ag-nav__menu li{position:relative}
.ag-nav__menu a{color:inherit;transition:opacity .25s ease}
.ag-nav__menu a:hover{color:inherit;opacity:.65}
.ag-nav__menu .current-menu-item > a{opacity:.65}

/* dropdowns */
.ag-nav__menu .sub-menu{
  position:absolute;top:calc(100% + 14px);left:-18px;min-width:210px;
  list-style:none;margin:0;padding:10px 0;
  background:#fff;border-radius:var(--ag-radius);
  box-shadow:0 18px 44px rgba(11,37,54,.16);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .28s ease,transform .28s ease,visibility .28s ease;
}
.ag-nav__menu li:hover > .sub-menu,
.ag-nav__menu li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:none}
.ag-nav__menu .sub-menu a{display:block;padding:10px 22px;color:var(--ag-navy);white-space:nowrap}
.ag-nav__menu .sub-menu a:hover{background:var(--ag-mist);color:var(--ag-blue);opacity:1}

.ag-nav__actions{display:flex;align-items:center;gap:clamp(12px,1.6vw,26px);flex:0 0 auto}
.ag-nav__cta{flex:0 0 auto}
.ag-nav__tel{
  color:inherit;font-weight:700;font-size:14px;letter-spacing:.02em;white-space:nowrap;
  transition:opacity .25s ease;
}
.ag-nav__tel:hover{color:inherit;opacity:.65}

/* Social icons in the footer */
.ag-social{
  display:flex;gap:10px;list-style:none;margin:22px 0 0;padding:0;
}
.ag-social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);color:var(--ag-on-dark);
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.ag-social a:hover{background:var(--ag-blue);border-color:var(--ag-blue);color:#fff}

/* Hamburger */
.ag-burger{
  display:none;width:44px;height:44px;padding:0;margin:0;
  background:transparent;border:0;cursor:pointer;color:inherit;
  align-items:center;justify-content:center;flex:0 0 auto;
}
.ag-burger span{
  display:block;width:24px;height:2px;background:currentColor;border-radius:2px;position:relative;
  transition:background .25s ease;
}
.ag-burger span::before,.ag-burger span::after{
  content:"";position:absolute;left:0;width:24px;height:2px;background:currentColor;border-radius:2px;
  transition:transform .3s var(--ag-ease),top .3s var(--ag-ease);
}
.ag-burger span::before{top:-8px}
.ag-burger span::after{top:8px}
.ag-burger[aria-expanded="true"] span{background:transparent}
.ag-burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.ag-burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* Mobile drawer */
.ag-drawer{
  position:fixed;inset:0;z-index:70;
  background:var(--ag-navy);color:#fff;
  padding:96px var(--ag-gutter) 48px;
  display:flex;flex-direction:column;
  transform:translateX(100%);visibility:hidden;
  transition:transform .45s var(--ag-ease),visibility .45s;
  overflow-y:auto;
}
.ag-drawer.is-open{transform:none;visibility:visible}
.ag-drawer__close{
  position:absolute;top:22px;right:calc(var(--ag-gutter) - 10px);
  width:44px;height:44px;background:transparent;border:0;color:#fff;
  font-size:30px;line-height:1;cursor:pointer;
}
.ag-drawer__menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ag-drawer__menu li{border-bottom:1px solid rgba(255,255,255,.12)}
.ag-drawer__menu a{
  display:block;color:#fff;font-size:22px;font-weight:700;
  letter-spacing:-.005em;padding:18px 0;
}
.ag-drawer__menu a:hover{color:var(--ag-blue)}
.ag-drawer__menu .sub-menu{list-style:none;margin:0 0 12px;padding:0 0 0 16px}
.ag-drawer__menu .sub-menu li{border:0}
.ag-drawer__menu .sub-menu a{font-size:16px;font-weight:500;padding:9px 0;color:var(--ag-on-dark)}
.ag-drawer__foot{margin-top:auto;padding-top:36px}
.ag-drawer__foot .ag-btn{width:100%;justify-content:center}
.ag-drawer__mail{
  display:block;margin-top:20px;color:var(--ag-on-dark);
  font-size:14px;letter-spacing:.04em;
}
body.ag-no-scroll{overflow:hidden}

/* ==========================================================================
   5. Hero
   ========================================================================== */

.ag-hero{
  position:relative;
  /* Fills the screen below the solid header; the full viewport in overlay mode. */
  min-height:calc(100vh - var(--ag-header-h,76px));
  display:flex;flex-direction:column;justify-content:flex-end;
  background-position:center 40%;background-size:cover;background-repeat:no-repeat;
  color:var(--ag-white);
  padding:clamp(56px,8vh,96px) var(--ag-gutter) clamp(52px,7vw,96px);
}
.ag-header-overlay .ag-hero{
  min-height:100vh;
  padding-top:clamp(104px,14vh,150px);
}
.ag-hero__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,30,46,.55) 0%,rgba(8,30,46,.12) 32%,rgba(8,30,46,.30) 62%,rgba(8,30,46,.82) 100%);
}
.ag-hero__inner{position:relative;z-index:2;max-width:var(--ag-shell);margin:0 auto;width:100%}
.ag-hero__eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;
  opacity:.9;margin-bottom:26px;
}
.ag-hero__title{
  font-weight:800;font-size:clamp(46px,8vw,104px);line-height:.98;letter-spacing:-.015em;
  margin:0;max-width:15ch;text-shadow:0 2px 40px rgba(0,0,0,.35);
}
.ag-hero__text{
  font-weight:300;font-size:clamp(16px,1.5vw,20px);line-height:1.6;
  max-width:52ch;margin:28px 0 0;opacity:.94;
}
.ag-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:40px}
.ag-hero__strip{
  position:relative;z-index:2;max-width:var(--ag-shell);margin:52px auto 0;width:100%;
  display:flex;flex-wrap:wrap;gap:14px 40px;
  border-top:1px solid rgba(255,255,255,.18);padding-top:22px;
  font-size:12px;letter-spacing:.24em;text-transform:uppercase;opacity:.85;
}

/* ==========================================================================
   6. Intro + stats
   ========================================================================== */

.ag-intro{
  max-width:var(--ag-shell);margin:0 auto;
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(40px,6vw,96px);align-items:end;
}
.ag-intro__eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ag-blue);margin-bottom:24px;
}
.ag-intro__title{
  font-weight:800;font-size:clamp(30px,4vw,50px);line-height:1.14;letter-spacing:-.01em;
  margin:0;color:var(--ag-navy);
}
.ag-intro__text{font-size:17px;line-height:1.75;color:var(--ag-body);max-width:56ch;margin:28px 0 0}
.ag-stats{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--ag-line);border:1px solid var(--ag-line);
}
.ag-stat{background:var(--ag-mist);padding:26px 22px}
.ag-stat__value{font-weight:800;font-size:42px;color:var(--ag-navy);line-height:1}
.ag-stat__label{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ag-muted);margin-top:10px;
}

/* ==========================================================================
   7. Products
   ========================================================================== */

.ag-products__head{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;
  gap:24px;margin-bottom:56px;
}
.ag-products__title{
  font-weight:800;font-size:clamp(34px,5vw,60px);line-height:1.05;letter-spacing:-.01em;
  margin:0;max-width:16ch;
}
.ag-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}
.ag-card{
  background:var(--ag-white);border:1px solid var(--ag-line);
  border-radius:var(--ag-radius);overflow:hidden;
  display:flex;flex-direction:column;
}
/* No border at all (not just a transparent one) — a 1px border would inset the
   photo by 2px and break the match with the source design. */
.ag-card--dark{background:var(--ag-navy);color:var(--ag-white);border:0}
.ag-card__media{position:relative;aspect-ratio:16/11;overflow:hidden;background:#dfe8f0}
.ag-card__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ag-ease);
}
.ag-card:hover .ag-card__media img{transform:scale(1.04)}
.ag-card__body{padding:34px 34px 38px}
.ag-card__row{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.ag-card__title{font-weight:800;font-size:30px;margin:0;color:var(--ag-navy)}
.ag-card--dark .ag-card__title{color:var(--ag-white)}
.ag-card__badge{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ag-blue);
  white-space:nowrap;
}
.ag-card__text{font-size:15px;line-height:1.7;color:var(--ag-body);margin:14px 0 0;max-width:44ch}
.ag-card--dark .ag-card__text{color:var(--ag-on-dark)}

.ag-product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ag-product-grid [data-reveal]{transition-duration:.7s}
.ag-product-grid .ag-card__media{aspect-ratio:4/3}
.ag-product-grid .ag-card__body{padding:24px 24px 28px}
.ag-product-grid .ag-card__title{font-weight:700;font-size:22px}
/* The small cards run the full card width — only the two feature cards are
   measure-limited to 44ch. */
.ag-product-grid .ag-card__text{font-size:14px;line-height:1.65;margin:10px 0 0;max-width:none}

/* Placeholder used when no photo has been uploaded yet */
.ag-slot{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#DCE7F0 0%,#C6D6E4 100%);
  color:#7A8B99;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  text-align:center;padding:20px;
}

/* ==========================================================================
   8. Finishes (dark)
   ========================================================================== */

.ag-craft__head{max-width:60ch;margin-bottom:60px}
.ag-craft__head .ag-h2{font-size:clamp(34px,5vw,58px)}
.ag-craft__text{font-size:17px;line-height:1.75;color:var(--ag-on-dark);margin:24px 0 0}
.ag-finishes{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

/* The four reasons sit on the same grid the finish swatches used, so the
   section's rhythm is unchanged — only what each cell holds. Cards rather than
   bare text, because an icon needs a surface to sit on at this size. */
.ag-reasons{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2vw,26px)}
.ag-reason{
  background:rgba(255,255,255,.05); border:1px solid rgba(180,199,214,.18);
  border-radius:14px; padding:clamp(22px,2.2vw,30px);
}
.ag-reason__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:12px;
  background:rgba(27,142,214,.16); color:var(--ag-blue-hover);
  margin-bottom:18px;
}
.ag-reason__title{
  margin:0; font-size:19px; font-weight:700; line-height:1.3; color:var(--ag-white);
}
.ag-reason__text{
  margin:10px 0 0; font-size:15px; line-height:1.7; color:var(--ag-on-dark);
}
.ag-finish__chip{
  aspect-ratio:3/4;border-radius:var(--ag-radius);
  box-shadow:inset 0 0 60px rgba(0,0,0,.35);
  background-size:cover;background-position:center;
}
.ag-finish__name{font-weight:700;font-size:22px;margin-top:18px}
.ag-finish__sub{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ag-on-dark-muted);margin-top:6px;
}
.ag-pillars{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--ag-line-dark);border:1px solid var(--ag-line-dark);
  margin-top:72px;border-radius:var(--ag-radius);overflow:hidden;
}
.ag-pillar{background:var(--ag-navy);padding:34px 30px}
.ag-pillar__title{font-weight:700;font-size:19px;color:var(--ag-blue)}
.ag-pillar__text{font-size:14px;line-height:1.7;color:var(--ag-on-dark);margin:12px 0 0}

/* ==========================================================================
   9. Process
   ========================================================================== */

.ag-process{
  max-width:var(--ag-shell);margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,88px);align-items:start;
}
.ag-process__aside{position:sticky;top:120px}
.ag-process__title{
  font-weight:800;font-size:clamp(34px,4.6vw,56px);line-height:1.05;letter-spacing:-.01em;
  margin:0 0 28px;max-width:14ch;
}
.ag-process__media{
  position:relative;aspect-ratio:4/5;border-radius:var(--ag-radius);overflow:hidden;background:#dfe8f0;
}
.ag-process__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ag-step{
  border-top:1px solid var(--ag-line-strong);
  padding:32px 8px;display:flex;gap:28px;
  transition:padding-left .35s ease,background .35s ease;
  border-radius:6px;
}
.ag-step:last-child{border-bottom:1px solid var(--ag-line-strong)}
.ag-step:hover{background:var(--ag-mist);padding-left:20px}
.ag-step__num{font-weight:700;font-size:22px;color:var(--ag-blue);min-width:44px}
.ag-step__title{font-weight:700;font-size:26px;margin:0;color:var(--ag-navy)}
.ag-step__text{font-size:15px;line-height:1.7;color:var(--ag-body);margin:10px 0 0;max-width:46ch}

/* ==========================================================================
   10. Projects
   ========================================================================== */

.ag-projects__head{max-width:60ch;margin-bottom:52px}
.ag-projects{display:grid;grid-template-columns:1.4fr 1fr;grid-auto-rows:auto;gap:24px}
.ag-project{margin:0}
.ag-project--tall{grid-row:span 2}
/* A leftover tile that would otherwise stand alone as a tall column. */
.ag-project--wide{grid-column:1/-1}
.ag-project--wide .ag-project__media{aspect-ratio:21/9}
/* An anchor when the tile comes from the Projects CPT, a div for the
   placeholder photos — display:block makes the two behave identically. */
.ag-project__media{
  display:block;
  position:relative;aspect-ratio:16/10;border-radius:var(--ag-radius);overflow:hidden;background:#dfe8f0;
}
.ag-project--tall .ag-project__media{aspect-ratio:4/5}
.ag-project__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ag-ease);
}
.ag-project:hover .ag-project__media img{transform:scale(1.04)}
.ag-project__caption{
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ag-muted);margin-top:14px;
}
.ag-project__caption a{color:inherit;text-decoration:none;transition:color .3s var(--ag-ease)}
.ag-project:hover .ag-project__caption a,
.ag-project__caption a:focus-visible{color:var(--ag-navy)}

/* Optional "view all work" button under the grid, and the editor-only note. */
.ag-projects__foot{margin-top:clamp(28px,3vw,40px);display:flex;justify-content:center}
.ag-projects__note{
  margin:20px 0 0;font-size:13px;line-height:1.6;color:var(--ag-muted);
  padding:12px 16px;border:1px dashed rgba(18,48,71,.22);border-radius:var(--ag-radius);
}

/* ==========================================================================
   11. CTA + enquiry form
   ========================================================================== */

.ag-cta{
  position:relative;color:var(--ag-white);
  background-position:center 55%;background-size:cover;background-repeat:no-repeat;
  padding:clamp(90px,12vw,160px) var(--ag-gutter);
}
.ag-cta__scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,30,46,.72),rgba(8,30,46,.86));
}
.ag-cta__inner{position:relative;z-index:2;max-width:900px;margin:0 auto;text-align:center}
.ag-cta__title{
  font-weight:800;font-size:clamp(38px,6vw,76px);line-height:1.02;letter-spacing:-.015em;margin:0;
}
.ag-cta__text{
  font-weight:300;font-size:clamp(16px,1.5vw,19px);line-height:1.65;
  color:var(--ag-cta-body);max-width:52ch;margin:24px auto 0;
}
.ag-cta__actions{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:22px;margin-top:40px;
}
.ag-cta__mail{color:#fff;font-size:15px;letter-spacing:.04em}
.ag-cta__mail:hover{color:var(--ag-blue-hover)}

.ag-form{
  position:relative;z-index:2;max-width:760px;margin:56px auto 0;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;padding:clamp(26px,4vw,44px);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  text-align:left;
}
.ag-form__title{
  font-size:12px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ag-blue);margin-bottom:22px;text-align:center;
}

/* Contact Form 7 styling ---------------------------------------------------
   Scoped to .ag-form so it never leaks into other CF7 forms on the site.  */
.ag-form .ag-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ag-form .ag-form-full{grid-column:1/-1}
.ag-form label{
  display:block;font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ag-on-dark);margin-bottom:9px;
}
.ag-form input[type="text"],
.ag-form input[type="email"],
.ag-form input[type="tel"],
.ag-form input[type="url"],
.ag-form input[type="number"],
.ag-form input[type="date"],
.ag-form select,
.ag-form textarea{
  width:100%;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.2);
  border-radius:8px;
  color:#fff;
  font-family:inherit;font-size:15px;
  padding:14px 16px;
  transition:border-color .25s ease,background .25s ease;
}
.ag-form textarea{min-height:130px;resize:vertical}
.ag-form select option{color:var(--ag-navy)}
.ag-form input::placeholder,.ag-form textarea::placeholder{color:rgba(220,231,240,.55)}
.ag-form input:focus,.ag-form select:focus,.ag-form textarea:focus{
  outline:none;border-color:var(--ag-blue);background:rgba(255,255,255,.12);
}
.ag-form input[type="file"]{
  width:100%;color:var(--ag-on-dark);font-size:14px;
  padding:12px 0;
}
.ag-form input[type="file"]::file-selector-button{
  background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.2);
  border-radius:100px;padding:9px 18px;margin-right:14px;
  font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;
}
.ag-form .wpcf7-form-control-wrap{display:block}
.ag-form input[type="submit"],
.ag-form .wpcf7-submit{
  display:inline-flex;align-items:center;justify-content:center;
  width:auto;background:var(--ag-blue);color:#fff;border:0;
  font-weight:600;font-size:14px;letter-spacing:.02em;
  padding:17px 38px;border-radius:100px;cursor:pointer;
  transition:background .3s ease,transform .3s ease;
}
.ag-form input[type="submit"]:hover,.ag-form .wpcf7-submit:hover{
  background:var(--ag-blue-hover);transform:translateY(-2px);
}
.ag-form .ag-form-actions{
  grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:18px;
  margin-top:6px;
}
.ag-form .ag-form-note{font-size:13px;line-height:1.6;color:rgba(220,231,240,.7)}
.ag-form .wpcf7-spinner{margin:0 0 0 12px}
.ag-form .wpcf7-not-valid-tip{
  color:#FFB4A8;font-size:12.5px;margin-top:7px;letter-spacing:.02em;
}
.ag-form .wpcf7-response-output{
  grid-column:1/-1;margin:22px 0 0!important;
  border:1px solid rgba(255,255,255,.28)!important;border-radius:8px;
  padding:14px 18px!important;font-size:14px;color:#fff;
}
.ag-form form.sent .wpcf7-response-output{
  border-color:rgba(123,193,66,.6)!important;background:rgba(123,193,66,.14);
}
.ag-form form.invalid .wpcf7-response-output,
.ag-form form.failed .wpcf7-response-output{
  border-color:rgba(255,138,128,.6)!important;background:rgba(255,138,128,.12);
}
.ag-form .ag-form-fallback{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;
}
.ag-form .ag-form-missing{
  grid-column:1/-1;color:var(--ag-cta-body);font-size:14.5px;line-height:1.7;text-align:center;
}
.ag-form .ag-form-missing code{
  background:rgba(255,255,255,.14);padding:2px 7px;border-radius:4px;font-size:13px;
}

/* ==========================================================================
   12. Footer
   ========================================================================== */

.ag-footer{
  background:var(--ag-navy-deep);color:var(--ag-on-dark);
  padding:clamp(64px,7vw,96px) var(--ag-gutter) 40px;
}
.ag-footer__grid{
  max-width:var(--ag-shell);margin:0 auto;
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px;
}
.ag-footer__logo{height:52px;width:auto;display:block}
.ag-footer__about{font-size:14px;line-height:1.7;max-width:38ch;margin:18px 0 0}
.ag-footer__heading{
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ag-muted);margin-bottom:18px;
}
.ag-footer__list{display:flex;flex-direction:column;gap:11px;font-size:14px;list-style:none;margin:0;padding:0}
.ag-footer__list a{color:var(--ag-on-dark)}
.ag-footer__list a:hover{color:var(--ag-blue)}
.ag-footer__bar{
  max-width:var(--ag-shell);margin:56px auto 0;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  font-size:12px;letter-spacing:.06em;color:var(--ag-muted);
}

/* ==========================================================================
   13. Inner pages (blog / page / 404 / search)
   ========================================================================== */

.ag-page-hero{
  background:var(--ag-navy);color:#fff;
  /* The body already clears the fixed header, so this is plain section padding. */
  padding:clamp(56px,7vw,88px) var(--ag-gutter) clamp(52px,6vw,80px);
}
.ag-page-hero__inner{max-width:var(--ag-shell);margin:0 auto}
.ag-page-hero h1{
  font-weight:800;font-size:clamp(34px,5vw,64px);line-height:1.05;letter-spacing:-.015em;margin:0;
}
.ag-page-body{
  background:var(--ag-white);padding:clamp(56px,7vw,96px) var(--ag-gutter);
}
.ag-prose{
  max-width:760px;margin:0 auto;font-size:17px;line-height:1.8;color:var(--ag-body);
}
.ag-prose h2{font-size:clamp(26px,3vw,38px);font-weight:800;color:var(--ag-navy);margin:44px 0 16px;line-height:1.2}
.ag-prose h3{font-size:23px;font-weight:700;color:var(--ag-navy);margin:34px 0 12px}
.ag-prose p{margin:0 0 20px}
.ag-prose ul,.ag-prose ol{margin:0 0 20px;padding-left:22px}
.ag-prose li{margin-bottom:9px}
.ag-prose img{border-radius:var(--ag-radius)}
.ag-prose blockquote{
  margin:28px 0;padding:4px 0 4px 24px;border-left:3px solid var(--ag-blue);
  color:var(--ag-navy);font-size:19px;line-height:1.65;
}
.ag-post-list{
  max-width:var(--ag-shell);margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
.ag-post-card{
  background:#fff;border:1px solid var(--ag-line);border-radius:var(--ag-radius);
  overflow:hidden;display:flex;flex-direction:column;
}
.ag-post-card__media{aspect-ratio:16/10;overflow:hidden;background:#dfe8f0}
.ag-post-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.ag-post-card__body{padding:24px 24px 28px}
.ag-post-card__date{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ag-muted)}
.ag-post-card__title{font-weight:700;font-size:22px;margin:10px 0 0}
.ag-post-card__title a{color:var(--ag-navy)}
.ag-post-card__title a:hover{color:var(--ag-blue)}
.ag-post-card__excerpt{font-size:14px;line-height:1.65;color:var(--ag-body);margin:10px 0 0}
.ag-pagination{
  max-width:var(--ag-shell);margin:56px auto 0;
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
}
.ag-pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;height:44px;padding:0 14px;border-radius:100px;
  border:1px solid var(--ag-line);color:var(--ag-navy);font-weight:600;font-size:14px;
}
.ag-pagination .page-numbers.current,
.ag-pagination .page-numbers:hover{background:var(--ag-blue);border-color:var(--ag-blue);color:#fff}

.ag-search{display:flex;gap:10px;max-width:520px;margin:26px auto 0}
.ag-search input[type="search"]{
  flex:1;border:1px solid var(--ag-line);border-radius:100px;
  padding:14px 20px;font-family:inherit;font-size:15px;color:var(--ag-navy);
}
.ag-search input[type="search"]:focus{outline:none;border-color:var(--ag-blue)}

.ag-404{text-align:center;padding:clamp(120px,16vw,200px) var(--ag-gutter)}
.ag-404 h1{font-size:clamp(64px,12vw,150px);font-weight:900;line-height:1;color:var(--ag-navy);margin:0}
.ag-404 p{font-size:18px;color:var(--ag-body);margin:18px 0 34px}

/* WP core alignment classes */
.alignleft{float:left;margin:6px 24px 18px 0}
.alignright{float:right;margin:6px 0 18px 24px}
.aligncenter{display:block;margin:18px auto}
.wp-caption{max-width:100%}
.wp-caption-text,.gallery-caption{font-size:13px;color:var(--ag-muted);margin-top:8px}
.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;
  margin:-1px;overflow:hidden;padding:0;position:absolute;word-wrap:normal!important;
}
.screen-reader-text:focus{
  clip:auto!important;clip-path:none;height:auto;width:auto;
  display:block;top:5px;left:5px;padding:15px 23px;font-size:14px;
  background:#fff;color:var(--ag-navy);z-index:100000;border-radius:4px;
}

/* ==========================================================================
   14. Responsive
   ========================================================================== */

@media (max-width:1100px){
  .ag-footer__grid{grid-template-columns:1fr 1fr;gap:40px}
  .ag-post-list{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:1024px){
  /* Wide letter-spacing needs room once these small caps start wrapping.
     Scoped to narrow screens so the desktop layout is untouched. */
  .ag-eyebrow,.ag-hero__eyebrow,.ag-hero__strip,.ag-intro__eyebrow,.ag-stat__label,
  .ag-card__badge,.ag-finish__sub,.ag-project__caption,.ag-footer__heading,
  .ag-footer__bar,.ag-link-underline,.ag-link-dark,.ag-form__title,
  .ag-form label{line-height:1.6}

  .ag-nav__menu,.ag-nav__actions{display:none}
  .ag-burger{display:inline-flex}
  .ag-intro{grid-template-columns:1fr;gap:48px;align-items:start}
  .ag-product-grid{grid-template-columns:repeat(2,1fr)}
  .ag-finishes{grid-template-columns:repeat(2,1fr);gap:24px}
  .ag-reasons{grid-template-columns:repeat(2,1fr)}
  .ag-pillars{grid-template-columns:1fr;margin-top:56px}
  .ag-process{grid-template-columns:1fr;gap:44px}
  .ag-process__aside{position:static}
  .ag-process__media{aspect-ratio:16/10}
  .ag-projects{grid-template-columns:1fr 1fr}
  .ag-project--tall{grid-row:auto;grid-column:1/-1}
  .ag-project--tall .ag-project__media{aspect-ratio:16/9}
}

@media (max-width:820px){
  .ag-hero{min-height:auto;padding-top:clamp(130px,22vh,180px);padding-bottom:56px}
  .ag-feature-grid{grid-template-columns:1fr}
  .ag-card__body{padding:28px 26px 32px}
  .ag-card__title{font-size:26px}
  .ag-form .ag-form-grid,
  .ag-form .ag-form-fallback{grid-template-columns:1fr}
}

@media (max-width:640px){
  .ag-nav__brand img{height:38px}
  .ag-hero__title{max-width:none}
  .ag-hero__actions{gap:18px;flex-direction:column;align-items:stretch}
  .ag-hero__actions .ag-btn{width:100%;justify-content:center}
  .ag-hero__actions .ag-link-underline{align-self:center;border-bottom-color:rgba(255,255,255,.4)}
  .ag-hero__strip{gap:10px 24px;font-size:11px;letter-spacing:.18em;margin-top:40px}
  .ag-product-grid{grid-template-columns:1fr}
  .ag-finishes{grid-template-columns:repeat(2,1fr);gap:16px}
  .ag-reasons{grid-template-columns:1fr}
  .ag-finish__name{font-size:19px;margin-top:14px}
  .ag-projects{grid-template-columns:1fr}
  .ag-project--tall .ag-project__media{aspect-ratio:4/5}
  .ag-project--wide .ag-project__media{aspect-ratio:16/10}
  .ag-stats{grid-template-columns:1fr 1fr}
  .ag-stat{padding:22px 18px}
  .ag-stat__value{font-size:34px}
  .ag-step{padding:26px 4px;gap:18px}
  .ag-step__title{font-size:22px}
  .ag-step:hover{padding-left:8px}
  .ag-footer__grid{grid-template-columns:1fr;gap:34px}
  .ag-footer__bar{margin-top:40px}
  .ag-post-list{grid-template-columns:1fr}
  .ag-cta__actions .ag-btn{width:100%;justify-content:center}
  .ag-drawer{padding-top:88px}
}

@media (max-width:420px){
  .ag-finishes{grid-template-columns:1fr 1fr;gap:12px}
  .ag-craft__head{margin-bottom:40px}
}

/* ==========================================================================
   15. Service landing template  (template-service-a.php)

   The source design's layout, spacing and radii are kept exactly; only the
   palette and typeface are remapped to the homepage system:

     cream #FBF8F2/#FAF7F1 → --ag-mist / #fff      brown #26221C → --ag-navy
     deep blue #0F5C94     → --ags-band            lime/amber    → --ag-blue
     Playfair Display      → Nunito 800            Manrope       → Nunito
   ========================================================================== */

:root{
  --ags-band:#0E6FB0;          /* the two full-width blue bands */
  --ags-radius:14px;
  --ags-radius-sm:8px;
  --ags-shell:1240px;
  --ags-pad:clamp(64px,9vw,96px);
  --ags-whatsapp:#25D366;
  --ags-whatsapp-dark:#1EBE5A;
}

.ags-desktop-only{display:initial}
.ags-mobile-only{display:none}

.ags-section{padding:var(--ags-pad) 20px}
.ags-shell{max-width:var(--ags-shell);margin:0 auto;width:100%}
.ags-eyebrow{
  color:var(--ag-blue);font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  font-size:13px;line-height:1.5;margin:0 0 12px;
}
.ags-h2{
  font-weight:800;font-size:clamp(30px,3.4vw,44px);line-height:1.14;letter-spacing:-.01em;
  color:var(--ag-navy);margin:0;text-wrap:pretty;
}
.ags-section--navy .ags-h2{color:var(--ag-white)}
.ags-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--ag-blue);color:var(--ag-white);
  font-weight:800;font-size:17px;padding:16px 34px;
  border:0;border-radius:var(--ags-radius-sm);cursor:pointer;min-height:48px;
  box-shadow:0 4px 18px rgba(27,142,214,.35);
  transition:background .25s ease,transform .25s ease;
}
.ags-btn:hover{background:var(--ag-blue-hover);color:#fff;transform:translateY(-2px)}
.ags-btn--ghost{
  background:transparent;box-shadow:none;
  border:2px solid rgba(255,255,255,.7);color:var(--ag-white);
  font-weight:700;font-size:16px;padding:14px 26px;gap:10px;
}
.ags-btn--ghost:hover{background:transparent;border-color:var(--ags-whatsapp);color:var(--ags-whatsapp)}

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

.ags-hero{
  position:relative;min-height:calc(88vh - var(--ag-header-h,76px));
  display:flex;align-items:center;background:var(--ag-navy);
}
.ags-hero__bg{position:absolute;inset:0;overflow:hidden}
.ags-hero__bg img{width:100%;height:100%;object-fit:cover;display:block}
.ags-hero__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(8,24,38,.86) 0%,rgba(8,24,38,.58) 48%,rgba(8,24,38,.26) 100%);
}
.ags-hero__inner{
  position:relative;max-width:var(--ags-shell);margin:0 auto;width:100%;
  padding:clamp(56px,7vw,96px) 20px clamp(56px,6vw,72px);
  display:flex;gap:48px;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.ags-hero__copy{max-width:660px;animation:ags-fadeup .7s ease both}
.ags-hero__eyebrow{
  color:var(--ag-blue);font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  font-size:13px;line-height:1.5;margin:0 0 18px;
}
.ags-hero__title{
  font-weight:800;font-size:clamp(34px,4.6vw,62px);line-height:1.12;letter-spacing:-.015em;
  color:var(--ag-white);margin:0 0 20px;text-wrap:pretty;
}
.ags-hero__text{
  font-size:clamp(16px,1.4vw,19px);line-height:1.6;color:rgba(255,255,255,.85);
  margin:0 0 32px;max-width:560px;text-wrap:pretty;
}
.ags-hero__actions{display:flex;gap:14px;flex-wrap:wrap}
.ags-ticks{
  display:flex;gap:10px 22px;flex-wrap:wrap;margin-top:26px;
  font-size:14px;font-weight:600;color:rgba(255,255,255,.88);list-style:none;padding:0;
}
.ags-ticks li{display:flex;align-items:center;gap:7px}
.ags-ticks span{color:var(--ag-blue);font-weight:800}

@keyframes ags-fadeup{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes ags-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* --- Form card (hero + lead capture) ------------------------------------- */

.ags-card-form{
  background:var(--ag-mist);border-radius:var(--ags-radius);
  padding:30px 28px;width:475px;flex:0 0 auto;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.ags-card-form__title{font-weight:800;font-size:23px;color:var(--ag-navy);margin:0 0 6px}
.ags-card-form__sub{font-size:13.5px;color:var(--ag-body);margin:0 0 18px;line-height:1.5}
.ags-lead__form{
  flex:1 1 380px;min-width:300px;width:auto;
  padding:36px 32px;border-radius:16px;
  box-shadow:0 24px 70px rgba(0,0,0,.3);
}

/* Contact Form 7 inside the light card */
.ags-card-form .wpcf7-form,
.ags-card-form form{display:flex;flex-direction:column;gap:12px}
.ags-lead__form .wpcf7-form,
.ags-lead__form form{gap:14px}
.ags-card-form .wpcf7-form-control-wrap{display:block}
.ags-card-form input[type="text"],
.ags-card-form input[type="email"],
.ags-card-form input[type="tel"],
.ags-card-form select,
.ags-card-form textarea{
  width:100%;padding:13px 14px;font-size:15px;font-family:inherit;
  border:1.5px solid rgba(18,48,71,.2);border-radius:var(--ags-radius-sm);
  background:#fff;color:var(--ag-navy);min-height:48px;box-sizing:border-box;
  transition:border-color .2s ease;
}
.ags-lead__form input[type="text"],
.ags-lead__form input[type="email"],
.ags-lead__form input[type="tel"],
.ags-lead__form select{padding:14px 15px;font-size:16px}
.ags-card-form textarea{min-height:104px;resize:vertical}
.ags-card-form input::placeholder,.ags-card-form textarea::placeholder{color:#8FA3B3}
.ags-card-form input:focus,.ags-card-form select:focus,.ags-card-form textarea:focus{
  border-color:var(--ag-blue);outline:none;
}
.ags-card-form input[type="submit"],
.ags-card-form .wpcf7-submit{
  width:100%;background:var(--ag-blue);color:#fff;border:0;
  font-family:inherit;font-weight:800;font-size:16px;padding:15px;
  border-radius:var(--ags-radius-sm);cursor:pointer;min-height:48px;
  box-shadow:0 4px 16px rgba(27,142,214,.35);
  transition:background .25s ease;
}
.ags-lead__form input[type="submit"],
.ags-lead__form .wpcf7-submit{font-size:17px;padding:17px;min-height:52px}
.ags-card-form input[type="submit"]:hover,
.ags-card-form .wpcf7-submit:hover{background:var(--ag-blue-hover)}
.ags-card-form .ags-form-note{font-size:12px;color:var(--ag-body-on-tint);margin:0;text-align:center}
/* --ag-body, not --ag-muted: #7A8B99 measures 2.67:1 on this pale card, which
   is under AA. Nothing in the theme emits this class any more — a hand-edited
   form still can, so it is corrected rather than deleted. */
.ags-lead__form .ags-form-note{font-size:12.5px}
.ags-card-form .wpcf7-not-valid-tip{color:#C0392B;font-size:13px;font-weight:600;margin-top:6px}
.ags-card-form .wpcf7-response-output{
  margin:14px 0 0!important;padding:12px 14px!important;
  border:1.5px solid rgba(18,48,71,.2)!important;border-radius:var(--ags-radius-sm);
  font-size:13.5px;color:var(--ag-navy);
}
.ags-card-form form.sent .wpcf7-response-output{
  border-color:#2F6B1D!important;background:#E7F2DC;color:#2F6B1D;
}
.ags-card-form form.invalid .wpcf7-response-output,
.ags-card-form form.failed .wpcf7-response-output{border-color:#C0392B!important;color:#C0392B}
.ags-card-form .wpcf7-spinner{margin:0 auto}
.ags-form-missing{
  font-size:13.5px;line-height:1.6;color:var(--ag-body);margin:0;text-align:center;
}

/* --- Client logo bar ----------------------------------------------------- */

.ags-logobar{background:var(--ag-mist);border-bottom:1px solid var(--ag-line);padding:36px 0 32px}
.ags-logobar__label{
  text-align:center;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ag-muted);margin:0 0 22px;padding:0 20px;line-height:1.5;
}
.ags-logobar__track{overflow:hidden;position:relative}
.ags-logobar__row{
  display:flex;gap:56px;width:max-content;align-items:center;padding:0 28px;
  animation:ags-marquee 36s linear infinite;
}
.ags-logobar__row span{
  font-weight:800;font-size:22px;color:#9FB2C2;white-space:nowrap;
  transition:color .25s ease;
}
.ags-logobar__row span:hover{color:var(--ag-navy)}

/* --- Stats band ---------------------------------------------------------- */

.ags-stats{background:var(--ags-band);padding:56px 20px}
.ags-stats__grid{
  max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:36px;text-align:center;
}
.ags-stat__value{
  font-weight:800;font-size:clamp(38px,4vw,54px);line-height:1.05;color:var(--ag-white);
}
.ags-stat__label{
  font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.5;
  color:rgba(255,255,255,.78);margin-top:6px;
}
.ags-stat__label small{font-weight:500;text-transform:none;letter-spacing:0;font-size:13px}

/* --- Products ------------------------------------------------------------ */

.ags-products{background:var(--ag-mist)}
.ags-products__head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  flex-wrap:wrap;margin-bottom:40px;
}
.ags-tabs{display:flex;gap:8px;background:#fff;padding:5px;border-radius:99px;border:1px solid var(--ag-line)}
.ags-tab{
  border:0;cursor:pointer;font-family:inherit;font-weight:700;font-size:14px;
  padding:10px 20px;border-radius:99px;min-height:44px;
  background:transparent;color:var(--ag-body);
  transition:background .25s ease,color .25s ease;
}
.ags-tab[aria-selected="true"]{background:var(--ags-band);color:#fff}
.ags-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:26px}
/* auto-fit (not auto-fill) so three testimonials stretch across the row,
   exactly as the source design does. */
.ags-grid--fit{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.ags-product{
  background:#fff;border-radius:var(--ags-radius);overflow:hidden;
  border:1px solid var(--ag-line);display:flex;flex-direction:column;
  transition:box-shadow .25s,transform .25s;
}
.ags-product:hover{box-shadow:0 14px 40px rgba(18,48,71,.12);transform:translateY(-3px)}
.ags-product[hidden]{display:none}
.ags-product__media{height:210px;position:relative;overflow:hidden;background:#DCE7F0}
.ags-product__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ags-product__body{padding:22px 22px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.ags-product__row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ags-product__title{font-weight:800;font-size:20px;color:var(--ag-navy);margin:0}
.ags-badge{
  font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ag-blue-dark);background:#E4F1FB;padding:4px 9px;border-radius:99px;
}
.ags-product__text{font-size:14.5px;line-height:1.55;color:var(--ag-body);margin:0;flex:1}
.ags-product__link{
  align-self:flex-start;background:none;border:0;padding:10px 0;cursor:pointer;
  font-family:inherit;font-weight:800;font-size:14.5px;color:var(--ag-blue);min-height:44px;
  transition:color .2s ease;
}
.ags-product__link:hover{color:var(--ag-blue-dark)}

/* --- Why (navy) ---------------------------------------------------------- */

.ags-why{background:var(--ag-navy);color:var(--ag-white)}
.ags-why__text{color:rgba(255,255,255,.72);font-size:16px;line-height:1.6;max-width:560px;margin:14px 0 52px}
.ags-why__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2px;
  background:rgba(255,255,255,.12);border-radius:var(--ags-radius);overflow:hidden;
}
.ags-why__card{background:var(--ag-navy);padding:32px 28px}
.ags-why__card svg{margin-bottom:16px;color:var(--ag-blue)}
.ags-why__card h3{font-size:17px;font-weight:800;color:var(--ag-white);margin:0 0 8px}
.ags-why__card p{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.7);margin:0}

/* --- Process ------------------------------------------------------------- */

.ags-process{background:var(--ag-mist)}
.ags-process__inner{max-width:var(--ags-shell);margin:0 auto;text-align:center}
.ags-process__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:32px;
  text-align:left;margin:52px 0;
}
.ags-step{padding-top:8px;border-top:3px solid var(--ag-blue)}
.ags-step__num{font-weight:800;font-size:44px;line-height:1;color:#C0D3E3;margin:10px 0 6px}
.ags-step h3{font-size:17px;font-weight:800;color:var(--ag-navy);margin:0 0 6px}
.ags-step p{font-size:14.5px;line-height:1.55;color:var(--ag-body);margin:0}

/* --- Gallery ------------------------------------------------------------- */

.ags-gallery{background:#fff}
.ags-gallery__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  grid-auto-rows:230px;gap:18px;margin-top:40px;
}
.ags-tile{position:relative;margin:0;border-radius:var(--ags-radius);overflow:hidden;background:#DCE7F0}
.ags-tile--tall{grid-row:span 2}
.ags-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ag-ease)}
.ags-tile:hover img{transform:scale(1.05)}
.ags-tile__caption{
  position:absolute;bottom:14px;right:14px;
  background:rgba(11,37,54,.78);color:var(--ag-white);
  font-size:13px;font-weight:600;padding:7px 13px;border-radius:99px;pointer-events:none;
}
.ags-tile .ag-slot{border-radius:0}

/* --- Testimonials -------------------------------------------------------- */

.ags-testimonials{background:var(--ag-mist);border-top:1px solid var(--ag-line)}
.ags-testimonials__head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  flex-wrap:wrap;margin-bottom:40px;
}
.ags-rating{
  display:flex;align-items:center;gap:10px;background:#fff;
  border:1.5px solid var(--ag-line);border-radius:10px;padding:12px 18px;
}
.ags-rating__stars{color:#F2A900;font-size:18px;letter-spacing:2px}
.ags-rating__text{font-size:13px;font-weight:700;color:var(--ag-muted)}
.ags-quote{margin:0;background:#fff;border:1.5px solid var(--ag-line);border-radius:var(--ags-radius);padding:28px}
.ags-quote--placeholder{border-style:dashed}
.ags-quote__tag{
  font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#9FB2C2;margin:0 0 14px;line-height:1.5;
}
.ags-quote__body{font-size:15.5px;line-height:1.65;color:var(--ag-body);margin:0 0 20px;font-style:italic}
.ags-quote__name{font-size:14px;font-weight:800;color:var(--ag-navy);margin:0}
.ags-quote__meta{font-size:13px;color:var(--ag-muted);margin:2px 0 0}

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

.ags-faq{background:#fff}
.ags-faq__inner{max-width:820px;margin:0 auto}
.ags-faq__list{display:flex;flex-direction:column;gap:12px;margin-top:40px}
.ags-faq__item{background:var(--ag-mist);border:1px solid var(--ag-line);border-radius:12px;overflow:hidden}
.ags-faq__q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;
  background:none;border:0;cursor:pointer;padding:20px 22px;text-align:left;
  font-family:inherit;font-size:16px;font-weight:700;color:var(--ag-navy);min-height:48px;
}
.ags-faq__icon{color:var(--ag-blue);font-size:22px;font-weight:400;flex:0 0 auto;line-height:1}
.ags-faq__a{
  padding:0 22px 20px;margin:0;font-size:15px;line-height:1.65;color:var(--ag-body);
}
.ags-faq__a[hidden]{display:none}

/* --- Lead capture -------------------------------------------------------- */

.ags-lead{background:var(--ags-band)}
.ags-lead__inner{
  max-width:1140px;margin:0 auto;display:flex;gap:56px;flex-wrap:wrap;align-items:center;
}
.ags-lead__copy{flex:1 1 380px;min-width:300px}
.ags-lead__copy h2{
  font-weight:800;font-size:clamp(32px,3.6vw,48px);line-height:1.1;letter-spacing:-.015em;
  color:var(--ag-white);margin:0 0 16px;text-wrap:pretty;
}
.ags-lead__copy p{font-size:17px;line-height:1.6;color:rgba(255,255,255,.85);margin:0 0 28px;max-width:480px}
.ags-contact-list{display:flex;flex-direction:column;gap:14px;list-style:none;margin:0;padding:0}
.ags-contact-list a{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--ag-white);font-weight:700;font-size:17px;transition:color .2s ease;
}
.ags-contact-list a:hover{color:#BFE3FA}
.ags-contact-list a.ags-wa:hover{color:var(--ags-whatsapp)}

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

.ags-float{
  position:fixed;bottom:28px;right:28px;z-index:90;
  width:60px;height:60px;border-radius:50%;background:var(--ags-whatsapp);
  display:flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:0 8px 24px rgba(37,211,102,.45);transition:background .25s ease,transform .25s ease;
}
.ags-float:hover{background:var(--ags-whatsapp-dark);color:#fff;transform:translateY(-2px)}
.ags-float:focus-visible{outline:3px solid #fff;outline-offset:3px}
.ags-bottombar{
  position:fixed;bottom:0;left:0;right:0;z-index:95;display:none;
  box-shadow:0 -4px 20px rgba(0,0,0,.15);
}
.ags-bottombar a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  font-weight:800;font-size:15px;padding:16px 0;min-height:56px;box-sizing:border-box;
}
.ags-bottombar .ags-bottombar__call{background:var(--ags-band);color:var(--ag-white)}
.ags-bottombar .ags-bottombar__wa{background:var(--ags-whatsapp);color:#fff}

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

@media (max-width:919px){
  .ags-desktop-only{display:none!important}
  .ags-mobile-only{display:initial}
  /* Product and service templates already provide the full-width mobile bar. */
  body.agpr-page .ag-site-whatsapp,
  body.ags-page .ag-site-whatsapp{display:none}
  .ags-bottombar{display:flex}
  body.ags-page{padding-bottom:64px}
  .ags-hero__inner{padding-bottom:clamp(48px,8vw,64px)}
  .ags-hero{min-height:0}
  .ags-lead__inner{gap:36px}
  .ags-lead__form{padding:28px 24px}
}

@media (max-width:640px){
  .ags-section{padding:clamp(52px,11vw,64px) 20px}
  .ags-hero__actions .ags-btn{width:100%}
  .ags-products__head,.ags-testimonials__head{align-items:flex-start}
  .ags-tabs{width:100%;justify-content:space-between}
  .ags-tab{flex:1;padding:10px 8px}
  .ags-gallery__grid{grid-auto-rows:200px}
  .ags-tile--tall{grid-row:span 1}
  .ags-rating{width:100%}
  .ags-process__grid{gap:26px;margin:36px 0}
}

/* ==========================================================================
   16. Homepage — product divisions (template-parts/home-collection.php)

   Three category blocks, each a 3-across grid of products from the CPT.
   Structure follows the supplied reference: product title, photo, description,
   Learn More, then a division button. Styling is this site's own system —
   no new colours or typefaces, only tokens already defined above.
   ========================================================================== */

.agh-head{max-width:64ch;margin-bottom:clamp(48px,5vw,68px)}
.agh-head__title{
  font-weight:800;font-size:clamp(34px,5vw,60px);line-height:1.05;
  letter-spacing:-.01em;color:var(--ag-navy);margin:0;
}
.agh-head__text{font-size:17px;line-height:1.75;color:var(--ag-body);margin:24px 0 0}

/* --- One division ------------------------------------------------------- */

/* --- One division ------------------------------------------------------- */

.agh-block{margin-top:clamp(44px,4.6vw,60px)}
.agh-block:first-of-type{margin-top:0}

.agh-block__head > div{max-width:64ch}
.agh-block__title{
  font-weight:800;font-size:clamp(24px,2.6vw,34px);line-height:1.18;
  letter-spacing:-.01em;color:var(--ag-navy);margin:0;
}
.agh-block__text{font-size:16px;line-height:1.75;color:var(--ag-body);margin:12px 0 0}

/* The heading, description and button share one strip, so the call to action
   is visible before the products rather than buried under six cards. */
.agh--d .agh-block__head,
.agh--dplus .agh-block__head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(20px,3vw,40px);flex-wrap:wrap;
  border-radius:12px;
}

/* ---- Layout D: strip on the page ground ---- */
.agh--d .agh-block__head{
  background:var(--ag-mist);
  padding:clamp(26px,2.8vw,36px) clamp(26px,3vw,40px);
  margin-bottom:clamp(26px,2.8vw,36px);
}

/* ---- Layout D+: the division sits on a panel, strip goes white ---- */
.agh--dplus .agh-block{
  background:var(--ag-mist);
  border-radius:16px;
  padding:clamp(26px,3vw,40px);
  margin-top:clamp(24px,2.4vw,32px);
}
.agh--dplus .agh-block:first-of-type{margin-top:0}
.agh--dplus .agh-block__head{
  background:var(--ag-white);
  padding:clamp(24px,2.6vw,32px) clamp(24px,2.8vw,36px);
  margin-bottom:clamp(24px,2.6vw,32px);
}

.agh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.2vw,28px)}

/* The card is the original homepage collection card: photo on top, then a
   white body with the title and description. Matches .ag-product-grid .ag-card
   exactly — same border, radius, padding, type sizes and image-zoom hover. */
.agh-item{
  background:var(--ag-white);
  border:1px solid var(--ag-line);
  border-radius:var(--ag-radius);
  overflow:hidden;
  display:flex;flex-direction:column;
}

.agh-item__media{
  position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#DCE7F0;
}
.agh-item__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ag-ease);
}
.agh-item:hover .agh-item__media img{transform:scale(1.04)}

.agh-item__body{padding:24px 24px 28px;display:flex;flex-direction:column;flex:1}

.agh-item__title{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-weight:700;font-size:22px;line-height:1.25;color:var(--ag-navy);margin:0;
}
.agh-item__title a{color:inherit;transition:color .25s ease}
.agh-item__title a:hover{color:var(--ag-blue)}

.agh-item__origin{
  flex:0 0 auto;
  font-size:11px;font-weight:800;letter-spacing:.2em;line-height:1.4;
  text-transform:uppercase;color:var(--ag-blue);
}

.agh-item__text{
  font-size:14px;line-height:1.65;color:var(--ag-body);margin:10px 0 0;flex:1;
}

.agh-item__link{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:8px;
  margin-top:18px;padding-bottom:3px;
  font-size:13px;font-weight:700;letter-spacing:.1em;line-height:1.5;
  text-transform:uppercase;color:var(--ag-blue);
  border-bottom:1px solid currentColor;
  transition:color .25s ease;
}
.agh-item__link:hover{color:var(--ag-blue-dark)}

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

/* --- Fills a short last row so a division never ends on a hole ---------- */

.agh--dplus 
/* --- Responsive ---------------------------------------------------------- */

@media (max-width:1024px){
  .agh-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:640px){
  .agh-grid{grid-template-columns:1fr;gap:32px}
  /* The strip stacks, so the button goes full width under the description. */
  .agh--d .agh-block__head,
  .agh--dplus .agh-block__head{display:block}
  .agh--d .agh-block__head .ag-btn,
  .agh--dplus .agh-block__head .ag-btn{width:100%;justify-content:center;margin-top:20px}
  .agh--dplus .agh-block{padding:20px}
}

/* ==========================================================================
   17. Breadcrumbs (used on every single page, always over a dark ground)
   ========================================================================== */

.ag-crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.85);margin-bottom:18px;
}
.ag-crumbs a{color:inherit;text-decoration:none;transition:color .3s var(--ag-ease)}
.ag-crumbs a:hover,.ag-crumbs a:focus-visible{color:#fff}
.ag-crumbs [aria-current="page"]{color:rgba(255,255,255,.9)}
.ag-crumbs span[aria-hidden]{opacity:.45}

/* ==========================================================================
   18. Product single — Design A additions
   The hero, logo bar, gallery, why, process, FAQ and lead sections reuse the
   service page's own `ags-` styles; only these pieces are new.
   ========================================================================== */

.agpr-overview__grid{
  display:grid;grid-template-columns:minmax(0,1fr) 360px;
  gap:clamp(32px,4vw,64px);align-items:start;
}

/* Long-form body copy, shared by both product designs and the project page. */
.agpr-prose{font-size:17px;line-height:1.8;color:var(--ag-body);margin-top:22px}
.agpr-prose > *:first-child{margin-top:0}
.agpr-prose p{margin:0 0 1.1em}
.agpr-prose > *:last-child{margin-bottom:0}
.agpr-prose h2,.agpr-prose h3,.agpr-prose h4{
  color:var(--ag-navy);font-weight:700;line-height:1.25;margin:1.8em 0 .5em;
}
.agpr-prose h2{font-size:28px}
.agpr-prose h3{font-size:22px}
.agpr-prose h4{font-size:18px}
.agpr-prose ul,.agpr-prose ol{margin:0 0 1.1em;padding-left:1.3em}
.agpr-prose li{margin:.35em 0}
.agpr-prose a{color:var(--ag-blue);text-decoration:underline;text-underline-offset:3px}
.agpr-prose a:hover{color:var(--ag-blue-dark)}
.agpr-prose strong{color:var(--ag-navy);font-weight:700}
.agpr-prose img{max-width:100%;height:auto;border-radius:var(--ag-radius)}
.agpr-prose blockquote{
  margin:1.5em 0;padding:2px 0 2px 22px;border-left:3px solid var(--ag-blue);
  font-size:19px;line-height:1.7;color:var(--ag-navy);
}

.agpr-features{
  list-style:none;margin:28px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px 26px;
}
.agpr-features li{
  display:flex;gap:10px;align-items:flex-start;
  font-size:15px;line-height:1.6;color:var(--ag-body);
}
.agpr-features li span{color:var(--ag-blue);font-weight:800;flex:none}

.agpr-spec{
  background:var(--ag-mist);border-radius:16px;
  padding:clamp(24px,2.4vw,32px);position:sticky;top:calc(var(--ag-header-h,80px) + 24px);
}
.agpr-spec__title{
  margin:0 0 18px;font-size:13px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ag-navy);
}
.agpr-spec__list{margin:0}
.agpr-spec__row{
  display:flex;justify-content:space-between;gap:18px;
  padding:11px 0;border-bottom:1px solid var(--ag-line);
}
.agpr-spec__row:last-child{border-bottom:0}
.agpr-spec__row dt{font-size:14px;color:var(--ag-muted);margin:0}
.agpr-spec__row dd{font-size:14px;font-weight:700;color:var(--ag-navy);margin:0;text-align:right}
.agpr-spec__btn{width:100%;justify-content:center;margin-top:22px}
.agpr-spec__call{margin:14px 0 0;text-align:center;font-size:14px}
.agpr-spec__call a{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--ag-navy);text-decoration:none;font-weight:600;
}
.agpr-spec__call a:hover{color:var(--ag-blue)}

.agpr-related__head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,3vw,44px);
}

/* ==========================================================================
   19. Product single — Design B, "Premium"
   ========================================================================== */

.agpb-hero{
  display:grid;grid-template-columns:minmax(0,46%) minmax(0,54%);
  background:var(--ag-navy);color:var(--ag-white);align-items:stretch;
}
.agpb-hero__copy{display:flex;align-items:center;padding:clamp(56px,7vw,110px) clamp(24px,4vw,72px)}
.agpb-hero__copy-inner{max-width:560px;margin-left:auto;width:100%}
.agpb-hero__eyebrow{
  margin:0 0 16px;font-size:12px;font-weight:700;letter-spacing:.16em;
  /* The lighter blue, not --ag-blue: on navy the mid blue measures 3.8:1,
     which is under AA for text this size. This one measures 4.7:1. */
  text-transform:uppercase;color:var(--ag-blue-hover);
}
.agpb-hero__title{
  margin:0;font-weight:800;font-size:clamp(34px,4.4vw,58px);
  line-height:1.06;letter-spacing:-.015em;
}
.agpb-hero__text{
  margin:22px 0 0;font-size:17px;line-height:1.75;color:var(--ag-on-dark);max-width:46ch;
}
.agpb-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:32px}
.agpb-hero__wa{
  display:inline-flex;align-items:center;gap:9px;
  color:var(--ag-white);text-decoration:none;font-weight:600;font-size:15px;
  transition:color .3s var(--ag-ease);
}
.agpb-hero__wa:hover{color:var(--ags-whatsapp,#25D366)}

.agpb-hero__media{position:relative;min-height:clamp(320px,52vw,660px);background:#0B2536}
.agpb-hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.agpb-hero__media .ag-slot{position:absolute;inset:0}

.agpb-ticks{
  list-style:none;margin:30px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px 22px;
}
.agpb-ticks li{
  display:flex;gap:9px;align-items:flex-start;
  font-size:14px;line-height:1.5;color:var(--ag-on-dark);
}
.agpb-ticks li span{color:var(--ag-blue);font-weight:800;flex:none}

.agpb-facts{background:var(--ag-mist);padding:clamp(22px,2.6vw,34px) var(--ag-gutter)}
.agpb-facts__row{
  margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:20px clamp(24px,3vw,48px);
}
.agpb-fact dt{
  margin:0 0 6px;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ag-muted);
}
.agpb-fact dd{margin:0;font-size:18px;font-weight:700;color:var(--ag-navy);line-height:1.3}

.agpb-h2{
  margin:10px 0 0;font-weight:800;font-size:clamp(28px,3.4vw,42px);
  line-height:1.12;letter-spacing:-.01em;color:var(--ag-navy);
}

.agpb-body{background:var(--ag-white)}
.agpb-body__grid{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;
  gap:clamp(32px,4vw,72px);align-items:start;
}

.agpb-features{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:2px}
.agpb-features li{
  display:flex;gap:16px;align-items:baseline;
  padding:14px 0;border-top:1px solid var(--ag-line);
  font-size:16px;line-height:1.6;color:var(--ag-body);
}
.agpb-features li:last-child{border-bottom:1px solid var(--ag-line)}
.agpb-features__num{
  font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--ag-blue);flex:none;min-width:26px;
}

.agpb-rail__inner{
  position:sticky;top:calc(var(--ag-header-h,80px) + 24px);
  border:1px solid var(--ag-line);border-radius:16px;padding:clamp(22px,2.2vw,30px);
  background:var(--ag-white);
}
.agpb-rail__title{
  margin:0 0 16px;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ag-muted);
}
.agpb-rail__list{margin:0}
.agpb-rail__row{
  display:flex;justify-content:space-between;gap:16px;
  padding:10px 0;border-bottom:1px solid var(--ag-line);
}
.agpb-rail__row:last-child{border-bottom:0}
.agpb-rail__row dt{margin:0;font-size:13px;color:var(--ag-muted)}
.agpb-rail__row dd{margin:0;font-size:13px;font-weight:700;color:var(--ag-navy);text-align:right}
.agpb-rail__btn{width:100%;justify-content:center;margin-top:20px}
.agpb-rail__call{margin:13px 0 0;text-align:center;font-size:13px}
.agpb-rail__call a{
  display:inline-flex;align-items:center;gap:7px;color:var(--ag-navy);
  text-decoration:none;font-weight:600;
}
.agpb-rail__call a:hover{color:var(--ag-blue)}

.agpb-gallery{background:var(--ag-mist)}
.agpb-gallery__lead{
  margin:clamp(28px,3vw,44px) 0 0;border-radius:var(--ag-radius);overflow:hidden;background:#dfe8f0;
}
.agpb-gallery__lead img{width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;display:block}
.agpb-gallery__lead figcaption,.agpb-gallery__tile figcaption{
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ag-muted);
  margin-top:14px;padding:0 2px;
}
.agpb-gallery__lead figcaption{margin-bottom:4px}
.agpb-gallery__strip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(16px,2vw,24px);margin-top:clamp(20px,2.4vw,32px);
}
.agpb-gallery__tile{margin:0}
.agpb-gallery__tile img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;
  border-radius:var(--ag-radius);background:#dfe8f0;
}

.agpb-trust{background:var(--ag-navy);color:var(--ag-white);padding:var(--ag-section-y) var(--ag-gutter)}
.agpb-trust .ags-eyebrow{color:var(--ag-blue-hover)}
.agpb-trust__title{
  margin:10px 0 0;max-width:22ch;font-weight:800;
  font-size:clamp(28px,3.4vw,44px);line-height:1.12;letter-spacing:-.01em;
}
.agpb-trust__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(26px,3vw,44px);margin-top:clamp(36px,4vw,60px);
}
.agpb-trust__num{
  display:block;font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--ag-blue);margin-bottom:12px;
}
.agpb-trust__item h3{margin:0;font-size:19px;font-weight:700;line-height:1.3}
.agpb-trust__item p{margin:10px 0 0;font-size:15px;line-height:1.7;color:var(--ag-on-dark)}

.agpb-related{background:var(--ag-white)}
.agpb-related__head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,3vw,44px);
}
.agpb-related__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(18px,2vw,28px);
}
.agpb-card{
  display:block;text-decoration:none;color:inherit;
  border-radius:var(--ag-radius);overflow:hidden;background:var(--ag-mist);
}
.agpb-card__media{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:#dfe8f0}
.agpb-card__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ag-ease);
}
.agpb-card:hover .agpb-card__media img{transform:scale(1.05)}
.agpb-card__body{display:block;padding:20px 22px 24px}
.agpb-card__title{display:block;font-size:18px;font-weight:700;color:var(--ag-navy);line-height:1.3}
.agpb-card__link{
  display:block;margin-top:10px;font-size:13px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ag-blue);
}

.agpb-enquiry{
  background:var(--ag-navy);color:var(--ag-white);
  padding:var(--ag-section-y) var(--ag-gutter);
}
.agpb-enquiry__inner{max-width:720px;margin:0 auto;text-align:center}
.agpb-enquiry__title{
  margin:0;font-weight:800;font-size:clamp(28px,3.6vw,44px);line-height:1.12;letter-spacing:-.01em;
}
.agpb-enquiry__text{margin:16px auto 0;max-width:52ch;font-size:16px;line-height:1.7;color:var(--ag-on-dark)}
/* The form card is 340px wide because the hero puts it BESIDE a column of
   copy. Here it is the only thing in a 720px centred column, so it has to be
   told to fill it and centre itself — otherwise it sits flush left with 380px
   of dead navy beside it, which is what this section used to do. */
.agpb-enquiry__form{
  margin:clamp(28px,3vw,40px) auto 0;text-align:left;
  width:100%;max-width:540px;flex:none;
  padding:clamp(28px,3vw,36px);border-radius:16px;
}
.agpb-enquiry__contact{
  list-style:none;margin:26px 0 0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px 30px;
}
.agpb-enquiry__contact a{
  display:inline-flex;align-items:center;gap:9px;
  color:var(--ag-white);text-decoration:none;font-weight:600;font-size:15px;
}
.agpb-enquiry__contact a:hover{color:var(--ag-blue)}

/* ==========================================================================
   20. Project single
   ========================================================================== */

.agw-hero{
  position:relative;display:flex;align-items:flex-end;
  min-height:clamp(420px,60vh,640px);
  padding:clamp(60px,9vw,120px) var(--ag-gutter) clamp(44px,5vw,72px);
  background:var(--ag-navy-deep);color:var(--ag-white);overflow:hidden;
}
.agw-hero__media{position:absolute;inset:0}
.agw-hero__media img{width:100%;height:100%;object-fit:cover;display:block}
.agw-hero__media .ag-slot{position:absolute;inset:0}
.agw-hero__scrim{
  position:absolute;inset:0;pointer-events:none;
  /* The copy sits in the lower half, so that half has to be reliably dark —
     a project photograph can be bright exactly where the text lands. */
  background:linear-gradient(180deg,rgba(11,37,54,.24) 0%,rgba(11,37,54,.64) 36%,rgba(11,37,54,.84) 68%,rgba(11,37,54,.93) 100%);
}
.agw-hero__inner{position:relative;max-width:var(--ag-shell);margin:0 auto;width:100%}
.agw-hero__eyebrow{
  margin:0 0 14px;font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;
  /* White, not brand blue — the same choice the homepage hero makes, because
     mid-blue on a photograph is unreadable wherever the photo is light. */
  color:rgba(255,255,255,.92);
}
.agw-hero__title{
  margin:0;font-weight:800;font-size:clamp(32px,5vw,60px);
  line-height:1.06;letter-spacing:-.015em;max-width:20ch;
}
.agw-hero__text{margin:20px 0 0;font-size:17px;line-height:1.7;color:rgba(255,255,255,.82);max-width:52ch}

.agw-meta{background:var(--ag-navy);color:var(--ag-white);padding:clamp(22px,2.6vw,32px) var(--ag-gutter)}
.agw-meta__row{
  margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:18px clamp(24px,3vw,48px);
}
.agw-meta__item dt{
  margin:0 0 6px;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ag-blue);
}
.agw-meta__item dd{margin:0;font-size:17px;font-weight:700;line-height:1.3}

.agw-story__grid{
  display:grid;grid-template-columns:minmax(0,1fr) 300px;
  gap:clamp(32px,4vw,72px);align-items:start;
}
.agw-story__lede{
  margin:0;font-size:clamp(19px,2vw,24px);line-height:1.55;
  font-weight:600;color:var(--ag-navy);max-width:44ch;
}
.agw-story__lede + .agpr-prose{margin-top:26px}

.agw-supplied{
  background:var(--ag-mist);border-radius:16px;padding:clamp(22px,2.2vw,30px);
}
.agw-supplied__title{
  margin:0 0 16px;font-size:13px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ag-navy);
}
.agw-supplied ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.agw-supplied li{
  display:flex;gap:10px;align-items:flex-start;
  font-size:15px;line-height:1.55;color:var(--ag-body);
}
.agw-supplied li span{color:var(--ag-blue);font-weight:800;flex:none}

.agw-used__list{
  list-style:none;margin:clamp(26px,3vw,40px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;
}
.agw-used__list li{margin:0}
.agw-used__list a,.agw-used__list span{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 20px;border:1px solid var(--ag-line);border-radius:var(--ag-radius);
  font-size:16px;font-weight:600;color:var(--ag-navy);text-decoration:none;
  transition:border-color .3s var(--ag-ease),color .3s var(--ag-ease);
}
.agw-used__list a:hover{border-color:var(--ag-blue);color:var(--ag-blue)}
.agw-used__list span{color:var(--ag-muted);font-weight:500}

.agw-related__head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,3vw,44px);
}
.agw-related__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(18px,2vw,28px);
}

/* ==========================================================================
   21. Single pages — responsive
   ========================================================================== */

@media (max-width:1024px){
  .agpr-overview__grid,
  .agpb-body__grid,
  .agw-story__grid{grid-template-columns:1fr}
  .agpr-spec,.agpb-rail__inner{position:static}
  .agpb-hero{grid-template-columns:1fr}
  .agpb-hero__copy{padding:clamp(48px,8vw,80px) var(--ag-gutter)}
  .agpb-hero__copy-inner{margin-left:0;max-width:none}
  .agpb-hero__media{min-height:clamp(280px,46vw,420px);order:-1}
}

@media (max-width:640px){
  .agpb-facts__row,.agw-meta__row{grid-template-columns:1fr 1fr}
  .agpb-gallery__lead img{aspect-ratio:16/10}
  .agpb-enquiry__inner{text-align:left}
  .agpb-enquiry__contact{justify-content:flex-start}
  .agpr-related__head,.agpb-related__head,.agw-related__head{display:block}
  .agpr-related__head .ag-btn,
  .agpb-related__head .ag-btn,
  .agw-related__head .ag-btn{margin-top:20px}
  .agpr-spec__row,.agpb-rail__row{gap:12px}
}

/* --------------------------------------------------------------------------
   Design A reuses the service landing hero, but a product's own photograph is
   often much brighter than the fixed service photo — and the service hero's
   blue eyebrow then measures under 2:1. These overrides apply ONLY on a single
   product page; the service page keeps its design exactly as supplied.
   -------------------------------------------------------------------------- */

body.agpr-page .ags-hero__scrim{
  background:
    linear-gradient(100deg,rgba(8,24,38,.92) 0%,rgba(8,24,38,.72) 48%,rgba(8,24,38,.42) 100%),
    linear-gradient(180deg,rgba(8,24,38,.30) 0%,rgba(8,24,38,.10) 40%,rgba(8,24,38,.55) 100%);
}
body.agpr-page .ags-hero__eyebrow{color:rgba(255,255,255,.92)}

/* ==========================================================================
   22. Client logo bar — uploaded marks
   The strip was built for names set in type. A logo has to sit on the same
   baseline and carry the same visual weight, so it is height-constrained
   rather than width-constrained, and muted until hover exactly as the names
   are — otherwise twelve full-colour marks fight the page.
   ========================================================================== */

.ags-logobar__logo{
  display:inline-flex; align-items:center; flex:none;
  height:34px; line-height:1;
}
.ags-logobar__logo img{
  display:block; width:auto; height:100%; max-width:150px;
  object-fit:contain;
  opacity:.55; filter:grayscale(1);
  transition:opacity .3s var(--ag-ease), filter .3s var(--ag-ease);
}
.ags-logobar__logo img:hover{opacity:1; filter:grayscale(0)}

@media (max-width:640px){
  .ags-logobar__logo{height:26px}
  .ags-logobar__logo img{max-width:112px}
}
@media (prefers-reduced-motion:reduce){
  .ags-logobar__logo img{transition:none}
}

/* ==========================================================================
   23. Testimonials carousel
   A scroll-snap track, not a JavaScript carousel: it is a real horizontal
   scroller, so trackpad, touch, keyboard and screen readers all work before
   any script runs. main.js only adds the arrows and dots on top.
   ========================================================================== */

.agq{padding:var(--ag-section-y) var(--ag-gutter)}
.agq--light{background:var(--ag-mist)}
.agq--navy{background:var(--ag-navy);color:var(--ag-white)}
.agq--navy .ags-eyebrow{color:var(--ag-blue-hover)}

.agq__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap; margin-bottom:clamp(26px,3vw,40px);
}
.agq__title{
  margin:8px 0 0; font-weight:800; font-size:clamp(26px,3.2vw,42px);
  line-height:1.12; letter-spacing:-.01em; max-width:20ch;
  color:var(--ag-navy); text-wrap:balance;
}
.agq--navy .agq__title{color:var(--ag-white)}

.agq__nav{display:flex; gap:10px; flex:none}
.agq__arrow{
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:17px; background:transparent; color:var(--ag-navy);
  border:1px solid var(--ag-line);
  transition:background .25s var(--ag-ease), border-color .25s var(--ag-ease), color .25s var(--ag-ease);
}
.agq__arrow:hover:not(:disabled){background:var(--ag-blue); border-color:var(--ag-blue); color:#fff}
.agq__arrow:disabled{opacity:.35; cursor:default}
.agq--navy .agq__arrow{color:var(--ag-white); border-color:rgba(180,199,214,.32)}
.agq--navy .agq__arrow:hover:not(:disabled){background:var(--ag-blue); border-color:var(--ag-blue)}

.agq__track{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(300px,1fr);
  gap:clamp(18px,2vw,26px);
  overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; scrollbar-width:none;
  padding-bottom:4px; margin-bottom:-4px;
}
.agq__track::-webkit-scrollbar{display:none}
.agq__track:focus-visible{outline:2px solid var(--ag-blue); outline-offset:6px; border-radius:var(--ag-radius)}

/* Three across on a wide screen, so the strip reads as a set rather than one
   enormous quote — the shape the design already uses for cards. */
@media (min-width:900px){
  .agq__track{grid-auto-columns:calc((100% - 2 * clamp(18px,2vw,26px)) / 3)}
}

.agq__card{
  scroll-snap-align:start; margin:0;
  background:var(--ag-white); border:1px solid var(--ag-line);
  border-radius:14px; padding:clamp(24px,2.4vw,32px);
  display:flex; flex-direction:column; gap:20px;
}
.agq--navy .agq__card{background:rgba(255,255,255,.06); border-color:rgba(180,199,214,.18)}

.agq__quote{
  margin:0; font-size:16.5px; line-height:1.75; color:var(--ag-body);
  flex:1 1 auto;
}
.agq__quote::before{content:'\201C'}
.agq__quote::after{content:'\201D'}
.agq--navy .agq__quote{color:var(--ag-on-dark)}

.agq__by{display:flex; align-items:center; gap:14px}
.agq__photo{flex:none; width:46px; height:46px; border-radius:50%; overflow:hidden; background:var(--ag-mist)}
.agq__photo img{width:100%; height:100%; object-fit:cover; display:block}
.agq__who{display:flex; flex-direction:column; gap:2px; min-width:0}
.agq__name{font-weight:700; font-size:15px; color:var(--ag-navy)}
.agq--navy .agq__name{color:var(--ag-white)}
.agq__role{font-size:13px; color:var(--ag-muted)}
.agq--navy .agq__role{color:var(--ag-on-dark)}

.agq__dots{display:flex; justify-content:center; gap:8px; margin-top:26px}
.agq__dot{
  width:8px; height:8px; border-radius:50%; padding:0; cursor:pointer;
  background:var(--ag-line); border:0;
  transition:background .25s var(--ag-ease), transform .25s var(--ag-ease);
}
.agq__dot[aria-current="true"]{background:var(--ag-blue); transform:scale(1.35)}
.agq--navy .agq__dot{background:rgba(180,199,214,.3)}
.agq--navy .agq__dot[aria-current="true"]{background:var(--ag-blue-hover)}

@media (max-width:640px){
  .agq__head{display:block}
  .agq__nav{margin-top:20px}
  .agq__track{grid-auto-columns:minmax(0,86%)}
}
@media (prefers-reduced-motion:reduce){
  .agq__track{scroll-behavior:auto}
  .agq__arrow,.agq__dot{transition:none}
}

/* ==========================================================================
   24. Product and project listings
   The heading band, the category filter row, and pagination — everything the
   card grids needed to become real pages rather than a blog archive. The grids
   themselves are the homepage's, reused.
   ========================================================================== */

.agl-head{
  background:var(--ag-navy); color:var(--ag-white);
  padding:clamp(48px,7vw,96px) var(--ag-gutter) clamp(40px,5vw,72px);
}
.agl-head__eyebrow{
  margin:0 0 14px; font-size:12px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ag-blue-hover);
}
.agl-head__title{
  margin:0; font-weight:800; font-size:clamp(32px,5vw,58px);
  line-height:1.06; letter-spacing:-.02em; max-width:18ch; text-wrap:balance;
}
.agl-head__intro{
  margin:20px 0 0; font-size:17px; line-height:1.75;
  color:var(--ag-on-dark); max-width:60ch;
}

.agl-filters{background:var(--ag-mist); border-bottom:1px solid var(--ag-line); padding:0 var(--ag-gutter)}
.agl-filters__row{
  list-style:none; margin:0; padding:0;
  display:flex; gap:4px; overflow-x:auto; scrollbar-width:none;
}
.agl-filters__row::-webkit-scrollbar{display:none}
.agl-filter{
  display:block; white-space:nowrap; text-decoration:none;
  padding:16px 18px; font-size:14.5px; font-weight:700; color:var(--ag-body);
  border-bottom:2px solid transparent;
  transition:color .25s var(--ag-ease), border-color .25s var(--ag-ease);
}
.agl-filter:hover{color:var(--ag-navy)}
.agl-filter--on{color:var(--ag-blue); border-bottom-color:var(--ag-blue)}

.agl-body{padding-top:clamp(40px,5vw,72px)}
.agl-grid{margin-top:0}

.agl-pagination{margin-top:clamp(36px,4vw,56px)}
.agl-pagination .nav-links{display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.agl-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; height:42px; padding:0 14px; border-radius:8px;
  border:1px solid var(--ag-line); color:var(--ag-navy);
  font-weight:700; font-size:14.5px; text-decoration:none;
  transition:background .25s var(--ag-ease), border-color .25s var(--ag-ease), color .25s var(--ag-ease);
}
.agl-pagination .page-numbers:hover{border-color:var(--ag-blue); color:var(--ag-blue)}
.agl-pagination .page-numbers.current{background:var(--ag-blue); border-color:var(--ag-blue); color:#fff}
.agl-pagination .page-numbers.dots{border-color:transparent}

@media (max-width:640px){
  .agl-filter{padding:13px 14px; font-size:13.5px}
}

/* ==========================================================================
   25. About page
   Reuses the navy band and card grids from elsewhere; only the hero, the
   numbers strip and the leadership cards are new.
   ========================================================================== */

.aga-hero{
  position:relative; display:flex; align-items:flex-end;
  min-height:clamp(400px,58vh,600px);
  padding:clamp(60px,9vw,120px) var(--ag-gutter) clamp(44px,5vw,72px);
  background:var(--ag-navy-deep); color:var(--ag-white); overflow:hidden;
}
.aga-hero__media{position:absolute; inset:0}
.aga-hero__media img{width:100%; height:100%; object-fit:cover; display:block}
.aga-hero__media .ag-slot{position:absolute; inset:0}
.aga-hero__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(11,37,54,.30) 0%,rgba(11,37,54,.62) 40%,rgba(11,37,54,.88) 100%);
}
.aga-hero__inner{position:relative; max-width:var(--ag-shell); margin:0 auto; width:100%}
.aga-hero__eyebrow{
  margin:0 0 14px; font-size:12px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.9);
}
.aga-hero__title{
  margin:0; font-weight:800; font-size:clamp(32px,5vw,60px);
  line-height:1.06; letter-spacing:-.02em; max-width:18ch; text-wrap:balance;
}
.aga-hero__text{margin:22px 0 0; font-size:17px; line-height:1.75; color:rgba(255,255,255,.85); max-width:58ch}

.aga-stats{background:var(--ag-navy); color:var(--ag-white); padding:clamp(26px,3vw,38px) var(--ag-gutter)}
.aga-stats__row{
  margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:22px clamp(24px,3vw,48px);
}
.aga-stat dt{
  margin:0; font-weight:800; font-size:clamp(24px,2.6vw,34px);
  line-height:1.1; color:var(--ag-white); font-variant-numeric:tabular-nums;
}
.aga-stat dd{margin:6px 0 0; font-size:13px; letter-spacing:.06em; color:var(--ag-blue-hover); text-transform:uppercase}

.aga-story__grid{
  display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
  gap:clamp(30px,4vw,72px); align-items:start;
}
.aga-story__note{
  margin-top:26px; padding:12px 16px; font-size:13.5px; color:var(--ag-muted);
  border:1px dashed rgba(18,48,71,.22); border-radius:var(--ag-radius);
}

.aga-people__head{max-width:60ch; margin-bottom:clamp(30px,3.4vw,48px)}
.aga-people__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,30px);
}
.aga-person{
  background:var(--ag-white); border:1px solid var(--ag-line);
  border-radius:14px; overflow:hidden; display:flex; flex-direction:column;
}
.aga-person__media{position:relative; aspect-ratio:4/3; background:#dfe8f0; overflow:hidden}
.aga-person__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.aga-person__media .ag-slot{position:absolute; inset:0}
.aga-person__body{padding:clamp(20px,2.2vw,28px)}
.aga-person__name{margin:0; font-size:20px; font-weight:800; color:var(--ag-navy); line-height:1.25}
.aga-person__role{
  margin:6px 0 0; font-size:12px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ag-blue);
}
.aga-person__text{margin:14px 0 0; font-size:15px; line-height:1.7; color:var(--ag-body)}

.ag-cta__call{
  display:inline-flex; align-items:center; gap:9px;
  color:var(--ag-white); text-decoration:none; font-weight:700; font-size:15.5px;
  transition:color .3s var(--ag-ease);
}
.ag-cta__call:hover{color:var(--ag-blue-hover)}

@media (max-width:900px){
  .aga-story__grid{grid-template-columns:1fr}
  .aga-people__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .aga-people__grid{grid-template-columns:1fr}
  .aga-stats__row{grid-template-columns:1fr 1fr}
}

/* ==========================================================================
   Project case study — challenge/approach/result, outcome, quote, pager
   ========================================================================== */

.agw-case__head{margin-bottom:clamp(30px,3.4vw,48px)}
.agw-case__list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.2vw,30px);
}
.agw-case__item{
  position:relative;background:var(--ag-white);border-radius:16px;
  padding:clamp(26px,2.6vw,36px);border:1px solid var(--ag-line);
}
.agw-case__num{
  display:block;font-size:13px;font-weight:800;letter-spacing:.12em;
  color:var(--ag-blue);margin-bottom:14px;
}
.agw-case__title{
  margin:0 0 12px;font-size:clamp(19px,1.6vw,22px);font-weight:800;
  line-height:1.25;color:var(--ag-navy);
}
.agw-case__text{margin:0;font-size:16px;line-height:1.7;color:var(--ag-body)}

.agw-nums__head{margin-bottom:clamp(28px,3vw,42px)}
.agw-nums .ag-h2{color:var(--ag-white)}
.agw-nums__row{
  margin:0;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(22px,2.6vw,40px);
}
.agw-num{
  padding-top:22px;border-top:2px solid rgba(255,255,255,.18);
}
.agw-num__value{
  margin:0;font-size:clamp(30px,3.6vw,46px);font-weight:800;
  line-height:1.05;letter-spacing:-.02em;color:var(--ag-white);
}
.agw-num__label{
  margin:10px 0 0;font-size:14px;line-height:1.5;color:var(--ag-on-dark);
}

.agw-quote__figure{
  margin:0;max-width:60ch;margin-inline:auto;text-align:center;position:relative;
}
.agw-quote__mark{
  display:block;font-size:80px;line-height:.6;font-weight:800;
  color:var(--ag-blue);opacity:.28;margin-bottom:10px;
}
.agw-quote__text{
  margin:0;font-size:clamp(21px,2.4vw,30px);line-height:1.45;
  font-weight:600;color:var(--ag-navy);letter-spacing:-.01em;
}
.agw-quote__by{
  margin-top:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;gap:4px;
}
.agw-quote__name{font-size:15px;font-weight:700;color:var(--ag-navy)}
.agw-quote__role{font-size:14px;color:var(--ag-muted)}

.agw-used__head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,3vw,44px);
}
.agw-used__grid{margin-bottom:0}
.agw-used__grid + .agw-used__list{margin-top:clamp(20px,2vw,28px)}

.agw-pager{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--ag-line);border-block:1px solid var(--ag-line);
}
.agw-pager__link{
  display:flex;align-items:center;gap:18px;background:var(--ag-white);
  padding:clamp(22px,2.4vw,32px) var(--ag-gutter);text-decoration:none;
  transition:background .3s var(--ag-ease);
}
.agw-pager__link:hover{background:var(--ag-mist)}
.agw-pager__link--next{flex-direction:row-reverse;text-align:right}
.agw-pager__media{
  flex:none;width:72px;height:56px;border-radius:var(--ag-radius);
  background-size:cover;background-position:center;
}
.agw-pager__body{display:flex;flex-direction:column;gap:6px;min-width:0}
.agw-pager__label{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ag-blue);
}
.agw-pager__title{
  font-size:clamp(16px,1.4vw,19px);font-weight:700;line-height:1.3;
  color:var(--ag-navy);
}

@media (max-width:1000px){
  .agw-case__list{grid-template-columns:1fr 1fr}
  .agw-nums__row{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .agw-case__list{grid-template-columns:1fr}
  .agw-pager{grid-template-columns:1fr}
  .agw-pager__link--next{flex-direction:row;text-align:left}
}

/* Testimonial star ratings */
.agq__stars{
  margin:0 0 16px;display:flex;gap:3px;line-height:1;
}
.agq__star{font-size:17px;color:var(--ag-line-strong)}
.agq__star--on{color:#E9A93B}
.agq--navy .agq__star{color:rgba(255,255,255,.22)}
.agq--navy .agq__star--on{color:#F0B84E}

/* ==========================================================================
   "In place" — the projects strip on a product page
   ========================================================================== */

.ags-gallery__head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px;flex-wrap:wrap;
}

/* Three to a row, always — whether the tiles are projects or the uploaded
   photographs. The strip below the heading is a portfolio, not a mosaic: an
   even grid reads as a list of jobs rather than a collage.

   The modifier exists because the SERVICE page uses the same .ags-gallery__grid
   for a genuine mosaic with tall tiles, and that one should stay as it is. */
.ags-gallery__grid--three{
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:260px;
}

/* The uploaded-photo tiles sit in the same grid, so their caption should sit
   where the project captions sit. Left, not right — otherwise a page built
   from photographs and a page built from projects look like two designs. */
.ags-gallery__grid--three .ags-tile__caption{
  left:14px;right:auto;max-width:calc(100% - 28px);
}

/* The whole tile is the link, so the caption has to stop swallowing the click
   that the pill used to block. */
.ags-tile--link .ags-tile__caption{pointer-events:auto}
.ags-tile--link > a{
  position:absolute;inset:0;display:block;text-decoration:none;
}
/* Hugs its text rather than stretching the tile, the way the single-line pill
   always did — it just has two lines in it now. */
.ags-tile--link .ags-tile__caption{
  left:14px;right:auto;max-width:calc(100% - 28px);
  display:flex;flex-direction:column;gap:2px;
  text-align:left;padding:10px 16px;
  transition:background .3s var(--ag-ease);
}
.ags-tile--link:hover .ags-tile__caption{background:rgba(11,37,54,.92)}
.ags-tile__name{font-size:14px;font-weight:700;line-height:1.3}
.ags-tile__meta{font-size:12px;font-weight:500;color:var(--ag-on-dark)}
.ags-tile--link:focus-within{outline:3px solid var(--ag-blue);outline-offset:3px}

.ags-gallery__note{
  margin:22px 0 0;padding:14px 18px;border-radius:var(--ag-radius);
  background:var(--ag-mist);border:1px dashed var(--ag-line-strong);
  font-size:14px;line-height:1.6;color:var(--ag-body);
}

@media (max-width:1000px){
  .ags-gallery__grid--three{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .ags-gallery__grid--three{grid-template-columns:1fr;grid-auto-rows:230px}
}

/* The "only you can see this" strip on a half-written project. Editors only —
   it is never rendered for a visitor, so it can afford to be loud. */
.agw-editnote{
  background:#FFF6E5;border-block:1px solid #F0D9A8;
  padding:clamp(18px,2vw,26px) 0;
}
.agw-editnote p{
  margin:0;font-size:15px;line-height:1.7;color:#6B5323;max-width:80ch;
}
.agw-editnote p + p{margin-top:8px}
.agw-editnote a{color:#8A5A00;font-weight:700}
.ags-gallery__text{
  margin:14px 0 0;font-size:16px;line-height:1.7;color:var(--ag-body);max-width:58ch;
}
.agq__text{margin:14px 0 0;font-size:16px;line-height:1.7;color:var(--ag-body);max-width:58ch}
.agq--navy .agq__text{color:var(--ag-on-dark)}

/* The enquiry card is a LIGHT card, and it sits on bands of every colour — the
   navy Design B band, the blue Design A band, a photographic hero. Its labels
   must therefore state their own colour rather than inherit the band's.

   Before this rule the Design B band set white on the section and the labels
   inside the pale card inherited it: white on #EDF3F8, a contrast ratio of
   1.12:1, which is text you cannot read at all. The old form had no labels,
   only placeholders, which is why it went unnoticed until the four new forms
   introduced them. */
.ags-card-form label{ color:var(--ag-navy) }

/* Same trap, one element along. The four forms end with
   <span class="ag-form-note">We respond within 24 hours</span>, which the dark
   homepage card and the contact card both style — but this card only had a rule
   for .ags-form-note, its own older class. So on the navy Design B band the
   note inherited white onto the pale card and was all but invisible, while
   every label beside it was correct. Stating the card's own colour once, rather
   than per element, is what stops the next addition repeating this. */
.ags-card-form{ color:var(--ag-body) }
.ags-card-form .ag-form-note{
  display:block;font-size:12px;color:var(--ag-body-on-tint);margin:0;text-align:center;line-height:1.6;
}