@import 'tailwindcss';

@source '../views/**/*.blade.php';
@source '../js/**/*.js'; /* classes the page scripts toggle (opacity-30, xl:mb-[20.55px]) */
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source not '../js/admin'; /* the control panel has its own stylesheet (admin.css) */

/* ar: Arabic-script typography (the page's language, not its direction):
   Arabic sits taller than Latin, so lines set nearly solid open up once
   they wrap. The :lang() adds weight, so it wins over a breakpoint's leading. */
@custom-variant ar (&:lang(ar));

@theme {
  --color-ink: #000013;
  --color-ink-3: #030210;
  --color-brand: #D92E2A;
  --color-brand-dark: #C02220;
  --color-maroon: #410D0D;
  --color-navy: #060620;
  /* white on crimson and crimson on ink both pass 4.5:1 (#E52639 was 4.499) */
  --color-crimson: #E42639;
  /* small crimson text on the dark panels and cards (navy, form, callouts),
     where crimson itself falls just short of 4.5:1 */
  --color-crimson-bright: #F0414F;
  /* crimson text on the quote form's light panels (off-white, 5.2:1) */
  --color-crimson-deep: #D0213A;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-tight: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --font-bebas: "Bebas Neue", "Oswald", Impact, sans-serif;
  --font-condensed: "Oswald", "Bebas Neue", Impact, sans-serif;
}

/* Arabic pages (lang="ar"): the brand's Latin families stay first, so AST,
   acronyms and numbers keep their typefaces, and Arabic text falls through
   to IBM Plex Sans Arabic (body and UI) or Cairo (headings, labels and the
   condensed faces' stand-in). The @theme tokens aren't inline, so every
   font utility picks these up without a class changing. */
:root:lang(ar) {
  --font-sans: "Inter", "IBM Plex Sans Arabic", ui-sans-serif, system-ui, sans-serif;
  --font-tight: "Inter Tight", "Cairo", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Montserrat", "Cairo", ui-sans-serif, system-ui, sans-serif;
  --font-bebas: "Bebas Neue", "Cairo", "Oswald", Impact, sans-serif;
  --font-condensed: "Oswald", "Cairo", "Bebas Neue", Impact, sans-serif;
}

/* Arabic joins its letters, so tracking would pull the words apart, and it
   has no italics. */
[class*="tracking-"]:lang(ar), .qt-btn-primary:lang(ar) { letter-spacing: 0; }
:is(em, i, cite, address):lang(ar) { font-style: normal; }
/* Arabic paragraphs balance their last line instead of leaving one word on it
   (their line-height is opened up per paragraph, with ar:leading-[1.6]) */
p:lang(ar) { text-wrap: pretty; }

/* ===================================================================
   Shapes measured off the design files (1 css px = 2 design units)
   =================================================================== */
.hero-clip      { clip-path: polygon(0 0, 0 546.3px, 35.55px 546.3px, 118.75px 100%, 100% 100%, 100% 0); }
.solutions-clip { clip-path: polygon(0 0, 0 100%, calc(100% - 116.85px) 100%, calc(100% - 35.35px) calc(100% - 81.65px), 100% calc(100% - 81.8px), 100% 0); }
.cut-tl         { clip-path: polygon(var(--c) 0, 0 var(--c), 0 100%, 100% 100%, 100% 0); }
.chev-up        { clip-path: polygon(0 100%, 24.2% 0, 75.8% 0, 100% 100%); }
.chev-down      { clip-path: polygon(0 0, 24.2% 100%, 75.8% 100%, 100% 0); }
.para           { clip-path: polygon(9.39% 0, 100% 0, 90.6% 100%, 0 100%); }
.tri-br         { clip-path: polygon(100% 0, 100% 100%, 0 100%); }

/* Arabic pages are the English page mirrored: every asymmetric shape flips,
   x -> 100% - x (the chevrons are symmetric and stay). */
[dir="rtl"] .hero-clip      { clip-path: polygon(100% 0, 100% 546.3px, calc(100% - 35.55px) 546.3px, calc(100% - 118.75px) 100%, 0 100%, 0 0); }
[dir="rtl"] .solutions-clip { clip-path: polygon(100% 0, 100% 100%, 116.85px 100%, 35.35px calc(100% - 81.65px), 0 calc(100% - 81.8px), 0 0); }
[dir="rtl"] .cut-tl         { clip-path: polygon(calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, 0 100%, 0 0); }
[dir="rtl"] .para           { clip-path: polygon(90.61% 0, 0 0, 9.4% 100%, 100% 100%); }
[dir="rtl"] .tri-br         { clip-path: polygon(0 0, 0 100%, 100% 100%); }

/* Every offset is capped against the viewport so the 1536px art canvas
   compresses instead of clipping on narrower screens. */
.wall-clip {
  clip-path: polygon(
    0 0, 0 100%, 100% 100%, 100% 19.9px,
    calc(50% + min(567.05px, 36.917%)) 19.9px,
    calc(50% + min(555.85px, 36.188%)) 7.35px,
    calc(50% + min(507.05px, 33.011%)) 7.35px,
    calc(50% + min(492.2px, 32.044%)) 22.3px,
    calc(50% - min(333.85px, 21.735%)) 22.3px,
    calc(50% - min(352.85px, 22.972%)) 2.05px,
    calc(50% - min(515.8px, 33.581%)) 2.05px,
    calc(50% - min(536.4px, 34.922%)) 21.85px,
    calc(50% - min(707.35px, 46.051%)) 21.85px,
    calc(50% - min(729.2px, 47.474%)) 0);
}
[dir="rtl"] .wall-clip {
  clip-path: polygon(
    100% 0, 100% 100%, 0 100%, 0 19.9px,
    calc(50% - min(567.05px, 36.917%)) 19.9px,
    calc(50% - min(555.85px, 36.188%)) 7.35px,
    calc(50% - min(507.05px, 33.011%)) 7.35px,
    calc(50% - min(492.2px, 32.044%)) 22.3px,
    calc(50% + min(333.85px, 21.735%)) 22.3px,
    calc(50% + min(352.85px, 22.972%)) 2.05px,
    calc(50% + min(515.8px, 33.581%)) 2.05px,
    calc(50% + min(536.4px, 34.922%)) 21.85px,
    calc(50% + min(707.35px, 46.051%)) 21.85px,
    calc(50% + min(729.2px, 47.474%)) 0);
}

/* <x-art.band>: past the 1536 canvas the band's image would end in a hard
   vertical edge against the side fills (behind Home's headings from 2304px
   up), so there it fades out at both ends (its own SVG mask, --fade). */
@media (min-width: 1537px) { .band-image { mask: var(--fade); } }

/* Line icons (symbols in components/sprites/line-icons, drawn with
   <x-icon>): stroked in the current colour; set stroke-width on the <svg>
   to thicken or thin one use. */
