/*
 * Site-wide overrides layered on top of the Webflow CSS (floodtidedigital.css stays untouched).
 * Loaded after it in src/fragments/head-shared.html.
 */

/* Short color aliases. Webflow's embed <style> blocks on every page use these (e.g. the
   .button:hover gradient), but only the homepage embed defined them, so elsewhere those rules
   resolved to nothing and icon buttons lost their background on hover. Same values as the homepage. */
:root {
  --ftd-navy: #0c4066; --ftd-navy-dark: #093351;
  --ftd-teal: #32a2af; --ftd-teal-light: #6fbdc7; --ftd-teal-dark: #28818c;
  --ftd-grey: #363636; --ftd-grey-dark: #2e2e2e; --ftd-grey-darker: #2b2b2b; --ftd-grey-darkest: #101010;
}

/* Menu: current page in brand teal (Webflow had it near-black, invisible on the dark menu). */
.nav-link-v4.w--current,
.nav-link-v4.w--current:focus { color: var(--_primitives---colors--ftd-teal); }

/* ------------------------------------------------------------------
   Menu canvas: two columns. Links + socials left, project wall right.
   Below 992px it collapses to the single link column.
   ------------------------------------------------------------------ */
.ftm-col { display: flex; flex-direction: column; height: 100%; text-align: left; }
/* Webflow centers open-menu links (text-align + auto margins); the new layout is left-aligned. */
.navbar16_menu-wrapper.ftm .navbar16_links-wrapper { align-items: flex-start; text-align: left; }
.navbar16_menu-wrapper.ftm .ftm-link { margin-left: 0; margin-right: 0; }
.navbar16_menu-wrapper.ftm .navbar16_bottom { justify-content: flex-start; }

/* Link hover: an arrow slides out to the right, text goes teal. No vertical hop. */
.ftm-link { display: inline-flex; align-items: center; gap: .35em; }
.ftm-link:hover, .ftm-link:active { transform: none; }
.ftm-arrow { display: inline-flex; width: .6em; height: .6em; flex: none;
  opacity: 0; transform: translateX(-.4em); transition: opacity .25s ease, transform .3s ease; }
.ftm-link:hover .ftm-arrow, .ftm-link:focus-visible .ftm-arrow { opacity: 1; transform: translateX(0); }
.ftm-link.w--current .ftm-arrow { opacity: 1; transform: translateX(0); }

.ftm-art { display: none; }

