/*
 * SyanTech Editorial Layout • non-destructive typography, containers and visual storytelling.
 * Does not modify media URLs, post content, WPBakery shortcodes or theme settings.
 * Scoped against WPBakery's stretch_row_content_no_spaces, including existing saved rows.
 */
:root{--sy-page-gutter:clamp(22px,4.2vw,78px);--sy-section-ink:#202329;--sy-visual-line:rgba(239,123,74,.26)}
html,body{max-width:100%;overflow-x:clip}

/* Backgrounds may remain full-bleed. All editable text, cards and visuals stay centered. */
body .sy-home-wpb-content .sy-bakery-block > .sy-container,
body .sy-home-wpb-content .vc_row .sy-bakery-block > .sy-container,
body .sy-bakery-block > .sy-container,
body .sy-section > .sy-container,
body .sy-final-cta > .sy-container {
  box-sizing:border-box!important;
  width:calc(100% - (2 * var(--sy-page-gutter)))!important;
  max-width:var(--sy-container,1240px)!important;
  margin-inline:auto!important;
  padding-inline:0!important;
  position:relative;
}
/* Legacy [sy_cards] / [sy_projects] shortcodes have no surrounding section container. */
body .sy-cards-grid.sy-bakery-legacy-grid,
body .sy-home-wpb-content .sy-cards-grid.sy-bakery-legacy-grid {
  width:calc(100% - (2 * var(--sy-page-gutter)))!important;
  max-width:var(--sy-container,1240px)!important;
  margin-inline:auto!important;
}
/* Ensure inner rows cannot be stretched a second time by builder grid rules. */
.sy-bakery-block .sy-cards-grid,.sy-bakery-block .sy-projects-grid,
.sy-bakery-block .sy-sectors-grid,.sy-bakery-block .sy-process-list {
  box-sizing:border-box;min-width:0;max-width:100%;
}
.sy-bakery-row > .vc_column_container,
.sy-bakery-row > .vc_column_container > .vc_column-inner {
  width:100%;max-width:100%;box-sizing:border-box;
}
.sy-bakery-row .wpb_wrapper > .sy-bakery-block {width:100%;max-width:100%;}
.sy-bakery-row .wpb_wrapper > .sy-cards-grid {margin-block:25px 42px}

/* Editorial heading system: section numbers become a visual accent, not the only graphic. */
.sy-section-head{max-width:860px;margin-bottom:clamp(29px,4vw,52px);position:relative}
.sy-section-head .eyebrow,.sy-section-head .sy-overline {
  display:inline-flex;align-items:center;gap:13px;letter-spacing:.11em;font-size:12px;font-weight:800;
  margin-bottom:16px;color:var(--sy-orange);
}
.sy-section-head .eyebrow::before,.sy-section-head .sy-overline::before {
  content:"";display:inline-block;inline-size:32px;block-size:2px;background:var(--sy-orange);flex:0 0 32px;
}
.sy-section-head h2 {font-size:clamp(29px,3.45vw,48px);line-height:1.32;overflow-wrap:break-word;max-width:100%}
.sy-ar .sy-section-head h2{line-height:1.52}
.sy-section-head p{font-size:15px;line-height:1.85;max-width:710px}

/* Modern editorial service and project cards; preserve original images and image crops. */
.sy-cards-grid,.sy-projects-grid,.sy-bakery-card-grid{gap:clamp(17px,2.1vw,28px)}
.sy-card,.sy-bakery-card {
  border:1px solid #e6e8eb;border-radius:12px;overflow:hidden;
  box-shadow:0 10px 36px rgba(12,19,30,.055);background:#fff;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
  position:relative;min-width:0;
}
.sy-card:hover,.sy-bakery-card:hover {
  transform:translateY(-5px);border-color:rgba(239,123,74,.56);
  box-shadow:0 19px 50px rgba(24,32,46,.12);
}
.sy-card-picture,.sy-card-photo-wrap {
  display:block;position:relative;overflow:hidden;background:#e8e9ec;
}
.sy-card-photo-wrap img,.sy-bakery-card .sy-card-photo-wrap > img {
  display:block;aspect-ratio:1.64;width:100%;height:auto;object-fit:cover;
  transition:transform .4s ease;
}
.sy-card-picture::after,.sy-card-photo-wrap::after {
  content:"";position:absolute;inset:auto 0 0;height:34%;
  background:linear-gradient(0deg,rgba(18,22,29,.23),transparent);
  pointer-events:none;
}
.sy-card:hover img,.sy-bakery-card:hover img{transform:scale(1.045)}
.sy-bakery-card .sy-card-photo-icon{
  display:grid;place-items:center;position:absolute;inset:auto auto -1px 22px;
  width:54px;height:54px;background:var(--sy-orange);color:#202327;z-index:2;
  border-radius:10px 10px 0 0;box-shadow:0 8px 20px #0002;
}
.sy-ar .sy-bakery-card .sy-card-photo-icon{inset:auto 22px -1px auto}
.sy-card-body,.sy-bakery-card-body{padding:clamp(19px,2.2vw,29px)}
.sy-bakery-card-body h3,.sy-card-body h3{font-size:clamp(17px,1.5vw,21px);font-weight:800;line-height:1.5}
.sy-bakery-card-body p,.sy-card-body p{font-size:14px;line-height:1.9;color:#6d727a}
.sy-card-more,.sy-bakery-card-body a,.sy-card-body .sy-link{
  display:inline-flex;gap:9px;align-items:center;color:#e46f3e;font-size:13px;font-weight:800;
  padding-bottom:4px;border-bottom:1px solid rgba(239,123,74,.32);
}
.sy-card-more span{transition:transform .2s}.sy-bakery-card:hover .sy-card-more span{transform:translate(2px,-2px)}
.sy-ar .sy-bakery-card:hover .sy-card-more span{transform:translate(-2px,-2px)}
.sy-card-icon{background:#fff4ec;min-height:178px;justify-content:center;padding:40px!important}
.sy-card-icon svg{width:42px;height:42px}

/* Service-sector infographic: icon-led cards + subtle architectural guide rails. */
.sy-sectors-section,.sy-bakery-sectors.sy-infographic {
  background:#1c2026;color:#f5f6f7;
  background-image:radial-gradient(ellipse at 95% 0%,rgba(239,123,74,.13),transparent 52%),
    linear-gradient(135deg,transparent 93%,rgba(239,123,74,.045) 93%);
}
.sy-sectors-section .sy-section-head h2{color:#f7f8fa}
.sy-sectors-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;border:0}
.sy-sectors-grid > div,.sy-sectors-grid > .sy-sector-card {
  position:relative;min-height:235px;padding:clamp(25px,2.5vw,36px);
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.055);
  border-radius:13px;display:flex;align-items:flex-start;flex-direction:column;
  overflow:hidden;transition:border-color .2s,transform .2s;
}
.sy-sectors-grid > div:hover,.sy-sectors-grid > .sy-sector-card:hover{
  border-color:rgba(239,123,74,.58);transform:translateY(-3px)
}
.sy-sectors-grid > div::after,.sy-sectors-grid > .sy-sector-card::after {
  content:"";width:48px;height:3px;background:var(--sy-orange);
  position:absolute;inset:auto auto 0 0;
}
.sy-ar .sy-sectors-grid > div::after,.sy-ar .sy-sectors-grid > .sy-sector-card::after {inset:auto 0 0 auto}
.sy-sectors-grid h3{color:#f7f8fa;margin:10px 0 12px;font-size:20px}
.sy-sectors-grid p{color:#c6c9cf;line-height:1.95;margin:0}
.sy-sector-card-top{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px}
.sy-feature-icon,.sy-step-icon{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 56px;
  width:56px;height:56px;border:1px solid rgba(239,123,74,.38);
  border-radius:13px;background:rgba(239,123,74,.12);color:var(--sy-orange);
}
.sy-sectors-grid > div > .sy-feature-icon{margin-bottom:8px}
.sy-sectors-grid b,.sy-sector-card .sy-card-number{
  font-size:12px;color:var(--sy-orange);font-weight:850;letter-spacing:.11em;
  margin:0 0 2px;
}
.sy-sector-photo{width:100%;max-height:130px;overflow:hidden;margin:18px 0 0;border-radius:9px}
.sy-sector-photo img{width:100%;max-height:130px;object-fit:cover;display:block}

/* Engineering process: step tiles, dotted guide line and meaningful pictograms. */
.sy-process-section{background:#f7f8f9;position:relative}
.sy-process-list{
  padding:0;margin:0;list-style:none;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;
}
.sy-process-list > li,.sy-process-step {
  list-style:none;position:relative;min-width:0;padding:25px 22px 26px;
  border:1px solid #e1e3e7;background:#fff;border-radius:13px;
  box-shadow:0 6px 18px rgba(12,19,30,.035);
  display:flex;flex-direction:column;align-items:flex-start;
  transition:border-color .2s,transform .2s;
}
.sy-process-list > li::before {
  content:"";position:absolute;inset-inline-start:-12px;top:43px;
  width:10px;height:2px;background:var(--sy-orange);opacity:.42;
}
.sy-process-list > li:nth-child(4n + 1)::before{display:none}
.sy-process-list > li:hover{border-color:rgba(239,123,74,.75);transform:translateY(-2px)}
.sy-process-list .sy-step-icon{width:56px;height:56px;margin-bottom:17px;flex:0 0 56px}
.sy-process-list .sy-step-number{
  color:var(--sy-orange);font-size:12px;font-weight:900;letter-spacing:.16em;
  padding:0 0 10px;margin:0 0 10px;border-bottom:2px solid rgba(239,123,74,.25);
}
.sy-process-list h3{font-size:16px;line-height:1.65;margin:0;color:#23262c;font-weight:800}
.sy-process-list p{margin:12px 0 0;color:#6d727a;font-size:13px;line-height:1.9}

/* Supporting infographics that may also be placed directly in WPBakery. */
.sy-values-grid,.sy-icon-boxes{gap:18px}
.sy-value,.sy-icon-box{
  border:1px solid #e4e6e9;border-radius:12px;background:#fff;
  box-shadow:0 6px 26px rgba(20,25,35,.045);
  min-width:0;
}
.sy-icon-box > span{display:inline-grid;place-items:center;min-width:48px;min-height:48px;
  color:var(--sy-orange);background:#fff1e9;border-radius:12px;font-size:24px}
.sy-values-grid .sy-value{position:relative;overflow:hidden}
.sy-values-grid .sy-value::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--sy-orange)}
.sy-bakery-cta .sy-container{padding-block:0}

/* Responsive layout – WPBakery's full-width row must never cancel this gutter. */
@media(max-width:1100px){
  .sy-sectors-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sy-process-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sy-process-list > li:nth-child(4n + 1)::before{display:block}
  .sy-process-list > li:nth-child(3n + 1)::before{display:none}
}
@media(max-width:780px){
  :root{--sy-page-gutter:clamp(18px,4vw,34px)}
  .sy-cards-grid,.sy-bakery-card-grid,.sy-projects-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sy-process-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sy-process-list > li:nth-child(3n + 1)::before{display:block}
  .sy-process-list > li:nth-child(2n + 1)::before{display:none}
  .sy-section-head h2{font-size:clamp(27px,5vw,39px)}
}
@media(max-width:580px){
  :root{--sy-page-gutter:18px}
  .sy-cards-grid,.sy-bakery-card-grid,.sy-projects-grid,.sy-sectors-grid,.sy-process-list {grid-template-columns:minmax(0,1fr)}
  .sy-process-list > li::before{display:none!important}
  .sy-bakery-card .sy-card-photo-icon{width:48px;height:48px}
  .sy-sectors-grid > div,.sy-sectors-grid > .sy-sector-card{min-height:auto}
  .sy-process-list>li{padding:22px}
  .sy-section-head{margin-bottom:26px}
  .sy-section-head h2{font-size:clamp(26px,7.2vw,34px)}
  .sy-section .sy-bakery-block{padding-block:48px!important}
}
@media(prefers-reduced-motion:reduce){
  .sy-card,.sy-bakery-card,.sy-process-list>li,.sy-sectors-grid>div{transition:none}
  .sy-card:hover,.sy-bakery-card:hover,.sy-process-list>li:hover,.sy-sectors-grid>div:hover{transform:none}
}

/* Older independent WPBakery shortcodes inside full-bleed rows. */
.sy-heading-standalone,
.sy-home-wpb-content .sy-heading-standalone,
.sy-legacy-infographic,
.sy-home-wpb-content .sy-legacy-infographic {
  box-sizing:border-box!important;
  width:calc(100% - (2 * var(--sy-page-gutter)))!important;
  max-width:var(--sy-container,1240px)!important;
  margin:24px auto 36px!important;
}
.sy-heading-standalone .sy-section-head{max-width:860px;margin-bottom:0}
.sy-legacy-infographic .sy-process-list{margin:0}

/* When the legacy sector shortcode is used alone (not in a dark full-width section). */
.sy-legacy-sectors{background:#1c2026;padding:clamp(23px,3vw,42px);border-radius:15px}
.sy-legacy-sectors .sy-sectors-grid>div{min-height:215px}
@media(max-width:580px){.sy-legacy-sectors{padding:18px}}

.sy-value .sy-feature-icon,.sy-icon-box .sy-feature-icon {margin-bottom:12px;background:#fff2ea;border-color:#ffdfd0}
.sy-value b{display:block;color:var(--sy-orange);font-size:12px;font-weight:800;margin-bottom:8px}
.sy-value h3,.sy-icon-box h3{font-size:18px;line-height:1.5}

.sy-card .sy-card-photo-icon {
  position:absolute;inset:auto auto 0 20px;z-index:2;
  width:52px;height:52px;display:grid;place-items:center;
  border-radius:10px 10px 0 0;background:var(--sy-orange);color:#22252a;
  box-shadow:0 5px 20px rgba(0,0,0,.12);
}
.sy-ar .sy-card .sy-card-photo-icon{inset:auto 20px 0 auto}