/* ============================================================
   HOME (DeCargo replica) — measured from the live demo
   (modern.creativemox.com/decargo/, 1440px viewport, 2026-10-19).
   Demo values are noted beside each rule. Wyvern swaps:
     colour  orange #F9A634 -> --red · navy #013A71 -> --ink
             dark red #901027 -> --red-active · #F9F9F9 -> --tint · #E9EAED -> --dc-grey
     type    Fjalla One (display) -> Inter Tight 600 · Inter body stays Inter Tight
             Roboto Slab italic (quotes) -> Spectral italic; DeCargo italic eyebrow -> became the site-wide .eyebrow in base.css (2026-10-19)
   Motion: [data-anim] entrance (fadeInLeft/Right/Up/Down), ring count-up / fill and the
   hero slider live in assets/js/home-decargo.js.
   Removed after approval (2026-10-19): tracking panel, 25+ box, numbers band, play button,
   testimonials, newsletter. Polished with the design-review skill the same day.
   ============================================================ */
.dc{overflow-x:clip;--dc-grey:var(--surface-2);--dc-shadow:var(--shadow-card);--dc-accent-night:#FF5A52}
.dc p:not(.eyebrow){color:var(--muted)}

/* Type (demo: h2 Fjalla 49/54 navy · eyebrow Libre Baskerville italic 16 600 +1.5px dark red ·
   card titles Fjalla 28 · body Inter 16/24 #5A5A5A) */
.dc h2{font:600 clamp(32px,3.4vw,49px)/1.1 var(--sans);letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.dc h3{font:600 clamp(21px,1.9vw,26px)/1.15 var(--sans);letter-spacing:-.02em;color:var(--ink)}
/* Eyebrows: the site-wide .eyebrow (base.css); the paragraph rules here skip it */
.dc p:not(.eyebrow),.dc li{font-size:16px;line-height:1.5}

/* Section rhythm (demo: 5em top / 7em bottom = 80 / 112) */
.dc-sec{position:relative;padding:80px 0 112px}
.dc-head{max-width:640px;margin:0 auto 48px;text-align:center;display:grid;justify-items:center;gap:14px}
.dc-two{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.dc-copy{display:grid;gap:18px;justify-items:start}
.dc-rule{display:block;width:60px;height:2px;margin-top:6px;background:var(--red)}

/* Photo layers: .dc-bg sits behind the section, overlays per section below */
.dc-hero,.dc-dark,.dc-services{position:relative;isolation:isolate}
.dc-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.dc-bg img{width:100%;height:100%;object-fit:cover}
.dc-bg::after{content:"";position:absolute;inset:0}
.dc-dark{color:#fff}
.dc-dark h2,.dc-dark h3{color:#fff}
.dc .dc-dark p:not(.eyebrow){color:rgba(255,255,255,.88)} /* .dc prefix: must outrank ".dc p:not(.eyebrow)" (grey body text) */
/* demo: radial-gradient(at 0% 100%, #901027 0%, #013A71 75%) at .9 / .7 opacity */
.dc-dark .dc-bg::after{background:radial-gradient(at 0% 100%,var(--red-active) 0%,var(--night) 75%);opacity:.88}
.dc-adv .dc-bg::after{opacity:.75}
/* demo video: radial-gradient(at 0% 100%, navy 0%, navy@.26 100%) at .7 */
.dc-bg.soft::after{background:radial-gradient(at 0% 100%,var(--night) 0%,rgba(11,14,18,.25) 100%);opacity:.85}
/* demo services: linear-gradient(#fff 30%, rgba(255,255,255,.89) 100%) over the photo */
.dc-bg.light::after{background:linear-gradient(#fff 30%,rgba(255,255,255,.89) 100%)}

/* 1 + 2 · Hero slider (demo hero: padding 160 / 144, H1 Fjalla 70/70 uppercase, 656px column).
   Slides stack in one grid cell and crossfade; the active photo eases from 108% to 100% while it plays. */
.dc-slider{--dc-dur:7s}
.dc-hero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);color:#fff;background:var(--night);
  /* full first screen below the header, like Maersk / DP World / Kuehne+Nagel (measured 2026-10-19);
     never shorter than 640 (small laptops) or taller than 960 (tall monitors) */
  min-height:clamp(640px,calc(100vh - var(--bar)),960px);min-height:clamp(640px,calc(100svh - var(--bar)),960px)}
.dc-slide{grid-area:1/1;position:relative;display:flex;align-items:center;isolation:isolate;opacity:0;visibility:hidden;transition:opacity .9s var(--ease),visibility .9s}
.dc-slide.is-on{opacity:1;visibility:visible}
.dc-slide .dc-bg::after{background:linear-gradient(90deg,rgba(11,14,18,.75) 0%,rgba(11,14,18,.35) 70%)}
.dc-slide .dc-bg img{transform:scale(1.08);transition:transform calc(var(--dc-dur) + 1s) linear}
.dc-slide.is-on .dc-bg img{transform:scale(1)}
.dc-slide .container{width:100%;padding-top:96px;padding-bottom:96px} /* no slide bar any more: even top/bottom */
.dc-hero-copy{max-width:780px;display:grid;gap:22px;justify-items:start}
.dc-hero-copy>*{transition:opacity .7s var(--ease),transform .7s var(--ease)}
.dc-slide:not(.is-on) .dc-hero-copy>*{opacity:0;transform:translateY(24px)}
.dc-slide.is-on .dc-hero-copy>:nth-child(2){transition-delay:.15s}
.dc-slide.is-on .dc-hero-copy>:nth-child(3){transition-delay:.3s}
.dc-slide.is-on .dc-hero-copy>:nth-child(4){transition-delay:.45s}
.dc .dc-hero-title{font:600 clamp(44px,4.9vw,70px)/1 var(--sans);letter-spacing:-.03em;text-transform:uppercase;color:#fff;text-wrap:balance}
.dc .dc-hero-copy p:not(.eyebrow){color:rgba(255,255,255,.9);max-width:600px;font-size:18px}
.dc-hero .btn-p{margin-top:12px}
/* Controls inside the banner, like the live home page: ‹ arrow, one dot per slide, › arrow, bottom left on the
   content edge. Arrows 48px, dots 10px drawn inside a 44px button (tap target). Hidden until the script runs. */
.dc-slider{position:relative}
.dc-slider .dc-slide .container{padding-bottom:144px}          /* room for the controls under the button */
.dc-hero-ctrl{position:absolute;left:0;right:0;bottom:40px;z-index:2;display:flex;align-items:center;gap:8px;pointer-events:none}
.dc-hero-ctrl[hidden]{display:none}
.dc-hero-ctrl>*{pointer-events:auto}
.dc-arrow{display:grid;place-items:center;width:48px;height:48px;border-radius:0;border:1px solid rgba(255,255,255,.55);
  background:rgba(11,14,18,.35);color:#fff;cursor:pointer;touch-action:manipulation;transition:background .2s var(--ease),border-color .2s var(--ease)}
.dc-arrow[data-go="-1"] svg{transform:scaleX(-1)}
.dc-arrow:hover{background:var(--red);border-color:var(--red)}
.dc-dots{display:flex}
.dc-dot{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;touch-action:manipulation}
.dc-dot::before{content:"";width:10px;height:10px;border-radius:50%;border:2px solid #fff;background:transparent;transition:background .2s var(--ease),transform .2s var(--ease)}
.dc-dot:hover::before{background:rgba(255,255,255,.6)}
.dc-dot[aria-current="true"]::before{background:#fff;transform:scale(1.2)}
.dc-arrow:focus-visible,.dc-dot:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* demo "Learn more": Inter 12 600 +1px uppercase, red; underline appears on hover */
.dc-more{justify-self:start;font:600 12px/1.5 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--red);border-bottom:1px solid transparent;transition:border-color .4s}
.dc-more{position:relative}
.dc-more::before{content:"";position:absolute;inset:-14px -8px}  /* 44px tap target, same look */
.dc-more:hover,.dc-more:focus-visible{border-bottom-color:currentColor}
.dc-more:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* 3 · About (demo: 112 / 112; big photo + small photo overlapping bottom-right) */
.dc-about{padding:112px 0}
.dc-collage{position:relative;padding:0 64px 72px 0}
.dc-collage .big{width:86%;aspect-ratio:1;object-fit:cover}
.dc-collage .small{position:absolute;right:0;bottom:0;width:46%;aspect-ratio:1;object-fit:cover;border:10px solid #fff;box-shadow:var(--dc-shadow)}
/* Desktop: the collage takes the height of the text column (as on the DeCargo reference): the big photo starts level
   with the eyebrow and the small photo ends level with the button, instead of a square that overshoots both. */
@media (min-width:1025px){
  .dc-two:has(> .dc-collage){align-items:stretch}
  .dc-collage{min-height:420px}
  /* out of flow, so the text column alone sets the row height */
  .dc-collage .big{position:absolute;top:0;left:0;width:86%;height:calc(100% - 72px);aspect-ratio:auto}
  .dc-collage .small{width:auto;height:min(62%,300px)}
}
.dc-points{list-style:none;margin:6px 0 10px;padding:0 0 0 32px;display:grid;gap:22px}
.dc-points li{position:relative}
.dc-points li::before{content:"";position:absolute;left:-32px;top:3px;width:16px;height:16px;background:var(--red);
  clip-path:polygon(0 30%,55% 30%,55% 0,100% 50%,55% 100%,55% 70%,0 70%);transform:rotate(-45deg)}
/* .dc-points-plain: no arrow bullet, headings flush with the paragraph (user 2026-10-23) */
.dc-points-plain{padding-left:0}
.dc-points-plain li::before{content:none}
.dc-points h3{font-size:20px;margin-bottom:6px}
.dc-points p{font-size:15px}

/* 5 · Services (demo: 4 x 300px cards, gap 20, shadow, image 200 high zooms 1.1, body 25px, 4px navy bar) */
.dc-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.dc-svc{background:#fff;box-shadow:var(--dc-shadow);display:flex;flex-direction:column}
.dc-svc-img{height:200px;overflow:hidden}
.dc-svc-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.dc-svc-body{flex:1;padding:25px;border-bottom:4px solid var(--ink);display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.dc-svc-body h3{transition:color .4s}
.dc-svc-body p{font-size:15px}
.dc-svc-body .btn-p{margin-top:auto}
.dc-svc:hover img,.dc-svc:focus-within img{transform:scale(1.1)}
.dc-svc:hover h3,.dc-svc:focus-within h3{color:var(--red)}
.dc-svc .btn-p{transition:background .4s}
.dc-svc:hover .btn-p,.dc-svc:focus-within .btn-p{background:var(--ink)}
.dc-svc:hover .btn-p.ink,.dc-svc:focus-within .btn-p.ink{background:var(--red)}   /* charcoal at rest, red only on the card in use */

/* 6 · Advantages (demo: 112 / 112; 2 x 2 rings 136px, accent stroke on a dark track, white numbers) */
.dc-adv{padding:112px 0}
.dc-rings{display:grid;grid-template-columns:repeat(2,auto);justify-content:center;gap:56px 88px}
/* --v = how far the ring is drawn; JS animates it from 0 to --p when the ring scrolls into view */
.dc-ring{--v:var(--p);position:relative;display:grid;justify-items:center;gap:16px}
.dc-ring i{display:block;width:136px;aspect-ratio:1;border-radius:50%;
  background:conic-gradient(var(--dc-accent-night) calc(var(--v) * 1%),rgba(255,255,255,.18) 0);
  -webkit-mask:radial-gradient(closest-side,transparent 88%,#000 89%);mask:radial-gradient(closest-side,transparent 88%,#000 89%)}
.dc-ring b{position:absolute;top:0;left:50%;width:136px;height:136px;transform:translateX(-50%);display:grid;place-items:center;font:600 30px/1 var(--sans);color:#fff}
.dc-ring span{font:600 16px/1.2 var(--sans);color:#fff}

/* 7 · Why choose us (demo: 80 / 112; header row split; 2 x 2 icon boxes, icon 50px accent, title 28) */
.dc-why-top{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;margin-bottom:48px}
.dc-why-top>div{display:grid;gap:10px}
.dc-why-top>p{padding-top:6px;max-width:560px}
.dc-why-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px 64px}
.dc-why-item{display:grid;grid-template-columns:52px 1fr;gap:18px;align-items:start}
.dc-ic{width:52px;height:52px;color:var(--red)}
.dc-why-item h3{margin-bottom:10px}
.dc-why-item p{font-size:15px}
/* Home Why Wyvern, rebuilt 2026-10-25 (.is-proof only: About and SHEQ keep the rules above).
   DP World "Why DP World?" benefits block (contract-logistics page, measured at 1440px): centred label and heading,
   64px to the columns; equal columns, content left-aligned, icon / 24 / title / 20 / text; a 1px rule on the right of
   every column but the last, fading upward. Phones and tablets: icon-left rows split by rules fading to the right.
   The grid is pulled out by the column padding so the first column lines up with the site grid (header logo). */
.dc-why.is-proof .dc-why-top{display:flex;flex-direction:column;align-items:center;gap:0;max-width:820px;margin:0 auto 64px;text-align:center}
.dc-why.is-proof .dc-why-top .eyebrow{margin-bottom:var(--eb-gap);padding:0}
.dc-why.is-proof .dc-why-top>p:not(.eyebrow){max-width:60ch;margin:20px 0 0;padding:0;font-size:18px;line-height:1.6;color:var(--ink-2)}
.dc-why.is-proof .dc-why-grid{list-style:none;margin:0 -32px;padding:0;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.dc-why.is-proof .dc-why-item{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:0 32px;text-align:left}
.dc-why.is-proof .dc-why-item:not(:last-child)::after{content:"";position:absolute;top:0;right:0;width:1px;height:100%;
  background:linear-gradient(to top,rgba(91,100,112,.55),var(--line-strong),rgba(228,231,235,0))}
.dc-why.is-proof .dc-ic{width:52px;height:52px;margin-bottom:24px}
.dc-why.is-proof .dc-why-item h3{margin:0 0 20px}
.dc-why.is-proof .dc-why-item p{margin:0;font-size:16px;line-height:1.5;color:var(--ink-2)}
/* Whole column clickable, no visible link (user 2026-10-25: "remove the CTA and keep the hover designs").
   One link per column; its ::after covers the column (the li is position:relative) and its label is visually hidden
   (.vh), so screen readers still hear the destination. Hover / focus: the title turns red; keyboard focus draws the
   focus ring around the whole column (on the ::after), since the link itself has no visible box. */
.dc-why.is-proof .dc-why-link::after{content:"";position:absolute;inset:0;z-index:1}
.dc-why.is-proof .dc-why-link:focus-visible{outline:none}
.dc-why.is-proof .dc-why-link:focus-visible::after{outline:2px solid var(--focus);outline-offset:8px}
.dc-why.is-proof .dc-why-item h3{transition:color .2s var(--ease-press)}
.dc-why.is-proof .dc-why-item:hover h3,.dc-why.is-proof .dc-why-item:focus-within h3{color:var(--red)}
@media (prefers-reduced-motion:reduce){ .dc-why.is-proof .dc-why-item h3{transition:none} }
@media (max-width:1024px){
  .dc-why.is-proof .dc-why-top{margin-bottom:48px}
  .dc-why.is-proof .dc-why-grid{grid-template-columns:1fr;margin:0}
  .dc-why.is-proof .dc-why-item{display:grid;grid-template-columns:52px 1fr;column-gap:24px;align-items:start;padding:0 0 32px;margin-bottom:32px}
  .dc-why.is-proof .dc-why-item:last-child{padding-bottom:0;margin-bottom:0}
  .dc-why.is-proof .dc-why-item:not(:last-child)::after{top:auto;bottom:0;width:100%;height:1px;
    background:linear-gradient(to right,rgba(91,100,112,.55),var(--line-strong),rgba(228,231,235,0))}
  .dc-why.is-proof .dc-ic{grid-row:span 3;margin:0}
  .dc-why.is-proof .dc-why-item h3{margin-bottom:12px}
}
@media (max-width:640px){
  .dc-why.is-proof .dc-why-top>p:not(.eyebrow){font-size:17px}
  .dc-why.is-proof .dc-why-item{grid-template-columns:40px 1fr;column-gap:16px}
  .dc-why.is-proof .dc-ic{width:40px;height:40px}
}

/* 8 · Industries (demo: #E9EAED band, dotted world map at 20%; 3 x 407px boxes, gap 20, 332 high) */
.dc-ind{background:var(--dc-grey);overflow:hidden}
.dc-ind::before{content:"";position:absolute;inset:0;opacity:.35;pointer-events:none;
  background-image:radial-gradient(circle,#B7BDC6 1.6px,transparent 2px);background-size:12px 12px;
  -webkit-mask:radial-gradient(ellipse 60% 45% at 30% 40%,#000 40%,transparent 75%),radial-gradient(ellipse 40% 40% at 75% 55%,#000 35%,transparent 70%);
  mask:radial-gradient(ellipse 60% 45% at 30% 40%,#000 40%,transparent 75%),radial-gradient(ellipse 40% 40% at 75% 55%,#000 35%,transparent 70%)}
.dc-ind .container{position:relative}
.dc-ind .dc-head{max-width:820px}
.dc-flips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.dc-flip{position:relative;height:332px;background:#fff;overflow:hidden;outline:none}
.dc-flip:focus-visible{box-shadow:0 0 0 3px var(--focus)}
.dc-face{position:absolute;inset:0;padding:40px 36px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;transition:transform .6s ease-in-out}
.dc-face p{font-size:15px}
/* demo back: radial-gradient(at bottom right, blue 0%, navy 70%) -> red / night */
.dc-face.back{background:radial-gradient(at 100% 100%,var(--red) 0%,var(--night) 70%);transform:translateY(100%)}
.dc-face.back h3{color:#fff}
.dc-face.back p{color:rgba(255,255,255,.88)}
.dc-face.back .btn-p{background:#fff;color:var(--ink)}
.dc-face.back .btn-p:hover{background:var(--red);color:#fff}
.dc-flip:hover .back,.dc-flip:focus-within .back{transform:none}
.dc-flip:hover .front,.dc-flip:focus-within .front{transform:translateY(-100%)}

/* 9 · Photo band (demo: 112 / 112; text left; the play button was removed) */
.dc-video .container{padding-top:112px;padding-bottom:112px}

/* 10 · Portfolio (demo: #F9F9F9; 3 cards, image 270 high, tag top-right, 4px bar left of the copy) */
.dc-work{background:var(--tint)}
/* News slider: track = native horizontal scroll with snap, 3 cards per view on desktop (same pattern as the
   service-page .spg-track). Arrows bottom right, the hero .dc-arrow recoloured for the light section. */
.dc-works{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2 * 30px) / 3);gap:30px;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:4px;margin:-4px}
.dc-works::-webkit-scrollbar{display:none}
.dc-works:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.dc-wk{scroll-snap-align:start}
.dc-wk-body p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dc-news-ctl{display:flex;justify-content:flex-end;gap:12px;margin-top:32px}
.dc-news-ctl .dc-arrow{background:#fff;border-color:var(--line-strong);color:var(--ink)}
.dc-news-ctl .dc-arrow:hover:not(:disabled){background:var(--red);border-color:var(--red);color:#fff}
.dc-news-ctl .dc-arrow:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.dc-news-ctl .dc-arrow:disabled{opacity:.4;cursor:default}
.dc-wk{background:#fff;display:flex;flex-direction:column}
.dc-wk-img{position:relative;height:270px;overflow:hidden}
.dc-wk-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.dc-wk:hover img,.dc-wk:focus-within img{transform:scale(1.1)}
.dc-tag{position:absolute;top:12px;right:12px;background:var(--red);color:#fff;padding:6px 10px;font:600 13px/1 var(--sans)}
.dc-wk-body{flex:1;margin:40px 24px 32px 0;padding-left:24px;border-left:4px solid var(--ink);display:grid;gap:14px;align-content:start}
.dc-wk-body h3{transition:color .4s}
.dc-wk:hover h3,.dc-wk:focus-within h3{color:var(--red)}
.dc-wk-body p{font-size:15px}
.dc-wk-body .dc-more{margin-top:6px}

/* 4 · Client logos ("Trusted by") between About and Services: greyscale, colour on hover */
.dc-trust{background:var(--tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dc-trust .container{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:56px;padding-top:44px;padding-bottom:44px}
.dc .dc-trust h2{font:500 15px/1.2 var(--sans);letter-spacing:0;color:var(--muted);white-space:nowrap}
.dc-trust ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px;align-items:center}
.dc-trust li{height:48px;display:grid;place-items:center;border:1px dashed var(--line-strong);font:500 var(--fs-label)/1 var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--subtle)}
.dc-trust li:has(img){border:0}
.dc-trust img{max-height:36px;width:auto;filter:grayscale(1);opacity:.7;transition:filter .3s,opacity .3s}
.dc-trust li:hover img{filter:none;opacity:1}

/* Entrance animations (demo: Elementor fadeInLeft / Right / Up / Down, zoomIn, ~1.25s).
   Only when JS is running; without JS everything is visible. */
.dc-js [data-anim]{opacity:0;transition:opacity 1s var(--ease),transform 1s var(--ease)}
.dc-js [data-anim="left"]{transform:translateX(-60px)}
.dc-js [data-anim="right"]{transform:translateX(60px)}
.dc-js [data-anim="up"]{transform:translateY(60px)}
.dc-js [data-anim="down"]{transform:translateY(-40px)}
.dc-js [data-anim].is-in{opacity:1;transform:none}
.dc-js .dc-collage .small.is-in{transform:none}

@media (prefers-reduced-motion:reduce){
  .dc-js [data-anim]{opacity:1;transform:none;transition:none}
  .dc-works{scroll-behavior:auto}
  .dc-svc-img img,.dc-wk-img img,.dc-face,.dc-slide,.dc-slide .dc-bg img,.dc-hero-copy>*{transition:none}
  .dc-slide .dc-bg img{transform:none}
}

/* Tablet (demo: <=1024px — 2 columns, stacked two-up sections) */
@media (max-width:1024px){
  .dc-sec{padding:64px 0 80px}
  .dc-about,.dc-adv{padding:80px 0}
  .dc-slide .container{padding-top:80px;padding-bottom:80px}
  .dc-slider .dc-slide .container{padding-bottom:128px}
  .dc-two,.dc-why-top{grid-template-columns:1fr;gap:48px}
  .dc-collage{max-width:620px}
  .dc-cards,.dc-flips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dc-works{grid-auto-columns:calc((100% - 24px) / 2.3);gap:24px}
  .dc-video .container{padding-top:80px;padding-bottom:80px}
  .dc-trust .container{grid-template-columns:1fr;row-gap:20px;justify-items:center}
  .dc-trust ul{width:100%;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
}

/* Mobile (demo: <=767px — 1 column) */
@media (max-width:767px){
  .dc-sec{padding:56px 0 64px}
  .dc-about,.dc-adv{padding:64px 0}
  .dc-hero{min-height:max(540px,calc(85vh - var(--bar)));min-height:max(540px,calc(85svh - var(--bar)))}
  .dc-slide .container{padding-top:64px;padding-bottom:64px}
  .dc-slider .dc-slide .container{padding-bottom:104px}
  .dc-hero-ctrl{bottom:24px}
  .dc .dc-hero-title{font-size:clamp(32px,10.5vw,44px)}
  .dc .btn-p.sm{--h:44px}
  .dc-collage{padding:0 32px 48px 0}
  .dc-cards,.dc-flips,.dc-why-grid{grid-template-columns:1fr}
  .dc-works{grid-auto-columns:84%;gap:16px}
  .dc-rings{gap:40px 32px}
  .dc-ring i,.dc-ring b{width:112px;height:112px}
  .dc-trust ul{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .dc-trust li{height:44px}
}

/* Very small phones: three text labels no longer fit, so show the 01 / 03 counter with plain
   progress lines; the labels stay readable to screen readers */
@media (max-width:399px){
}
.dc-all{margin:40px 0 0;text-align:center}

/* Marked photo slot on .dc-svc cards (industries + services) until real photos exist. Same hatch as the News slots. */
.dc-svc-img.in-slot{display:grid;place-items:center;align-content:center;gap:10px;background:repeating-linear-gradient(135deg,var(--hover) 0 12px,var(--surface-3) 12px 24px);border-bottom:1px dashed var(--line-strong);color:var(--muted)}
.in-slot svg{width:40px;height:40px;color:var(--subtle)}
.in-slot span{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}

/* Trailer cards (trailers/, Road Transport Vehicles tab): the same .dc-svc card, but the picture is a technical side
   drawing, contained on white with breathing room instead of cropped like a photo (user 2026-10-21: one uniform overview). */
.dc-svc-img.is-drawing{display:grid;place-items:center;padding:24px 20px;background:#fff;border-bottom:1px solid var(--line)}
.dc-svc-img.is-drawing img{object-fit:contain}