/* ============================================================
   BROWSER house style for the landing pages.

   The landing design came from a separate site, so this sheet brings it
   into line with browser.ae: the same two typefaces, the three brand
   colours, square corners everywhere, and the same buttons — black, with
   the arrow that cycles on hover.

   It is loaded after the landing design's own stylesheet, so what is
   written here wins.
   ============================================================ */

/* ------------------------------------------------------------------
   1. Type and colour
   The landing sheet names the same two variables the site does, so they
   are set back to the house faces and the house black.
   ------------------------------------------------------------------ */
:root{
  --font-sans:    "Inter Tight", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-heading: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif:   var(--font-heading);
  --grey:         #000000;

  --color-text:       #000000;
  --color-black:      #000000;
  --color-text-muted: rgba(0,0,0,.66);
  --color-border:     rgba(0,0,0,.14);
  --color-accent:     #1C2473;
}

/* ------------------------------------------------------------------
   2. No round edges — on anything.
   ------------------------------------------------------------------ */
.browser-landing *,
.browser-landing *::before,
.browser-landing *::after{ border-radius:0 !important; }

/* ------------------------------------------------------------------
   3. Room for the site header, which is solid white and always there.
   ------------------------------------------------------------------ */

.browser-landing .offer-section{
  min-height:calc(100vh - var(--header-h));
  padding-top:clamp(90px,10vw,140px);
  border-top:0;
}

/* A menu link lands its section just under the fixed header. */
.browser-landing .main-wrapper section,
.browser-landing .main-wrapper .site-footer{ scroll-margin-top:var(--header-h); }

/* ------------------------------------------------------------------
   4. Buttons — the house pill: square, black, arrow on the right.
   The arrow itself cycles on hover, which the site stylesheet draws.
   ------------------------------------------------------------------ */
.browser-landing .form-submit-btn,
.browser-landing .whatsapp-chat-button,
.browser-landing .pkg-btn-inquire,
.browser-landing .cta-button,
.browser-landing .work-btn{
  font-family:var(--font-sans);
  font-size:15.5px;
  font-weight:500;
  letter-spacing:-.01em;
  text-transform:none;
  background-color:var(--ink) !important;
  color:var(--paper) !important;
  border:1px solid var(--ink);
  box-shadow:none !important;
  transition:background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}

/* Hovering turns a button the house red. */
.browser-landing .form-submit-btn:hover,
.browser-landing .whatsapp-chat-button:hover,
.browser-landing .pkg-btn-inquire:hover,
.browser-landing .cta-button:hover,
.browser-landing .work-btn:hover,
.browser-landing .pill--solid:hover,
.browser-landing .pill--outline:hover{
  background-color:var(--accent-deep) !important;
  color:#ffffff !important;
  border-color:var(--accent-deep) !important;
  transform:none !important;
}
.browser-landing .form-submit-btn:hover .pill-arrow,
.browser-landing .whatsapp-chat-button:hover .pill-arrow,
.browser-landing .pkg-btn-inquire:hover .pill-arrow,
.browser-landing .cta-button:hover .pill-arrow,
.browser-landing .pill--solid:hover .pill-arrow,
.browser-landing .pill--outline:hover .pill-arrow{
  background:#ffffff !important;
  color:var(--accent-deep) !important;
}

/* The arrow box that sits inside the button. */
.browser-landing .pill-arrow{
  background:var(--paper);
  color:var(--ink);
  transition:background-color .4s var(--ease), color .4s var(--ease);
}
.browser-landing .pill:hover .pill-arrow{ background:var(--ink); color:var(--paper); }

/* Sending an enquiry: the button runs the width of the form. */
.browser-landing .consult-form .form-submit-btn,
.browser-landing .package-consult-form .form-submit-btn{
  display:flex;
  width:100%;
  height:auto;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  padding:7px 7px 7px 28px;
  margin-top:.4rem;
}

/* The packages carry their colours with !important, so these do too. */

/* The cards sit flat, with no outline and no shadow. */
.browser-landing .package-card-dark,
.browser-landing .package-card-light{
  border:0 !important;
  box-shadow:none !important;
}

/* Enquire sits at the same height as the call and WhatsApp squares beside
   it: the header's small button, 38px arrow inside a 50px bar. */
