/*
 * Whisker & Woof — Ads Landing Page template
 *
 * Self-contained stylesheet for template-ads-landing.php. Landing pages are
 * standalone documents (no site header, nav or footer), so the theme's global
 * style.css is dequeued on this template and everything the page needs is here.
 *
 * Source design: "Google Ads Landing Page" (Claude Design project
 * 019e16af-a2ec-701c-9dae-dcef882220aa). The section styles are kept as drawn;
 * the modifiers at the bottom are what the ACF section builder needs so that
 * sections still look right in any order (backgrounds, spacing, image side, a
 * non-overlay header, the CTA band and the rich-text block).
 */

:root {
  --navy: #242933;
  --navy-deep: #1b1f28;
  --navy-soft: #2d3340;
  --gold: #D9B451;
  --gold-soft: #e6c781;
  --bone: #E2DEDF;
  --paper: #F5F1EC;
  --cream: #F2F0EA;
  --line: rgba(217, 180, 81, 0.25);
  --line-soft: rgba(255, 255, 255, 0.08);
  --text: #FFFFFF;
  --text-mute: rgba(255, 255, 255, 0.85);
  --text-faint: rgba(255, 255, 255, 0.45);
  --text-dark: #242933;
  --text-dark-mute: rgba(36, 41, 51, 0.7);

  --font-display: "Proxima Nova", "proxima-nova", "Montserrat", "Mulish", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --btn-r: 0 14px 0 14px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.ads-landing {
  margin: 0;
  font-family: var(--font-body);
  background: var(--navy);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ==========================================================================
   Base — from the design
   ========================================================================== */

.ads{background:var(--navy);color:#fff;font-family:var(--font-body);font-size:16px;line-height:1.6}
.ads a{color:var(--gold);text-decoration:none}
.ads a:hover{color:var(--gold-soft)}
.ads p{color:var(--text-mute);margin:0 0 1em}
.ads .wrap{max-width:1140px;margin:0 auto}
.ads section{padding:88px 56px}
.ads .cream{background:var(--cream);color:var(--text-dark)}
.ads .cream p{color:var(--text-dark-mute)}

/* site heading style: light weight, bold-italic emphasis */
.ads h1,.ads h2,.ads h3{font-family:var(--font-display);font-weight:300;letter-spacing:0;line-height:1.2;margin:0}
.ads h1 em,.ads h2 em,.ads h3 em{font-style:italic;font-weight:700}
.ads h2{font-size:clamp(30px,3.4vw,40px);color:var(--gold);margin-bottom:26px}
.ads .cream h2{color:var(--gold)}
.ads h3{font-size:22px;color:#fff}
.ads .cream h3{color:var(--text-dark)}

/* site button: outlined, asymmetric corners, italic bold.
   The light-surface variants are written at a higher specificity than the
   default so they win wherever they are used: `.ads a.wwb` would otherwise beat
   a plain `.cream .wwb`, leaving white-on-cream buttons. */
.ads a.wwb,.ads .wwb,.wwb{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-style:italic;font-weight:700;font-size:14px;padding:11px 20px;border:1px solid #fff;border-radius:var(--btn-r);color:#fff;background:transparent;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.ads a.wwb:hover,.ads .wwb:hover,.wwb:hover{background:#fff;color:var(--navy)}

/* On a light surface: a cream section, or the cream form card on a navy one. */
.ads .cream a.wwb,.ads .cream .wwb,.ads .ads-form a.wwb,.ads .ads-form .wwb{border-color:var(--text-dark);color:var(--text-dark);background:transparent}
.ads .cream a.wwb:hover,.ads .cream .wwb:hover,.ads .ads-form a.wwb:hover,.ads .ads-form .wwb:hover{background:var(--text-dark);color:#fff}

/* Gold solid, on either surface. */
.ads a.wwb.gold,.ads .wwb.gold,.ads .cream a.wwb.gold,.ads .cream .wwb.gold,.ads .ads-form a.wwb.gold,.ads .ads-form .wwb.gold,.wwb.gold{border-color:var(--gold);background:var(--gold);color:var(--navy)}
.ads a.wwb.gold:hover,.ads .wwb.gold:hover,.ads .cream a.wwb.gold:hover,.ads .cream .wwb.gold:hover{background:var(--gold-soft);border-color:var(--gold-soft);color:var(--navy)}

/* site text link with rule beneath */
.ads a.wwlink,.ads .wwlink,.wwlink{display:inline-block;font-size:14px;color:#fff;padding-bottom:10px;border-bottom:1px solid #fff}
.ads .cream a.wwlink,.ads .cream .wwlink{color:var(--text-dark);border-color:var(--text-dark)}
.ads .cream a.wwlink:hover,.ads .cream .wwlink:hover{color:var(--gold)}

/* Google rating pill (site widget) */
.gpill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #e3e0da;border-radius:4px;padding:8px 14px;font-family:var(--font-body);font-size:15px;color:#3c4043;white-space:nowrap}
.ads a.gpill:hover{color:#3c4043}
.gpill .g{font-family:var(--font-display);font-weight:700;font-size:18px;background:conic-gradient(#4285F4 0 25%,#34A853 25% 50%,#FBBC05 50% 75%,#EA4335 75%);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.gpill b{font-weight:700;color:#202124}
.gpill .st{color:#F4B400;letter-spacing:1px;font-size:14px}
.gpill i{font-style:italic;color:#5f6368}

/* logo mark */
.ww-logo{font-family:var(--font-display);font-style:italic;font-weight:700;font-size:28px;line-height:1;color:var(--gold);letter-spacing:-0.01em}
.ww-logo small{display:block;font-style:normal;font-size:7px;letter-spacing:0.22em;color:var(--gold);font-weight:600;margin-top:4px;padding-left:2px}
.ww-logo img{display:block;height:52px;width:auto}

/* header */
.ads-head{display:flex;align-items:center;justify-content:space-between;padding:26px 56px;gap:24px;position:absolute;inset:0 0 auto 0;z-index:3}
.ads-head .ww-logo{font-size:30px}
.ads-head .right{display:flex;align-items:center;gap:22px}
.ads-head .tel{font-family:var(--font-display);font-weight:600;font-size:15px;color:#fff}
.ads-head .tel:hover{color:var(--gold)}

/* hero — full-bleed photo with dark wash */
.ads section.ads-hero{position:relative;min-height:640px;display:flex;align-items:center;padding:190px 56px 90px;overflow:hidden}
.ads-hero .bg{position:absolute;inset:0;z-index:0}
.ads-hero .bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 40%}
.ads-hero .bg::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(14,17,24,.86) 0%,rgba(14,17,24,.55) 55%,rgba(14,17,24,.25) 100%)}
.ads-hero .wrap{position:relative;z-index:1;width:100%}
.ads-hero h1{font-size:clamp(30px,3.4vw,42px);color:#fff;max-width:20em}
.ads-hero h1 em{color:#fff}
.ads-hero h1 .l2{display:block;margin-top:14px}
.ads-hero .gpill{margin-top:34px}
.ads-hero .actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:56px}
.ads-hero .rule{width:240px;height:1px;background:#fff;margin-top:64px;opacity:.9}

/* trust bar — accreditation logos, like the site footer */
.ads section.ads-trust{padding:40px 56px;background:var(--cream);border-bottom:1px solid #e3e0da;text-align:center}
.ads-trust .cap{font-size:14px;color:var(--text-dark-mute);margin:0 0 22px}
.ads-trust .logos{display:flex;justify-content:center;align-items:center;gap:20px;flex-wrap:wrap}
.ads-trust img{height:72px;width:auto;display:block}
.ads-trust img.wide{height:64px}

/* two-column text + photo (site pattern) */
.ads-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.ads-split .photo{aspect-ratio:1/1.05;min-height:380px}
.ads-split img.photo{width:100%;height:100%;object-fit:cover;display:block}
.ads-split .lead{font-size:16px;max-width:34em}

/* tick list (the "first consultation" block in the source design) */
.ads-list ul{list-style:none;padding:0;margin:28px 0 36px}
.ads-list li{padding:12px 0;border-top:1px solid var(--line-soft);color:var(--text-mute);font-size:15px;display:flex;gap:14px}
.ads-list li:last-child{border-bottom:1px solid var(--line-soft)}
.ads-list li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-top:10px}
.ads-list li b{color:#fff;font-weight:600}

/* icon cards ("why us" in the source design) */
.ads-chips .chips{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:30px 0 36px}
.ads-chips .chip{display:flex;gap:12px;align-items:flex-start;background:#fff;border-radius:var(--btn-r);padding:14px 16px;border:1px solid #e3e0da}
.ads-chips .chip svg{flex:none;width:24px;height:24px;color:var(--text-dark);margin-top:2px}
.ads-chips .chip b{display:block;font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--text-dark);line-height:1.25}
.ads-chips .chip span{display:block;font-size:12.5px;color:var(--text-dark-mute);margin-top:3px;line-height:1.4}

/* numbered steps */
.ads-steps ol{list-style:none;padding:0;margin:0 0 36px;counter-reset:s}
.ads-steps li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;gap:18px;padding:22px 0;border-top:1px solid var(--line-soft)}
.ads-steps li:last-child{border-bottom:1px solid var(--line-soft)}
.ads-steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--font-display);font-style:italic;font-weight:700;font-size:20px;color:var(--gold);line-height:1.2}
.ads-steps li b{display:block;font-family:var(--font-display);font-weight:700;font-size:16px;color:#fff;margin-bottom:4px}
.ads-steps li p{margin:0;font-size:15px}

/* reviews — cream, plain three-column like site */
.ads-reviews{text-align:center}
.ads-reviews .grid{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:40px;margin-top:48px;text-align:left}
.ads-reviews .rv .who{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ads-reviews .rv .av{width:40px;height:40px;border-radius:50%;background:#1F4A8B;color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:16px;flex:none;text-transform:uppercase}
.ads-reviews .rv .nm{font-family:var(--font-body);font-weight:600;font-size:14px;color:var(--text-dark);line-height:1.2}
.ads-reviews .rv .st{color:#F4B400;font-size:12px;letter-spacing:1px;line-height:1.2}
.ads-reviews .rv .ago{font-size:11.5px;color:#8a8a8a}
.ads-reviews .rv p{font-size:14px;line-height:1.5;margin:0;color:var(--text-dark-mute)}

/* cta + form */
.ads-cta .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start}
.ads-cta .hours{margin-top:28px;font-size:15px;color:var(--text-mute);display:grid;gap:4px}
.ads-cta .hours b{color:#fff;font-weight:600}
.ads-cta .tel{display:block;margin-top:30px;font-family:var(--font-display);font-weight:700;font-size:28px;color:#fff;line-height:1}
.ads-cta .tel:hover{color:var(--gold)}
.ads-cta .team{display:block;width:100%;max-width:420px;aspect-ratio:1/1.1;object-fit:cover;margin-top:32px}
.ads-cta .addr{margin-top:22px;font-size:14px;color:var(--text-faint)}
.ads-form{background:var(--cream);border-radius:0 28px 0 28px;padding:36px}
.ads-form h3{font-size:24px;color:var(--text-dark);margin-bottom:6px}
.ads-form .note{font-size:14px;color:var(--text-dark-mute);margin:0 0 22px}
.ads-form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ads-form .field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.ads-form label{font-size:13px;color:var(--text-dark);font-weight:600}
.ads-form input,.ads-form select,.ads-form textarea{font-family:var(--font-body);font-size:15px;color:var(--text-dark);background:#fff;border:1px solid #d9d5ce;border-radius:4px;padding:11px 13px;width:100%;outline:none;transition:border-color .15s}
.ads-form input:focus,.ads-form select:focus,.ads-form textarea:focus{border-color:var(--text-dark)}
.ads-form textarea{min-height:84px;resize:vertical}
.ads .ads-form .wwb{width:100%;margin-top:6px;font-size:15px;padding:14px 20px}
.ads-form .consent{font-size:12px;color:var(--text-dark-mute);margin:14px 0 0;line-height:1.5}

/* footer */
.ads-foot{padding:36px 56px;background:var(--navy);border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:12.5px;color:var(--text-faint)}
.ads-foot a{color:var(--text-mute)}
.ads-foot .links{display:flex;gap:18px;flex-wrap:wrap}

/* ==========================================================================
   Template modifiers — sections are editor-ordered, so every block needs to
   hold up on a cream background, on a navy one, and in any position.
   ========================================================================== */

/* Header in the flow rather than over the hero. Applied automatically when the
   first section is not a hero, so a reordered page never has the header
   floating over a cream band. */
.ads-head.is-static{position:static;background:var(--navy)}

/* Hero overlay strength. */
.ads-hero[data-overlay="light"] .bg::after{background:linear-gradient(90deg,rgba(14,17,24,.62) 0%,rgba(14,17,24,.34) 55%,rgba(14,17,24,.12) 100%)}
.ads-hero[data-overlay="strong"] .bg::after{background:linear-gradient(90deg,rgba(14,17,24,.94) 0%,rgba(14,17,24,.74) 55%,rgba(14,17,24,.42) 100%)}
.ads-hero[data-overlay="flat"] .bg::after{background:rgba(14,17,24,.62)}
.ads section.ads-hero.is-short{min-height:0;padding-top:150px;padding-bottom:70px}
/* With the header in the flow there is no overlap to clear, so the hero loses
   the extra top padding it needs when the header floats over it. */
.ads-head.is-static ~ section.ads-hero{padding-top:90px}
.ads-head.is-static ~ section.ads-hero.is-short{padding-top:70px}

/* Vertical rhythm per section. */
.ads section.pad-compact{padding-top:56px;padding-bottom:56px}
.ads section.pad-large{padding-top:120px;padding-bottom:120px}
.ads section.pad-none{padding-top:0;padding-bottom:0}

/* Image on the left instead of the right. */
.ads-split.rev > .photo,.ads-split.rev > img.photo{order:-1}

/* A split section with the photo removed becomes a single column. */
.ads-split.no-photo{grid-template-columns:1fr}
.ads-split.no-photo .lead{max-width:44em}

/* Buttons row, shared by every section. */
.ads .actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.ads-split .actions{margin-top:4px}
.ads-reviews .actions{justify-content:center;margin-top:44px}

/* Full-width CTA band. */
.ads-band{text-align:center}
.ads-band .wrap{max-width:820px}
.ads-band h2{margin-bottom:18px}
.ads-band .lead{font-size:17px;margin-bottom:32px}
.ads-band .actions{justify-content:center}

/* Free rich-text block. */
.ads-text .wrap.narrow{max-width:760px}
.ads-text .rt{font-size:16px}
.ads-text .rt h3{margin:32px 0 12px}
.ads-text .rt ul,.ads-text .rt ol{padding-left:20px;color:var(--text-mute)}
.ads-text.cream .rt ul,.ads-text.cream .rt ol{color:var(--text-dark-mute)}
.ads-text .rt img{max-width:100%;height:auto}

/* Cream/navy variants of blocks the source design only drew one way. */
.ads-list.cream li{color:var(--text-dark-mute);border-color:rgba(36,41,51,.12)}
.ads-list.cream li b{color:var(--text-dark)}
.ads-steps.cream li{border-color:rgba(36,41,51,.12)}
.ads-steps.cream li b{color:var(--text-dark)}
.ads-chips:not(.cream) .chip{background:rgba(255,255,255,.06);border-color:var(--line-soft)}
.ads-chips:not(.cream) .chip svg{color:var(--gold)}
.ads-chips:not(.cream) .chip b{color:#fff}
.ads-chips:not(.cream) .chip span{color:var(--text-mute)}
.ads-reviews:not(.cream) .rv .nm{color:#fff}
.ads-reviews:not(.cream) .rv p{color:var(--text-mute)}
.ads-reviews:not(.cream) .rv .ago{color:var(--text-faint)}
.ads-cta.cream .hours{color:var(--text-dark-mute)}
.ads-cta.cream .hours b,.ads-cta.cream .tel{color:var(--text-dark)}
.ads-cta.cream .addr{color:var(--text-dark-mute)}
.ads-cta.cream .ads-form{background:#fff}
.ads-trust.navy{background:var(--navy);border-bottom-color:var(--line-soft)}
.ads-trust.navy .cap{color:var(--text-mute)}

/* Contact block with no form card at all: contact details go full width. */
.ads-cta.no-form .wrap{grid-template-columns:1fr}
.ads-cta.no-form .team{max-width:520px}

/* Buttons stacked inside the form card, for handing off to another system. */
.ads-form .actions.stacked{flex-direction:column;align-items:stretch;gap:12px}
.ads-form .actions.stacked .wwb{width:100%;font-size:15px;padding:14px 20px}
.ads-form .actions.stacked .wwlink{align-self:flex-start}

/* An embedded booking/registration widget from another system. The card keeps
   its padding, and an iframe given only a fixed width is made to fit. */
.ads-form.has-embed iframe{display:block;width:100%;max-width:100%;border:0}
/* Only impose a height when the vendor's embed did not set one itself. */
.ads-form.has-embed iframe:not([height]):not([style*="height"]){min-height:520px}
.ads-form.has-embed > div,.ads-form.has-embed > form{max-width:100%}
.ads-form.has-embed img{max-width:100%;height:auto}

/* Third-party form plugins (Forminator, WPForms) dropped into the CTA card, so
   a real, submitting form still matches the design. */
.ads-form .forminator-ui,.ads-form .wpforms-container{font-family:var(--font-body)}
.ads-form .forminator-ui .forminator-label,.ads-form .wpforms-field-label{font-size:13px;color:var(--text-dark);font-weight:600;font-family:var(--font-body)}
.ads-form .forminator-ui input[type=text],.ads-form .forminator-ui input[type=email],.ads-form .forminator-ui input[type=tel],.ads-form .forminator-ui select,.ads-form .forminator-ui textarea,.ads-form .wpforms-field input,.ads-form .wpforms-field select,.ads-form .wpforms-field textarea{font-family:var(--font-body);font-size:15px;color:var(--text-dark);background:#fff;border:1px solid #d9d5ce;border-radius:4px;padding:11px 13px;box-shadow:none}
.ads-form .forminator-button-submit,.ads-form .wpforms-submit{font-family:var(--font-display);font-style:italic;font-weight:700;font-size:15px;padding:14px 20px;border:1px solid var(--text-dark);border-radius:var(--btn-r);color:var(--text-dark);background:transparent;width:100%;transition:background .15s,color .15s}
.ads-form .forminator-button-submit:hover,.ads-form .wpforms-submit:hover{background:var(--text-dark);color:#fff}

/* Live Google feed (Google Reviews Toolkit) dropped into the reviews section.
   The plugin keeps its own responsive column behaviour; these rules only bring
   its cards into the landing page's type and colour. */
.ads-reviews .grt-reviews{margin-top:48px;text-align:left}
.ads-reviews .grt-review{background:transparent;border:0;box-shadow:none;padding:0}
.ads-reviews .grt-review__header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ads-reviews .grt-review__avatar{width:40px;height:40px;border-radius:50%;flex:none}
.ads-reviews .grt-review__author{font-family:var(--font-body);font-weight:600;font-size:14px;color:var(--text-dark);line-height:1.2}
.ads-reviews:not(.cream) .grt-review__author{color:#fff}
.ads-reviews .grt-review__time{font-size:11.5px;color:#8a8a8a}
.ads-reviews:not(.cream) .grt-review__time{color:var(--text-faint)}
.ads-reviews .grt-review__text{font-size:14px;line-height:1.5;margin:0;color:var(--text-dark-mute)}
.ads-reviews:not(.cream) .grt-review__text{color:var(--text-mute)}
.ads-reviews .grt-review__toggle{font-family:var(--font-body);font-size:13px;color:var(--gold);background:none;border:0;padding:0 0 0 4px;cursor:pointer}
.ads-reviews .grt-badge{margin:0 auto}

/* The theme's global stylesheet is not loaded here, so redeclare this. */
.ads .screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Sticky mobile call bar, hidden by default. */
.ads-callbar{display:none}

/* Floating WhatsApp button. whatsapp.css sizes the theme's Font Awesome glyph
   by font-size; this template draws an inline SVG instead, so it needs an
   explicit box. */
.ads-landing .whatsapp-float svg{width:34px;height:34px;display:block}
@media(max-width:575.98px){
  .ads-landing .whatsapp-float svg{width:29px;height:29px}
}

@media(max-width:900px){
  .ads section,.ads-head,.ads section.ads-trust,.ads-foot{padding-left:24px;padding-right:24px}
  .ads section.ads-hero{padding:170px 24px 72px;min-height:0}
  .ads-head.is-static ~ .ads section.ads-hero{padding-top:72px}
  .ads-split,.ads-cta .wrap{grid-template-columns:1fr;gap:36px}
  .ads-split .photo{aspect-ratio:16/10;min-height:280px}
  .ads-split.rev .photo{order:-1}
  .ads-reviews .grid{grid-template-columns:1fr}
  .ads-form{padding:24px}
  .ads-form .row{grid-template-columns:1fr}
  .ads-head .tel{display:none}
  .ads-trust .logos{gap:14px}
  .ads-trust img{height:56px}
  .ads-trust img.wide{height:50px}
  .ads-foot{flex-direction:column}
}

@media(max-width:560px){
  .ads-chips .chips{grid-template-columns:1fr}
  .ads-hero .actions .wwb{flex:1 1 100%}
}

/* Sticky call/register bar on phones — the highest-value conversion path for a
   paid-search visitor on mobile. Toggled per page in the ACF settings. */
@media(max-width:768px){
  .ads.has-callbar{padding-bottom:64px}
  .ads.has-callbar .ads-callbar{display:flex;position:fixed;inset:auto 0 0 0;z-index:20;background:var(--navy);border-top:1px solid var(--line-soft)}
  .ads-callbar a{flex:1 1 50%;display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 10px;font-family:var(--font-display);font-style:italic;font-weight:700;font-size:14px;color:#fff}
  .ads-callbar a + a{border-left:1px solid var(--line-soft);background:var(--gold);color:var(--navy)}
  .ads-callbar a:hover{color:#fff}
  .ads-callbar a + a:hover{color:var(--navy)}
  .ads-callbar svg{width:16px;height:16px;flex:none}
  /* Lift the WhatsApp button clear of the call bar rather than letting the
     two fixed elements overlap. */
  .ads-landing .ads.has-callbar ~ .whatsapp-float,
  body.ads-landing:has(.ads.has-callbar) .whatsapp-float{bottom:calc(64px + max(16px, env(safe-area-inset-bottom)))}
}

/* ==========================================================================
   Motion
   Two separate mechanisms, on purpose:
   - The hero animates in CSS, on load. It holds the largest element on the
     page, so it must never wait on JavaScript.
   - Everything below the fold is revealed by js/ads-landing.js, which adds
     .ads-anim itself. If that script never runs, nothing is hidden.
   All of it is off under prefers-reduced-motion.
   ========================================================================== */

@keyframes ww-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes ww-fade{from{opacity:0}to{opacity:1}}
@keyframes ww-line{from{width:0;opacity:0}to{width:240px;opacity:.9}}
@keyframes ww-settle{from{transform:scale(1.06)}to{transform:scale(1)}}

.ads.has-motion .ads-hero .bg img{animation:ww-settle 1.8s cubic-bezier(.22,.61,.36,1) both}
.ads.has-motion .ads-hero h1{animation:ww-rise .7s cubic-bezier(.22,.61,.36,1) both}
.ads.has-motion .ads-hero .gpill{animation:ww-rise .7s cubic-bezier(.22,.61,.36,1) both .12s}
.ads.has-motion .ads-hero .actions{animation:ww-rise .7s cubic-bezier(.22,.61,.36,1) both .24s}
.ads.has-motion .ads-hero .rule{animation:ww-line .9s cubic-bezier(.22,.61,.36,1) both .36s}
.ads.has-motion .ads-head{animation:ww-fade .8s ease both .1s}

/* Scroll reveal. The delay comes from --d, set per element by the script. */
.ads-anim .ads.has-motion [style*="--d"]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .62s cubic-bezier(.22,.61,.36,1) var(--d,0ms),transform .62s cubic-bezier(.22,.61,.36,1) var(--d,0ms);
}
.ads-anim .ads.has-motion [style*="--d"].is-in{opacity:1;transform:none}

/* Photos travel a touch further, which reads as depth against the text column. */
.ads-anim .ads.has-motion .photo[style*="--d"],
.ads-anim .ads.has-motion .team[style*="--d"]{transform:translateY(26px) scale(.985)}
.ads-anim .ads.has-motion .photo[style*="--d"].is-in,
.ads-anim .ads.has-motion .team[style*="--d"].is-in{transform:none}

/* Interaction polish. */
.ads-chips .chip{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.ads-chips .chip:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.14)}
.ads-chips:not(.cream) .chip:hover{border-color:rgba(217,180,81,.45);box-shadow:0 10px 24px rgba(0,0,0,.3)}
.ads-trust img{transition:transform .25s ease,filter .25s ease}
.ads-trust img:hover{transform:scale(1.05)}
.ads-cta .tel,.ads-head .tel{transition:color .2s ease}
.ads-callbar a{transition:background .2s ease,color .2s ease}

/* Visible keyboard focus, since the theme's global stylesheet is not loaded. */
.ads a:focus-visible,.ads button:focus-visible,.ads input:focus-visible,
.ads select:focus-visible,.ads textarea:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}

/* Anchored sections should not land flush against the top of the window. */
.ads section[id]{scroll-margin-top:24px}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ads.has-motion .ads-hero .bg img,
  .ads.has-motion .ads-hero h1,
  .ads.has-motion .ads-hero .gpill,
  .ads.has-motion .ads-hero .actions,
  .ads.has-motion .ads-head{animation:none}
  .ads.has-motion .ads-hero .rule{animation:none;width:240px;opacity:.9}
  .ads-anim .ads.has-motion [style*="--d"]{opacity:1;transform:none;transition:none}
  .ads-chips .chip:hover,.ads-trust img:hover{transform:none}
}