.elementor-99301 .elementor-element.elementor-element-2f1b71{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a43{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a43:not(.elementor-motion-effects-element-type-background), .elementor-99301 .elementor-element.elementor-element-2f1a43 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://www.myntmodels.com/wp-content/uploads/2026/10/ny-hero.webp");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-99301 .elementor-element.elementor-element-2f1a42{--display:flex;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-99301 .elementor-element.elementor-element-2f1a41{--display:flex;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-99301 .elementor-element.elementor-element-2f1a49{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a46{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a48{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a4f{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a4c{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1ad5{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a99{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a99:not(.elementor-motion-effects-element-type-background), .elementor-99301 .elementor-element.elementor-element-2f1a99 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://www.myntmodels.com/wp-content/uploads/2026/10/hamptons-band.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-99301 .elementor-element.elementor-element-2f1a98{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a97{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a8d{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a90{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a93{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a96{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1aa8{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a9c{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1aa7{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1aa6{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1aa1{--display:flex;}.elementor-widget-icon.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-99301 .elementor-element.elementor-element-2f1a9e .elementor-icon-wrapper{text-align:center;}.elementor-99301 .elementor-element.elementor-element-2f1aa5{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1aa2 .elementor-icon-wrapper{text-align:center;}.elementor-99301 .elementor-element.elementor-element-2f1ab3{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1ab2{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1ab1{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1aaa{--display:flex;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );}.elementor-99301 .elementor-element.elementor-element-2f1ab0{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1ac1{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1ab6{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1ac0{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1abb{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1aba{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1abf{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1abe{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1ad4{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1ac4{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1ad2{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1ad1{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1ac7{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1aca{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1acd{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1ad0{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b20{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1ae7{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1ae7:not(.elementor-motion-effects-element-type-background), .elementor-99301 .elementor-element.elementor-element-2f1ae7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://www.myntmodels.com/wp-content/uploads/2026/10/nantucket-band.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-99301 .elementor-element.elementor-element-2f1ae6{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1ae5{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1adb{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1ade{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1ae1{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1ae4{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1af2{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1aea{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1af1{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1af0{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1aef{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1aec .elementor-icon-wrapper{text-align:center;}.elementor-99301 .elementor-element.elementor-element-2f1afd{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1afc{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1afb{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1af4{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1afa{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b0c{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b00{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b0b{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b04{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b03{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b07{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b06{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b0a{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b09{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b1f{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b0f{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b1d{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b1c{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b12{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b15{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b18{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b1b{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b6f{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b32{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b32:not(.elementor-motion-effects-element-type-background), .elementor-99301 .elementor-element.elementor-element-2f1b32 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://www.myntmodels.com/wp-content/uploads/2026/10/vineyard-band.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-99301 .elementor-element.elementor-element-2f1b31{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b30{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b26{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b29{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b2c{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b2f{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b41{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b35{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b40{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b3f{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b3a{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b37 .elementor-icon-wrapper{text-align:center;}.elementor-99301 .elementor-element.elementor-element-2f1b3e{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b3b .elementor-icon-wrapper{text-align:center;}.elementor-99301 .elementor-element.elementor-element-2f1b4c{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b4b{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b4a{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b43{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b49{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b5b{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b4f{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b5a{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b53{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b52{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b56{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b55{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b59{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b58{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b6e{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b5e{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b6c{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b6b{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b61{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b64{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b67{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1b6a{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a58{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a58:not(.elementor-motion-effects-element-type-background), .elementor-99301 .elementor-element.elementor-element-2f1a58 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://www.myntmodels.com/wp-content/uploads/2026/10/nyc-dining.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-99301 .elementor-element.elementor-element-2f1a52{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a57{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a56{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a7b{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a5b{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a7a{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a60{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a5d{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a5f{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a65{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a62{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a64{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a6a{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a67{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a69{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a6f{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a6c{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a6e{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a74{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a71{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a73{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a79{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a76{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a78{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a86{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a85{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a7d{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a84{--display:flex;}.elementor-99301 .elementor-element.elementor-element-2f1a83{--display:flex;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );}}@media(max-width:767px){.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );}}/* Start custom CSS *//* ============================================================================ CONCEPT 03 — "THE GRAND TOUR" Cinematic, but set on a LIGHT page. Drama comes from full-width image bands carrying a dark overlay — the device the live city page uses — dropped into a mint/white rhythm, rather than from long dark stretches. Layout engine: CSS GRID DRIVEN BY NAMED TEMPLATE AREAS, re-declared per container size — compositions are authored, not merely wrapped. Namespace: .gt-* (shares no body.elementor-page-99301, token or script with any other concept) ========================================================================== */ .gt{ --night:#22301F; --moss:#384D34; --moss-2:#4A7345; --quiet:#5A7355; --sage:#7BA673; --edge:#9CBF95; --hair:#CAE5C1; /* sage on the dark image bands measures 3.16:1 against the lit parts of a photograph — at the 3:1 floor for large text and failing for the small uppercase eyebrows. This lifted tone measures 5.67:1 there and still reads as green beside the near-white first line. Dark surfaces only. */ --sage-lift:#B6D9AE; --mint:#E6F8E1; --band:#E1F0DC; --pale:#F3FFEF; --white:#FFFFFF; --pad:clamp(1.15rem,4.5vw,5rem); --bay:clamp(3rem,1.8rem + 6vw,7.5rem); --gt-gap:clamp(1rem,2vw,2.2rem); --t-eyebrow:clamp(.62rem,.57rem + .2vw,.78rem); --t-body:clamp(1rem,.95rem + .35vw,1.18rem); --t-lead:clamp(1.12rem,1rem + .75vw,1.6rem); --t-h4:clamp(1.1rem,.98rem + .6vw,1.5rem); --t-h3:clamp(1.6rem,1.2rem + 1.9vw,2.7rem); --t-h2:clamp(1.9rem,1.2rem + 3.2vw,4rem); --t-h1:clamp(2.4rem,1.1rem + 5.6vw,6.2rem); background:var(--white); color:var(--moss); font-family:"Inter",system-ui,sans-serif; font-size:var(--t-body); line-height:1.72; -webkit-font-smoothing:antialiased; } .gt *,.gt *::before,.gt *::after{box-sizing:border-box} .gt p{margin:0 0 1.15em} .gt h1,.gt h2,.gt h3,.gt h4{font-family:"DM Serif Display",Georgia,serif;font-weight:400;line-height:1.05;margin:0;letter-spacing:-.018em} .gt img{display:block;max-width:100%;height:auto} .gt a{color:inherit} .gt-eyebrow{font-size:var(--t-eyebrow);letter-spacing:.34em;text-transform:uppercase;color:var(--moss-2)} /* ---------- buttons: the site's own specification ------------------------- Scoped under .gt on purpose — `.gt a{color:inherit}` scores (0,1,1) and would otherwise beat a bare button class, painting the label in body colour. --------------------------------------------------------------------------- */ .gt-btn{display:inline-flex;align-items:center;justify-content:center;gap:.7rem; font-family:"Inter",sans-serif;font-size:.9rem;font-weight:500;letter-spacing:.08rem; line-height:1.2;text-transform:uppercase;text-decoration:none;text-align:center; padding:clamp(15px,2.2vw,20px) clamp(24px,3.6vw,40px); border:1px solid transparent;border-radius:0;cursor:pointer; transition:background-color .3s,color .3s,border-color .3s} .gt .gt-btn--ghost{color:#E6F8E1;background:transparent;border-color:#E6F8E1} .gt .gt-btn--ghost:hover,.gt .gt-btn--ghost:focus-visible{color:#384D34;background:#E6F8E1;border-color:transparent} .gt .gt-btn--solid{color:#E6F8E1;background:#384D34;border-color:transparent} .gt .gt-btn--solid:hover,.gt .gt-btn--solid:focus-visible{color:#384D34;background:transparent;border-color:#384D34} .gt-btns{display:flex;flex-wrap:wrap;gap:clamp(.7rem,1.4vw,1rem)} /* ---------- the stage: one grid, full-bleed breakout ---------------------- */ .gt-stage{display:grid;grid-template-columns: [full-start] minmax(var(--pad),1fr) [main-start] min(76rem,100% - var(--pad)*2) [main-end] minmax(var(--pad),1fr) [full-end]} .gt-stage > *{grid-column:main} .gt-stage > .gt-bleed{grid-column:full} /* ---------- authored compositions ----------------------------------------- Rather than letting boxes wrap, each block declares an ARRANGEMENT by name. The container re-declares the template at its own thresholds, and every template is complete — no cell is ever left half-filled, so a four-up can only ever be 4x1, 2x2 or 1x4. Balance is a property of the template itself. --------------------------------------------------------------------------- */ .gt-comp{container-type:inline-size} .gt-quad{display:grid;gap:var(--gt-gap);grid-template-areas:"a" "b" "c" "d"} @container (min-width:34rem){ .gt-quad{grid-template-areas:"a b" "c d";grid-template-columns:1fr 1fr} } @container (min-width:70rem){ .gt-quad{grid-template-areas:"a b c d";grid-template-columns:repeat(4,1fr)} } .gt-quad > :nth-child(1){grid-area:a} .gt-quad > :nth-child(2){grid-area:b} .gt-quad > :nth-child(3){grid-area:c} .gt-quad > :nth-child(4){grid-area:d} .gt-hex{display:grid;gap:var(--gt-gap);grid-template-areas:"a" "b" "c" "d" "e" "f"} @container (min-width:32rem){ .gt-hex{grid-template-areas:"a b" "c d" "e f";grid-template-columns:1fr 1fr} } @container (min-width:58rem){ .gt-hex{grid-template-areas:"a b c" "d e f";grid-template-columns:repeat(3,1fr)} } .gt-hex > :nth-child(1){grid-area:a} .gt-hex > :nth-child(2){grid-area:b} .gt-hex > :nth-child(3){grid-area:c} .gt-hex > :nth-child(4){grid-area:d} .gt-hex > :nth-child(5){grid-area:e} .gt-hex > :nth-child(6){grid-area:f} .gt-duo{display:grid;gap:clamp(1.4rem,3.5vw,3.5rem);grid-template-areas:"plate" "copy"} @container (min-width:50rem){ .gt-duo{grid-template-areas:"plate copy";grid-template-columns:1fr 1.1fr;align-items:center} } .gt-duo > .plate{grid-area:plate} .gt-duo > .gt-copy{grid-area:copy} /* ---------- hero: background plate + dark overlay, as the site does it ---- */ .gt-hero{position:relative;isolation:isolate;display:grid;align-items:end; min-height:min(86svh,50rem); background:#22301F url("https://www.myntmodels.com/wp-content/uploads/2026/10/ny-hero.webp") center center/cover no-repeat} .gt-hero::before{content:"";position:absolute;inset:0;background:#22301F;opacity:.8;z-index:-1} .gt-hero .inner{padding-block:clamp(2.5rem,6vw,5rem);width:min(76rem,100% - var(--pad)*2);margin-inline:auto} .gt-hero .gt-eyebrow{display:block;color:var(--sage-lift);margin-bottom:1rem} .gt-hero h1{font-size:var(--t-h1);color:var(--pale);max-width:14ch} .gt-hero h1 em{font-style:normal;display:block;color:var(--sage-lift)} .gt-hero p{font-size:var(--t-lead);max-width:38ch;color:var(--hair);line-height:1.46;margin-top:clamp(1rem,2vw,1.6rem)} .gt-hero .gt-btns{margin-top:clamp(1.4rem,2.8vw,2.2rem)} /* ---------- section rhythm: white, mint, white, with image bands --------- */ .gt-chapter{padding-block:var(--bay)} .gt-chapter--mint{background:var(--band)} .gt-chapter--pale{background:var(--pale)} .gt-h{max-width:32ch;margin-bottom:clamp(1.6rem,3vw,2.8rem)} /* A single-column measure. The premise used the two-up, which the client asked to read as one row on desktop instead. 68ch keeps the line length readable at full width rather than running the full 76rem. */ .gt-copy--wide{max-width:68ch} .gt-copy--wide p + p{margin-top:0} /* The run, when its steps are place labels rather than paragraphs. */ .gt-run--places{display:grid;gap:var(--gt-gap);grid-template-columns:1fr;counter-reset:gtrun} @container (min-width:34rem){ .gt-run--places{grid-template-columns:1fr 1fr} } @container (min-width:70rem){ .gt-run--places[data-n="3"]{grid-template-columns:repeat(3,1fr)} } .gt-outro-cta{color:var(--hair);font-style:italic} .gt-h .gt-eyebrow{display:block;margin-bottom:.9rem} .gt-h h2,.gt-h h3{font-size:var(--t-h3)} /* image band with a dark overlay — the site's own device, used sparingly */ .gt-band{position:relative;isolation:isolate;background:#384D34 center center/cover no-repeat} .gt-band::before{content:"";position:absolute;inset:0;background:#384D34;opacity:.82;z-index:-1} .gt-band .gt-eyebrow{color:var(--sage-lift)} .gt-band h2,.gt-band h3{color:var(--pale)} .gt-band p{color:var(--hair)} /* ---------- the chart: a jump navigator, not a tab strip ------------------- Every pin is an ordinary anchor link to a section that is always on the page. Nothing here hides content; the script only highlights the pin you are near. --------------------------------------------------------------------------- */ .gt-chart{margin:0;background:var(--pale);border:1px solid var(--hair); padding:clamp(1rem,2.4vw,1.8rem)} .gt-chart-hd{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap; padding-bottom:.8rem;margin-bottom:.4rem;border-bottom:1px solid var(--hair)} .gt-map{width:100%;height:auto;display:block;max-height:min(74svh,38rem);margin-inline:auto} .gt-ray{transition:stroke .35s,stroke-width .35s,stroke-dasharray .35s} .gt-ray.is-on{stroke:var(--moss-2);stroke-width:2.4;stroke-dasharray:none} .gt-leader{fill:none;stroke:var(--edge);stroke-width:1} .gt-pin{cursor:pointer} .gt-pin .gt-dot{fill:var(--pale);stroke:var(--moss-2);stroke-width:2;transition:fill .3s,r .3s} .gt-pin text{fill:var(--moss);font-family:"Inter",sans-serif;letter-spacing:.03em} .gt-pin .gt-sub{fill:var(--quiet);letter-spacing:.13em;text-transform:uppercase} .gt-pin:hover .gt-dot{fill:var(--sage)} .gt-pin.is-on .gt-dot{fill:var(--moss-2);r:7.5} .gt-pin.is-on text{font-weight:600} .gt-pin:focus-visible .gt-dot{stroke:var(--moss);stroke-width:3.5} .gt-compass{opacity:.55} /* ---------- the sticky route bar ------------------------------------------ The site header is itself position:sticky at top:0, so this parks directly beneath it. --gt-headh is measured at runtime rather than guessed, because the theme header changes height between breakpoints. --------------------------------------------------------------------------- */ .gt{--gt-headh:0px} /* NB: FIXED, not sticky. A sticky bar has to sit in the flow to stick, and `opacity:0`/`visibility:hidden` hide a box without reclaiming its space — so while it was sticky it reserved an empty 63px strip between the header and the hero. Fixed takes it out of flow entirely: no gap when hidden, and it still parks directly under the site header when shown. */ .gt-routebar{position:fixed;top:var(--gt-headh);left:0;right:0;z-index:20; background:rgba(243,255,239,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border-block:1px solid var(--hair); opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .35s ease,transform .35s ease,visibility .35s} .gt-routebar.is-up{opacity:1;visibility:visible;transform:none} .gt-routebar-in{width:min(100% - var(--pad)*2,76rem);margin-inline:auto; display:flex;align-items:center;gap:clamp(.7rem,2vw,1.6rem)} .gt-routebar-lbl{flex:none;font-size:var(--t-eyebrow);letter-spacing:.3em;text-transform:uppercase; color:var(--moss-2);display:none} @media (min-width:60rem){ .gt-routebar-lbl{display:block} } .gt-routebar ul{list-style:none;margin:0;padding:0;display:flex;flex:1 1 auto;min-width:0; gap:clamp(.15rem,1vw,.5rem);overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity} .gt-routebar ul::-webkit-scrollbar{display:none} .gt-routebar li{flex:none;scroll-snap-align:center} .gt-routebar a{display:flex;flex-direction:column;gap:.1rem;text-decoration:none;white-space:nowrap; padding:clamp(.6rem,1.4vw,.85rem) clamp(.55rem,1.2vw,.9rem); font-size:clamp(.78rem,.74rem + .2vw,.92rem);color:var(--quiet); border-bottom:2px solid transparent;transition:color .25s,border-color .25s} .gt-routebar a i{font-style:normal;font-size:var(--t-eyebrow);letter-spacing:.14em; text-transform:uppercase;color:var(--edge);transition:color .25s} .gt-routebar a:hover{color:var(--moss)} .gt-routebar a.is-on{color:var(--moss);border-bottom-color:var(--moss-2);font-weight:600} .gt-routebar a.is-on i{color:var(--moss-2)} .gt-routebar a:focus-visible{outline:2px solid var(--moss-2);outline-offset:-3px} /* ---------- route section title block ------------------------------------ */ /* clears the site header AND the route bar when a pin is jumped to */ .gt-route{scroll-margin-top:calc(var(--gt-headh) + clamp(3rem,7vh,4.5rem))} .gt-titleblock{grid-column:main;padding-block:clamp(.5rem,1vw,1rem)} .gt-titleblock .gt-eyebrow{display:block;color:var(--sage-lift);margin-bottom:1rem} .gt-titleblock h2{font-size:var(--t-h2);color:var(--pale);max-width:14ch} .gt-titleblock h2 em{font-style:normal;display:block;color:var(--sage-lift)} .gt-kick{font-family:"DM Serif Display",serif;font-size:var(--t-lead);color:var(--hair); max-width:34ch;margin-top:clamp(.9rem,1.8vw,1.4rem);line-height:1.25} /* the glass strip of vitals over the plate */ /* A grid, not a flex wrap: `flex:1 1 7rem` fitted as many cells per row as the width allowed and landed 3 + 1 on a phone. Divisor-only counts mean the four cells can only ever be 2x2 or 4x1, never a ragged final row. */ .gt-vitals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(.9rem,2.5vw,2.6rem);margin-top:clamp(1.4rem,2.8vw,2.2rem); padding:clamp(.9rem,2vw,1.3rem) clamp(1rem,2.4vw,1.7rem); background:rgba(243,255,239,.1);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border:1px solid rgba(230,248,225,.24)} .gt-vitals div{min-width:0} @media (min-width:56rem){ .gt-vitals{grid-template-columns:repeat(4,minmax(0,1fr))} } .gt-vitals dt{font-size:var(--t-eyebrow);letter-spacing:.22em;text-transform:uppercase;color:var(--sage-lift);margin-bottom:.3rem} .gt-vitals dd{margin:0;font-family:"DM Serif Display",serif;font-size:clamp(1.05rem,.9rem + .6vw,1.5rem);color:var(--pale)} /* ---------- transfer cards ------------------------------------------------ */ .gt-mode{padding:clamp(1.1rem,2.4vw,1.8rem);border:1px solid var(--hair);background:var(--pale); display:flex;flex-direction:column;gap:.5rem;transition:border-color .3s,background .3s} .gt-mode:hover{border-color:var(--sage);background:var(--mint)} /* Bootstrap Icons and Font Awesome carry different line-heights, so the same font-size gives a 41px box in one and 24px in the other, throwing the cards out of alignment with each other. A fixed box makes them interchangeable. */ .gt-mode i{font-size:1.5rem;line-height:1;display:block;height:1.5rem;color:var(--moss-2)} .gt-mode h4{font-size:var(--t-h4)} .gt-mode p{font-size:.93rem;line-height:1.62;color:var(--quiet);margin:0} .gt-mode .meta{margin-top:auto;padding-top:.9rem;font-size:var(--t-eyebrow);letter-spacing:.2em; text-transform:uppercase;color:var(--moss-2)} /* ---------- plates -------------------------------------------------------- */ .gt-plate{position:relative;overflow:hidden;margin:0} .gt-plate img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.3,1)} .gt-plate:hover img{transform:scale(1.04)} /* the register plate stands tall so the photograph carries the section */ .gt-plate--tall img{aspect-ratio:4/5} @media (min-width:62rem){ .gt-plate--tall img{aspect-ratio:3/4} } /* ---------- gallery: edge to edge on a phone, large on tablet and desktop -- The client asked for impressive imagery. On a phone the gallery breaks the gutters entirely and runs one image per row, full width; from tablet up it returns inside the measure and goes 2-up, then 4-up, at a taller crop. --------------------------------------------------------------------------- */ .gt-gallery{grid-column:full} .gt-gallery .gt-quad{gap:0} .gt-gallery .gt-plate img{aspect-ratio:3/2} @media (min-width:34rem){ .gt-gallery{grid-column:main} .gt-gallery .gt-quad{gap:var(--gt-gap)} .gt-gallery .gt-plate img{aspect-ratio:4/5} } @media (min-width:70rem){ .gt-gallery .gt-plate img{aspect-ratio:3/4} } /* The title band gets more height as the screen grows. NB: it must stay display:grid — .gt-band also carries .gt-stage, and switching it to flex collapses the gutter tracks, dropping the copy flush against the edge. align-content parks the rows at the foot without touching the columns. */ .gt-band{min-height:clamp(22rem,52svh,34rem);align-content:end} .gt-backtop{margin:clamp(1.2rem,2.4vw,2rem) 0 0;font-size:var(--t-eyebrow); letter-spacing:.22em;text-transform:uppercase} .gt-backtop a{color:var(--moss-2);text-decoration:none} .gt-backtop a:hover{text-decoration:underline;text-underline-offset:.3em} .gt-lede{max-width:54ch;color:var(--quiet);font-size:var(--t-lead);line-height:1.5; margin-bottom:clamp(1.4rem,2.8vw,2.4rem)} .gt-plate--cap figcaption{position:absolute;left:0;right:0;bottom:0;padding:clamp(.9rem,2vw,1.4rem); background:linear-gradient(0deg,rgba(34,48,31,.93),rgba(34,48,31,.12));color:var(--mint)} .gt-plate--cap b{display:block;font-family:"DM Serif Display",serif;font-weight:400; font-size:1.08rem;color:var(--pale);margin-bottom:.15rem} .gt-plate--cap span{font-size:.86rem;line-height:1.5;color:var(--hair)} .gt-coords{font-size:var(--t-eyebrow);letter-spacing:.2em;text-transform:uppercase;color:var(--moss-2)} /* ---------- the run ------------------------------------------------------- */ .gt-run{list-style:none;margin:0;padding:0;counter-reset:r} .gt-run li{counter-increment:r;padding-block:clamp(1.2rem,2.4vw,2rem); border-top:1px solid var(--hair);display:flex;gap:clamp(1rem,3vw,3rem);flex-wrap:wrap} .gt-run li:first-child{border-top:1px solid var(--moss)} .gt-run li:last-child{border-bottom:1px solid var(--moss)} .gt-run li::before{content:counter(r,decimal-leading-zero);font-family:"DM Serif Display",serif; font-size:clamp(1.6rem,3vw,2.6rem);line-height:1;color:var(--edge);flex:0 0 auto;min-width:2.2em} .gt-run .txt{flex:1 1 20rem;min-width:0} .gt-run h4{font-size:var(--t-h4);margin-bottom:.35rem} .gt-run time{display:block;font-size:var(--t-eyebrow);letter-spacing:.22em;text-transform:uppercase; color:var(--moss-2);margin-bottom:.5rem} .gt-run p{margin:0;color:var(--quiet)} /* ---------- questions ----------------------------------------------------- */ .gt-q{border-bottom:1px solid var(--hair)} .gt-q:first-of-type{border-top:1px solid var(--moss)} .gt-q summary{cursor:pointer;list-style:none;padding-block:clamp(1rem,2vw,1.5rem); font-family:"DM Serif Display",serif;font-size:clamp(1.05rem,.95rem + .55vw,1.45rem); display:flex;justify-content:space-between;gap:1.5rem;align-items:baseline} .gt-q summary::-webkit-details-marker{display:none} .gt-q summary::after{content:"+";color:var(--moss-2);font-family:"Inter",sans-serif;font-size:1.1rem;flex:none} .gt-q[open] summary::after{content:"–"} .gt-q p{margin:0;padding-bottom:1.4rem;color:var(--quiet);max-width:64ch} /* ---------- close: plate beside the invitation --------------------------- */ .gt-close{background:var(--night);color:var(--mint);overflow:hidden} .gt-close-grid{display:grid;grid-template-columns:minmax(0,1fr)} @media (min-width:56rem){ .gt-close-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)} } .gt-close figure{margin:0;position:relative;min-height:clamp(14rem,28vw,100%)} .gt-close figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .gt-close .gt-copy{padding:clamp(2.2rem,5vw,5rem) var(--pad)} .gt-close .gt-eyebrow{display:block;color:var(--sage-lift);margin-bottom:1rem} .gt-close h2{font-size:var(--t-h3);color:var(--pale);max-width:18ch;margin-bottom:clamp(.9rem,2vw,1.3rem)} .gt-close p{color:var(--hair);max-width:52ch} .gt-close .gt-btns{margin-top:clamp(1.1rem,2.2vw,1.7rem)} @media (prefers-reduced-motion:no-preference){ .gt.is-armed .gt-fade{opacity:0;transform:translateY(18px); transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1)} .gt.is-armed .gt-fade.is-in{opacity:1;transform:none} } /* ============================================================================ ELEMENTOR BRIDGE The approved concept's stylesheet is loaded above this, verbatim. Its job is to lay the page out. This file's only job is to stop Elementor doing the same thing on top of it. Elementor styles three things the concept did not expect: 1. the CONTAINER — a flex box with a boxed max-width, its own padding and a `--gap`. Left alone it nests gutters inside the concept's gutters, adds the gaps down both sides, and centres a hero the concept sets left. 2. the WIDGET WRAPPER — every heading, paragraph, image and button sits in divs the concept's body.elementor-page-99301s do not know about. 3. the KIT — global typography at a specificity the concept cannot reach. An earlier version of this file fought symptoms instead: containers wrapping into a second column, mode sets collapsing to one column. Those were all caused by the layout settings the generator used to put on each container. With the containers now bare, the causes are gone and the patches with them. Nothing here uses !important: the client must still be able to override any of it from inside Elementor's own UI. ========================================================================== */ /* ---- 1. containers contribute nothing ----------------------------------- */ .gt .e-con, .gt.e-con, .idx .e-con, .idx.e-con{ --padding-block-start:0px; --padding-block-end:0px; --padding-inline-start:0px; --padding-inline-end:0px; --margin-block-start:0px; --margin-block-end:0px; --margin-inline-start:0px; --margin-inline-end:0px; --gap:0px; --row-gap:0px; --column-gap:0px; --width:100%; --content-width:100%; --container-max-width:none; --display:block; display:block} /* ...then hand back the displays the concept actually asks for. These follow the blanket rule and are more specific, so they win. */ .gt .e-con.gt-stage, .gt .e-con.gt-hero, .gt .e-con.gt-duo, .gt .e-con.gt-quad, .gt .e-con.gt-close-grid{display:grid} /* Elementor's container default is flex-direction:column, which stacked the button pair full-width; the concept lays them out in a row. */ .gt .e-con.gt-btns{display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-start} .gt .e-con.gt-mode{display:flex;flex-direction:column} .idx .e-con.idx-btns{display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-start} /* the stage assigns its children to the centre track by element, so widgets sitting directly in a stage need the same assignment */ .gt .gt-stage > .e-con, .gt .gt-stage > .elementor-widget{grid-column:main} .gt .gt-stage > .gt-gallery, .gt .gt-stage > .gt-bleed{grid-column:full} @media (min-width:34rem){ .gt .gt-stage > .gt-gallery{grid-column:main} } /* ---- 2. widget wrappers are transparent --------------------------------- */ .gt .elementor-widget, .gt .elementor-widget-container, .idx .elementor-widget, .idx .elementor-widget-container{margin:0;padding:0} .gt .gt-plate .elementor-widget-image, .gt .gt-plate .elementor-widget-image .elementor-widget-container, .gt .gt-close-fig .elementor-widget-image, .gt .gt-close-fig .elementor-widget-image .elementor-widget-container{height:100%} /* ...and the photograph itself, which is where the chain used to stop. The gallery is a grid, so every plate in a row is stretched to the tallest. The concept gives the IMG an aspect-ratio, which sized it to 411px inside a 443px plate, and the caption is anchored to the plate's bottom: 32px of the caption's scrim sat on the page background below the photograph instead of on the photograph, which reads as a bar stuck under the picture. The aspect-ratio still decides the plate's intrinsic height, because at that point the plate's height is indefinite and the percentage falls back to it. Once the grid has given the plate a definite height the percentage resolves against it, the photograph fills the plate, and object-fit crops. */ .gt .gt-plate .elementor-widget-image img, .gt .gt-close-fig .elementor-widget-image img{height:100%;object-fit:cover} /* The theme puts `margin:16px 0` on every img. The widget and its container were already zeroed above, but the margin is on the IMG, so the photograph began 16px below the top of its tile and overflowed the same amount past the bottom, where overflow:hidden clipped it. A pale strip at the top of every tile, and a caption that looked like it was floating clear of the picture. Measured: tile top 5338, photograph top 5354, on all twelve tiles. display:block also removes the baseline gap an inline img leaves beneath. */ .gt .elementor-widget-image img, .idx .elementor-widget-image img{margin:0;display:block} /* the close panel's photograph fills its half, as the concept's
does */ .gt .gt-close-fig{position:relative;min-height:clamp(14rem,28vw,100%)} .gt .gt-close-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* ---- 3. the Kit's typography -------------------------------------------- */ /* Elementor emits, into EVERY template's stylesheet including the footer's — which WordPress enqueues after this page's own: .elementor-widget-heading .elementor-heading-title{ font-family: var(--e-global-typography-primary-font-family); color: var(--e-global-color-primary) } at specificity (0,2,0). A rule written as `.gt .elementor-heading-title` is also (0,2,0), so it ties and loses on source order, and the page renders in the Kit default: Roboto, #6EC1E4 blue. Prefixing with `.elementor` clears the tie at (0,3,0). `inherit` hands the value back to the concept. */ .elementor .gt .elementor-heading-title, .elementor .idx .elementor-heading-title{ font-family:"DM Serif Display",Georgia,serif;font-weight:400; line-height:1.05;letter-spacing:-.018em;color:inherit} .elementor .gt .elementor-widget-text-editor, .elementor .idx .elementor-widget-text-editor{ font-family:"Inter",system-ui,sans-serif;font-size:inherit; line-height:inherit;color:inherit} /* the concept sizes headings by where they sit; these restore what it sets. The accent lines use --sage-lift, the tone the concept defines for dark surfaces: plain --sage measures 3.16:1 over a lit photograph and vanishes. */ .elementor .gt-hero h1.elementor-heading-title{font-size:var(--t-h1);color:var(--pale);max-width:14ch} .elementor .gt-hero h1.elementor-heading-title em{font-style:normal;display:block;color:var(--sage-lift)} .elementor .gt-titleblock h2.elementor-heading-title{color:var(--pale);max-width:14ch} .elementor .gt-titleblock h2.elementor-heading-title em{font-style:normal;display:block;color:var(--sage-lift)} .elementor .gt-h h2.elementor-heading-title, .elementor .gt-h h3.elementor-heading-title{font-size:var(--t-h3)} /* The concept caps .gt-h at 32ch. That is measured against the body font, so it resolves to 381px, and at the heading's own 43px it leaves room for about nine characters a line. The client saw the result: four-line headings with two thirds of the row empty beside them. The cap moves onto the heading itself, where a ch is the heading's ch. 30ch is 651px, which holds any heading up to 62 characters in two lines; _work/check-headings.js keeps the copy inside that. */ .gt .e-con.gt-h{max-width:none} .elementor .gt-h h2.elementor-heading-title, .elementor .gt-h h3.elementor-heading-title{max-width:30ch;text-wrap:balance} .elementor .gt-copy h3.elementor-heading-title{font-size:var(--t-h3)} /* was h4.elementor-heading-title: the transport mode is a control caption, not a section heading, so it is a

that looks the same */ .elementor .gt-mode .gt-mode-n p{ font-size:var(--t-h4);font-family:"DM Serif Display",serif; line-height:1.2;color:var(--ink);margin:0} .elementor .gt-band .elementor-heading-title{color:var(--pale)} .elementor .gt-close h2.elementor-heading-title{font-size:var(--t-h3);color:var(--pale);max-width:18ch} .elementor .idx-hero .elementor-heading-title{color:var(--pale)} .elementor .idx-hero h1.elementor-heading-title em{font-style:normal;display:block;color:var(--sage-lift)} /* a Text Editor emits

, so the concept's paragraph rules govern; these only re-point the variants it keys off a class the widget wrapper now carries */ .elementor .gt .gt-eyebrow p{ font-size:var(--t-eyebrow);letter-spacing:.34em;text-transform:uppercase; color:var(--moss-2);margin:0} .elementor .gt-band .gt-eyebrow p, .elementor .gt-hero .gt-eyebrow p, .elementor .gt-close .gt-eyebrow p{color:var(--sage-lift)} .elementor .gt .gt-kick p{ font-family:"DM Serif Display",Georgia,serif;font-size:var(--t-lead); color:var(--hair);line-height:1.25;max-width:34ch;margin:0} .elementor .gt .gt-lede p{ font-size:var(--t-lead);color:var(--quiet);line-height:1.5;max-width:54ch;margin:0} .elementor .gt .gt-coords p{ font-size:var(--t-eyebrow);letter-spacing:.2em;text-transform:uppercase; color:var(--moss-2);margin:.4rem 0 0} .elementor .gt .gt-mode .meta{margin-top:auto;padding-top:.9rem} .elementor .gt .gt-mode .meta p{ margin:0;font-size:var(--t-eyebrow);letter-spacing:.2em; text-transform:uppercase;color:var(--moss-2)} /* ---- 4. buttons ---------------------------------------------------------- */ /* The Button widget nests an carrying its own padding and background; the concept's spec lives on the wrapper's class. */ /* the widget reset above is (0,2,0) and would otherwise flatten the concept's own button padding, which sits on the widget wrapper's class */ .gt .elementor-widget.gt-btn, .idx .elementor-widget.idx-btn{ padding:clamp(15px,2.2vw,20px) clamp(24px,3.6vw,40px)} .gt .gt-btn .elementor-button, .idx .idx-btn .elementor-button{ background:none;border:0;padding:0;color:inherit;font:inherit; letter-spacing:inherit;text-transform:inherit;fill:currentColor} .gt .elementor-widget-button, .idx .elementor-widget-button, .gt .elementor-widget-button .elementor-widget-container, .idx .elementor-widget-button .elementor-widget-container{width:auto} /* ============================================================================ 5. VERTICAL RHYTHM Elementor spaces widgets with `.elementor-widget:not(:last-child)` at (0,2,0). The concept's own margins sit on the element's class at (0,1,0), so they lose no matter the source order, and every widget ended up flush against the next — headings touching their paragraphs, a lede sitting on top of the cards below it. These restore the concept's spacing above that rule. ========================================================================== */ .gt .elementor-widget.gt-lede{margin-bottom:clamp(1.4rem,2.8vw,2.4rem)} .gt .gt-h .elementor-widget.gt-eyebrow, .gt .gt-hero .elementor-widget.gt-eyebrow, .gt .gt-titleblock .elementor-widget.gt-eyebrow, .gt .gt-close .elementor-widget.gt-copy .elementor-widget.gt-eyebrow{margin-bottom:.9rem} .gt .gt-hero .elementor-widget.gt-eyebrow, .gt .gt-titleblock .elementor-widget.gt-eyebrow{margin-bottom:1rem} .gt .gt-copy .elementor-widget-heading{margin-bottom:clamp(.9rem,2vw,1.3rem)} .gt .gt-copy .elementor-widget-text-editor + .elementor-widget-text-editor{margin-top:1.15em} /* the icon is the only heading-like widget left in a mode card */ .gt .gt-mode .gt-mode-i{margin-bottom:.5rem} .gt .elementor-widget.gt-kick{margin-bottom:0} .gt .gt-hero .elementor-widget-text-editor:not(.gt-eyebrow){margin-top:clamp(1rem,2vw,1.6rem)} .gt .gt-hero .e-con.gt-btns{margin-top:clamp(1.4rem,2.8vw,2.2rem)} .gt .gt-close .e-con.gt-btns{margin-top:clamp(1.1rem,2.2vw,1.7rem)} .gt .elementor-widget.gt-coords{margin-top:.6rem} .idx .idx-h .elementor-widget{margin-bottom:.9rem} /* ============================================================================ 6. THE HERO The concept's H1 is two short lines; this page's H1 comes from the client's markdown and is more than twice as long, so at the concept's 14ch measure it ran to six lines and pushed the hero to 1103px. Widening the measure and easing the size back puts it on two lines at desktop and keeps the hero close to the approved height. ========================================================================== */ .elementor .gt-hero h1.elementor-heading-title{ font-size:clamp(2rem,.9rem + 4vw,4.4rem); max-width:30ch;line-height:1.04} /* the client asked for the hero description, and each destination's, in white */ .elementor .gt-hero .elementor-widget-text-editor:not(.gt-eyebrow) p{color:var(--pale)} .elementor .gt .gt-kick p{color:var(--pale)} /* Elementor gives every widget `width:100%`, so the two hero buttons wrapped one per line instead of sitting side by side as the concept has them. */ .gt .gt-btns > .elementor-widget, .idx .idx-btns > .elementor-widget{width:auto;flex:0 0 auto} /* the mode icons are Bootstrap Icons in an HTML widget, as the concept has them */ .gt .gt-mode .gt-mode-i i{ font-size:1.5rem;line-height:1;display:block;height:1.5rem;color:var(--moss-2)} /* The back-to-chart link sat flush against the gallery above it: its

has a top margin, but with the widget wrapper stripped to margin:0 that margin collapses straight out of it. Setting the gap on the wrapper instead. */ .gt .elementor-widget.gt-backtop{margin-top:clamp(1.2rem,2.4vw,2rem)} /* ---- 7. the theme's own page title -------------------------------------- The theme prints

above the Elementor content, so every page rendered a second, unstyled copy of its title over the hero — and carried two H1s. Elementor's own hide_title setting only covers the h1 and leaves the wrapper's height behind, so the wrapper goes too. */ .page-header { display: none } /* ============================================================================ 8. BLOCKS THAT USED TO BE HAND-WRITTEN MARK-UP The client builds in Elementor and does not write code, so a block of raw HTML is a dead end for her: visible on the page, uneditable without a text editor. Six of the eight HTML widgets are now ordinary containers and widgets. Only the route chart and its sticky nav stay as mark-up, because they are an inline SVG map and nothing draws that. Each rule below re-states the approved concept's own spec against the class Elementor now puts it on. Nothing new is designed here. ========================================================================== */ /* ---- the figures strip:
became containers + text widgets */ .gt .e-con.gt-vitals{display:grid} .gt .e-con.gt-vital{min-width:0} .elementor .gt .gt-vital-k p{ font-size:var(--t-eyebrow);letter-spacing:.22em;text-transform:uppercase; color:var(--sage-lift);margin:0 0 .3rem} .elementor .gt .gt-vital-v p{ margin:0;font-family:"DM Serif Display",serif; font-size:clamp(1.05rem,.9rem + .6vw,1.5rem);color:var(--pale)} /* ---- the transfer card's icon: an Icon widget, so it can be swapped from Elementor's own icon picker. The widget nests two wrappers that carry Elementor's alignment and its own padded/bordered icon chrome; the concept wants a bare glyph. */ .gt .gt-mode .gt-mode-i .elementor-icon-wrapper{text-align:left} .gt .gt-mode .gt-mode-i .elementor-icon{ padding:0;background:none;border:0;color:var(--moss-2);display:inline-block} /* ---- the numbered run:
  1. became containers, and the numerals are still drawn by the CSS counter, so reordering a step renumbers the rest. `position:static` and the rest undo Elementor's own ::before, which it reserves on a container for the background overlay. */ .gt .e-con.gt-run{counter-reset:r} .gt .e-con.gt-step{ counter-increment:r;display:flex;flex-direction:row;flex-wrap:wrap; gap:clamp(1rem,3vw,3rem);padding-block:clamp(1.2rem,2.4vw,2rem); border-top:1px solid var(--hair)} .gt .e-con.gt-step:first-child{border-top:1px solid var(--moss)} .gt .e-con.gt-step:last-child{border-bottom:1px solid var(--moss)} .gt .e-con.gt-step::before{ content:counter(r,decimal-leading-zero); position:static;inset:auto;background:none;opacity:1;width:auto;height:auto; font-family:"DM Serif Display",serif;font-size:clamp(1.6rem,3vw,2.6rem); line-height:1;color:var(--edge);flex:0 0 auto;min-width:2.2em} .gt .e-con.gt-step-txt{flex:1 1 20rem;min-width:0} /* likewise the run step: a line in a numbered sequence, not a section, and it used to be an

    with nothing under it */ .elementor .gt .gt-step .gt-step-n p{ font-size:var(--t-h4);font-family:"DM Serif Display",serif; line-height:1.2;color:var(--ink);margin:0} .gt .gt-step .gt-step-n{margin-bottom:.35rem} .gt .gt-mode .gt-mode-n{margin-bottom:.5rem} .elementor .gt .gt-step-time p{ margin:0;font-size:var(--t-eyebrow);letter-spacing:.22em; text-transform:uppercase;color:var(--moss-2)} /* ---- the gallery caption:
    became a Heading widget laid over the foot of its plate */ .gt .gt-plate--cap{position:relative;overflow:hidden} .gt .gt-plate--cap .elementor-widget.gt-cap{ position:absolute;left:0;right:0;bottom:0;z-index:2;width:auto; padding:clamp(.9rem,2vw,1.4rem); background:linear-gradient(0deg,rgba(34,48,31,.93),rgba(34,48,31,.12))} .elementor .gt .gt-cap h4.elementor-heading-title{ display:block;font-family:"DM Serif Display",serif;font-weight:400; font-size:1.08rem;color:var(--pale);margin:0} /* ---- the link back up to the chart: a Text Editor, so the wording is editable */ .elementor .gt .gt-backtop p{ margin:0;font-size:var(--t-eyebrow);letter-spacing:.22em;text-transform:uppercase} .gt .gt-backtop a{color:var(--moss-2);text-decoration:none} .gt .gt-backtop a:hover{text-decoration:underline;text-underline-offset:.3em} /* ---- the homepage's city cards, in Elementor's carousel ----------------- Each card is a linked container: its tag is an anchor and its Link control carries the city's URL. Both are needed. A link set on a container that is still a
    is silently dropped, which is why these were not clickable. The card used to be a full-width plate, photograph beside the copy, one city per row. Three to a row it is about a third as wide, so the photograph goes on top and the copy beneath, and the whole thing fills the slide's height so the row stays level however long a city's sentence runs. */ .idx .e-con.idx-feature{ display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr; height:100%;text-decoration:none;color:inherit; transition:border-color .3s,transform .3s} .idx a.idx-feature:hover{border-color:var(--sage)} .idx .e-con.idx-feature-fig{position:relative;min-height:0;aspect-ratio:3/2} .idx .idx-feature-fig .elementor-widget-image, .idx .idx-feature-fig .elementor-widget-container{position:absolute;inset:0} .idx .idx-feature-fig img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform 1s cubic-bezier(.2,.7,.3,1)} .idx .idx-feature:hover .idx-feature-fig img{transform:scale(1.04)} .idx .e-con.idx-feature-in{ display:flex;flex-direction:column;justify-content:flex-start;gap:.45rem; padding:clamp(1.1rem,2.2vw,1.7rem)} .elementor .idx .idx-feature-in h3.elementor-heading-title{ font-size:clamp(1.15rem,1rem + .55vw,1.55rem);line-height:1.16} /* the sentence is clamped so four cities of different verbosity still line up */ .elementor .idx .idx-sub p{ margin:0;color:var(--quiet);font-size:.9rem;line-height:1.55; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .idx .e-con.idx-esc{display:flex;flex-direction:row;flex-wrap:wrap;gap:.35rem;margin-top:.5rem} .elementor .idx .idx-esc-pill p{ margin:0;font-size:var(--t-eyebrow);letter-spacing:.14em;text-transform:uppercase; color:var(--moss-2);border:1px solid var(--hair);padding:.32rem .55rem} .idx .idx-esc > .elementor-widget{width:auto;flex:0 0 auto} /* the call to action is pushed to the foot, so it sits on one line across the row */ .idx .idx-feature-in .elementor-widget.idx-go{margin-top:auto;padding-top:.9rem} .elementor .idx .idx-go p{ margin:0;font-size:var(--t-eyebrow);letter-spacing:.22em; text-transform:uppercase;color:var(--moss-2)} .idx .idx-feature:hover .idx-go p{text-decoration:underline;text-underline-offset:.3em} /* ---- the carousel's own chrome ------------------------------------------ Elementor's carousel is Swiper, and it arrives with its own blue buttons and round dots. The slides keep their natural height so a card can fill them, and the buttons and dots are restated in the site's palette. */ .idx .idx-carousel .swiper{overflow:hidden} .idx .idx-carousel .swiper-slide{height:auto;display:flex} .idx .idx-carousel .swiper-slide > .e-con{width:100%} .idx .idx-carousel .elementor-swiper-button, .idx .idx-carousel .swiper-button-next, .idx .idx-carousel .swiper-button-prev{ width:2.6rem;height:2.6rem;margin:0;border-radius:0; display:flex;align-items:center;justify-content:center; color:var(--moss-2);background:var(--pale);border:1px solid var(--hair); transition:background .3s,border-color .3s} .idx .idx-carousel .elementor-swiper-button:hover, .idx .idx-carousel .swiper-button-next:hover, .idx .idx-carousel .swiper-button-prev:hover{background:var(--mint);border-color:var(--sage)} .idx .idx-carousel .elementor-swiper-button svg, .idx .idx-carousel .swiper-button-next svg, .idx .idx-carousel .swiper-button-prev svg{width:.85rem;height:.85rem;fill:currentColor} .idx .idx-carousel .swiper-button-next::after, .idx .idx-carousel .swiper-button-prev::after{font-size:.85rem} .idx .idx-carousel .swiper-pagination{position:static;margin-top:clamp(1rem,2vw,1.6rem)} .idx .idx-carousel .swiper-pagination-bullet{ width:.5rem;height:.5rem;border-radius:0;margin:0 .3rem; background:var(--sage);opacity:.4;transition:opacity .3s,background .3s} .idx .idx-carousel .swiper-pagination-bullet-active{opacity:1;background:var(--moss-2)} /* ============================================================================ 9. The questions, flat This was Elementor's nested accordion. The client's objection was that an accordion hides the answers: the text is in the markup but folded away, and a reader who wants one has to ask for it twice. Flat, as a two-column register: question on the left, answer on the right, hairline between. That is how a printed Q&A reads, and it keeps the section from collapsing into an undifferentiated wall of paragraphs. Below the breakpoint the columns stack and the hairline goes on doing the work. ========================================================================= */ .gt .e-con.gt-qa{ display:block;border-top:1px solid var(--moss); margin-top:clamp(1.4rem,3vw,2.4rem)} .gt .e-con.gt-qa-row{ display:grid;grid-template-columns:minmax(0,7fr) minmax(0,11fr); gap:clamp(1rem,4vw,3.5rem); padding-block:clamp(1.3rem,2.6vw,2.1rem); border-bottom:1px solid var(--hair); align-items:start} .gt .e-con.gt-qa-q,.gt .e-con.gt-qa-a{display:block;padding:0} .elementor .gt .gt-qa-q h3.elementor-heading-title{ font-family:"DM Serif Display",serif;font-weight:400;color:var(--ink); font-size:clamp(1.05rem,.95rem + .55vw,1.45rem);line-height:1.3; margin:0;max-width:28ch;text-wrap:pretty} .elementor .gt .gt-qa-a p{margin:0;color:var(--quiet);max-width:64ch} @media (max-width:860px){ .gt .e-con.gt-qa-row{grid-template-columns:minmax(0,1fr);gap:.5rem} } /* ============================================================================ 10. The carousel card eyebrow "NEW YORK · THREE ESCAPES" ran to two lines in a third-width card at the concept's eyebrow size, which is set for a full-width section heading rather than for a card. Smaller, and with the tracking pulled in, it sits on one line with room for a longer city name than any on the roster. ========================================================================= */ .elementor .idx .idx-feature .idx-eyebrow p{ font-size:.72rem;letter-spacing:.22em;line-height:1.35} /* ============================================================================ THE HOST SITE’S OWN OVERLAY The live site paints rgba(83,98,84,.45) across every Elementor widget container on the page, through a ::before at z-index 1 — its scroll-reveal layer, judging by the josh-js classes its containers carry. Over a gallery that reads as a film of haze on every photograph, which on a page whose whole argument is the photographs is the one thing it cannot have. It is not ours and not ours to remove at source, so it is switched off inside the page. The page's OWN overlays live on .gt-hero and .gt-band, are the device the design is built on, and are deliberately untouched. Specificity has to win against a rule we cannot see, and the client cannot edit a third-party pseudo-element from Elementor anyway, so this is the one place in the stylesheet that uses !important. content:none was not enough: their rule is more specific and simply beat it. ========================================================================== */ .gt .elementor-widget-container::before, .idx .elementor-widget-container::before{ display:none !important } /* ============================================================================ THE ROUTE CHART ON SAFARI The map is an inline sized entirely by CSS: width:100%, height:auto, and a viewBox. Chrome and Firefox infer the height from the viewBox's ratio. Safari does not do that reliably for an inline SVG carrying no width or height attribute, and on iOS the map came out with only its bottom-right corner visible — the compass, which sits at the far corner of the viewBox. The renderer now writes width and height attributes taken from the viewBox, which gives every browser an intrinsic ratio to work from. CSS still governs the rendered size, so nothing changes where it already worked. The max-height is restated in vh first: svh landed in Safari 15.4, and on anything older the whole min() is invalid and the declaration is dropped, leaving the map unclamped on a short screen. ========================================================================== */ .gt .gt-map{ max-height:min(74vh,38rem); max-height:min(74svh,38rem) } /* ============================================================================ AND THE REASON IT WAS BLANK ON AN iPHONE The live site runs a scroll-reveal library that walks the whole document and writes inline styles onto every node it finds — including all 32 elements inside this map, the itself among them: visibility: visible; animation-name: fadeIn; which means its resting state is visibility:hidden and every one of those nodes depends on JavaScript running to become visible. On a desktop it runs. On an iPhone it does not, and the chart drew nothing. The same page on staging, which has no such library, drew correctly on the same phone: the client's own test, and the thing that finally located this. A diagram is not something to fade in. An !important author rule outranks a normal inline declaration, which is what it takes to win here, and it is confined to the map. Opacity is left alone so .gt-compass keeps its .55. ========================================================================== */ .gt .gt-map, .gt .gt-map *, .idx .gt-map, .idx .gt-map *{ visibility:visible !important; animation:none !important }/* End custom CSS */