/* Arch 360 redesign layer (staging). Scoped to html.a360s, which the gate script adds.
   Motion rules apply only under html.a360s-motion: no reduced-motion, and JS present. */

/* ---------- Type: Poppins family, self-hosted ---------- */






/* A few widget rules hard-code "Oswald"/"Poppins" (outside the kit variables). The Google Fonts link is
   dropped on staging, so those names resolve to the matching Poppins cut instead. */






html.a360s .elementor-kit-8{
  /* The kit's typography slots, remapped onto the brand family. Weights and sizes stay as designed. */
  --e-global-typography-primary-font-family:"Poppins";
  --e-global-typography-text-font-family:"Poppins";
  --e-global-typography-accent-font-family:"Poppins";
  --e-global-typography-17f256f-font-family:"Poppins";
  --e-global-typography-6f3f7d4-font-family:"Poppins";
  --e-global-typography-e43b7c6-font-family:"Poppins";
  --e-global-typography-f759759-font-family:"Poppins";
  --e-global-typography-secondary-font-family:"Poppins";
  --e-global-typography-012a26b-font-family:"Poppins";
  --e-global-typography-20af5eb-font-family:"Poppins";
  --e-global-typography-2989702-font-family:"Poppins";
  --e-global-typography-51bf755-font-family:"Poppins";
  --e-global-typography-961cb7f-font-family:"Poppins";
  --e-global-typography-a18abca-font-family:"Poppins";
  --e-global-typography-af99975-font-family:"Poppins";
  --e-global-typography-e9f3af0-font-family:"Poppins";
  /* One red: the brand red. Body grey darkened from #808291 (3.9:1) to pass AA. */
  --e-global-color-primary:#d81324;
  --e-global-color-text:#5b5d6c;
  --a360-red:#d81324;
  --a360-ink:#181b31;
  --a360-out:cubic-bezier(.23,1,.32,1);
  --a360-expo:cubic-bezier(.16,1,.3,1);
  font-family:"Poppins",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
html.a360s .a360-pillar h3,html.a360s .a360-office h4{font-family:"Poppins",sans-serif;font-weight:600}
html.a360s .a360-pillar p{color:#5b5d6c;font-size:1rem}
html.a360s :is(h1,h2,h3,h4,h5,h6,.elementor-heading-title){text-wrap:pretty}
html.a360s .elementor-heading-title{font-kerning:normal}

/* ---------- Browser surfaces ---------- */
html.a360s ::selection{background:#d81324;color:#fff}
html.a360s{accent-color:#d81324;caret-color:#d81324;scrollbar-color:#181b31 #f1f1f3;scrollbar-width:thin}
html.a360s :focus-visible{outline:2px solid #d81324;outline-offset:3px;border-radius:1px}
html.a360s a{text-underline-offset:.2em;text-decoration-thickness:1px}

/* ---------- Unify the reds used by the earlier enhance layer ---------- */
html.a360s .a360-pillar{border:1px solid rgba(24,27,49,.1);border-top:1px solid #d81324}
html.a360s .a360-offices-strip{border-top-color:#d81324}
html.a360s .a360-office h4{color:#d81324}
/* Footer column labels were hard-coded #ed0505 (4.3:1 on the footer grey); brand red passes AA. */
html.a360s .elementor-16 .elementor-element-23cd0e9a .elementor-heading-title{color:#d81324}
html.a360s body > .nav-panel.a360-ported-panel .mainnav-mobi .menu-container ul li.current-menu-item > a{color:#d81324!important}

/* ---------- Cleanups ---------- */
/* The mobile nav panel is ported to <body> at every width but only styled below 992px:
   on desktop it showed as a raw list of links under the footer. */
@media (min-width:992px){html.a360s body > .nav-panel.a360-ported-panel{display:none!important}}
/* Hand reveals over to this layer: no stacked fade-ups, no stray 48px underline under every heading. */
html.a360s .a360-reveal{opacity:1!important;transform:none!important;transition:none!important;will-change:auto!important}
html.a360s .elementor-widget-heading .elementor-heading-title,
html.a360s .a360-pillars-section .elementor-heading-title{background-image:none!important}
/* Project titles in the tabs grid sit over the photos: keep them above the image and legible. */
html.a360s .tf-tabs .elementor-widget-heading,
html.a360s .tf-tabs .elementor-widget-icon-list{position:relative;z-index:2}
html.a360s .tf-tabs .elementor-widget-icon-list .elementor-icon-list-text{text-shadow:0 0 1px #fff,0 0 12px rgba(255,255,255,.9),0 0 22px rgba(255,255,255,.75)}
html.a360s .tf-tabs .elementor-widget-heading .elementor-heading-title{letter-spacing:.18em}

/* ---------- Header nav ---------- */
html.a360s .tf-nav-menu .mainnav ul.menu > li > a{position:relative}
html.a360s .tf-nav-menu .mainnav ul.menu > li > a::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:#d81324;
  transform:scaleX(0);transform-origin:left center;transition:transform 220ms var(--a360-out,ease-out);
}
html.a360s .tf-nav-menu .mainnav ul.menu > li:is(.current-menu-item,:hover,:focus-within) > a::after{transform:scaleX(1)}

/* ---------- Buttons, tabs, forms ---------- */
html.a360s .elementor-button,
html.a360s .mf-btn-wraper button,
html.a360s .metform-btn{
  background-color:#d81324;
  transition:transform 160ms var(--a360-out,ease-out),box-shadow 220ms ease,background-color 220ms ease;
}
@media (hover:hover) and (pointer:fine){
  html.a360s .elementor-button:hover,
  html.a360s .metform-btn:hover{background-color:#b80f1e;box-shadow:0 10px 24px -10px rgba(216,19,36,.55)}
}
html.a360s .elementor-button:active,
html.a360s .metform-btn:active{transform:scale(.97)}
html.a360s .tf-tabs .tf-tabnav li.tablinks{position:relative}
html.a360s .tf-tabs .tf-tabnav li.tablinks::after{
  content:"";position:absolute;left:12%;right:12%;bottom:-2px;height:1px;background:#d81324;
  transform:scaleX(0);transition:transform 260ms var(--a360-out,ease-out);
}
html.a360s .tf-tabs .tf-tabnav li.tablinks.active::after{transform:scaleX(1)}
html.a360s .mf-input,html.a360s .metform .mf-input{transition:border-color 160ms ease,box-shadow 160ms ease}
html.a360s .mf-input::placeholder{color:#6d6f7d;opacity:1}
html.a360s .mf-input:focus{border-color:#d81324!important;box-shadow:0 0 0 3px rgba(216,19,36,.14)!important;outline:none}

/* ---------- Depth system (tilt + light). Pointer-fine only; JS adds .a360s-t ---------- */
html.a360s-motion .a360s-t{
  transform-style:preserve-3d;backface-visibility:hidden;
  transition:transform 600ms var(--a360-expo),box-shadow 600ms var(--a360-expo),clip-path 900ms var(--a360-expo),opacity 700ms var(--a360-expo)!important;transition-delay:0s!important;
}
html.a360s-motion .a360s-t.is-live{transition:box-shadow 400ms var(--a360-expo)!important;will-change:transform}
html.a360s-motion .a360s-t.is-live:not(.a360s-hero){box-shadow:0 24px 48px -28px rgba(24,27,49,.42)}
.a360s-lit{position:relative;overflow:hidden;isolation:isolate}
.a360s-light{
  position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:radial-gradient(520px circle at var(--lx,50%) var(--ly,50%),rgba(255,244,230,.55),rgba(255,244,230,.12) 38%,transparent 62%);
  mix-blend-mode:soft-light;transition:opacity 500ms var(--a360-expo);
}
.a360s-lit.a360s-card .a360s-light{
  background:radial-gradient(360px circle at var(--lx,50%) var(--ly,50%),rgba(216,19,36,.07),transparent 60%);
  mix-blend-mode:normal;
}
.a360s-lit.a360s-card::before{
  /* 1px spotlight border that brightens near the pointer */
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;padding:1px;border-radius:inherit;
  background:radial-gradient(240px circle at var(--lx,50%) var(--ly,50%),rgba(216,19,36,.75),rgba(216,19,36,0) 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity 400ms var(--a360-expo);
}
html.a360s-motion .is-live > .a360s-light,html.a360s-motion .is-live .a360s-light,
html.a360s-motion .a360s-lit.is-live::before{opacity:1}
html.a360s-motion .a360s-depth{transition:transform 700ms var(--a360-expo);will-change:transform}
html.a360s-motion .is-live .a360s-depth{transition:none}
html.a360s-motion .a360s-drift{will-change:transform}

/* ---------- Hero carousel: the lit model ---------- */
html.a360s .tf-carousel-box{perspective:1400px}
html.a360s .tf-carousel-box .tf-imagebox .image{overflow:hidden}
html.a360s .tf-carousel-box .tf-imagebox .image img{transform:scale(1.08);transform-origin:center}
html.a360s-motion .a360s-hero.is-live{box-shadow:0 40px 70px -40px rgba(24,27,49,.55)}
/* Entrance: panels rise out of a mask, renders settle from a slight zoom. */
html.a360s-motion .tf-carousel-box:not(.a360s-in) .tf-imagebox .image{clip-path:inset(100% 0 0 0)}
html.a360s-motion .tf-carousel-box:not(.a360s-done) .tf-imagebox .image{
  transition:clip-path 1000ms var(--a360-expo);transition-delay:calc(var(--i,0) * 90ms);
}
html.a360s-motion .tf-carousel-box:not(.a360s-in) .tf-imagebox .image img{transform:scale(1.16)}
html.a360s-motion .tf-carousel-box.a360s-in:not(.a360s-done) .tf-imagebox .image img{transition:transform 1400ms var(--a360-expo);transition-delay:calc(var(--i,0) * 90ms)}


/* ---------- Hero carousel footprint before Owl initialises ----------
   Owl hides the carousel (display:none) until its JS runs, then the hero pops in and shoves the page down
   (CLS 0.63 on mobile). Lay out the first slides in the same grid Owl will use so nothing moves when it takes over.
   Breakpoints mirror themesflat tf-main.js: <768 data-column3, 768-999 data-column2, >=1000 data-column. */
html.a360s .tf-carousel-box .owl-carousel:not(.owl-loaded){display:grid;column-gap:10px;overflow:hidden}
html.a360s .tf-carousel-box .owl-carousel:not(.owl-loaded) > .item{min-width:0}
@media (max-width:767px){
  html.a360s .tf-carousel-box[data-column3="1"] .owl-carousel:not(.owl-loaded){grid-template-columns:repeat(1,minmax(0,1fr))}html.a360s .tf-carousel-box[data-column3="1"] .owl-carousel:not(.owl-loaded) > .item:nth-child(n+2){display:none}
  html.a360s .tf-carousel-box[data-column3="2"] .owl-carousel:not(.owl-loaded){grid-template-columns:repeat(2,minmax(0,1fr))}html.a360s .tf-carousel-box[data-column3="2"] .owl-carousel:not(.owl-loaded) > .item:nth-child(n+3){display:none}
  html.a360s .tf-carousel-box[data-column3="3"] .owl-carousel:not(.owl-loaded){grid-template-columns:repeat(3,minmax(0,1fr))}html.a360s .tf-carousel-box[data-column3="3"] .owl-carousel:not(.owl-loaded) > .item:nth-child(n+4){display:none}
  html.a360s .tf-carousel-box[data-column3="4"] .owl-carousel:not(.owl-loaded){grid-template-columns:repeat(4,minmax(0,1fr))}html.a360s .tf-carousel-box[data-column3="4"] .owl-carousel:not(.owl-loaded) > .item:nth-child(n+5){display:none}
}
@media (min-width:768px) and (max-width:999px){
  html.a360s .tf-carousel-box[data-column2="1"] .owl-carousel:not(.owl-loaded){grid-template-columns:repeat(1,minmax(0,1fr))}html.a360s .tf-carousel-box[data-column2="1"] .owl-carousel:not(.owl-loaded) > .item:nth-child(n+2){display:none}
  html.a360s .tf-carousel-box[data-column2="2"] .owl-carousel:not(.owl-loaded){grid-template-columns:repeat(2,minmax(0,1fr))}html.a360s .tf-carousel-box[data-column2="2"] .owl-carousel:not(.owl-loaded) > .item:nth-child(n+3){display:none}
  html.a360s .tf-carousel-box[data-column2="3"] .owl-carousel:not(.owl-loaded){grid-template-columns:repeat(3,minmax(0,1fr))}html.a360s .tf-carousel-box[data-column2="3"] .owl-carousel:not(.owl-loaded) > .item:nth-child(n+4){display:none}
  html.a360s .tf-carousel-box[data-column2="4"] .owl-carousel:not(.owl-loaded){grid-template-columns:repeat(4,minmax(0,1fr))}html.a360s .tf-carousel-box[data-column2="4"] .owl-carousel:not(.owl-loaded) > .item:nth-child(n+5){display:none}
}
@media (min-width:1000px){
  html.a360s .tf-carousel-box[data-column="1"] .owl-carousel:not(.owl-loaded){grid-template-columns:repeat(1,minmax(0,1fr))}html.a360s .tf-carousel-box[data-column="1"] .owl-carousel:not(.owl-loaded) > .item:nth-child(n+2){display:none}
  html.a360s .tf-carousel-box[data-column="2"] .owl-carousel:not(.owl-loaded){grid-template-columns:repeat(2,minmax(0,1fr))}html.a360s .tf-carousel-box[data-column="2"] .owl-carousel:not(.owl-loaded) > .item:nth-child(n+3){display:none}
  html.a360s .tf-carousel-box[data-column="3"] .owl-carousel:not(.owl-loaded){grid-template-columns:repeat(3,minmax(0,1fr))}html.a360s .tf-carousel-box[data-column="3"] .owl-carousel:not(.owl-loaded) > .item:nth-child(n+4){display:none}
  html.a360s .tf-carousel-box[data-column="4"] .owl-carousel:not(.owl-loaded){grid-template-columns:repeat(4,minmax(0,1fr))}html.a360s .tf-carousel-box[data-column="4"] .owl-carousel:not(.owl-loaded) > .item:nth-child(n+5){display:none}
}

/* ---------- Scroll reveals: images unveil, cards rise (once) ---------- */
html.a360s-motion .a360s-r{transition:clip-path 900ms var(--a360-expo),opacity 700ms var(--a360-expo),transform 900ms var(--a360-expo);transition-delay:calc(var(--i,0) * 70ms)}
html.a360s-motion .a360s-r.a360s-img:not(.a360s-in){clip-path:inset(0 0 100% 0)}
html.a360s-motion .a360s-r.a360s-rise:not(.a360s-in){opacity:0;transform:translateY(18px)}

/* ---------- Page-title banners: scroll-driven parallax (compositor-only, static where unsupported) ---------- */
.a360s-plx-host{position:relative;overflow:hidden}
.a360s-plx{position:absolute;inset:-12% 0 -12% 0;z-index:0;background-size:cover;background-position:center;pointer-events:none}
.a360s-plx-host > .elementor-background-overlay{z-index:1}
.a360s-plx-host > .elementor-container{position:relative;z-index:2}
@supports (animation-timeline:view()){
  html.a360s-motion .a360s-plx{animation:a360s-plx linear both;animation-timeline:view();animation-range:cover}
  html.a360s-motion .a360s-plx-host .elementor-heading-title{animation:a360s-title linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
}
@keyframes a360s-plx{from{transform:translate3d(0,-9%,0)}to{transform:translate3d(0,9%,0)}}
@keyframes a360s-title{to{transform:translate3d(0,40%,0);opacity:.2}}

/* ---------- Reduced motion: everything off ---------- */
@media (prefers-reduced-motion:reduce){
  html.a360s *,html.a360s *::before,html.a360s *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  html.a360s .a360s-light,html.a360s .a360s-lit::before{display:none!important}
  html.a360s .tf-carousel-box .tf-imagebox .image img{transform:none!important}
}