.elementor-1888 .elementor-element.elementor-element-3ff600d{--display:flex;--padding-top:56px;--padding-bottom:56px;--padding-left:40px;--padding-right:40px;}.elementor-1888 .elementor-element.elementor-element-3ff600d:not(.elementor-motion-effects-element-type-background), .elementor-1888 .elementor-element.elementor-element-3ff600d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FAF9F7;}.elementor-1888 .elementor-element.elementor-element-b7f4317{--display:flex;--padding-top:48px;--padding-bottom:104px;--padding-left:40px;--padding-right:40px;}.elementor-1888 .elementor-element.elementor-element-b7f4317:not(.elementor-motion-effects-element-type-background), .elementor-1888 .elementor-element.elementor-element-b7f4317 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FAF9F7;}.elementor-1888 .elementor-element.elementor-element-1e92637{--display:flex;--padding-top:104px;--padding-bottom:104px;--padding-left:40px;--padding-right:40px;}.elementor-1888 .elementor-element.elementor-element-1e92637:not(.elementor-motion-effects-element-type-background), .elementor-1888 .elementor-element.elementor-element-1e92637 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0B1436;}.elementor-1888 .elementor-element.elementor-element-a3f24e3{--display:flex;}.elementor-1888 .elementor-element.elementor-element-d19de79 .elementor-button{font-family:"Manrope", Sans-serif;font-size:17px;font-weight:500;}@media(max-width:767px){.elementor-1888 .elementor-element.elementor-element-3ff600d{--padding-top:40px;--padding-bottom:40px;--padding-left:22px;--padding-right:22px;}.elementor-1888 .elementor-element.elementor-element-b7f4317{--padding-top:32px;--padding-bottom:72px;--padding-left:22px;--padding-right:22px;}.elementor-1888 .elementor-element.elementor-element-1e92637{--padding-top:72px;--padding-bottom:72px;--padding-left:22px;--padding-right:22px;}}/* Start custom CSS *//* ======================================================================
   Gallery (post 1888) — .syg-*
   Built 2026-09-10 from Sygora Gallery.dc.html
   (project 9c69e6d5-a4ef-4145-a551-4c26baa7312d).

   Shared rules come from the kit (.sy-*, post 6) and the page layer
   (.syp-*, post 22). Header and footer templates are untouched.

   Standing traps this file is written against:
   - `.e-con.e-flex > .e-con-inner{flex-direction:var(--x)}` is (0,3,0), so
     every `> .e-con-inner` body.elementor-page-1888 here doubles its class.
   - A boxed .e-con keeps its BLOCK padding on .e-con-inner, so a blanket
     `padding:0` there would delete the section's own vertical band. None of
     the rules below set padding on a top-level section's inner.
   ====================================================================== */
#quote{scroll-margin-top:128px}

/* ============ INTRO ============ */
.syg-intro.syg-intro > .e-con-inner{max-width:1160px!important;margin-left:auto;margin-right:auto;gap:0;align-items:flex-start}
/* The design's Kicker sets rule={{true}}; .syp-eyebrow is the layer's version
   of that component. Its 26px bottom margin is dropped because this column
   carries its spacing on each element's top margin instead. */
.syg-intro .syp-eyebrow .elementor-heading-title{margin-bottom:0}
.syg-h1.syg-h1 .elementor-heading-title{font-family:var(--font-display);font-weight:600;letter-spacing:-0.03em;font-size:clamp(36px,5.5vw,58px);line-height:1.05;margin:20px 0 0;text-wrap:pretty}
.elementor-1888 .syg-lede p{margin:20px 0 0;font-size:20px;line-height:1.7;color:var(--color-ink-600);max-width:56ch}