.browser-landing .pkg-btn-inquire{
  height:50px;
  padding:5px 5px 5px 22px !important;
  gap:12px;
  font-size:13.5px;
}
.browser-landing .pkg-btn-inquire .pill-arrow{
  width:38px;
  height:38px;
  flex:none;
}
.browser-landing .package-btn-group{ align-items:center; }

/* On the dark packages the button is white, as it is on dark sections
   across the site. */
.browser-landing .packages-tier-dark .pkg-btn-inquire{
  background-color:var(--paper) !important;
  color:var(--ink) !important;
  border-color:var(--paper) !important;
  box-shadow:none !important;
}
.browser-landing .packages-tier-dark .pkg-btn-inquire:hover{
  background-color:var(--accent-deep) !important;
  color:#ffffff !important;
  border-color:var(--accent-deep) !important;
}
.browser-landing .packages-tier-dark .pkg-btn-inquire:hover .pill-arrow{
  background:#ffffff !important;
  color:var(--accent-deep) !important;
}
.browser-landing .packages-tier-dark .pill-arrow{ background:var(--ink); color:var(--paper); }
.browser-landing .packages-tier-dark .pill:hover .pill-arrow{ background:#ffffff; color:var(--ink); }

/* Call and WhatsApp: the same black squares the header uses, red on hover. */
.browser-landing .pkg-icon-btn,
.browser-landing .footer-icon-btn,
.browser-landing .packages-tier-dark .pkg-icon-btn.call-btn,
.browser-landing .packages-tier-dark .pkg-icon-btn.whatsapp-btn,
.browser-landing .packages-tier-light .pkg-icon-btn.call-btn,
.browser-landing .packages-tier-light .pkg-icon-btn.whatsapp-btn,
.browser-landing .footer-icon-btn.call-btn,
.browser-landing .footer-icon-btn.whatsapp-btn{
  width:50px;
  height:50px;
  background-color:var(--ink) !important;
  color:#ffffff !important;
  border:1px solid var(--ink);
  box-shadow:none !important;
  transition:background-color .3s var(--ease), color .3s var(--ease);
}
.browser-landing .pkg-icon-btn svg,
.browser-landing .footer-icon-btn svg{ color:#ffffff !important; }

.browser-landing .pkg-icon-btn:hover,
.browser-landing .footer-icon-btn:hover,
.browser-landing .packages-tier-dark .pkg-icon-btn.call-btn:hover,
.browser-landing .packages-tier-dark .pkg-icon-btn.whatsapp-btn:hover,
.browser-landing .packages-tier-light .pkg-icon-btn.call-btn:hover,
.browser-landing .packages-tier-light .pkg-icon-btn.whatsapp-btn:hover,
.browser-landing .footer-icon-btn.call-btn:hover,
.browser-landing .footer-icon-btn.whatsapp-btn:hover{
  background-color:var(--accent-deep) !important;
  border-color:var(--accent-deep);
  color:#ffffff !important;
  transform:none !important;
}

/* On the dark packages they flip: white square, dark mark. */
.browser-landing .packages-tier-dark .pkg-icon-btn.call-btn,
.browser-landing .packages-tier-dark .pkg-icon-btn.whatsapp-btn{
  background-color:var(--paper) !important;
  border-color:var(--paper);
}
.browser-landing .packages-tier-dark .pkg-icon-btn svg{ color:var(--ink) !important; }
.browser-landing .packages-tier-dark .pkg-icon-btn:hover{
  background-color:transparent !important;
  border-color:#ffffff;
}
.browser-landing .packages-tier-dark .pkg-icon-btn:hover svg{ color:#ffffff !important; }

/* The WhatsApp strip under the services. */
.browser-landing .whatsapp-cta-block{ background:var(--ink); border:0; }
.browser-landing .whatsapp-cta-block h4,
.browser-landing .whatsapp-cta-block p{ color:#ffffff; }
.browser-landing .whatsapp-icon-wrapper{
  background-color:transparent;
  color:#ffffff;
  box-shadow:none;
  border:1px solid rgba(255,255,255,.4);
}
.browser-landing .whatsapp-chat-button{
  display:inline-flex;
  flex-direction:row;
  align-items:center;
  gap:18px;
  padding:7px 7px 7px 28px;
  background-color:var(--paper) !important;
  color:var(--ink) !important;
  border-color:var(--paper);
}
.browser-landing .whatsapp-chat-button:hover{
  background-color:var(--accent-deep) !important;
  color:#ffffff !important;
  border-color:var(--accent-deep);
}
.browser-landing .whatsapp-chat-button .pill-arrow{ background:var(--ink); color:var(--paper); }

/* The two buttons that appear over a piece of work. */
.browser-landing .work-btn{
  height:46px;
  padding:0 20px;
  gap:10px;
  font-size:13.5px;
}
.browser-landing .work-btn.btn-live{
  background-color:var(--paper) !important;
  color:var(--ink) !important;
  border-color:var(--paper);
}
.browser-landing .work-btn.btn-live:hover{
  background-color:var(--accent-deep) !important;
  color:#ffffff !important;
  border-color:var(--accent-deep);
}
.browser-landing .work-btn.btn-zoom:hover{
  background-color:var(--accent-deep) !important;
  color:#ffffff !important;
  border-color:var(--accent-deep);
}

/* ------------------------------------------------------------------
   5. Smaller pieces that carried the other site's colours.
   ------------------------------------------------------------------ */

/* Headings sit in the house black, as they do across the site. */
.browser-landing .form-title,
.browser-landing .package-form-title{ color:var(--ink); }

/* The ticks in the service lists, in the house black. */
.browser-landing .bullet-icon{ color:var(--ink); }

/* Tick boxes on the enquiry form. */
.browser-landing .checkbox-container input:checked ~ .checkbox-checkmark{
  background:var(--ink);
  border-color:var(--ink);
}

/* the open tab's underline is set with the tabs further down */

/* The questions: flat cards, and a plain plus sign with nothing behind it. */
.browser-landing .faq-card,
.browser-landing .faq-card:hover,
.browser-landing .faq-card.active{
  box-shadow:none !important;
  transform:none !important;
}
.browser-landing .faq-card:hover{ border-color:var(--ink); }

.browser-landing .faq-icon{
  width:36px;
  height:36px;
  background:none !important;
  color:var(--ink);
}
.browser-landing .faq-icon-svg{ width:24px; height:24px; }
.browser-landing .faq-card.active .faq-icon{ background:none !important; color:var(--accent-deep); }
.browser-landing .faq-toggle:hover .faq-icon{ color:var(--accent-deep); }

/* The rest of the website, listed in the footer with the site's arrow. */
.browser-landing .areas-served-list{ display:flex; flex-direction:column; gap:10px; }
.browser-landing .areas-served-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  width:fit-content;
  text-decoration:none;
  color:var(--ink);
  transition:color .3s var(--ease);
}
.browser-landing .areas-served-link svg{
  width:15px;
  height:15px;
  flex:none;
  transition:transform .3s var(--ease);
}
.browser-landing .areas-served-link:hover{ color:var(--accent-deep); }
.browser-landing .areas-served-link:hover svg{ transform:translateX(4px); }

/* Pictures sit square, with no shadow of their own. */
.browser-landing img{ box-shadow:none; }

/* The footer keeps its own look; only the parts the site stylesheet
   would otherwise reach are put back. */
.browser-landing .site-footer{
  position:relative;
  background-color:#FEFAF6;
  color:#000000;
  padding:80px 50px 50px 50px;
  margin:0;
}

/* ------------------------------------------------------------------
   6. Highlighted words and industry tags (web design page).
   The design coloured them orange, teal, yellow, peach and pink; here
   they take the house colours in turn, and sit flat.
   ------------------------------------------------------------------ */
.browser-landing .text-pill{ box-shadow:none; }
.browser-landing .tp-red{ background-color:var(--accent-deep); color:#ffffff; }
.browser-landing .tp-blue,
.browser-landing .tp-teal{ background-color:#1C2473; color:#ffffff; }
.browser-landing .tp-orange{ background-color:var(--ink); color:#ffffff; }

.browser-landing .industry-pill{ box-shadow:none !important; border:1px solid transparent; }
.browser-landing .pill-orange,
.browser-landing .pill-teal{ background-color:var(--accent-deep); color:#ffffff; }
.browser-landing .pill-blue,
.browser-landing .pill-pink{ background-color:#1C2473; color:#ffffff; }
.browser-landing .pill-brightblue,
.browser-landing .pill-lightblue{ background-color:var(--ink); color:#ffffff; }
.browser-landing .pill-yellow,
.browser-landing .pill-peach{ background-color:#ffffff; color:var(--ink); border-color:var(--ink); }

/* The label, name and red rule under each project line up with the left
   edge of its picture. */
.browser-landing .work-text-block{ padding-left:0; padding-right:0; }

/* ------------------------------------------------------------------
   7. Phones. These pages are where Google and Meta adverts land, so
   everything a thumb touches is at least 44px, no text is smaller than
   12px, the form fields do not make iPhones zoom in, and the opening
   photo is sized for the screen it is on.
   ------------------------------------------------------------------ */
@media (max-width: 767px){

  /* A phone only ever shows the middle of the wide desktop photo, so it
     gets a narrower copy at a third of the weight. */
  .landing-design-real-estate .offer-section{
    background-image:linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)), url('images/property-office-hero-section-mobile.jpg');
  }
  .landing-design-web-design .offer-section{
    background-image:linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)), url('web-design/images/browser-office-hero-section-mobile.jpg');
  }

  /* Form fields at 16px: anything smaller and iPhones zoom the page in
     as soon as a field is tapped. */
  .browser-landing .form-input,
  .browser-landing .form-textarea{ font-size:16px !important; }

  /* Each tick box is a full-width row, 44px tall, all of it tappable. */
  .browser-landing .services-grid{ row-gap:0; }
  .browser-landing .services-grid .checkbox-container{ min-height:44px; align-items:center; }

  /* The mouse icon is a hint for desktops; on a phone people just swipe. */
  .browser-landing .scroll-down-indicator{ display:none; }

  .browser-landing .mobile-collapse-toggle{ min-height:44px; }

  /* Links inside a paragraph get a taller touch area without moving the
     words around them. */
  .browser-landing .seo-details-text a{ padding:12px 0; }

  /* Footer: readable headings and comfortable targets. */
  .browser-landing .footer-caption{ font-size:12px; }
  .browser-landing .footer-contact-link{ display:inline-flex; align-items:center; min-height:44px; }
  .browser-landing .footer-horizontal-links-center a{ display:inline-block; padding:13px 6px; }
  .browser-landing .areas-served-list{ gap:0; }
  .browser-landing .areas-served-link{ min-height:44px; }
  .browser-landing .social-icon-link{ width:44px; height:44px; }

  /* The small label over each piece of work. */
  .browser-landing .work-tag{ font-size:12.5px; }
}

/* ------------------------------------------------------------------
   Drawn marks in place of illustrations and pictures
   The "why us" points and the tab panels can show a drawn mark on blue
   instead of their coloured illustration or screenshot — the same mark,
   blue and fine line as the service cards on the main site, which the
   main stylesheet already draws (.svc-mark). Here it only needs a frame.
   ------------------------------------------------------------------ */

/* why us: the blue runs edge to edge across the top of each card */
.browser-landing .difference-card:has(.difference-image-wrap--mark){
  overflow:hidden;
  padding-top:0;
}
.browser-landing .difference-image-wrap--mark{
  position:relative;
  width:calc(100% + 4rem);
  max-width:none;
  height:auto;
  aspect-ratio:4 / 3;
  margin:0 -2rem 2rem;
  background:#1C2473;
  overflow:hidden;
}
.browser-landing .difference-card:hover .svc-mark-ghost{ transform:rotate(-3deg) scale(1.04); opacity:.26; }

@media (max-width:600px){
  .browser-landing .difference-image-wrap--mark{ width:calc(100% + 3rem); margin:0 -1.5rem 1.75rem; }
}

/* tabs: no box — the section is already blue, so the mark stands straight
   on it, and the faint copy behind fades out towards the edges instead of
   stopping at the line of a frame */
.browser-landing .tab-img-wrapper--mark{
  aspect-ratio:4 / 3;
  background:none;
  border:0;
  box-shadow:none;
  border-radius:0;
}
.browser-landing .tab-img-wrapper--mark .svc-mark{
  -webkit-mask-image:radial-gradient(closest-side, #000 55%, transparent);
          mask-image:radial-gradient(closest-side, #000 55%, transparent);
}
.browser-landing .tab-img-wrapper--mark .svc-mark-icon{ --mark-w:clamp(110px,38%,190px); width:var(--mark-w); }
.browser-landing .tab-img-wrapper--mark:hover .svc-mark-ghost{ transform:rotate(-3deg) scale(1.04); opacity:.26; }

/* the tab names: larger, each with a small copy of its panel's mark, and
   the red line running in under the one that is open */
.browser-landing .tabs-nav-scroll{ gap:clamp(22px,2.6vw,44px); }
.browser-landing .tab-btn{
  gap:10px;
  padding:14px 0 18px;
  font-size:clamp(15px,1.12vw,18px);
  font-weight:500;
  letter-spacing:-.005em;
  color:rgba(255,255,255,.62);
}
.browser-landing .tab-btn-mark{
  flex:none;
  display:block;
  width:22px;
  height:22px;
  opacity:.7;
  transition:opacity .3s ease, transform .4s cubic-bezier(.16,1,.3,1);
}
.browser-landing .tab-btn-mark svg{
  display:block;
  width:100%;
  height:100%;
  stroke-width:1.6;       /* lands at about 1.5px at this size */
}
.browser-landing .tab-btn:hover,
.browser-landing .tab-btn.active{ color:#fff; }
.browser-landing .tab-btn:hover .tab-btn-mark,
.browser-landing .tab-btn.active .tab-btn-mark{ opacity:1; }
.browser-landing .tab-btn:hover .tab-btn-mark{ transform:translateY(-2px); }
.browser-landing .tab-btn::after{ height:3px; background:#F00030; }
.browser-landing .tab-btn:focus-visible{ outline:1px solid rgba(255,255,255,.6); outline-offset:4px; }

/* on phones and tablets the tabs section had no side margin at all, so its
   words ran to the very edge of the screen; give it the same 24px the
   sections around it have */
@media (max-width:992px){
  .browser-landing .agency-tabs-section .container{ padding-left:24px; padding-right:24px; }
}

@media (prefers-reduced-motion:reduce){
  .browser-landing .difference-card:hover .svc-mark-ghost,
  .browser-landing .tab-img-wrapper--mark:hover .svc-mark-ghost{ transform:rotate(-9deg); opacity:.18; }
}

/* sub-headings inside the written columns: level 3 under the column's own
   heading (they were level 4, which skipped a level), kept at the size
   they had */
.browser-landing .seo-details-col h3{ font-size:1rem; font-weight:600; margin:1.2em 0 .5em; }

/* ------------------------------------------------------------------
   The opening screen on brand blue, with drawn marks floating behind
   the words, in place of the office photograph (lp-hero "Behind the
   words"). !important because the photograph is set in three places,
   one of them only on phones.
   ------------------------------------------------------------------ */
.browser-landing .offer-section--scene{
  background:radial-gradient(120% 90% at 85% 10%, #2B3590 0%, #1C2473 45%, #141A5C 100%) !important;
  isolation:isolate;
}
.browser-landing .offer-section--scene .offer-scene{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.browser-landing .offer-section--scene .offer-scene svg{
  display:block;
  width:100%;
  height:100%;
}
.browser-landing .offer-section--scene .offer-container,
.browser-landing .offer-section--scene .scroll-down-indicator{
  position:relative;
  z-index:1;
}
/* the form was see-through for the photograph; on the blue it is plain white */
.browser-landing .offer-section--scene .form-card{
  background:#fff !important;
  -webkit-backdrop-filter:none;
          backdrop-filter:none;
}
/* a phone's opening screen is tall and narrow: stretched to fill it, the
   marks would come out huge and sit behind the words. There the drawing
   keeps its own proportions, shown at about half size behind the top */
@media (max-width:767px){
  .browser-landing .offer-section--scene .offer-scene svg{
    position:absolute;
    left:50%;
    top:0;
    width:200%;
    height:auto;
    transform:translateX(-50%);
  }
}

/* --- the services sliding past in big outlined words: three rows, the
   middle one the other way, each run written twice so the loop is
   seamless. Faint enough to read the heading over, large enough to read */
.browser-landing .offer-words{
  position:absolute;
  inset:0;
  z-index:0;
  display:flex;
  flex-direction:column;
  justify-content:space-evenly;
  overflow:hidden;
  pointer-events:none;
  user-select:none;
}
.browser-landing .offer-words-row{
  display:flex;
  width:max-content;
  white-space:nowrap;
  animation:offer-words 150s linear infinite;   /* slow: a drift, not a ticker */
}
.browser-landing .offer-words-row--1{ animation-direction:reverse; animation-duration:180s; }
.browser-landing .offer-words-row--2{ animation-duration:200s; }
.browser-landing .offer-words-run{ display:flex; align-items:center; }
.browser-landing .offer-word{
  padding:0 .35em;
  font-family:var(--font-heading);
  font-size:clamp(64px,8.6vw,150px);
  font-weight:700;
  line-height:1;
  letter-spacing:-.02em;
  color:rgba(255,255,255,.075);   /* solid letters, no outline, faint enough to read over */
}
.browser-landing .offer-words-row--1 .offer-word{ color:rgba(255,255,255,.05); }
.browser-landing .offer-word-dot{
  font-size:clamp(18px,2vw,30px);
  color:rgba(240,0,48,.45);
}
@keyframes offer-words{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){
  .browser-landing .offer-words-row{ animation:none; }
}

/* --- plain and still: the blue, a soft light and a fine square grid */
.browser-landing .offer-section--plain{
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 64px 64px,
    radial-gradient(120% 90% at 85% 10%, #2B3590 0%, #1C2473 45%, #141A5C 100%) !important;
}
/* on a phone the opening screen is tall, and spread down it the rows would
   mostly hide behind the form: they gather behind the heading instead */
@media (max-width:767px){
  .browser-landing .offer-words{ justify-content:flex-start; gap:130px; padding-top:60px; }
  .browser-landing .offer-word{ font-size:58px; }
}

/* ------------------------------------------------------------------
   The opening screen, compact: just the words and the form, no full
   screen of blue below them and no "scroll down" mouse.
   ------------------------------------------------------------------ */
.browser-landing .offer-section--compact{
  min-height:0 !important;
  padding-top:calc(var(--header-h) + clamp(28px,3vw,48px)) !important;   /* the fixed header sits over the top of the section */
  padding-bottom:clamp(44px,4.6vw,76px) !important;
}
.browser-landing .offer-section--compact .scroll-down-indicator{ display:none; }

/* ------------------------------------------------------------------
   Two rows of work drifting past in opposite directions (lp-strip).
   Three copies of each row: shifting the track by exactly one copy lands
   the next where the first began, so the loop has no seam. Each card has
   a fine 1px edge; hovering stops the drift for a closer look.
   ------------------------------------------------------------------ */
.browser-landing .lp-strip{
  --lp-gap:clamp(10px,1.1vw,18px);
  display:grid;
  gap:var(--lp-gap);
  padding:clamp(28px,3vw,48px) 0;
  overflow:hidden;
  background:#fff;
}
.browser-landing .lp-strip-row{
  display:flex;
  width:max-content;
  animation:lp-strip 90s linear infinite;
}
.browser-landing .lp-strip-row--1{ animation-direction:reverse; animation-duration:100s; }
@keyframes lp-strip{
  from{ transform:translate3d(-33.3333%,0,0); }
  to  { transform:translate3d(0,0,0); }
}
.browser-landing .lp-strip:hover .lp-strip-row{ animation-play-state:paused; }
.browser-landing .lp-strip-set{
  display:flex;
  gap:var(--lp-gap);
  margin-right:var(--lp-gap);
}
.browser-landing .lp-strip-card{
  flex:none;
  width:clamp(200px,22vw,360px);
  aspect-ratio:4 / 3;
  margin:0;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.14);
  background:#f4f5f8;
}
.browser-landing .lp-strip-card img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
}
@media (max-width:640px){
  .browser-landing .lp-strip-card{ width:clamp(150px,46vw,220px); }
}
@media (prefers-reduced-motion:reduce){
  .browser-landing .lp-strip-row{ animation:none; }
}

/* ------------------------------------------------------------------
   Services, three to a row (lp-services, layout "grid"): each card opens
   on its animated scene on the brand blue — the same scenes as the
   service pages — then the title, a line and the ticks. The WhatsApp
   tile fills whatever is left of the last row.
   ------------------------------------------------------------------ */
.browser-landing .lp-svc{ padding:clamp(56px,6vw,100px) 0; background:#F6F7FB; }
.browser-landing .lp-svc-inner{
  max-width:1320px;
  margin:0 auto;
  padding:0 clamp(18px,3.4vw,48px);
}
.browser-landing .lp-svc-heading{
  margin:0 0 clamp(26px,3vw,48px);
  text-align:center;
  font-family:var(--font-heading);
  font-size:clamp(30px,3.6vw,54px);
  font-weight:700;
  letter-spacing:-.02em;
  text-transform:uppercase;
  color:var(--ink);
}
.browser-landing .lp-svc-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,1.8vw,28px);
}
.browser-landing .lp-svc-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
}
.browser-landing .lp-svc-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(28,36,115,.12);
}
.browser-landing .lp-svc-shot{
  position:relative;
  margin:0;
  aspect-ratio:4 / 3;
  overflow:hidden;
  background:#1C2473;
}
.browser-landing .lp-svc-body{ padding:clamp(18px,1.8vw,28px) clamp(18px,1.8vw,28px) clamp(20px,2vw,30px); }
.browser-landing .lp-svc-title{
  margin:0 0 8px;
  font-family:var(--font-heading);
  font-size:clamp(19px,1.5vw,24px);
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--ink);
}
.browser-landing .lp-svc-text{
  margin:0 0 14px;
  font-size:15px;
  line-height:1.6;
  color:rgba(0,0,0,.66);
}
.browser-landing .lp-svc-ticks{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:7px;
}
.browser-landing .lp-svc-ticks li{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:14.5px;
  line-height:1.45;
  color:var(--ink);
}
.browser-landing .lp-svc-ticks svg{ flex:none; width:16px; height:16px; margin-top:2px; color:#1C2473; }

/* the WhatsApp tile: as wide as the gap the last row leaves */
.browser-landing .lp-svc-cta{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:18px;
  padding:clamp(24px,3vw,44px);
  background:#1C2473;
  color:#fff;
}
.browser-landing .lp-svc-cta--span2{ grid-column:span 2; }
.browser-landing .lp-svc-cta--span3{ grid-column:1 / -1; }
.browser-landing .lp-svc-cta .whatsapp-icon-wrapper{ color:#25D366; }
.browser-landing .lp-svc-cta h3{ margin:0 0 10px; line-height:1.2; max-width:22ch; font-family:var(--font-heading); font-size:clamp(22px,2vw,30px); font-weight:700; color:#fff; }
.browser-landing .lp-svc-cta p{ margin:0; font-size:16px; line-height:1.6; color:rgba(255,255,255,.82); }
.browser-landing .lp-svc-cta{ align-items:flex-start; }
.browser-landing .lp-svc-cta p{ max-width:46ch; }
.browser-landing .lp-svc-cta .whatsapp-chat-button{ margin-top:6px; }

@media (max-width:1024px){
  .browser-landing .lp-svc-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .browser-landing .lp-svc-cta--span1,
  .browser-landing .lp-svc-cta--span2{ grid-column:1 / -1; }
}
@media (max-width:640px){
  .browser-landing .lp-svc-grid{ grid-template-columns:minmax(0,1fr); }
}

/* package prices are ranges now ("AED 1,000 – 2,500*"): kept on one line */
.browser-landing .price-now{ white-space:nowrap; font-size:clamp(1.55rem,1.9vw,2.1rem); }
.browser-landing .price-now .currency-symbol{ font-size:.5em; }
@media (max-width:640px){
  .browser-landing .price-now{ font-size:clamp(1.5rem,7vw,2rem); }
}
/* two cards to a row but too narrow for points and price side by side:
   the price and buttons go under the points, as on a phone */
@media (min-width:993px) and (max-width:1379px){
  .browser-landing .package-card-grid{ grid-template-columns:1fr; gap:2rem; }
  .browser-landing .card-col-left{ justify-content:flex-start; }
  .browser-landing .card-col-right{ align-items:flex-start; text-align:left; }
  .browser-landing .price-display-wrap{ align-items:flex-start; margin-bottom:2rem; }
}

/* a service card with a page behind it: the title's link covers the card,
   and "View details" sits at the foot of every card in the row */
.browser-landing .lp-svc-card--link{ position:relative; cursor:pointer; }
.browser-landing .lp-svc-card--link .lp-svc-body{ display:flex; flex-direction:column; flex:1; }
.browser-landing .lp-svc-link{ color:inherit; text-decoration:none; }
.browser-landing .lp-svc-link::after{ content:""; position:absolute; inset:0; z-index:2; }
.browser-landing .lp-svc-link:focus-visible{ outline:none; }
.browser-landing .lp-svc-card--link:focus-within{ outline:2px solid #F00030; outline-offset:3px; }
.browser-landing .lp-svc-more{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:auto; padding-top:18px;
  font-size:14px; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
  color:#1C2473;
  transition:color .3s ease;
}
.browser-landing .lp-svc-more i{
  display:inline-grid; place-items:center; width:28px; height:28px;
  background:#1C2473; color:#fff;
  transition:background .3s ease, transform .3s ease;
}
.browser-landing .lp-svc-more svg{ width:14px; height:14px; }
.browser-landing .lp-svc-card--link:hover .lp-svc-more{ color:#F00030; }
.browser-landing .lp-svc-card--link:hover .lp-svc-more i{ background:#F00030; transform:translateX(4px); }
.browser-landing .lp-svc-card--link:hover .lp-svc-title{ color:#1C2473; }

/* --- still, on the packages' gradient: brand blue into charcoal */
.browser-landing .offer-section--gradient{
  background:linear-gradient(135deg, #1C2473 0%, #221F1F 100%) !important;
}

/* the highlighted price, same size and place, without the pulse */
.browser-landing .promo-blink-zoom.is-still{ animation:none !important; }
/* the smaller packages' "From AED 1,000*" on one line too */
.browser-landing .price-now-light{ white-space:nowrap; font-size:clamp(1.45rem,1.75vw,1.9rem); }
/* the prices of the smaller packages line up across the row, just above the buttons */
.browser-landing .package-card-light{ justify-content:flex-start; }
.browser-landing .card-light-price-wrap{ margin-top:auto; padding-top:1.4rem; }
/* four across is too tight below 1380px: two across, as on a tablet */
@media (min-width:993px) and (max-width:1379px){
  .browser-landing .packages-tier-light{ grid-template-columns:repeat(2,1fr); }
}

/* ------------------------------------------------------------------
   "Why us" in the web-design style: the real estate design draws it,
   this one never had it — the same four cards, brought across
   ------------------------------------------------------------------ */
.landing-design-web-design .difference-section{
  padding:clamp(4.5rem,7vw,7rem) 0;
  background:#f8f9fc;
  border-top:1px solid rgba(0,0,0,.06);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.landing-design-web-design .difference-header{ text-align:center; margin-bottom:2.5rem; }
.landing-design-web-design .difference-header .section-tag{ display:block; margin-bottom:.6rem; }
.landing-design-web-design .difference-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,1.8vw,28px); }
.landing-design-web-design .difference-card{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:3rem 2rem 2.5rem;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
}
.landing-design-web-design .difference-title{ margin:0 0 .8rem; line-height:1.3; font-family:var(--font-heading); font-size:clamp(18px,1.4vw,22px); font-weight:700; color:var(--ink,#111); }
.landing-design-web-design .difference-desc-text{ margin:0; font-size:15px; line-height:1.6; color:#5a5a66; }
@media (max-width:1024px){
  .landing-design-web-design .difference-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .landing-design-web-design .difference-section{ padding-left:2rem; padding-right:2rem; }
}
@media (max-width:600px){
  .landing-design-web-design .difference-grid{ grid-template-columns:minmax(0,1fr); }
  .landing-design-web-design .difference-section{ padding-left:0; padding-right:0; }
  .landing-design-web-design .difference-card{ padding:0 1.5rem 2rem; }
}

/* the starting prices under the opening heading: one red badge each */
.browser-landing .offer-prices{
  display:flex; flex-wrap:wrap; gap:10px;
  margin:0 0 clamp(20px,2vw,28px); padding:0; list-style:none;
}
.browser-landing .offer-prices li{
  padding:9px 18px;
  background:#F00030;
  color:#fff;
  font-size:clamp(15px,1.15vw,17px);
  font-weight:500;
  line-height:1.3;
  box-shadow:0 4px 12px rgba(240,0,48,.25);
}
.browser-landing .offer-prices strong{ font-weight:700; }
@media (max-width:600px){
  .browser-landing .offer-prices{ gap:8px; }
  .browser-landing .offer-prices li{ padding:7px 12px; font-size:13.5px; }
}