/* ==========================================================================
   SV Steels Chennai — About page styles (about-sv-steels-chennai.html)
   Loaded AFTER style.css and sv-chennai.css so it can override both.
   Do not edit style.css — that file is compiled from SCSS (style.css.map).
   ========================================================================== */

/* --------------------------------------------------------------------------
   About section — accent colour
   Recolours the icons, divider and buttons in this section from the template
   gold (#AE8333) to the SV Steels deep red. Scoped to .aboutthree so the rest
   of the site keeps --primary-color; nothing here touches style.css.
   -------------------------------------------------------------------------- */
.aboutthree {
  --sv-accent: #670d0f;
  /* Hover goes to the template gold, matching every other button on the site
     (.custom-btn:hover uses --secondary-color, which is #AE8333). */
  --sv-accent-hover: #ae8333;
}

/* Divider beside the OUR STORY eyebrow — the 1x325 rule and its dot terminus —
   stays on the template gold, so it is deliberately NOT recoloured here. Both
   rects carry an inline fill="#AE8333", which applies as long as no CSS fill
   targets them; adding one back would override it. */
.aboutthree .sectiontop__subtitle svg rect {
  fill: #ae8333;
}

/* Dealership card titles. style.css:4856 caps these at max-width:100px, which
   was sized for the template's "Design & Build" / "General Contracting" — at
   that width "Apollo Pipes" and "ARS Steels" both break across two lines.
   Lifting the cap and adding nowrap keeps each on one line. */
.aboutthree .aboutthree__feature-title {
  max-width: none;
  white-space: nowrap;
}

/* Dealership card icons (Apollo Pipes / ARS Steels). Font Awesome glyphs now,
   not the template's inline SVGs, so colour and size are CSS properties rather
   than per-path fill attributes. fa-pipe-section reads as a pipe cross-section
   for Apollo; fa-grid-horizontal as stacked bar stock for ARS Steels. */
.aboutthree .aboutthree__feature-icon {
  font-size: 24px;
  color: var(--sv-accent);
}

/* Kept for any inline SVG icons still in this section. */
.aboutthree .aboutthree__feature-icon svg path,
.aboutthree .aboutthree__feature-icon svg rect {
  fill: var(--sv-accent);
}

/* Angled backdrop shape behind the photo in the right-hand column. */
.aboutthree .aboutthree__thumb-bgshape svg path {
  fill: var(--sv-accent);
}

/* --------------------------------------------------------------------------
   About section — tablet layout (768-1199px)
   -------------------------------------------------------------------------- */

/* The backdrop shape is absolutely positioned at right:0.5% of .aboutthree__
   thumb (style.css:4785). At xl the column is half-width, so that right edge
   sits just past the photo and the shape reads as a backdrop. Below 1200px the
   col-xl-6 goes full width, the right edge becomes the whole container, and the
   fixed 526px shape flies off to the far right, detached from the photo.
   Capping the thumb at the desktop composition width (557px photo + its 40px
   offset) and centring it rebuilds the desktop relationship. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .aboutthree__thumb {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Never let the fixed-width shape push the page into horizontal scroll. */
.aboutthree__thumb-bgshape svg {
  max-width: 100%;
  height: auto;
}

/* The two dealership boxes stack below 1200px because style.css:4834 adds
   flex-wrap:wrap. Keep them side by side down to 576px — the titles are short
   and already nowrap, so two columns fit comfortably on a tablet. */