/* ============ MASONRY GRID ============
   `columns:3 300px` is the design's own layout: a column-width of 300px
   capped at three columns, so the grid steps 3 -> 2 -> 1 on its own as the
   viewport narrows and needs no media query of its own.

   Each tile is an <a> carrying Elementor's lightbox attributes, so the
   overlay, the prev/next arrows, the counter and the Escape key all come
   from Elementor's own tested code rather than a hand-written script. That
   matters here: Cloudflare Rocket Loader rewrites inline <script> on this
   site and may never execute it, so a bespoke lightbox could not be trusted.

   Thumbnails are the 768px WordPress variant (the widest a column gets is
   373px, so this stays crisp on 2x displays) and the lightbox href is the
   1536px one. All 35 are lazy, so only the tiles on screen are fetched. */
.syg-grid.syg-grid > .e-con-inner{max-width:1160px!important;margin-left:auto;margin-right:auto;gap:0}
.syg-masonry{columns:3 300px;column-gap:20px}
/* The design separates tiles with `margin:0 0 20px`, but Elementor ships
   `.elementor .elementor-widget:not(...):not(...) figure{margin:0}` at
   (0,4,1), which outruns anything reasonable a page rule can spell. The
   same 20px as padding is visually identical on a figure with no background
   and needs no specificity fight. */
.syg-fig{margin:0;padding:0 0 20px;break-inside:avoid;display:flex;flex-direction:column;gap:9px}
.syg-tile{display:block;padding:0;border:0;background:var(--color-border-default);border-radius:16px;overflow:hidden;cursor:zoom-in;transition:box-shadow var(--duration-fast) var(--ease-serene),transform var(--duration-fast) var(--ease-serene)}
/* `.elementor a{box-shadow:none}` is (0,1,1), so the tile's shadow needs the
   page class to outrank it. */
.elementor-1888 .syg-tile{box-shadow:var(--shadow-1)}
.elementor-1888 .syg-tile:hover{box-shadow:var(--shadow-2);transform:translateY(-3px)}
.syg-tile:focus-visible{outline:3px solid var(--color-focus-ring);outline-offset:3px}
.syg-tile img{display:block;width:100%;height:auto;object-fit:cover;border-radius:16px;background:var(--color-border-default)}
/* The design cycles five ratios down the list so the columns stagger. */
.syg-r1{aspect-ratio:4/3}
.syg-r2{aspect-ratio:3/4}
.syg-r3{aspect-ratio:1/1}
.syg-r4{aspect-ratio:3/2}
.syg-r5{aspect-ratio:4/5}
.elementor-1888 .syg-fig figcaption{margin:0;font-family:var(--font-display);font-size:13px;line-height:1.5;color:var(--color-text-muted)}
@media(prefers-reduced-motion:reduce){
.syg-tile,.syg-tile:hover{transition:none;transform:none}
}

/* ============ CLOSING ============ */
.syg-close.syg-close > .e-con-inner{max-width:900px!important;margin-left:auto;margin-right:auto;gap:0;align-items:flex-start}
/* The layer has no onInk kicker variant, so the sky accent would sit at
   about 2:1 on the navy band. */
.syg-close .syp-kicker .elementor-heading-title{color:var(--color-sand-050)}
.syg-closeh2 .elementor-heading-title{font-family:var(--font-display);font-weight:600;letter-spacing:-0.03em;font-size:clamp(32px,4.5vw,46px);line-height:1.1;margin:20px 0 0;color:#fff}
.elementor-1888 .syg-closelede p{margin:20px 0 0;font-size:19px;line-height:1.7;color:rgba(255,255,255,.82);max-width:56ch}
.syg-ctarow{margin-top:24px}
.syg-ctarow.syg-ctarow > .e-con-inner{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:18px;max-width:none!important;padding:0}
.syg-ctarow .elementor-widget{width:auto}
.elementor-1888 .syg-closenote p{margin:0;font-size:16px;color:rgba(255,255,255,.82)}

/* ============ RESPONSIVE ============
   Elementor's tablet default adds 24px inline padding to every nested
   container and it compounds with depth. */
@media(max-width:1024px){
.elementor-1888 .e-con:not(.e-parent){padding-left:0!important;padding-right:0!important}
}
@media(max-width:940px){
.elementor-1888 .sy-sec{padding-left:22px!important;padding-right:22px!important}
}/* End custom CSS */