.line-icon { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* arrows point along the reading direction, so on Arabic pages they turn
   round; a back arrow, rotated 180°, then points to the start side too */
[dir="rtl"] .line-icon:has(> use[href="#icon-arrow-right"], > use[href="#icon-arrow-long"]) { scale: -1 1; }

.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.card-glass   { pointer-events: none; position: absolute; max-width: none; }

/* Ornament layer: rules, traces, bars and edge taglines that sit behind a
   section's content. Desktop only, never interactive, always aria-hidden. */
.art { position: absolute; inset: 0; display: none; pointer-events: none; }
@media (min-width: 1280px) { .art { display: block; } }

/* Arabic pages mirror a layer as a whole, about its centre, so every rule,
   trace and anchor inside lands on the other side without a class of its
   own. The layer still lays out left to right, as drawn, and its taglines
   flip back so they read normally in the mirrored place. A layer that has
   to blend with the content under it can't be flipped (the transform
   isolates it): .art-logical places its pieces with logical insets instead. */
[dir="rtl"] .art:not(.art-logical) { direction: ltr; transform: scaleX(-1); }
[dir="rtl"] .art:not(.art-logical) p { direction: rtl; transform: scaleX(-1); }

/* Ornaments that grow as the page scrolls ([data-grow], driven by
   resources/js/grow.js). --grow runs from 0 to 1; at 1 an ornament looks as
   drawn, which is where it stays without the script, with reduced motion
   and below xl.
     extend  runs out from the reading-start side behind a soft leading edge
     drop    runs down from the top the same way (upright rules)
     scale   also starts small on that side and grows to full size
     pop     grows out of its centre
     draw    an SVG drawing itself, line by line (below)
   grow.js sets --grow-dir and --grow-origin to the start side in the
   element's own terms, which a flipped layer turns round. scale and pop set
   `scale`, so keep them off an element with a scale of its own
   (rtl:-scale-x-100 is one). */
[data-grow="extend"], [data-grow="scale"] {
  mask-image: linear-gradient(var(--grow-dir, to right), #000 calc(var(--grow, 1) * 115% - 15%), transparent calc(var(--grow, 1) * 115%));
}
[data-grow="drop"] {
  mask-image: linear-gradient(to bottom, #000 calc(var(--grow, 1) * 115% - 15%), transparent calc(var(--grow, 1) * 115%));
}
[data-grow="scale"] { scale: calc(.6 + .4 * var(--grow, 1)); transform-origin: var(--grow-origin, left) center; }
[data-grow="pop"] { scale: var(--grow, 1); opacity: var(--grow, 1); }
/* draw: an SVG whose lines run out along their length and whose dots and
   bars pop in; each piece's --from and --to give its share of --grow, and
   --p is how far along it is. The lines are <path pathLength="1">: path is
   the one shape every browser measures with pathLength, and a <polyline>
   or <line> left in one just stays still. None may use
   vector-effect="non-scaling-stroke", whose dashes don't follow pathLength:
   give those SVGs extend instead. */
[data-grow="draw"] * { --p: clamp(0, (var(--grow, 1) - var(--from, 0)) / (var(--to, 1) - var(--from, 0)), 1); }
/* the offset is a length (1px = 1 pathLength unit here): Firefox drops a
   unitless calc() for stroke-dashoffset, which left every line drawn */
[data-grow="draw"] path { stroke-dasharray: 1 1; stroke-dashoffset: calc((1 - var(--p)) * 1px); }
[data-grow="draw"] circle { transform-box: fill-box; transform-origin: center; scale: var(--p); }
[data-grow="draw"] :is(rect, polygon) { transform-box: fill-box; transform-origin: left center; scale: var(--p) 1; }
/* the hero's traced circuit lines (components/hero/circuits) are white; their
   gradients only set the opacity */
.hero-circuits stop { stop-color: #fff; }
/* where the script is going to grow them, they wait out of sight from the
   first paint, so none shows and then vanishes */
@media (min-width: 1280px) and (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  [data-grow] { --grow: 0; }
}

/* An open modal <dialog> (the quote form, product details) holds the page
   still behind it. */
html:has(dialog[open]) { overflow: hidden; }

/* Going from page to page, the browser cross-fades the two (Chrome, Edge
   and Safari; other browsers just load the next page). Both pages have to
   ask for it, so it lives here, on every page. Scroll reveals are
   resources/js/reveal.js. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

/* ===================================================================
   Fluid shell — the single content container for every section.
   1246.2px is the design width; it widens on larger screens instead
   of leaving the page pinned to a fixed canvas.
   =================================================================== */
/* --shell mirrors the xl+ width so full-bleed art can line up with the
   content column: its left edge is calc((100% - var(--shell)) / 2). */
:root { --shell: 1246.2px; }
@media (min-width: 1600px) { :root { --shell: 1290px; } }
@media (min-width: 1728px) { :root { --shell: 1380px; } }
@media (min-width: 1920px) { :root { --shell: 1534px; } }
@media (min-width: 2304px) { :root { --shell: 1840px; } }

.shell { width: 100%; margin-inline: auto; max-width: 1294px; padding-inline: 1.5rem; }
@media (min-width: 1280px) { .shell { max-width: var(--shell); padding-inline: 0; } }

@media (min-width: 1280px) {
  /* Rows drawn wider than the column: up to --bleed (52px by default) past
     each side (.bleed) or the right side only (.bleed-r), shrinking to
     nothing as the viewport's side margins run out. */
  .bleed, .bleed-r { --reach: max(0px, min(var(--bleed, 52px), (100vw - var(--shell)) / 2 - 24px)); }
  .bleed   { margin-inline: calc(-1 * var(--reach)); }
  .bleed-r { margin-inline-end: calc(-1 * var(--reach)); }

  /* anchor for ornaments that start at the column's left edge */
  .col-l { left: calc((100% - var(--shell)) / 2); }
}

/* Outlined panel with two cut corners: top-right and bottom-left, or
   top-left and bottom-right with .cut-frame-alt. The 1px outline is the
   outer box's --edge showing through; .cut-frame-body repeats the clip
   and paints --fill. Set --cut for the size of the cut. */
.cut-frame {
  --cut: 16px;
  position: relative; padding: 1px; background: var(--edge, #393A4E);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  transition: background-color .15s;
}
.cut-frame-alt { clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.cut-frame-body { position: relative; height: 100%; background: var(--fill, #0A0C1B); clip-path: inherit; }
[dir="rtl"] .cut-frame     { clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
[dir="rtl"] .cut-frame-alt { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }

/* ===================================================================
   Home — "Who we are" photo
   Stacked on mobile, an absolute bleed panel at xl. A dedicated rule
   avoids utility-order fights between w-full and w-auto.
   =================================================================== */
.about-photo { margin-top: 1.5rem; width: 100%; aspect-ratio: 1969/1082; object-fit: cover; --c: 120px; }
@media (min-width: 1280px) {
  /* <img> is a replaced element: left+right with width:auto falls back to the
     intrinsic width, so the bleed is expressed as calc() instead.
     left = 50% - 216.75  ->  width = 50% + 216.75 reaches the right edge.
     top 70.5, sitting 21.35 below the section bottom -> height = 100% - 49.15 */
  .about-photo {
    position: absolute; top: 70.5px; inset-inline-start: calc(50% - 216.75px);
    width: calc(50% + 216.75px); height: calc(100% - 49.15px);
    max-width: none; margin-top: 0; aspect-ratio: auto; --c: 330.2px;
  }
}

/* ===================================================================
   Products
   =================================================================== */
/* Filter pill: rounded, with the design's chamfered top-right corner
   cut out by a triangle in the page colour. */
.pill {
  position: relative; display: inline-flex; align-items: center;
  height: 65.6px; padding: 0 26px; border-radius: 21.1px;
  font-family: var(--font-sans); font-size: 24px; line-height: 1;
  background: #D6D7D6; color: #D92E2A;
  transition: background-color .15s, color .15s;
}
.pill[data-active], .pill:hover { background: #D92E2A; color: #fff; }
.pill::after {
  content: ""; position: absolute; inset-inline-end: 0; top: 0; width: 44.5px; height: 29.6px;
  background: #000013; clip-path: polygon(100% 0, 0 0, 100% 100%);
}
[dir="rtl"] .pill::after { clip-path: polygon(0 0, 100% 0, 0 100%); }
@media (max-width: 767px) {
  /* at 17px brand red on the grey pill reads at 3.3:1; a deeper red keeps 4.9:1 */
  .pill { height: 48px; padding: 0 22px; border-radius: 16px; font-size: 17px; color: #AE1A23; }
  .pill::after { width: 30px; height: 20px; }
}

/* Product tile: photo only, exactly as designed. */
.tile {
  position: relative; display: block; width: 100%; aspect-ratio: 291.2/398.3;
  border: 1px solid #D6D7D6; border-radius: 18px; overflow: hidden;
  background: #05050d; cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tile:hover { border-color: #D92E2A; transform: translateY(-3px); }

/* The design keeps the tile wordless; the name is revealed on hover/focus. */
.tile-name {
  position: absolute; inset: auto 0 0 0; padding: 10px 12px;
  font-size: 13px; line-height: 1.25; color: #fff; text-align: start;
  background: linear-gradient(transparent, rgba(0, 0, 19, .92));
  opacity: 0; transition: opacity .15s;
}
.tile:hover .tile-name, .tile:focus-visible .tile-name { opacity: 1; }

.size-chip {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
  border: 1px solid #9A9AA2; border-radius: 8px; font-size: 15px; color: #D2D2D2;
}

/* Dialog panel: cut corners plus the side notches from the design. */
.popup-clip {
  clip-path: polygon(
    38px 0, calc(100% - 38px) 0, 100% 38px, 100% 34%, calc(100% - 16px) 40%,
    calc(100% - 16px) 60%, 100% 66%, 100% calc(100% - 38px), calc(100% - 38px) 100%,
    38px 100%, 0 calc(100% - 38px), 0 66%, 16px 60%, 16px 40%, 0 34%, 0 38px);
  outline: 1px solid #D92E2A; outline-offset: -1px;
}
/* the product dialog opens the way the quote dialog does (qt-in, below) */
#modal[open] .popup-clip { animation: qt-in .22s ease-out; }
@media (prefers-reduced-motion: reduce) { #modal[open] .popup-clip { animation: none; } }

@media (min-width: 1280px) { #hero-body { padding-top: var(--pt, 97px); } }

/* ===================================================================
   Hero slider (Swiper)
   Dots reproduce the design's vertical trio: 13.44px circles, 27.1px
   apart, active filled and the rest a 1.5px outline.
   =================================================================== */
.hero-swiper { width: 100%; }
.hero-swiper .swiper-slide { height: auto; }

.hero-dots { display: flex; flex-direction: column; gap: 13.66px; }
.hero-dot {
  width: 13.44px; height: 13.44px; border-radius: 9999px;
  border: 1.5px solid #939598; background: transparent;
  cursor: pointer; padding: 0;
  transition: background-color .25s, transform .25s;
}
.hero-dot:hover { transform: scale(1.15); }
.hero-dot--active { background: #939598; }

/* Per-slide rhythm comes in as inline custom properties: Tailwind cannot see
   class names built from data, so the measured numbers live here instead. */
@media (min-width: 1280px) {
  .hero-body  { padding-top: var(--pt); padding-bottom: var(--pb); }
  .hero-lede  { margin-top: var(--lede-mt); max-width: var(--lede-w); }
  .hero-ctas  { margin-top: var(--btn-mt); }
}


/* ===================================================================
   Oman — measured off designs/oman/Artboard 2.pdf, a flat 1536-wide
   raster. Every band stacks three layers:
     media    the photo: in the flow on phones, a clipped frame at xl
     .art     rules, bars, panels and edge taglines (desktop only)
     content  the shared .shell column
   Frames are clip-paths in px from the edge they hang off, so the angles
   hold while a band stretches; photos start a fixed distance into the
   content column (measured from the design's x 100) and bleed right.
   =================================================================== */
/* hero: stepped foot — 45° drop at the left, a 15px step at the right */
.om-hero-clip   { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 256px) calc(100% - 15px), calc(100% - 271px) 100%, 81px 100%, 35px calc(100% - 46px), 0 calc(100% - 46px)); }
/* capabilities: the top rule dips into a 22px tab near the right edge */
.om-towers-clip { clip-path: polygon(0 0, calc(100% - 313px) 0, calc(100% - 288px) 22px, calc(100% - 118px) 22px, calc(100% - 99px) 0, 100% 0, 100% 100%, 0 100%); }
/* call to action: the photo's top edge steps down 10px at x 620 */
.om-cta-clip    { clip-path: polygon(0 0, 620px 0, 640px 10px, 100% 10px, 100% 100%, 0 100%); }
[dir="rtl"] .om-hero-clip { clip-path: polygon(100% 0, 0 0, 0 calc(100% - 15px), 256px calc(100% - 15px), 271px 100%, calc(100% - 81px) 100%, calc(100% - 35px) calc(100% - 46px), 100% calc(100% - 46px)); }
/* the call to action's photo flips on Arabic pages and takes its step along,
   so .om-cta-clip needs no mirrored twin, unless the panel keeps the photo
   unflipped */
[dir="rtl"] .om-cta-clip-twin { clip-path: polygon(100% 0, calc(100% - 620px) 0, calc(100% - 640px) 10px, 0 10px, 0 100%, 100% 100%); }

.om-who-media, .om-map-media, .om-vision-media { display: block; width: 100%; object-fit: cover; object-position: right; }
.om-who-media    { aspect-ratio: 909 / 368; }
.om-map-media    { aspect-ratio: 936 / 216; }
.om-vision-media { aspect-ratio: 1086 / 313; }
/* On Arabic pages these panels move to the left. The two photos are their
   mirrored copies (img/rtl), so their crop turns round too; the map keeps
   its English crop, which holds Oman in frame. */
[dir="rtl"] .om-who-media, [dir="rtl"] .om-vision-media { object-position: left; }

@media (min-width: 1280px) {
  /* <img> is a replaced element, so each frame gets an explicit width that
     runs from its offset in the content column to the right edge */
  .om-who-media, .om-map-media, .om-vision-media { position: absolute; inset-inline-end: 0; max-width: none; aspect-ratio: auto; }
  .om-who-media {
    top: 37px; width: calc(100% - (100% - var(--shell)) / 2 - 527px); height: calc(100% - 37.5px);
    clip-path: polygon(199px 0, 100% 0, 100% 100%, 0.5px 100%, 58px calc(100% - 64.5px), 58px 200px);
  }
  .om-map-media {
    top: 0; width: calc(100% - (100% - var(--shell)) / 2 - 500px); height: 100%;
    mask-image: linear-gradient(to right, transparent, #000 90px);
  }
  .om-vision-media {
    top: 0.5px; width: calc(100% - (100% - var(--shell)) / 2 - 350px); height: calc(100% - 1px);
    clip-path: polygon(360.6px 0, 100% 0, 100% 100%, 2px 100%);
  }
  [dir="rtl"] .om-who-media    { clip-path: polygon(calc(100% - 199px) 0, 0 0, 0 100%, calc(100% - 0.5px) 100%, calc(100% - 58px) calc(100% - 64.5px), calc(100% - 58px) 200px); }
  [dir="rtl"] .om-map-media    { mask-image: linear-gradient(to left, transparent, #000 90px); }
  [dir="rtl"] .om-vision-media { clip-path: polygon(calc(100% - 360.6px) 0, 0 0, 0 100%, calc(100% - 2px) 100%); }

  /* ornament anchors: the who photo's left edge, the column's right edge */
  .om-who-edge { left: calc((100% - var(--shell)) / 2 + 527px); }
  .om-shell-r  { left: calc(100% - (100% - var(--shell)) / 2); }
}

/* capability / value cards: navy glass warming to maroon at the foot */
.om-card {
  position: relative; border: 1.5px solid rgb(229 38 57 / .78); border-radius: 12px;
  background:
    radial-gradient(120% 55% at 0% 100%, rgb(120 20 40 / .22), transparent 62%),
    linear-gradient(180deg, #0C0D21 0%, #0D0E22 52%, #1B0E22 80%, #2A0C1F 100%);
}
[dir="rtl"] .om-card {
  background:
    radial-gradient(120% 55% at 100% 100%, rgb(120 20 40 / .22), transparent 62%),
    linear-gradient(180deg, #0C0D21 0%, #0D0E22 52%, #1B0E22 80%, #2A0C1F 100%);
}



/* ===================================================================
   About — measured off designs/about-us/Artboard 2.pdf, whose only
   copy is a flat 736px raster (1 raster px = 2.087 css px), so offsets
   carry about ±2px. Bands stack the same three layers as Oman: media,
   .art ornaments, then the .shell content. Photos hang a fixed distance
   into the content column and bleed right.
   =================================================================== */
@media (min-width: 1280px) {
  /* hero: the photo's foot steps down twice at 45°, from 75px above the
     bottom on the left to the bottom edge 621px into the column */
  .ab-hero-clip {
    clip-path: polygon(0 0, 100% 0, 100% 100%,
      calc((100% - var(--shell)) / 2 + 621px) 100%,
      calc((100% - var(--shell)) / 2 + 587.6px) calc(100% - 33.4px),
      calc((100% - var(--shell)) / 2 + 333px) calc(100% - 33.4px),
      calc((100% - var(--shell)) / 2 + 293.4px) calc(100% - 75.1px),
      0 calc(100% - 75.1px));
  }
  [dir="rtl"] .ab-hero-clip {
    clip-path: polygon(100% 0, 0 0, 0 100%,
      calc((100% + var(--shell)) / 2 - 621px) 100%,
      calc((100% + var(--shell)) / 2 - 587.6px) calc(100% - 33.4px),
      calc((100% + var(--shell)) / 2 - 333px) calc(100% - 33.4px),
      calc((100% + var(--shell)) / 2 - 293.4px) calc(100% - 75.1px),
      100% calc(100% - 75.1px));
  }
}

/* photos: in the flow on phones, clipped frames at xl */
.ab-who-media, .ab-cta-media { display: block; width: 100%; object-fit: cover; }
.ab-who-media { aspect-ratio: 864 / 351; }

@media (min-width: 1280px) {
  /* <img> is a replaced element, so each frame gets an explicit width that
     runs from its offset in the content column to the right edge */
  .ab-who-media {
    position: absolute; inset-inline-end: 0; top: 33.4px; max-width: none; aspect-ratio: auto;
    width: calc(100% - (100% - var(--shell)) / 2 - 527.1px); height: calc(100% - 33.4px);
    clip-path: polygon(115px 0, 100% 0, 100% 100%, 0 100%, 0 115px);
  }
  [dir="rtl"] .ab-who-media { clip-path: polygon(calc(100% - 115px) 0, 0 0, 0 100%, 100% 100%, 100% 115px); }
  .ab-who-edge { left: calc((100% - var(--shell)) / 2 + 527.1px); }

  .ab-journey-media {
    position: absolute; right: 0; top: 0; max-width: none; height: 100%; object-fit: cover;
    width: calc(100% - (100% - var(--shell)) / 2 - 460.3px);
    mask-image: linear-gradient(to right, transparent, #000 220px);
  }

  .ab-cta-media {
    position: absolute; inset-block: 0 auto; inset-inline: auto 0; max-width: none; height: 100%;
    width: calc(100% - (100% - var(--shell)) / 2 - 462.4px);
    clip-path: polygon(109.5px 0, 100% 0, 100% 100%, 0 100%, 0 109.5px);
  }
  [dir="rtl"] .ab-cta-media { clip-path: polygon(calc(100% - 109.5px) 0, 0 0, 0 100%, 100% 100%, 100% 109.5px); }
  .ab-cta-edge { left: calc((100% - var(--shell)) / 2 + 462.4px); }

  /* the map keeps its drawn size so the pins stay on their cities */
  .ab-map { position: absolute; inset-inline-end: 0; top: 1.5px; width: 1014px; height: 421.5px; }
  .ab-map > img { mask-image: linear-gradient(to right, transparent, #000 160px); }
  [dir="rtl"] .ab-map > img { mask-image: linear-gradient(to left, transparent, #000 160px); }
}

/* mission / vision: a 1px crimson frame around a chamfered photo card.
   The frame is the outer box's background showing through a 1px gap;
   the inner box repeats the clip with clip-path: inherit. */
.ab-frame { position: relative; padding: 1px; background: rgb(229 38 57 / .6); clip-path: var(--frame, none); }
.ab-frame-mission { --frame: polygon(0 0, calc(100% - 35.5px) 0, 100% 35.5px, 100% calc(100% - 35.5px), calc(100% - 35.5px) 100%, 0 100%); }
.ab-frame-vision  { --frame: polygon(36.5px 0, 100% 0, 100% 100%, 0 100%, 0 58.4px); }
[dir="rtl"] .ab-frame-mission { --frame: polygon(100% 0, 35.5px 0, 0 35.5px, 0 calc(100% - 35.5px), 35.5px 100%, 100% 100%); }
[dir="rtl"] .ab-frame-vision  { --frame: polygon(calc(100% - 36.5px) 0, 0 0, 0 100%, 100% 100%, 100% 58.4px); }

/* solution / value cards: rounded top, chamfered foot, lit bottom edge */
.ab-glow-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--edge, rgb(229 38 57 / .5)); border-bottom: 0; border-radius: 9px 9px 0 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px));
  background:
    radial-gradient(70% 28% at 50% 100%, rgb(229 38 57 / .3), transparent 72%),
    linear-gradient(180deg, #05061A 0%, #07081B 62%, #150A1D 100%);
}
.ab-glow-card::after {
  content: ""; position: absolute; left: 6px; right: 6px; bottom: 0; height: 2px;
  background: linear-gradient(90deg, rgb(229 38 57 / .35), #F0324A 28%, #F0324A 72%, rgb(229 38 57 / .35));
}

/* lit dots: timeline stops, legend, map pins */
.ab-dot {
  display: inline-block; flex: none; width: 14px; height: 14px; border-radius: 9999px;
  background: radial-gradient(circle, #FFE4E8 0 16%, #FF5064 38%, var(--color-crimson) 72%);
  box-shadow: 0 0 10px 2px rgb(229 38 57 / .7);
}
.ab-dot-ring { display: inline-block; flex: none; width: 16px; height: 16px; border-radius: 9999px; border: 1.5px solid var(--color-crimson); }
.ab-pin { width: 16px; height: 16px; box-shadow: 0 0 16px 6px rgb(229 38 57 / .75), 0 0 34px 12px rgb(229 38 57 / .35); }


/* ===================================================================
   Contact — measured off the 1267px export of designs/contact-us (1 px
   = 1.212 css px); the PDF only holds an 880px copy. The design sets its
   copy 60px left of the site's column, so the page keeps the shared
   .shell and the form card runs past the column on the right instead.
   =================================================================== */

/* the inquiry card's outline: two chamfers on phones; at xl the drawn
   shape, with chamfered corners, a step in the top edge under the red tab,
   an outward notch high on the right, a step in the bottom edge and an
   inward notch low on the left. The 1px frame is the outer box's crimson
   showing through; the body repeats the clip. */
.ct-frame {
  --frame: polygon(0 36px, 36px 0, 100% 0, 100% calc(100% - 36px), calc(100% - 36px) 100%, 0 100%);
  position: relative; padding: 1px; background: rgb(229 38 57 / .8); clip-path: var(--frame);
}
@media (min-width: 1280px) {
  .ct-frame {
    --frame: polygon(
      0 64.3px, 50.9px 14.5px, calc(100% - 331.8px) 14.5px, calc(100% - 321.2px) 0,
      calc(100% - 62.2px) 0, calc(100% - 18.2px) 43.6px, calc(100% - 18.2px) 115.2px, 100% 133.4px,
      100% calc(100% - 67.9px), calc(100% - 42.4px) calc(100% - 15.8px),
      472.8px calc(100% - 15.8px), 459.3px 100%, 55.8px 100%,
      19.4px calc(100% - 36.4px), 19.4px calc(100% - 72.7px), 0 calc(100% - 91px));
  }
}
[dir="rtl"] .ct-frame { --frame: polygon(100% 36px, calc(100% - 36px) 0, 0 0, 0 calc(100% - 36px), 36px 100%, 100% 100%); }
@media (min-width: 1280px) {
  [dir="rtl"] .ct-frame {
    --frame: polygon(
      100% 64.3px, calc(100% - 50.9px) 14.5px, 331.8px 14.5px, 321.2px 0,
      62.2px 0, 18.2px 43.6px, 18.2px 115.2px, 0 133.4px,
      0 calc(100% - 67.9px), 42.4px calc(100% - 15.8px),
      calc(100% - 472.8px) calc(100% - 15.8px), calc(100% - 459.3px) 100%, calc(100% - 55.8px) 100%,
      calc(100% - 19.4px) calc(100% - 36.4px), calc(100% - 19.4px) calc(100% - 72.7px), 100% calc(100% - 91px));
  }
}
.ct-frame-body {
  position: relative; height: 100%; clip-path: inherit;
  background: radial-gradient(80% 45% at 85% 0%, rgb(255 255 255 / .035), transparent 70%), linear-gradient(180deg, #13141C, #111219 55%, #12121A);
}
[dir="rtl"] .ct-frame-body { background: radial-gradient(80% 45% at 15% 0%, rgb(255 255 255 / .035), transparent 70%), linear-gradient(180deg, #13141C, #111219 55%, #12121A); }
.ct-frame-tab { display: none; position: absolute; top: 0; inset-inline-end: 177.4px; width: 154.4px; height: 14.5px; background: #F12B3B; clip-path: polygon(10.6px 0, 100% 0, calc(100% - 12.1px) 100%, 0 100%); }
[dir="rtl"] .ct-frame-tab { clip-path: polygon(calc(100% - 10.6px) 0, 0 0, 12.1px 100%, 100% 100%); }
@media (min-width: 1280px) { .ct-frame-tab { display: block; } }

/* contact cards: rounded, a faint crimson frame and a lit segment on the foot */
.ct-card {
  position: relative; overflow: hidden; border-radius: 7px; border: 1px solid rgb(229 38 57 / .3);
  background:
    radial-gradient(90% 55% at 72% 100%, rgb(229 38 57 / .16), transparent 70%),
    linear-gradient(165deg, #10111D 0%, #0B0C18 58%, #120B19 100%);
}
[dir="rtl"] .ct-card {
  background:
    radial-gradient(90% 55% at 28% 100%, rgb(229 38 57 / .16), transparent 70%),
    linear-gradient(195deg, #10111D 0%, #0B0C18 58%, #120B19 100%);
}
.ct-card::after {
  content: ""; position: absolute; bottom: 0; inset-inline-end: 8%; width: 18%; height: 3px; border-radius: 2px;
  background: #F0324A; box-shadow: 0 0 10px 1px rgb(240 50 74 / .7);
}

/* form controls */
.ct-input {
  display: block; width: 100%; height: 52px; padding: 0 16px; border-radius: 5px;
  border: 1px solid rgb(255 255 255 / .22); background: rgb(255 255 255 / .025);
  font: 400 15.25px/1.3 var(--font-display); color: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.ct-input::placeholder { color: #7D7F91; opacity: 1; }
.ct-input:focus { outline: none; border-color: var(--color-crimson); box-shadow: 0 0 0 3px rgb(229 38 57 / .2); }
.ct-input[aria-invalid="true"] { border-color: var(--color-crimson); }
select.ct-input { appearance: none; padding-inline-end: 46px; cursor: pointer; }
select.ct-input:invalid { color: #7D7F91; }
select.ct-input option { background: #14151F; color: #fff; }
textarea.ct-input { height: 136.6px; padding-block: 14px; resize: vertical; }

.ct-check {
  appearance: none; flex: none; width: 28px; height: 28px; margin: 0; border-radius: 4px; cursor: pointer;
  border: 1.5px solid rgb(255 255 255 / .45); background: transparent center / 16px no-repeat;
  transition: background-color .15s, border-color .15s;
}
.ct-check:checked {
  border-color: var(--color-crimson); background-color: var(--color-crimson);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ct-check:focus-visible { outline: 2px solid var(--color-crimson); outline-offset: 2px; }
.ct-check[aria-invalid="true"] { border-color: var(--color-crimson); }

/* the brief drop zone is the file input's label */
.ct-drop { border: 1.5px dashed rgb(255 255 255 / .3); border-radius: 6px; cursor: pointer; transition: border-color .15s, background-color .15s; }
.ct-drop:hover, .ct-drop[data-dragging], .ct-drop:focus-within { border-color: var(--color-crimson); background: rgb(229 38 57 / .06); }

/* send button: chamfered top-left and bottom-right corners */
.ct-submit {
  clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
  background: var(--color-crimson); transition: background-color .15s;
}
[dir="rtl"] .ct-submit { clip-path: polygon(calc(100% - 15px) 0, 0 0, 0 calc(100% - 15px), 15px 100%, 100% 100%, 100% 15px); }
.ct-submit:hover { background: #C8202F; }
.ct-submit:focus-visible { outline: none; background: #C8202F; box-shadow: inset 0 0 0 2px #fff; }

.ct-social {
  display: inline-flex; align-items: center; justify-content: center; width: 50.5px; height: 50.5px; border-radius: 5px;
  border: 1px solid rgb(255 255 255 / .1); background: #11121C; color: #fff; transition: border-color .15s, color .15s;
}
.ct-social:hover { border-color: var(--color-crimson); color: var(--color-crimson); }

/* map pins: a crimson drop with a white ring, glowing */
.ct-pin { filter: drop-shadow(0 0 8px rgb(229 38 57 / .85)); }

@media (min-width: 1280px) {
  /* the map keeps its drawn size, centred, so the pins and callouts stay
     on their cities; its sides fade out on wider screens */
  .ct-map {
    position: absolute; top: 0; left: 50%; width: 1536px; height: 656px; transform: translateX(-50%);
    mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  }
  @media (max-width: 1600px) { .ct-map { mask-image: none; } }
}


/* ===================================================================
   Projects — measured off the 822px export of designs/projects (1 px =
   1.869 css px). The design's column sits 72px left of the site's, so the
   page keeps the shared .shell and its cards scale with the column.
   =================================================================== */

.pj-filter {
  display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 16px;
  border: 1px solid #353845; border-radius: 4px; background: transparent; cursor: pointer;
  font: 600 15px/1 var(--font-tight); text-transform: uppercase; color: #A6A8B1;
  transition: border-color .15s, color .15s, background-color .15s;
}
@media (min-width: 1280px) { .pj-filter { height: 52.3px; padding: 0 27px; font-size: 18.4px; } }
.pj-filter:hover { border-color: var(--color-crimson); color: #fff; }
.pj-filter[aria-pressed="true"] { border-color: var(--color-crimson); background: var(--color-crimson); color: #fff; }
.pj-filter:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* project card: the large photo, a stack of two, then the copy panel. The
   thin frame runs behind the small photos and around the panel, with its
   top-right corner cut; the large photo's bottom-left corner is cut too. */
.pj-card { position: relative; display: grid; gap: 11.2px; }
@media (min-width: 768px) { .pj-card { grid-template-columns: 1.1fr 0.55fr; } }
@media (min-width: 1280px) { .pj-card { grid-template-columns: 518fr 239fr 490fr; min-height: 386.8px; } }

.pj-frame {
  position: absolute; inset-block: 0; inset-inline: calc(518 / 1247 * 100% - 36px) 0; display: none;
  background: #282A38; border-end-end-radius: 8px;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.pj-frame::before {
  content: ""; position: absolute; inset: 1px; background: #000615;
  border-end-end-radius: 7px; clip-path: polygon(0 0, calc(100% - 15.6px) 0, 100% 15.6px, 100% 100%, 0 100%);
}
[dir="rtl"] .pj-frame         { clip-path: polygon(100% 0, 16px 0, 0 16px, 0 100%, 100% 100%); }
[dir="rtl"] .pj-frame::before { clip-path: polygon(100% 0, 15.6px 0, 0 15.6px, 0 100%, 100% 100%); }
@media (min-width: 1280px) { .pj-frame { display: block; } }

.pj-photo-main { position: relative; overflow: hidden; border-radius: 6px 6px 6px 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
[dir="rtl"] .pj-photo-main { border-radius: 6px 6px 0 6px; clip-path: polygon(100% 0, 0 0, 0 100%, calc(100% - 14px) 100%, 100% calc(100% - 14px)); }
.pj-photo { position: relative; overflow: hidden; border-radius: 6px; }
.pj-photo-main img, .pj-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.pj-view {
  display: inline-flex; align-items: center; justify-content: space-between; height: 46.7px; width: 271px; max-width: 100%;
  padding-block: 0; padding-inline: 25px 21px; border: 1px solid #3A3D4B; border-radius: 3px;
  font: 600 17px/1 var(--font-tight); text-transform: uppercase; color: #AFB1B7;
  transition: border-color .15s, color .15s;
}
.pj-view[href]:hover { border-color: var(--color-crimson); color: #fff; }

/* CTA band: a chamfered crimson outline with the photo inside */
.pj-cta-frame { --cut: 22px; position: relative; padding: 1.5px; background: rgb(229 38 57 / .75); clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut)); }
.pj-cta-body { position: relative; overflow: hidden; clip-path: inherit; background: #070814; }


/* ===================================================================
   Project detail — measured off designs/project-page (a 739px raster,
   1 px = 2.079 css px). Every section after the hero is optional and
   only renders when the project has that data (config/projects.php).
   =================================================================== */

/* gallery: the active thumbnail is outlined in crimson */
.pd-thumb { display: block; overflow: hidden; border: 2px solid transparent; border-radius: 3px; transition: border-color .15s, opacity .15s; }
.pd-thumb:not([aria-current="true"]) { opacity: .75; }
.pd-thumb:hover, .pd-thumb:focus-visible { opacity: 1; }
.pd-thumb[aria-current="true"] { border-color: var(--color-crimson); opacity: 1; }
.pd-thumb img { display: block; width: 100%; aspect-ratio: 1.4; object-fit: cover; }

.pd-arrow {
  position: absolute; top: 50%; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 48px; transform: translateY(-50%); color: #fff;
  background: rgb(22 32 56 / .82); transition: background-color .15s;
}
@media (min-width: 768px) { .pd-arrow { width: 60px; height: 74px; } }
.pd-arrow:hover, .pd-arrow:focus-visible { background: var(--color-crimson); }

/* request-a-similar-project card */
.pd-cta { background: radial-gradient(120% 90% at 50% 0%, #E2303A 0%, #C51E27 55%, #A5151E 100%); transition: filter .15s; }
.pd-cta:hover { filter: brightness(1.08); }


/* ===================================================================
   Error pages (resources/views/errors): the status code drawn in a
   crimson outline, lit from behind.
   =================================================================== */
.err-code {
  font: 600 clamp(120px, 17vw, 250px)/.85 var(--font-condensed); letter-spacing: .02em;
  color: transparent; -webkit-text-stroke: 2px var(--color-crimson);
  background: linear-gradient(180deg, rgb(229 38 57 / .28), rgb(229 38 57 / 0) 78%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 32px rgb(229 38 57 / .28));
  user-select: none;
  animation: err-in .9s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes err-in { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .err-code { animation: none; } }


/* ===================================================================
   Request a quote — designs/get-qu: a light panel over the dark site,
   corners cut, two short crimson bars on its top and bottom edges.
   The same form fills the site-wide <dialog> and the /quote page
   (components/quote/form); resources/js/quote.js runs the steps.
   =================================================================== */
.qt-dialog {
  width: min(1040px, 100vw - 32px); max-width: none; max-height: calc(100dvh - 32px);
  margin: auto; padding: 0; border: 0; background: transparent; color: inherit; overflow: visible;
}
.qt-dialog::backdrop { background: rgb(0 3 20 / .74); backdrop-filter: blur(4px); }
.qt-dialog[open] { animation: qt-in .22s ease-out; }
@keyframes qt-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
@media (prefers-reduced-motion: reduce) { .qt-dialog[open] { animation: none; } }

.qt-panel {
  --cut: 30px;
  position: relative; display: flex; flex-direction: column; max-height: calc(100dvh - 32px);
  background: #FCFBFE; color: #0B1033;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
.qt-panel::before, .qt-panel::after { content: ""; position: absolute; z-index: 2; height: 5px; background: var(--color-crimson); }
.qt-panel::before { top: 0; inset-inline-start: 76%; width: 7.5%; }
.qt-panel::after { bottom: 0; inset-inline-start: 62%; width: 14%; }
.qt-panel-page { max-width: 1100px; max-height: none; margin-inline: auto; animation: qt-in .4s ease-out; }
@media (prefers-reduced-motion: reduce) { .qt-panel-page { animation: none; } }

/* header: brand, centred title, close */
.qt-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 20px; padding-block: 26px 0; padding-inline: 40px 30px; }
.qt-brand img { display: block; width: 118px; height: auto; }
.qt-brand p { margin-top: 5px; font: 800 10.5px/1 var(--font-tight); color: #0B1033; white-space: nowrap; }
.qt-brand p:lang(ar) { font-size: 12px; }
.qt-intro { max-width: 620px; text-align: center; }
.qt-title { font: 700 32px/1.1 var(--font-display); text-transform: uppercase; color: #000528; }
.qt-subtitle { margin-top: 8px; font: 400 15px/1.45 var(--font-sans); color: #5D5E6C; }
.qt-close {
  justify-self: end; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 6px; color: #0B1033; transition: background-color .15s, color .15s;
}
.qt-close:hover, .qt-close:focus-visible { background: #EEEDF3; color: var(--color-crimson); outline: none; }

/* steps: numbered circles joined by rules, crimson up to the current one */
.qt-steps { display: flex; justify-content: center; align-items: center; padding: 20px 30px 22px; }
.qt-steps li { display: flex; align-items: center; gap: 12px; font: 500 14.5px/1 var(--font-sans); color: #5D5E6C; }
.qt-steps li + li::before { content: ""; width: 64px; height: 1.5px; margin-inline: 16px; background: #D5D6DE; }
.qt-steps li[data-state="current"]::before, .qt-steps li[data-state="done"]::before { background: var(--color-crimson); }
.qt-step-num {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9999px;
  border: 1.5px solid #9A9CAB; font: 500 15px/1 var(--font-sans); color: #434760;
}
.qt-step-num svg { display: none; }
.qt-steps li[data-state="current"] { color: var(--color-crimson-deep); font-weight: 600; }
.qt-step-title { white-space: nowrap; }
.qt-steps li[data-state="current"] .qt-step-num { border-color: var(--color-crimson); background: var(--color-crimson); color: #fff; }
.qt-steps li[data-state="done"] .qt-step-num { border-color: var(--color-crimson); color: var(--color-crimson); }
.qt-steps li[data-state="done"] .qt-step-num span { display: none; }
.qt-steps li[data-state="done"] .qt-step-num svg { display: block; }

/* body: the summary card beside the step; in the dialog only the body
   scrolls, so the form passes the panel's height down to it */
.qt-form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.qt-body { display: grid; grid-template-columns: 1fr; min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid #E6E6EC; }
.qt-panel-page .qt-body { overflow: visible; }
.qt-main { min-width: 0; padding: 28px 40px 32px; }
@media (min-width: 900px) {
  .qt-body:has(.qt-summary:not([hidden])) { grid-template-columns: 262px 1fr; }
}

.qt-summary { display: none; }
@media (min-width: 900px) {
  .qt-summary:not([hidden]) {
    display: block; align-self: start; position: sticky; top: 24px;
    margin-block: 24px; margin-inline: 24px 0; padding: 22px 20px; border-radius: 12px; background: #EEEDF3;
    font: 400 14px/1.45 var(--font-sans); color: #3C3F52;
  }
}
.qt-summary-title { padding-bottom: 14px; border-bottom: 1px solid #D9D9E1; font: 600 16px/1 var(--font-display); text-transform: uppercase; color: #020933; }
.qt-summary-row { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid #D9D9E1; }
.qt-summary-row:first-child { align-items: flex-start; }
.qt-summary-note { display: flex; align-items: flex-start; gap: 14px; margin-top: 18px; font-size: 13.5px; color: #5D5E6C; }
.qt-summary [data-summary]:not([data-filled]) { color: #62646F; font-weight: 400; }

/* fieldsets default to min-width: min-content, so one long file name would
   widen the whole step past a phone's edge; let them shrink like divs */
.qt-form fieldset { min-inline-size: 0; }
.qt-step + .qt-step { margin-top: 40px; padding-top: 32px; border-top: 1px solid #E6E6EC; }
.qt-step[hidden] + .qt-step, .qt-step:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.qt-step-heading { font: 700 26px/1.2 var(--font-sans); color: #000528; }
.qt-step-heading:focus { outline: none; }
.qt-step-help { margin-top: 6px; font: 400 15.5px/1.45 var(--font-sans); color: #5D5E6C; }

/* fields */
.qt-input {
  display: block; width: 100%; height: 48px; padding: 0 14px;
  border: 1px solid #D5D6DE; border-radius: 5px; background: #fff;
  font: 400 15.5px/1.3 var(--font-sans); color: #0B1033;
  transition: border-color .15s, box-shadow .15s;
}
.qt-input::placeholder { color: #62646F; opacity: 1; }
.qt-input:hover { border-color: #B9BAC6; }
.qt-input:focus { outline: none; border-color: var(--color-crimson); box-shadow: 0 0 0 3px rgb(229 38 57 / .16); }
.qt-input[aria-invalid="true"] { border-color: var(--color-crimson); }
select.qt-input {
  appearance: none; padding-inline-end: 42px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M1.5 1.5 7 6.5 12.5 1.5' fill='none' stroke='%230B1033' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 16px center / 13px no-repeat;
}
[dir="rtl"] select.qt-input { background-position: left 16px center; }
textarea.qt-input { height: 132px; padding-block: 12px; resize: vertical; }
input[type="number"].qt-input { max-width: 220px; }

.qt-error { margin-top: 6px; font: 400 13.5px/18px var(--font-sans); color: #C8102E; }
.qt-alert { margin-bottom: 22px; padding: 12px 16px; border-radius: 6px; background: #FDEEF0; font: 500 14.5px/1.4 var(--font-sans); color: #B3122A; }

/* request type: two cards with a radio mark */
.qt-choice {
  position: relative; display: flex; align-items: center; gap: 14px; padding-block: 16px; padding-inline: 16px 48px;
  border: 1.5px solid #D5D6DE; border-radius: 8px; background: #fff; cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.qt-choice:hover { border-color: #E9A6AE; }
.qt-choice:has(:checked) { border-color: var(--color-crimson); background: #FDEEF0; }
.qt-choice:has(:focus-visible), .qt-chip:has(:focus-visible), .qt-option:has(:focus-visible) { outline: 2px solid var(--color-crimson); outline-offset: 2px; }
.qt-choice .qt-radio { position: absolute; inset-inline-end: 16px; top: 50%; transform: translateY(-50%); }
.qt-radio { width: 20px; height: 20px; flex: none; border-radius: 9999px; border: 1.5px solid #A9AAB6; background: #fff; transition: border-color .15s; }
:checked ~ .qt-radio, :checked + .qt-radio { border-color: var(--color-crimson); background: radial-gradient(circle, var(--color-crimson) 0 42%, #fff 46%); }

/* areas: pill checkboxes */
.qt-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 16px;
  border: 1.5px solid #D5D6DE; border-radius: 9999px; background: #fff; cursor: pointer;
  font: 500 14.5px/1.25 var(--font-sans); color: #2A2E45; transition: border-color .15s, background-color .15s, color .15s;
}
.qt-chip:hover { border-color: #E9A6AE; }
.qt-chip:has(:checked) { border-color: var(--color-crimson); background: #FDEEF0; color: #B3122A; }
.qt-chip-check { display: none; width: 14px; height: 14px; }
.qt-chip:has(:checked) .qt-chip-check { display: block; }

/* timeline: boxed radios, like the design's yes / no */
.qt-option {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 16px; white-space: nowrap;
  border: 1.5px solid #D5D6DE; border-radius: 6px; background: #fff; cursor: pointer;
  font: 500 14.5px/1.25 var(--font-sans); color: #2A2E45; transition: border-color .15s, background-color .15s;
}
.qt-option:hover { border-color: #E9A6AE; }
.qt-option:has(:checked) { border-color: var(--color-crimson); background: #FDEEF0; color: #0B1033; }

/* documents */
.qt-drop {
  display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 96px; padding: 18px 20px;
  border: 1.5px dashed #BDBECA; border-radius: 8px; background: #fff; cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.qt-drop:hover, .qt-drop:focus-within, .qt-drop[data-dragging] { border-color: var(--color-crimson); background: #FFF6F7; }
.qt-files { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 10px; }
.qt-files li {
  display: flex; align-items: center; gap: 12px; padding-block: 9px; padding-inline: 14px 10px;
  border: 1px solid #E1E1E8; border-radius: 6px; background: #F6F6F9; font: 400 14px/1.3 var(--font-sans); color: #0B1033;
}
.qt-files button { margin-inline-start: auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 5px; color: #6F7078; }
.qt-files button:hover, .qt-files button:focus-visible { background: #FDEEF0; color: var(--color-crimson); outline: none; }

.qt-check {
  appearance: none; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 4px; cursor: pointer;
  border: 1.5px solid #A9AAB6; background: #fff center / 14px no-repeat; transition: background-color .15s, border-color .15s;
}
.qt-check:checked {
  border-color: var(--color-crimson); background-color: var(--color-crimson);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.qt-check:focus-visible { outline: 2px solid var(--color-crimson); outline-offset: 2px; }
.qt-check[aria-invalid="true"] { border-color: var(--color-crimson); }

/* actions */
.qt-foot { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; padding: 18px 40px 24px; border-top: 1px solid #E6E6EC; background: #FCFBFE; }
.qt-foot-error { flex-basis: 100%; padding: 10px 14px; border-radius: 6px; background: #FDEEF0; font: 500 14px/1.4 var(--font-sans); color: #B3122A; }
.qt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px; height: 52px; min-width: 140px; padding: 0 26px;
  border-radius: 5px; font: 600 15.5px/1 var(--font-sans); transition: background-color .15s, border-color .15s, color .15s;
}
.qt-btn-primary { min-width: 250px; background: var(--color-crimson); color: #fff; text-transform: uppercase; letter-spacing: .04em; }
.qt-btn-primary:hover { background: #C8202F; }
.qt-btn-primary:focus-visible { outline: 2px solid #0B1033; outline-offset: 2px; }
.qt-btn-primary:disabled { opacity: .7; cursor: progress; }
.qt-btn-quiet { border: 1px solid #C9CAD4; background: #EEEDF3; color: #0B1033; }
.qt-btn-quiet:hover, .qt-btn-quiet:focus-visible { border-color: #0B1033; outline: none; }

.qt-success { padding: 36px 8px 20px; text-align: center; }
.qt-success:focus { outline: none; }
.qt-success-icon { display: inline-grid; place-items: center; width: 76px; height: 76px; border-radius: 9999px; background: #FDEEF0; color: var(--color-crimson); }

/* phones: the dialog fills the screen and loses its cut corners */
@media (max-width: 767px) {
  .qt-dialog { width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; }
  .qt-panel { --cut: 0px; height: 100%; max-height: 100dvh; }
  /* the /quote page scrolls as a page: its panel is never capped at the screen height */
  .qt-panel-page { --cut: 16px; height: auto; max-height: none; }
  .qt-head { grid-template-columns: 1fr auto; padding-block: 16px 0; padding-inline: 20px 16px; }
  .qt-brand { display: none; }
  .qt-intro { text-align: start; }
  .qt-title { font-size: 24px; }
  .qt-subtitle { font-size: 14px; }
  .qt-steps { justify-content: flex-start; padding: 16px 20px; }
  .qt-steps li + li::before { width: 22px; margin-inline: 8px; }
  .qt-steps li:not([data-state="current"]) .qt-step-title { display: none; }
  .qt-main { padding: 22px 20px 26px; }
  .qt-foot { padding: 14px 20px 18px; }
  .qt-foot > div { flex: 1; }
  .qt-btn { padding-inline: 16px; }
  .qt-btn-primary { width: 100%; min-width: 0; }
  .qt-btn-primary svg { display: none; }
  .qt-step-heading { font-size: 22px; }
}

/* small phones: every pixel of height goes to the step being filled in */
@media (max-width: 400px) {
  .qt-head { padding-top: 12px; }
  .qt-title { font-size: 21px; }
  .qt-subtitle { display: none; }
  .qt-steps { padding-block: 12px; }
  .qt-step-num { width: 32px; height: 32px; }
  .qt-steps li { gap: 8px; }
  .qt-steps li + li::before { width: 14px; margin-inline: 6px; }
  .qt-main { padding-top: 18px; }
  .qt-foot { gap: 10px 12px; padding: 12px 16px 14px; }
  .qt-btn-quiet { min-width: 0; padding-inline: 14px; }
  .qt-foot p { font-size: 12px; white-space: nowrap; }
  .qt-choice { gap: 10px; padding-block: 14px; padding-inline: 14px 40px; }
  .qt-choice > svg { width: 32px; height: 32px; }
  .qt-choice .qt-radio { inset-inline-end: 12px; }
}
/* the /quote page's panel sits inside the page column, 48px narrower than
   the dialog: below 360 only the step numbers fit */
@media (max-width: 359px) {
  .qt-panel-page .qt-steps .qt-step-title { display: none; }
}