@media screen and (min-width: 992px) {
  .navbar16_menu { padding-left: 0; padding-right: 0; }
  .navbar16_menu-wrapper.ftm {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding-top: 0; height: 100%;
  }
  .ftm-col { padding: 7rem 5% 0 calc(5vw + .5rem); }
  .ftm-art { display: block; position: relative; height: 100%; overflow: hidden; background-color: #101010; }
}

/* The wall: three tilted columns drifting slowly in opposite directions. */
.ftm-wall {
  position: absolute; top: -30%; left: -20%; width: 140%; height: 160%;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem;
  transform: rotate(-12deg);
}
.ftm-wall-col { display: flex; flex-direction: column; gap: 1.25rem; animation: ftm-drift 70s linear infinite alternate; }
.ftm-wall-col--2 { animation-direction: alternate-reverse; margin-top: -6rem; }
.ftm-wall-col--3 { margin-top: -12rem; }
.ftm-shot { position: relative; display: block; width: 100%; padding-bottom: 62.5%; border-radius: 10px;
  overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); background-color: #2b2b2b; }
.ftm-shot-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* Real overlay element (not a pseudo-element): darkens the top so the close button reads,
   and the left edge so the wall settles into the link column. */
.ftm-scrim { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
  background-image: linear-gradient(180deg, rgba(16,16,16,.85) 0%, rgba(16,16,16,0) 22%),
                    linear-gradient(90deg, rgba(21,21,21,1) 0%, rgba(21,21,21,0) 18%); }
@keyframes ftm-drift { from { transform: translateY(0); } to { transform: translateY(-25%); } }
@media screen and (max-width: 991px) {
  .navbar16_menu-wrapper.ftm .navbar16_links-wrapper { font-size: 2.25rem; }
}
@media (prefers-reduced-motion: reduce) { .ftm-wall-col { animation: none; } .ftm-arrow { transition: none; } }

/* ------------------------------------------------------------------
   Client logo marquee (homepage, light section under the case study).
   White logo SVGs are rendered as a dark monochrome to sit on #f2f2f2.
   ------------------------------------------------------------------ */
.lgm { max-width: 64rem; margin: 4rem auto 0; padding-top: 2.5rem; border-top: 1px solid rgba(16, 16, 16, .1); }
.lgm-label { margin-bottom: 1.75rem; text-align: center; color: #727272;
  font-family: "Barlow Condensed", sans-serif; font-size: .9rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.lgm-viewport { overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%); }
.lgm-track { display: flex; width: max-content; animation: lgm-scroll 40s linear infinite; }
.lgm:hover .lgm-track, .lgm:focus-within .lgm-track { animation-play-state: paused; }
.lgm-list { display: flex; align-items: center; gap: 4.5rem; margin: 0; padding: 0 2.25rem; list-style: none; }
.lgm-item { display: flex; flex: none; align-items: center; height: 3rem; }
.lgm-link { display: flex; align-items: center; height: 100%; }
.lgm-img { display: block; width: auto; height: 2.1rem; max-width: 10rem; object-fit: contain;
  filter: brightness(0); opacity: .45; transition: opacity .3s ease; }
.lgm-img--sm { height: 1.6rem; }
.lgm-img--lg { height: 2.6rem; }
.lgm-img--tall { height: 3rem; }
.lgm-img--badge { height: 2.9rem; }
.lgm-img--native { filter: grayscale(1) contrast(1.1); opacity: .5; }
/* Hover on the item (not just links) so logos without a project page react the same way. */
.lgm-item:hover .lgm-img, .lgm-link:focus-visible .lgm-img { opacity: .9; }
@keyframes lgm-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media screen and (max-width: 767px) {
  .lgm { margin-top: 3rem; }
  .lgm-list { gap: 3rem; padding: 0 1.5rem; }
  .lgm-img { height: 1.6rem; max-width: 8rem; }
  .lgm-img--sm { height: 1.25rem; }
  .lgm-img--lg { height: 2rem; }
  .lgm-img--tall { height: 2.4rem; }
  .lgm-img--badge { height: 2.3rem; }
  .lgm-label { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lgm-track { animation: none; width: auto; }
  .lgm-viewport { -webkit-mask-image: none; mask-image: none; }
  .lgm-list { flex-wrap: wrap; justify-content: center; row-gap: 1.5rem; }
  .lgm-list[aria-hidden="true"] { display: none; }
}
@media (prefers-reduced-motion: reduce) { .fhp-logo-item[aria-hidden="true"] { display: none; } }

/* ------------------------------------------------------------------
   Uniform project imagery. Featured images arrive in every shape
   (portrait product shots, wide screenshots), so every frame sets the
   ratio and the image fills it. Ratios: work list 3:2, case-study hero
   16:9, next-project thumb 3:2, LP cards 25:16, gallery 16:10.
   ------------------------------------------------------------------ */
.wk-media, .pj-hero-media, .pj-image-wrapper { position: relative; overflow: hidden; }
.wk-media { aspect-ratio: 3 / 2; }
.pj-hero-media { aspect-ratio: 16 / 9; }
.pj-image-wrapper { aspect-ratio: 3 / 2; flex: none; border-radius: var(--_ui-styles---radius--medium); }
.wk-image, .pj-hero-image, .pj-next-image, .fhp-work-img {
  position: absolute; top: 0; left: 0; display: block;
  width: 100%; height: 100%; max-width: none; object-fit: cover;
}
.wk-image, .pj-hero-image, .pj-next-image { object-position: center; }
.fhp-work-img { object-position: top center; }
@media screen and (max-width: 767px) {
  .pj-hero-media { aspect-ratio: 4 / 3; }
  .pj-image-wrapper { width: 8rem; }
}

/* ------------------------------------------------------------------
   Icon buttons: the Flood Tide permit submark replaces the arrow/rocket.
   Hover: the permit noses down ~23deg like a tailing permit, then gives
   a quick tail flick. The hover circle fills brand teal on every button. Webflow's IX rotation on
   the icon is neutralized so only this motion plays.
   ------------------------------------------------------------------ */
.button.is-icon { padding-top: .375rem; padding-bottom: .375rem; }
.button-icon-wrap { width: 2.25rem; height: 2.25rem; padding: 0; }
.button-icon-embed, .button-icon-embed.nav {
  display: block; width: 1.8rem; height: 1.1rem; overflow: visible;
  /* Optical centering: the permit's mass sits low (fins up, body down), so lift it slightly. */
  transform: translateY(-1.75px) !important;
}
/* Every icon button's hover circle fills brand teal. */
.button-dot, .button-dot.nav { background-color: var(--_primitives---colors--ftd-teal); }
.ftd-mark {
  display: block; width: 100%; height: 100%; object-fit: contain;
  transform-origin: 58% 55%;
  /* The artwork itself slopes nose-down; tip it back so it rests level. */
  rotate: -10deg;
  transition: rotate .5s cubic-bezier(.34, 1.4, .64, 1);
}
.button.is-icon:hover .ftd-mark,
.button.is-icon:focus-visible .ftd-mark { rotate: 23deg; animation: ftd-tail .55s ease-in-out .45s 1; }
/* Tail flick: a quick wag layered on top of the 23deg tilt. */
@keyframes ftd-tail {
  0% { transform: rotate(0deg); } 25% { transform: rotate(-8deg); }
  55% { transform: rotate(6deg); } 80% { transform: rotate(-3deg); } 100% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ftd-mark { transition: none; }
  .button.is-icon:hover .ftd-mark, .button.is-icon:focus-visible .ftd-mark { rotate: -10deg; animation: none; }
}

/* ------------------------------------------------------------------
   Site-wide entrance (src/scripts/reveal.ts): Webflow's "Slide In bottom"
   preset, as on the homepage FAQ. `translate` (not `transform`) so it stacks
   with any transform an element already has.
   ------------------------------------------------------------------ */
.ftd-reveal { transition: opacity 1s cubic-bezier(.165, .84, .44, 1), translate 1s cubic-bezier(.165, .84, .44, 1); }
/* Only the start state is set, so a revealed element lands on its own opacity (e.g. a dimmed or inactive item). */
.ftd-reveal:not(.is-revealed) { opacity: 0; translate: 0 100px; }


/* ------------------------------------------------------------------
   Glowing CTA (nav + footer "Get A Quote"). Webflow only embedded this
   <style> on some pages (styles---glowing-button), so the glow and the
   turning border were missing on /about, /process, /our-work, /contact and
   /get-a-new-website. Same rules, loaded everywhere. Teal is brand #32a2af.
   ------------------------------------------------------------------ */
.glowing-wrapper-button{ background-color:#1c202e; border:2px solid var(--_primitives---colors--ftd-teal); border-radius:999px; color:#fff; position:relative; z-index:1; }
.glowing-wrapper-button:after{ background:radial-gradient(85% 120% at 50% 120%, rgba(50,162,175,.4) 0%, rgba(50,162,175,0) 100%); border-radius:999px; content:""; height:calc(100% + 4px); left:-2px; opacity:0; position:absolute; top:-2px; transition:1s all; width:calc(100% + 4px); }
.glowing-wrapper-button:hover:after{ opacity:.8; }
.glowing-wrapper-active .glowing-wrapper-animations,
.glowing-wrapper-active .glowing-wrapper-borders-masker{ opacity:1; }
.glowing-wrapper-animations:before,
.glowing-wrapper-borders:before{ content:""; float:left; padding-top:100%; }
.glowing-wrapper-animations:after,
.glowing-wrapper-borders:after{ clear:both; content:""; display:block; }
.glowing-wrapper-animations{ pointer-events:none; }
.glowing-wrapper-animations *{ height:100%; left:0; position:absolute; top:0; width:100%; }
.glowing-wrapper-borders,
.glowing-wrapper-glow,
.glowing-wrapper-mask{ animation:borderTurn 2.5s infinite linear; background-image:conic-gradient(from 0 at 50% 50%, rgba(50,162,175,.5) 0deg, rgba(50,162,175,0) 60deg, rgba(50,162,175,0) 310deg, rgba(50,162,175,.5) 360deg); background-position:center center; background-repeat:no-repeat; background-size:cover; }
.glowing-wrapper-mask-wrapper{ -webkit-mask:url("data:image/svg+xml,url('data:image/svg+xml,%253Csvg width='28' height='24' viewBox='0 0 28 24' fill='none' xmlns='http://www.w3.org/2000/svg'%253E%253Crect width='28' height='24' fill='black'/%253E%253C/svg%253E%250A');"); mask:url("data:image/svg+xml,url('data:image/svg+xml,%253Csvg width='28' height='24' viewBox='0 0 28 24' fill='none' xmlns='http://www.w3.org/2000/svg'%253E%253Crect width='28' height='24' fill='black'/%253E%253C/svg%253E%250A');"); mask-repeat:repeat; -webkit-mask-size:auto; mask-size:auto; }
.glowing-wrapper-borders{ animation-name:borderTurnWithTranslate; }
.glowing-wrapper-borders-masker{ content:""; inset:0; -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
@keyframes borderTurn{ 0%{ transform:rotate(0); } 100%{ transform:rotate(360deg); } }
@keyframes borderTurnWithTranslate{ 0%{ transform:translate(-50%,-50%) rotate(0); } 100%{ transform:translate(-50%,-50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .glowing-wrapper-borders, .glowing-wrapper-glow, .glowing-wrapper-mask{ animation:none; }
}

/* ------------------------------------------------------------------
   Homepage hero CTAs on phones: keep the pair on one row (stacking cost too much
   of the first screen). Labels never wrap; below ~360px the padding tightens so
   "Our Work" + "Pricing" still fit side by side.
   ------------------------------------------------------------------ */
.hero-ctas .button { white-space: nowrap; }
@media screen and (max-width: 374px) {
  .hero-ctas { gap: .5rem; }
  .hero-ctas .button.is-icon { padding-left: .875rem; padding-right: .5rem; column-gap: .5rem; }
  .hero-ctas .button.ghost { padding-left: 1.125rem; padding-right: 1.125rem; }
}

/* Footer legal links: one unbreakable row was 339px wide and pushed 320px phones sideways. Let it wrap. */
.ft-legal { flex-wrap: wrap; row-gap: .5rem; }

/* Menu canvas CTA: the header's "Get A Quote" is hidden below 480px, so the open menu carries it
   instead, between the links and the socials. */
.ftm-cta { display: none; }
@media screen and (max-width: 479px) {
  .ftm-cta { display: block; padding-bottom: 1.5rem; }
}

/* ------------------------------------------------------------------
   Icon button hover, formerly Webflow IX2 ("Button Hover In/Out v1 2").
   In: 400ms, text rolls up (out-cubic) and the teal dot scales in (linear).
   Out: 500ms linear back. The second label waits one line below, clipped.
   ------------------------------------------------------------------ */
.button.is-icon .button-text { transition: transform .5s linear; }
.button.is-icon .button-text.two { transform: translateY(100%); }
.button.is-icon .button-dot { transform: scale(0); transition: transform .5s linear; }
.button.is-icon:hover .button-text { transform: translateY(-100%); transition: transform .4s cubic-bezier(.215,.61,.355,1); }
.button.is-icon:hover .button-text.two { transform: translateY(0); }
.button.is-icon:hover .button-dot { transform: scale(1); transition-duration: .4s; }
/* Form submit buttons are real <button>s with the same look: undo the browser's button styles. */
.button.is-submit { border: 0; font: inherit; font-weight: 600; line-height: inherit; cursor: pointer; }
.button.is-submit:disabled { cursor: progress; opacity: .7; }

/* Resting states src/scripts/interactions.ts animates from, set here so nothing flashes before it runs. */
.faq4_answer { height: 0; }
@media screen and (max-width: 991px) { [data-collapsible-toc] .legal2-content_link-content { height: 0; } }
/* Same-page anchor targets take focus after the scroll without drawing a focus ring. */
.ftd-focus-target:focus { outline: none; }
/* Webflow's engine left these on every element it animated; they change how Chrome rasterises the
   rotated/scaled layers (e.g. the button icon's angle), so keep them for identical rendering. */
.button.is-icon .button-text, .button.is-icon .button-dot, .button-icon-embed, .faq4_icon-wrappper,
.legal2-content_accordion-icon, .menu-icon4_line-middle, .menu-icon4_line-middle-base, .faq4_list { transform-style: preserve-3d; }
.navbar16_component { will-change: background; }
.navbar16_logo, .cursor { will-change: transform; transform-style: preserve-3d; }