@media (min-width: 576px) and (max-width: 1199.98px) {
  .aboutthree__feature {
    flex-wrap: nowrap;
    gap: 24px;
  }

  .aboutthree__feature-item {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* GET A QUOTE button. The template's hover swaps in --secondary-color, which is
   the same gold, so the hover state needs overriding too or the button flashes
   gold on rollover. */
.aboutthree .custom-btn--primary {
  background: #670d0f;
  border-color: var(--sv-accent);
}

.aboutthree .custom-btn--primary:hover,
.aboutthree .custom-btn--primary:focus {
  background: var(--sv-accent-hover);
  border-color: var(--sv-accent-hover);
}

/* --------------------------------------------------------------------------
   About section — vertical "OUR STORY" eyebrow
   -------------------------------------------------------------------------- */

/* The eyebrow is a 90deg-rotated label in a fixed 100px box (style.css:8852).
   "OUR STORY" at 18px/600 Exo with 0.5px tracking measures right at that 100px,
   so it can break onto a second line where "ABOUT US" didn't. nowrap keeps it on
   one line; text-align centres it in the box so any overhang stays symmetrical
   and the label doesn't drift off the vertical rule below it. */
.aboutthree .sectiontop__subtitle span {
  white-space: nowrap;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Years in Business section — black background overlay
   -------------------------------------------------------------------------- */

/* This section already ships an overlay (style.css:5348) — but at
   rgba(14,18,29,.93) it is a near-opaque dark navy that all but hides the
   photo behind it. Recolouring it to the same 70% black used on Mission Goals
   keeps the two sections consistent and lets the image read through.
   Only the colour is overridden; the existing element already covers the
   .wcuthree__bg box and sits below the content's z-index. */
.wcuthree__bg:before {
  background: rgba(0, 0, 0, 0.85);
}

/* --------------------------------------------------------------------------
   Years in Business section — SINCE column spacing when stacked
   -------------------------------------------------------------------------- */

/* The row is .gy-5, so Bootstrap puts padding-top:3rem (48px) on every column
   and cancels the first one with margin-top:-3rem on .row. Once the columns
   stack below xl that 48px becomes a wide gap above the SINCE block, with
   nothing beneath it before the section ends.
   Trimming the top and adding a bottom balances it. nth-child(2) is the SINCE
   column: it is second in the DOM regardless of the order-* classes, which
   only affect visual order. Specificity (0,3,1) beats Bootstrap's .row > *
   (0,1,0), so no !important is needed, and the first column keeps its 48px so
   the row's negative margin still cancels correctly. */
@media (max-width: 1199.98px) {
  .wcuthree .row > [class*="col-"]:nth-child(2) {
    padding-top: 16px;
    padding-bottom: 40px;
  }
}

/* The gap above "SINCE" is the decorative arrow, not padding.
   .wcuthree__about-top is a flex row with align-items:flex-end (style.css:5502)
   holding the year block (~100px tall) beside a fixed 180x180 SVG. The SVG sets
   the row height, and flex-end pushes the bottom-aligned year down — so ~80px of
   empty space opens above SINCE. Sizing the arrow under the year block's height
   makes the text drive the row again and the gap closes. */
@media (max-width: 1199.98px) {
  .wcuthree__about-arrow svg {
    width: 96px;
    height: 96px;
  }
}

@media (max-width: 767.98px) {
  .wcuthree__about-arrow svg {
    width: 72px;
    height: 72px;
  }
}

/* --------------------------------------------------------------------------
   Years in Business section — timeline circles + eyebrow clearance
   -------------------------------------------------------------------------- */

/* The number is a 40x40 flex item with the default flex-shrink:1, so a long
   description beside it squeezes the width while the height stays 40px — the
   circle turns into an oval. Item 01 has the longest text here, which is why it
   distorted first. style.css:5456 already applies flex:none below 768px; this
   extends the same guard to every width so all three stay perfectly round. */
.wcuthree__feature-number {
  flex: none;
}

/* Connector line between the timeline circles.
   style.css:5479 draws it as a fixed 40px stub (height:100% of the 40px circle)
   pushed down by bottom:-110%. Those numbers were tuned for the demo's evenly
   short descriptions; our item 01 runs longer and taller, so the stub stops
   short and the timeline reads as broken.
   Drawing it on the item instead makes it span the real gap: from the bottom of
   the circle down through the item's own 32px margin to the next circle's top,
   whatever the text height. Same 1px gold rule, just height-independent. */
.wcuthree__feature-number::before {
  display: none;
}

/* Equal-length connectors need equal-height rows. The items are stacked blocks,
   so each is as tall as its own text — item 01 runs to more lines than 02, which
   made its connector visibly longer. Grid with grid-auto-rows:1fr sizes every
   row to the tallest, so both segments come out identical.
   The 32px gap replaces .wcuthree__feature-item's margin-bottom (zeroed below),
   and the container takes over the 48px the last item used to add before the
   button, so surrounding spacing is unchanged. */
.wcuthree__feature {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 32px;
  margin-bottom: 48px;
}

/* On narrow screens the descriptions wrap to three or four lines and the
   longest item drags every other row up to match, leaving big voids in the
   short ones. Below tablet, let each row size to its own content — the
   connector spans whatever height results, so it still joins correctly. */
@media (max-width: 767.98px) {
  .wcuthree__feature {
    grid-auto-rows: auto;
    gap: 24px;
  }

  .wcuthree__feature-item:not(:last-child)::before {
    bottom: -24px;
  }
}

.wcuthree__feature-item,
.wcuthree__feature-item:last-child {
  position: relative;
  margin-bottom: 0;
}

.wcuthree__feature-item:not(:last-child)::before {
  content: "";
  position: absolute;
  /* 20px = centre of the 40px circle, which is the flex row's first item */
  left: 20px;
  top: 40px;
  /* -32px = .wcuthree__feature-item's margin-bottom, so the line meets the
     next circle exactly rather than stopping in the gap */
  bottom: -32px;
  width: 1px;
  background: var(--primary-color);
}

/* --------------------------------------------------------------------------
   Years in Business section — eyebrow clearance
   -------------------------------------------------------------------------- */

/* The eyebrow label is rotated 90deg and runs downward toward the vertical rule
   below it, which starts at the parent's padding-top (115px in style.css:5413).
   "YEARS IN BUSINESS" is four characters longer than the "WHY CHOOSE US" this
   block was built for — about 40px more rotated length — so it ran up against
   the rule. Pushing the padding to 160px restores a clear gap. */
.wcuthree .sectiontop__subtitle {
  padding-top: 160px;
}

/* --------------------------------------------------------------------------
   How It Works section — step icons
   -------------------------------------------------------------------------- */

/* The template shipped a bespoke inline SVG per card; these are Font Awesome
   glyphs instead, so colour and size are CSS rather than a fill attribute.
   The container is 88px with an 8px white border (style.css:6349), leaving a
   72px well — flex centring holds the glyph dead centre regardless of its
   aspect, which the inherited line-height:70px would not. */
.wptwo .work-process__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  color: #670d0f;
}

/* Half-round backdrop behind each step card. The rect is filled with a gradient
   running #AE8333 -> white at fill-opacity .32; overriding the first stop to a
   50/50 tint of that gold against white keeps the fade but lands the whole
   shape a full step lighter. stop-color is a real CSS property, so the inline
   <stop stop-color="#AE8333"> attribute is overridden without touching markup.
   To go lighter still, raise the tint (#E2D3B8) or drop fill-opacity below. */
.wptwo .work-process__shape linearGradient stop:first-child {
  stop-color: #d7c199;
}

/* --------------------------------------------------------------------------
   Mission Goals section — black background overlay
   -------------------------------------------------------------------------- */

/* The section's copy is white on a photographic background, which only stays
   legible over a darkened image. main.js sets background-image from
   data-bg-src but no size/position, so those are declared here too — otherwise
   the photo tiles at its native size instead of covering the section. */
.wcutwo {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Overlay sits between the background and the content. .wcutwo carries .fix
   (overflow:hidden), so inset:0 is safely clipped to the section. */
.wcutwo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

/* Lift the content above the overlay — without this the ::before paints over
   the heading, tabs and button rather than behind them. */
.wcutwo > .container {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Mission Goals section — height
   -------------------------------------------------------------------------- */

/* The section carried .section-padding (120px top/bottom) plus .pb-275, giving
   it ~395px of padding around ~300px of content — more empty space than copy.
   Nothing pulls the following section up into that gap (no negative margin on
   .teamtwo), so the 275px was pure dead space; bringing the bottom back to
   match the top removes 155px without disturbing the section below. */
/* Values track .section-padding's own breakpoints (120 / 100 / 80 / 60) so the
   bottom always equals the top this section already gets. Without the 767px
   step the top would drop to 60px while the bottom stayed 80px. */
.wcutwo.pb-275 {
  padding-bottom: 120px;
}

@media (max-width: 1499.98px) {
  .wcutwo.pb-275 {
    padding-bottom: 100px;
  }
}

@media (max-width: 1199.98px) {
  .wcutwo.pb-275 {
    padding-bottom: 80px;
  }
}

@media (max-width: 767.98px) {
  .wcutwo.pb-275 {
    padding-bottom: 60px;
  }
}

/* --------------------------------------------------------------------------
   Warehouse & Fabrication section — 3-column equal-height grid
   -------------------------------------------------------------------------- */

/* The template laid these out as a Bootstrap flex row of col-xl-7/5/5/7/6/6 —
   fixed, uneven pairs per line. CSS Grid gives three equal tracks instead.
   Grid also reads left-to-right, unlike multi-column, which fills column by
   column. Bootstrap's .row and .col-* set display/width without !important,
   so plain specificity wins and the markup keeps its classes as a fallback. */
.sv-project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.sv-project-grid > [class*="col-"] {
  width: 100%;
  max-width: 100%;
  flex: none;
  padding: 0;
}

/* Equal heights. Grid items stretch to fill their row by default, but the card
   inside is a separate box — without height:100% it collapses to its content
   and a two-line title makes one card taller than its neighbours. The flex
   column then lets the content block absorb the slack, so all three cards in a
   row end flush regardless of title length. */
.sv-project-grid .project-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sv-project-grid .project-card__content {
  flex: 1 1 auto;
}

/* Fixed thumb height keeps the images aligned across the row; object-fit crops
   rather than distorting, since style.css:7717 stretches img to 100%x100%. */
.sv-project-grid .project-card__thumb {
  height: 300px;
  flex: none;
}

.sv-project-grid .project-card__thumb img {
  object-fit: cover;
}

@media (max-width: 991.98px) {
  .sv-project-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575.98px) {
  .sv-project-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Team section
   -------------------------------------------------------------------------- */

/* The .teamtwo.pt-376 override that used to live here is gone: the team block
   was swapped to the .teamthree variant, which uses plain .section-padding
   (120/100/80/60) and so is already equal top and bottom at every breakpoint.
   Nothing to override. */

/* --------------------------------------------------------------------------
   Mission Goals section — tab bullet list alignment
   -------------------------------------------------------------------------- */

/* The template spread four bullets with d-flex + justify-content-between, so
   labels of differing width landed at ragged positions and the second column
   never lined up. Those utilities are off the markup now; a two-column grid
   gives both columns a fixed track, so every arrow starts on the same x.
   The gap replaces .item__feature-list's li:not(:last-child) margin-bottom,
   which only applied to three of the four items and skewed the rows. */
.sv-tab-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 24px;
}

.sv-tab-list li,
.sv-tab-list li:not(:last-child) {
  margin-bottom: 0;
  align-items: flex-start;
}

/* Keep the 20px arrow circle from being squashed by a long label, and sit it on
   the first line's optical centre rather than the middle of a wrapped label. */
.sv-tab-list li i {
  flex: none;
  margin-top: 3px;
}

@media (max-width: 575.98px) {
  .sv-tab-list {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Mission Goals section — tab row on one line
   -------------------------------------------------------------------------- */

/* Three tabs at 20px with 37px side padding (style.css:4878) plus a 24px gap
   overrun the col-xl-6 they sit in, so the flex row wraps to two lines. Tighter
   padding and gap bring the row back under the column width; nowrap on the
   anchors stops a label breaking mid-word.
   Desktop only — below 1200px the column goes full width and the template's own
   flex-wrap:wrap is the right behaviour, since three tabs cannot fit a phone. */
@media (min-width: 1200px) {
  .wcutwo-tab .tab-menu ul {
    flex-wrap: nowrap;
    gap: 12px;
  }

  .wcutwo-tab .tab-menu ul li a {
    padding: 16px 22px;
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   About section — dealership highlight strip
   -------------------------------------------------------------------------- */

/* Pulls the APL Apollo dealership out of the body copy without adding height:
   badge and name sit on one row, so the strip costs ~56px, not a paragraph. */
.sv-brand-highlight {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 14px 18px;
  border-left: 4px solid #670d0f;
  border-radius: 0 var(--primary-radius) var(--primary-radius) 0;
  background: rgba(103, 13, 15, 0.06);
}

.sv-brand-highlight__badge {
  padding: 4px 12px;
  border-radius: 100px;
  background: #670d0f;
  color: var(--white-color);
  font-family: var(--title-font);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.sv-brand-highlight__title {
  margin-bottom: 0;
  font-family: var(--title-font);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  /* --secondary-color is the same gold as --primary-color (#AE8333) and only
     clears WCAG AA as large text, so this takes the near-black instead. */
  color: var(--black-color);
}

/* --------------------------------------------------------------------------
   About — four-segment photo wheel (.sv-photowheel)

   Replaces the template's two flattened PNGs in the right-hand column:
     assets/img/sections/about/about3-main-thumb.png  (the four-photo wheel)
     assets/img/sections/about/about3-play-video.png  (the centre badge)

   Geometry, sampled pixel-by-pixel off the original composite rather than
   eyeballed — the two facts that matter are easy to get wrong:
     - the CENTRE VOID is opaque white, NOT a transparent hole. It paints over
       the photos and over the maroon backdrop shape behind the wheel, leaving
       a white ring around the badge. Punching a real hole instead lets the
       backdrop bleed into the middle, which the original never does.
     - the GAPS between wedges ARE transparent, so the backdrop does show
       through those. White gaps and a transparent centre are both wrong.

   How the shape is produced, in three independent layers:
     1. OUTER edge    — border-radius + overflow:hidden on .sv-photowheel__disc.
     2. DIAGONAL gaps — each wedge is a clip-path triangle from the centre to
                        two corners, then translated outward along its own
                        bisector. Two triangles pulling apart at 45 degrees
                        leave a parallel-sided gap, which is what the original
                        PNG has. Perpendicular gap width is
                        --sv-wheel-gap x 1.41, so 20px reads as roughly 28px.
     3. CENTRE void   — .sv-photowheel::before, an opaque white disc painted
                        over the wedges, under the badge.
   -------------------------------------------------------------------------- */

.sv-photowheel {
  /* Footprint must match the composite this replaces EXACTLY: about3-main-thumb
     .png is 557x514, not square. .aboutthree__thumb-bgshape is positioned
     top:14% of .aboutthree__thumb (style.css:4785), so the thumb's height is
     what anchors the angled backdrop shape. Making the wheel square grew the
     thumb 43px and dropped the shape 6px out of register with the photos. */
  --sv-wheel-size: 557px;
  --sv-wheel-ratio: 557 / 514;
  /* Centre void diameter as a share of wheel WIDTH. Measured at 156px across
     (radius 78) on the 557-wide composite: 156 / 557 = 28%. */
  --sv-wheel-void: 28%;
  --sv-wheel-void-bg: #fff;
  /* Outward shift per wedge; visible gap is this x 1.41 (see note above). */
  --sv-wheel-gap: 20px;
  /* 126 / 557 — the badge PNG was 126x126 inside the 557-wide composite. */
  --sv-wheel-badge: 22.6%;
  --sv-wheel-badge-bg: #0f1626;
  --sv-wheel-play-bg: #ff5a1e;

  position: relative;
  width: var(--sv-wheel-size);
  max-width: 100%;
  aspect-ratio: var(--sv-wheel-ratio);
}

.sv-photowheel__disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
}

/* Centre void — opaque white, painted over the wedges and under the badge.
   The badge is 22.6% wide against this 28%, so a ~15px white ring shows around
   it, exactly as in the original composite. */
.sv-photowheel::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  width: var(--sv-wheel-void);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--sv-wheel-void-bg);
}

.sv-photowheel__seg {
  position: absolute;
  inset: 0;
  margin: 0;
}

.sv-photowheel__seg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Each wedge is the full square, cut to a triangle running from the centre out
   to two corners, then pushed away from the centre to open the gap. The part
   that overshoots the wheel is clipped by the disc, so the outer arc stays
   perfectly circular however far the wedge is translated. */
.sv-photowheel__seg--top {
  clip-path: polygon(50% 50%, 0 0, 100% 0);
  transform: translateY(calc(var(--sv-wheel-gap) * -1));
}

.sv-photowheel__seg--right {
  clip-path: polygon(50% 50%, 100% 0, 100% 100%);
  transform: translateX(var(--sv-wheel-gap));
}

.sv-photowheel__seg--bottom {
  clip-path: polygon(50% 50%, 100% 100%, 0 100%);
  transform: translateY(var(--sv-wheel-gap));
}

.sv-photowheel__seg--left {
  clip-path: polygon(50% 50%, 0 100%, 0 0);
  transform: translateX(calc(var(--sv-wheel-gap) * -1));
}

/* Centre badge — dark disc, rotating ring caption, orange play button. */
.sv-photowheel__badge {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  display: grid;
  place-items: center;
  width: var(--sv-wheel-badge);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--sv-wheel-badge-bg);
}

.sv-photowheel__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: sv-photowheel-spin 12s linear infinite;
}

/* textLength on the <textPath> is set to the path circumference (2 x pi x 36 =
   226 user units) so the caption always closes the loop exactly once, whatever
   font ends up resolving. Do not set a width here — let textLength do it. */
.sv-photowheel__ringtext {
  fill: var(--white-color, #fff);
  font-family: var(--title-font);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
}

.sv-photowheel__play {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  /* 58 / 126, taken off the badge PNG. */
  width: 46%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #670d0f;
}

@keyframes sv-photowheel-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sv-photowheel__ring {
    animation: none;
  }
}

/* The wheel is fixed-width to match the backdrop shape it sits against, so it
   has to step down before it can overflow the column. Gap scales with it —
   a 20px gap on a 320px wheel reads as a gash rather than a seam. */
@media (max-width: 1399.98px) {
  .sv-photowheel {
    --sv-wheel-size: 470px;
    --sv-wheel-gap: 17px;
  }
}

@media (max-width: 575.98px) {
  .sv-photowheel {
    --sv-wheel-size: 100%;
    --sv-wheel-gap: 12px;
  }
}





.aboutthree__thumb {
  position: relative;
}

.aboutthree__main-thumb {
  position: relative;
  z-index: 2;
}

.aboutthree__thumb-bgshape {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-35%, -35%);
  width: 526px;   /* match the SVG's viewBox width */
  height: 501px;  /* match the SVG's viewBox height */
  z-index: 1;      /* stays behind the disc */
}

.aboutthree__thumb-bgshape svg {
  width: 100%;
  height: 100%;
  display: block;
}

.sv-photowheel {
  position: relative;
  z-index: 2;
}


/* ===== Large mobile (≤767px) ===== */
@media (max-width: 767px) {
  .aboutthree__thumb {
    width: 340px;
    height: 325px;
    margin: 0 auto;
  }

  .aboutthree__thumb-bgshape {
    width: 340px;
    height: 325px;
  }

  .aboutthree__main-thumb {
    width: 340px;
    height: 325px;
  }

  .sv-photowheel {
    width: 300px;
    height: 300px;
  }

  .sv-photowheel__badge {
    width: 84px;
    height: 84px;
  }

  .sv-photowheel__play svg {
    width: 16px;
    height: 16px;
  }
}

/* ===== Small mobile (≤479px) ===== */
@media (max-width: 479px) {
  .aboutthree__thumb {
    width: 260px;
    height: 250px;
  }

  .aboutthree__thumb-bgshape {
    width: 260px;
    height: 250px;
  }

  .aboutthree__main-thumb {
    width: 260px;
    height: 250px;
  }

  .sv-photowheel {
    width: 230px;
    height: 230px;
  }

  .sv-photowheel__badge {
    width: 64px;
    height: 64px;
  }
}

/* ===== Tablet only (576px - 991px): hide the background shape ===== */
@media (min-width: 576px) and (max-width: 1024px) {
  .aboutthree__thumb-bgshape {
    display: none;
  }
}
/* ===== Tablet only (576px - 991px): hide the background shape ===== */
@media (min-width: 576px) and (max-width: 991px) {
  .aboutthree__thumb-bgshape {
    display: none;
  }
}

/* ===== Tablet only (576px - 991px) ===== */
@media (min-width: 576px) and (max-width: 1024px) {
  .aboutthree__thumb-bgshape {
    display: none;
  }

  .aboutthree__thumb {
    position: relative;
    width: 100%;
  }

  .aboutthree__main-thumb {
    position: static;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .sv-photowheel {
    margin: 0 auto;
  }

  .sv-photowheel__disc {
    margin: 0 auto;
  }
}


/* Extra bottom spacing */
.sv-fabrication-section {
    padding-top: 0px !important;
}

/* Tablet */
@media (max-width: 991px) {
    .sv-fabrication-section {
        padding-top: 0px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .sv-fabrication-section {
        padding-top: 0px;
    }
}

/* --------------------------------------------------------------------------
   "Our Story" 2x2 image grid — height matched to the copy column.

   style.css only styles .sv-story-card inside @media (max-width: 991.98px), so
   from 992px up the cards were unstyled: the photos fell back to their natural
   width, leaving ragged gaps between the two columns and no rounding at all.
   The card look is restated here for 992px and up.

   At xl, where the copy and the grid sit side by side, the inner Bootstrap row
   is switched to a 2x2 CSS grid with equal-height rows and the outer row to
   align-items:stretch — so the four photos together come out exactly as tall
   as the copy beside them, whatever that copy grows to.

   Do not edit style.css — it is compiled from SCSS (style.css.map).
   -------------------------------------------------------------------------- */
/* Square corners. style.css sets the radius with !important inside its own
   @media (max-width: 991.98px) block, so matching it here is the only way to
   clear it below 992px; about.css is the last stylesheet on the page, so equal
   specificity and equal !important resolves in this file's favour. */
.sv-story-card,
.sv-story-card img {
  border-radius: 0 !important;
}

@media (min-width: 992px) {
  .sv-story-grid {
    width: 100%;
  }

  .sv-story-card {
    position: relative;
    display: block;
    overflow: hidden;
    background-color: #f8f9fa;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }

  .sv-story-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
  }

  .sv-story-card:hover img {
    transform: scale(1.05);
  }
}

/* 992-1199 the columns stack, so there is no copy column height to match and
   the cards size themselves — same 4:3 the phone and tablet layout uses. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .sv-story-card {
    aspect-ratio: 4 / 3;
  }
}

@media (min-width: 1200px) {
  /* Bootstrap's utility carries !important, so overriding it needs one too. */
  .aboutthree .row.align-items-center {
    align-items: stretch !important;
  }

  /* Taken out of flow so the photos contribute nothing to the row's height —
     otherwise it is circular: the cards' height:100% cannot resolve during
     intrinsic sizing, so the grid falls back to the photos' natural heights,
     that becomes the row height, and the grid then fills it. The row would end
     up as tall as the photos rather than as tall as the copy.

     With the column empty in flow, the line height is the copy column's, the
     column stretches to it, and the grid fills the column. The insets are the
     Bootstrap gutter the column's own padding would otherwise supply. */
  .aboutthree .row > .col-xl-6.order-xl-2 {
    position: relative;
  }

  .sv-story-grid {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    /* the width:100% set above would win over the left/right pair */
    width: auto;
  }

  .sv-story-grid .row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    gap: 10px;
    height: 100%;
    margin: 0;
  }

  /* Bootstrap's flex column sizing and gutter padding are inert under grid,
     but the widths and paddings still apply — cleared so the grid tracks are
     what actually place the cards. */
  .sv-story-grid .row > [class*="col-"] {
    width: auto;
    max-width: none;
    padding: 0;
    margin: 0;
  }

  .sv-story-card {
    height: 290px;
  }

  /* The grid is pinned to the copy column's full height, so anything the copy
     column carries below its last element pushes the photos past it.

     .custom-btn is inline-flex, so it sits on a text baseline and the line box
     around it adds the strut's descender leading underneath — height that
     belongs to the column but shows as nothing. Laying the wrap out as a flex
     column removes the line boxes entirely, so the button's bottom edge IS the
     column's bottom edge and the photos finish level with it.

     align-items:stretch keeps the copy blocks full width; only the button,
     which is width:max-content, is pulled back to the left. */
  .aboutthree__content-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .aboutthree__content-wrap > .custom-btn {
    align-self: flex-start;
  }
}