/* Additions to the design CSS (site.css is generated from the design – do not hand-edit it). */

/* YouTube background in the 16:9 reel frame. Scaled 1.2 to crop YouTube's edge chrome. */
.hero-reel .yt-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s ease}
.hero-reel .yt-bg{position:absolute;top:50%;left:50%;width:100%;height:100%;border:0;transform:translate(-50%,-50%) scale(1.2);pointer-events:none;opacity:0;transition:opacity .6s ease}
.hero-reel.yt-on .yt-bg{opacity:1}
.hero-reel.yt-on .yt-poster{opacity:0}
.hero-reel .hero-reel-btn{z-index:2}
@media (max-width:560px){.hero-reel .yt-bg{transform:translate(-50%,-50%) scale(1.35)}}

/* Video lightbox */
.yt-modal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:64px 24px;background:rgba(14,14,14,.92)}
.yt-modal[hidden]{display:none}
.yt-modal-frame{width:min(1170px,100%);aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000}
.yt-modal-frame iframe{display:block;width:100%;height:100%;border:0}
.yt-modal-close{position:absolute;top:20px;right:20px;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:transparent;color:#ffffff;cursor:pointer;transition:border-color .2s}
.yt-modal-close:hover,.yt-modal-close:focus-visible{border-color:#ffffff}

/* Forms */
.sp-input[aria-invalid="true"]{border-color:#c62828}
.sp-err{margin:12px 0 0;font-size:15px;line-height:24px;color:#c62828}
.sp-btn[aria-busy="true"]{opacity:.6;cursor:progress}
.sp-done{display:flex;flex-direction:column;gap:12px;padding:40px;border:1px solid #e6e6e6;border-radius:16px}
.sp-done:focus{outline:none}
.sp-done-eyebrow{margin:0;font-size:15px;line-height:27px;font-weight:500;color:#535353}
.sp-done h3{margin:0;font-size:clamp(28px,3vw,36px);line-height:1.25;font-weight:500}
.sp-done p:last-child{margin:0;font-size:17px;line-height:27.2px}
.ft-news{position:relative}
.ft-news-msg{margin:8px 0 0;font-size:14px;line-height:22px;color:#bcbcbc}
#nl-email[aria-invalid="true"]{outline:1px solid #ef9a9a}

/* Plain editor pages (privacy policy etc.) */
.astro-prose{font-size:17px;line-height:27.2px}
.astro-prose h2{margin:48px 0 16px;font-size:clamp(28px,3vw,36px);line-height:1.25;font-weight:500}
.astro-prose h3{margin:32px 0 12px;font-size:24px;line-height:33.6px;font-weight:500}
.astro-prose a{text-decoration:underline}
.astro-prose ul,.astro-prose ol{padding-left:1.2em}

/* Admin bar offset for the sticky jump bar */
.admin-bar .jump{top:32px}
@media (max-width:782px){.admin-bar .jump{top:46px}}

/* Mobile menu (MarkUp 2026-10-31): match the desktop nav – title case, 16px, lighter weight – but stacked. */
.sm-links{gap:0}
.sm-links a{padding:10px 0;font-size:16px;line-height:25.6px;font-weight:400;letter-spacing:0;text-transform:none}
.sm-links a::before,.sm-links a[aria-current="page"]::after{bottom:8px}
/* The design's global a:hover{color:inherit} turned the CTA label white on white. Keep it dark and lift it like the desktop button. */
.sm-cta{transition:transform .3s,background .2s}
.sm-cta:hover,.sm-cta:focus-visible{color:#0e0e0e;background:#f2f2f2;transform:scale(1.02)}
.sm-cta:focus-visible{outline:2px solid #ffffff;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.sm-cta{transition:none}.sm-cta:hover{transform:none}}

/* MarkUp 2026-11-01: no star dots in the hero (sitewide). */
.hero-stars{display:none}
/* MarkUp 2026-11-01: condensed mobile menu – fits a typical iPhone viewport (~665px) without scrolling. */
.site-menu{gap:24px;padding:20px 24px 24px}
.sm-links a{padding:7px 0}
.sm-links a::before,.sm-links a[aria-current="page"]::after{bottom:5px}
.sm-cta{min-height:48px}
.sm-info{gap:12px 32px;padding-top:16px}
/* Client logo strip on phones (MarkUp 2026-11-01): smaller, tech-logo scale, in a neat 3 x 3 grid.
   Heights are ~0.55 x desktop and keep each logo's optical balance. !important beats the inline styles. */
@media (max-width:600px){
section[aria-label="Clients"]>div{padding:32px 24px!important}
section[aria-label="Clients"]>div>div{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;justify-items:center;gap:24px 16px!important}
section[aria-label="Clients"]>div>div>img{max-width:100%;width:auto!important}
section[aria-label="Clients"] img[alt="Newcastle Knights"]{height:34px!important}
section[aria-label="Clients"] img[alt="NSW Health Pathology"]{height:22px!important}
section[aria-label="Clients"] img[alt="nib Dental Care"]{height:22px!important}
section[aria-label="Clients"] img[alt="Reflections Holidays"]{height:20px!important}
section[aria-label="Clients"] img[alt="IKU"]{height:19px!important}
section[aria-label="Clients"] img[alt="Commercial Collective"]{height:19px!important}
section[aria-label="Clients"] img[alt="Pacific Smiles Dental"]{height:32px!important}
section[aria-label="Clients"] img[alt="NTP Talent"]{height:22px!important}
section[aria-label="Clients"] img[alt="Wests"]{height:24px!important}
}

/* MarkUp 2026-11-01: carousel arrows sit below the frame (design) even when a slide has no caption. */
.wh-slide figcaption{min-height:22px}
/* MarkUp 2026-11-01: ticker label – "Since 1 July …" on its own line on phones. */
@media (max-width:600px){.tk-lab .tk-sep{display:none}.tk-lab .tk-lab-2{display:block}}

/* MarkUp 2026-11-01: no content shift when the mobile menu opens – logo and close button sit exactly where the
   header logo and toggle are (32px top, as the header nav); gaps trimmed to keep the no-scroll fit. */
.site-menu{padding-top:32px;gap:20px}

/* MarkUp 2026-11-01: copyright on its own line on phones. */
@media (max-width:600px){.ft-legal .ft-copy{flex-basis:100%}}

/* MarkUp 2026-11-01: mobile menu active state uses the same 1px underline as hover. */
.sm-links a[aria-current="page"]::after{display:none}
.sm-links a[aria-current="page"]::before{transform:scaleX(1)}

/* ===== Gravity Forms on legacy form pages (Houston, survey, sample) – matches the Start a project form. ===== */
.astro-form{max-width:860px;margin:0 auto;padding:0 24px}
.astro-form .gform_wrapper{margin:0;font-size:16px;line-height:24px;color:#0e0e0e}
.astro-form .gform_wrapper .gform_title{margin:0 0 24px;font-size:clamp(28px,3vw,36px);line-height:1.25;font-weight:500}
.astro-form .gform_wrapper .gform_fields{row-gap:32px!important}
.astro-form .gform_wrapper .gfield_label,.astro-form .gform_wrapper legend.gfield_label,.astro-form .gform_wrapper .gform-field-label--type-label{font-size:15px!important;line-height:24px;font-weight:500!important;color:#0e0e0e;margin-bottom:10px!important}
.astro-form .gform_wrapper .gfield_required{color:#535353;font-weight:400}
.astro-form .gform_wrapper .gfield_required .gfield_required_text{font-size:13px;font-style:normal}
.astro-form .gform_wrapper .ginput_complex label,.astro-form .gform_wrapper .gform-field-label--type-sub{font-size:13px!important;line-height:20px;color:#535353;letter-spacing:0;padding-top:6px}
.astro-form .gform_wrapper input[type=text],.astro-form .gform_wrapper input[type=email],.astro-form .gform_wrapper input[type=tel],.astro-form .gform_wrapper input[type=url],.astro-form .gform_wrapper input[type=number],.astro-form .gform_wrapper select{box-sizing:border-box;width:100%;padding:13px 20px!important;font:inherit;font-size:16px!important;line-height:24px;color:#0e0e0e;background:#ffffff;border:1px solid #969696!important;border-radius:999px!important;outline:none;transition:border-color .2s,box-shadow .2s}
.astro-form .gform_wrapper textarea{box-sizing:border-box;width:100%;padding:16px 20px!important;font:inherit;font-size:16px!important;line-height:24px;border:1px solid #969696!important;border-radius:16px!important;outline:none;transition:border-color .2s,box-shadow .2s}
.astro-form .gform_wrapper input:hover,.astro-form .gform_wrapper textarea:hover,.astro-form .gform_wrapper select:hover{border-color:#535353!important}
.astro-form .gform_wrapper input:focus,.astro-form .gform_wrapper textarea:focus,.astro-form .gform_wrapper select:focus{border-color:#0e0e0e!important;box-shadow:0 0 0 1px #0e0e0e}
.astro-form .gform_wrapper input[type=radio],.astro-form .gform_wrapper input[type=checkbox]{width:18px;height:18px;margin:0 10px 0 0;accent-color:#0e0e0e;vertical-align:middle}
.astro-form .gform_wrapper .gchoice{display:flex;align-items:center;margin:0 0 8px!important}
.astro-form .gform_wrapper .gchoice label{font-size:16px;line-height:24px;max-width:none!important}
.astro-form .gform_wrapper .gfield_html{font-size:17px;line-height:27.2px}
.astro-form .gform_wrapper .gfield_html ul{padding-left:1.2em}
.astro-form .gform_wrapper .gsection{border-bottom:0!important;border-top:1px solid #0e0e0e!important;padding:28px 0 0!important;margin-top:24px}
.astro-form .gform_wrapper .gsection_title{margin:0!important;font-size:24px!important;line-height:33.6px;font-weight:500!important}
/* Survey add-on: likert grids */
.astro-form .gform_wrapper table.gsurvey-likert{border-collapse:collapse;border:0;font-size:14px;line-height:20px;table-layout:auto}
.astro-form .gform_wrapper table.gsurvey-likert th{padding:10px 6px;background-color:#f5f5f5;border:0;border-bottom:1px solid #e6e6e6;font-size:13px;font-weight:500;color:#535353}
.astro-form .gform_wrapper table.gsurvey-likert td{padding:10px 6px;border:0;border-bottom:1px solid #e6e6e6;background-color:#ffffff} /* the survey add-on draws its circles as a background-image – never use the background shorthand here */
.astro-form .gform_wrapper table.gsurvey-likert td.gsurvey-likert-row-label{text-align:left;font-weight:500;color:#0e0e0e;font-size:14px}
.astro-form .gform_wrapper table.gsurvey-likert td.gsurvey-likert-choice:hover{background-color:#f5f5f5}
@media (max-width:640px){.astro-form .gform_wrapper table.gsurvey-likert{font-size:12px}.astro-form .gform_wrapper table.gsurvey-likert td,.astro-form .gform_wrapper table.gsurvey-likert th{padding:8px 3px}}
/* Lists and file uploads */
.astro-form .gform_wrapper .gfield_list_group_item input{border-radius:999px!important}
.astro-form .gform_wrapper .ginput_container_fileupload input[type=file]{font:inherit;font-size:15px}
.astro-form .gform_wrapper .gform_fileupload_rules{font-size:13px;color:#535353}
/* Submit = the site's dark pill button */
.astro-form .gform_wrapper .gform_footer,.astro-form .gform_wrapper .gform_page_footer{margin-top:40px!important;padding:0!important}
.astro-form .gform_wrapper .gform_button,.astro-form .gform_wrapper .gform_footer input[type=submit],.astro-form .gform_wrapper .gform_next_button,.astro-form .gform_wrapper .gform_previous_button{display:inline-flex;align-items:center;justify-content:center;padding:15px 40px!important;font:inherit;font-size:16px!important;line-height:25.6px;font-weight:500;color:#ffffff!important;background:#0e0e0e!important;border:0!important;border-radius:999px!important;cursor:pointer;transition:transform .3s,background .2s}
.astro-form .gform_wrapper .gform_button:hover,.astro-form .gform_wrapper .gform_footer input[type=submit]:hover{background:#2a2a2a!important;transform:scale(1.03)}
.astro-form .gform_wrapper .gform_button:focus-visible{outline:2px solid #0e0e0e;outline-offset:3px}
/* Validation */
.astro-form .gform_wrapper .gform_validation_errors{border:1px solid #c62828!important;border-radius:16px!important;background:#fff5f5!important;box-shadow:none!important;padding:16px 20px!important}
.astro-form .gform_wrapper .gform_validation_errors h2{font-size:15px!important;color:#c62828!important;font-weight:500!important}
.astro-form .gform_wrapper .gfield_error input,.astro-form .gform_wrapper .gfield_error textarea,.astro-form .gform_wrapper .gfield_error select{border-color:#c62828!important}
.astro-form .gform_wrapper .validation_message{background:none!important;border:0!important;padding:6px 0 0!important;font-size:14px;color:#c62828!important}
@media (prefers-reduced-motion:reduce){.astro-form .gform_wrapper .gform_button{transition:none}.astro-form .gform_wrapper .gform_button:hover{transform:none}}
.astro-form .gform_wrapper table.gsurvey-likert{table-layout:fixed;width:100%}
.astro-form .gform_wrapper table.gsurvey-likert th:first-child,.astro-form .gform_wrapper table.gsurvey-likert td.gsurvey-likert-row-label{width:34%}
/* Phones: the survey add-on stacks the grid – the question label takes the full width. */
@media (max-width:640px){.astro-form .gform_wrapper table.gsurvey-likert{table-layout:auto}.astro-form .gform_wrapper table.gsurvey-likert th:first-child,.astro-form .gform_wrapper table.gsurvey-likert td.gsurvey-likert-row-label{width:auto;padding-top:20px;font-size:15px}}

/* Revenue ticker: (i) "How this works" button and tooltip (hover, focus or tap). */
.tk{position:relative}
.tk-info{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin:0 0 0 8px;padding:0;border:1px solid rgba(255,255,255,.45);border-radius:50%;background:none;color:rgba(255,255,255,.8);font:500 10px/1 Inter,sans-serif;text-transform:none;letter-spacing:0;vertical-align:1px;cursor:help;transition:border-color .2s,color .2s,background .2s}
.tk-info::before{content:"";position:absolute;inset:-14px}  /* 44px tap target */
.tk-info{position:relative}
.tk-info:hover,.tk-info:focus-visible,.tk.tip-open .tk-info{border-color:#ffffff;background:#ffffff;color:#0e0e0e;outline:none}
.tk-tip{position:absolute;z-index:20;left:50%;top:calc(100% + 10px);width:min(360px,calc(100vw - 48px));box-sizing:border-box;padding:14px 16px;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:#1c1c1c;box-shadow:0 12px 28px rgba(0,0,0,.4);color:rgba(255,255,255,.85);font-size:14px;line-height:21px;font-weight:400;letter-spacing:0;text-transform:none;text-align:left;opacity:0;visibility:hidden;transform:translate(-50%,-4px);transition:opacity .2s,transform .2s,visibility .2s;pointer-events:none}
.tk:has(.tk-info:hover) .tk-tip,.tk:has(.tk-info:focus-visible) .tk-tip,.tk.tip-open .tk-tip{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.tk-tip,.tk-info{transition:none}}
.tk.tip-dismissed:not(.tip-open) .tk-tip{opacity:0;visibility:hidden}
/* The hero entrance animations give the ticker and the reel their own stacking contexts; lift the ticker so its tooltip sits above the video. */
.tk{z-index:5}

/* Ticker tooltip close button – for tap users; appears only when the tooltip was opened by tap/click. */
.tk-tip-close{display:none;position:absolute;top:8px;right:8px;width:28px;height:28px;padding:0;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:none;color:#ffffff;cursor:pointer;transition:border-color .2s}
.tk-tip-close::before{content:"";position:absolute;inset:-8px}  /* 44px tap target */
.tk-tip-close:hover,.tk-tip-close:focus-visible{border-color:#ffffff;outline:none}
.tk.tip-open .tk-tip{pointer-events:auto;padding-right:48px}
.tk.tip-open .tk-tip-close{display:inline-flex}