/* Public Surf components; dashboard and authentication styles stay independent. */
.surf-site { margin:0; background:#1f2c34; color:#fff; font-family:"Trebuchet MS",sans-serif; }
.surf-site *, .surf-site *::before, .surf-site *::after { box-sizing:border-box; }
.surf-site a { color:inherit; text-decoration:none; }
.surf-site a:focus-visible,.surf-site button:focus-visible { outline:3px solid #65dce7; outline-offset:6px; }
.surf-site h1,.surf-site h2,.surf-site h3,.surf-site p { margin:0; }
.surf-site h1,.surf-site h2 { font-family:"Arial Black","Helvetica Neue",sans-serif; letter-spacing:-.045em; font-weight:900; line-height:1.02; }
.surf-skip { position:fixed; top:-100px; left:20px; z-index:100; padding:16px; background:#fff; color:#12333f!important; }
.surf-skip:focus { top:16px; }
.site-header { position:relative; z-index:5; background:var(--background-color); color:var(--text-color); }
.site-header-overlay { position:absolute; top:0; left:0; width:100%; background:transparent; }
.preview-banner + .site-header-overlay { top:48px; }
.header-background,.footer-background { position:absolute; inset:0; height:100%; width:100%; object-fit:cover; opacity:.22; pointer-events:none; }
.site-header-inner { min-height:130px; max-width:1500px; margin:auto; padding:28px 6%; display:flex; align-items:center; justify-content:space-between; gap:32px; position:relative; }
.site-brand-link { display:inline-flex; flex-shrink:0; }
.surf-brand { display:flex; align-items:center; gap:12px; }
.surf-brand>span { overflow-wrap:anywhere; width:96px; font-size:24px; line-height:.95; font-weight:900; letter-spacing:-.045em; }
.surf-logo { max-width:180px; max-height:74px; object-fit:contain; }
.site-navigation { min-width:0; flex-wrap:wrap; justify-content:flex-end; display:flex; align-items:center; gap:32px; font-size:12px; letter-spacing:.025em; font-weight:700; }
.site-navigation>a:not(.surf-book):hover,.surf-footer-links a:hover,.surf-contact>a:hover { color:var(--accent-color); }
.surf-book { border:1px solid currentColor; padding:16px 22px; white-space:nowrap; }
.surf-book:hover { background:var(--accent-color); color:var(--button-text-color); border-color:var(--accent-color); }
.surf-languages { display:flex; gap:12px; font-size:12px; letter-spacing:.06em; }
.surf-languages a[aria-current="true"] { border-bottom:2px solid var(--accent-color); padding-bottom:4px; }
.surf-menu-toggle { display:none; }
.surf-hero { isolation:isolate; position:relative; background:var(--background-color); color:var(--text-color); min-height:780px; display:flex; align-items:center; padding:180px 6% 92px; }
.surf-hero-compact { min-height:600px; }
.surf-hero-image,.surf-hero-overlay { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.surf-hero-image { object-position:70% center; }
.surf-hero-overlay { z-index:-1; }
.surf-hero-content { width:100%; max-width:1280px; margin:0 auto; }
.surf-eyebrow { font-size:12px; font-weight:700; letter-spacing:.04em; padding-bottom:18px; }
.surf-hero h1,.surf-hero h2 { max-width:760px; font-size:clamp(48px,6.8vw,100px); text-transform:uppercase; overflow-wrap:anywhere; }
.surf-hero-description { max-width:610px; padding-top:24px; font-size:18px; line-height:1.65; white-space:pre-line; }
.surf-cta { margin-top:40px; padding:21px 24px; min-width:190px; display:inline-flex; align-items:center; justify-content:space-between; gap:28px; background:var(--accent-color); color:var(--button-text-color)!important; font-size:13px; font-weight:800; transition:transform .18s; }
.surf-cta:hover { transform:translateY(-3px); }
.surf-align-center { text-align:center; }.surf-align-center h1,.surf-align-center .surf-hero-description { margin:auto; }
.surf-align-right { text-align:right; }.surf-align-right h1,.surf-align-right .surf-hero-description { margin-left:auto; }
.site-footer { position:relative; background:var(--background-color); color:var(--text-color); padding-top:100px; }
.surf-footer-content { position:relative; }
.surf-community h2 { font-size:clamp(38px,5.3vw,76px); text-align:center; margin:0 6% 65px; text-transform:uppercase; }
.surf-gallery { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.surf-gallery-item { display:block; aspect-ratio:1; overflow:hidden; }
.surf-gallery-item img,.surf-gallery-item svg { display:block; width:100%; height:100%; object-fit:cover; transition:transform .35s; }
.surf-gallery-item:hover img,.surf-gallery-item:hover svg { transform:scale(1.04); }
.surf-footer-columns { max-width:1500px; margin:auto; padding:70px 6%; display:grid; grid-template-columns:1.7fr 1fr 1fr 1.5fr; gap:44px; }
.surf-footer-columns h3 { font-size:13px; font-weight:800; margin-bottom:22px; text-transform:uppercase; letter-spacing:.045em; }
.surf-contact>a { display:block; font-size:14px; margin-bottom:12px; overflow-wrap:anywhere; }
.surf-contact p,.surf-newsletter p { font-size:13px; line-height:1.8; opacity:.85; white-space:pre-line; }
.surf-contact .surf-footer-links { margin-top:22px; }
.surf-footer-links ul { list-style:none; margin:0; padding:0; display:grid; gap:14px; font-size:13px; }
.surf-newsletter-link { display:inline-block; border-bottom:1px solid var(--accent-color); margin-top:20px; padding-bottom:9px; font-size:13px; }
.surf-partners { display:flex; gap:24px; align-items:center; grid-column:1/-1; }
.surf-partners:empty { display:none; }.surf-partners img { max-width:140px; max-height:64px; object-fit:contain; }
.surf-footer-bottom { max-width:1500px; margin:auto; padding:32px 6%; border-top:1px solid #ffffff24; display:flex; gap:32px; align-items:center; flex-wrap:wrap; }
.surf-footer-bottom small { font-size:11px; opacity:.7; flex:1; }.surf-footer-bottom .surf-brand>span { font-size:20px; width:80px; }.surf-footer-bottom .surf-brand svg { width:55px; }
.surf-footer-bottom .surf-footer-links ul { display:flex; flex-wrap:wrap; }
.preview-banner { height:48px; display:flex; align-items:center; justify-content:space-between; padding:10px 4%; background:#eaf8f9; color:#12333f; font-size:12px; position:relative; z-index:10; }
.preview-banner a { text-decoration:underline; }
.surf-article { background:var(--background-color,#faf8f2); color:var(--text-color,#12333f); padding:80px max(6%,calc((100vw - 1000px)/2)); min-height:450px; }.surf-article h1,.surf-article h2 { font-size:clamp(40px,6vw,72px); margin-bottom:32px; }
/* CMS editor */
[hidden] { display:none!important; }.builder-intro { padding:28px 0 18px; }.builder-intro h2 { margin:10px 0; }.builder-intro p { max-width:760px; }
.builder-component { margin-bottom:16px; padding:0; }.builder-component summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:20px; padding:24px; }.builder-component summary::-webkit-details-marker { display:none; }.builder-component-number { color:var(--muted); font-size:13px; }.builder-component summary small { display:block; font-size:12px; font-weight:400; color:var(--muted); margin-top:5px; }.builder-expand { margin-left:auto; font-size:24px; }.builder-component[open] .builder-expand { transform:rotate(45deg); }.builder-component-body { padding:0 24px 24px; }
.builder-settings { align-items:start; }.builder-settings input[type="color"] { padding:4px; height:44px; width:100%; cursor:pointer; }.builder-list,.builder-images { border-top:1px solid var(--line); margin-top:24px; padding-top:18px; }.builder-list h3,.builder-images h3 { margin:0 0 16px; font-size:15px; }.builder-link-row { display:grid; grid-template-columns:1fr 1fr 1.4fr auto; gap:12px; align-items:end; border-bottom:1px solid var(--line); margin-bottom:14px; padding-bottom:14px; }.builder-link-row .field { margin:0; }.builder-remove { margin-bottom:1px; }.builder-images p { font-size:12px; color:var(--muted); }.builder-image { min-width:0; }.builder-image input[type="file"] { max-width:100%; font-size:12px; }.builder-thumbnail { max-width:100%; width:160px; height:90px; object-fit:contain; display:block; background:#1f2c34; margin-bottom:12px; }.builder-image-remove { display:flex; gap:8px; align-items:center; font-size:12px; margin-top:10px; }.builder-image-remove input { width:auto; }
@media (max-width:1100px) { .site-navigation { gap:20px; }.site-header-inner { padding:24px 4%; }.surf-footer-columns { gap:28px; }.surf-hero { min-height:700px; }.surf-hero-compact { min-height:560px; } }
@media (max-width:900px) {
 .site-header-inner { min-height:104px; }.surf-brand svg { width:55px; }.surf-brand>span { font-size:21px; width:84px; }
 .surf-menu-toggle { display:flex; flex-direction:column; gap:6px; width:46px; height:46px; padding:12px 8px; border:0; background:transparent; color:inherit; cursor:pointer; }.surf-menu-toggle span { display:block; width:28px; height:2px; background:currentColor; }
 .site-navigation { display:none; position:absolute; top:100%; left:0; right:0; padding:28px 6%; background:var(--background-color); flex-direction:column; align-items:flex-start; gap:26px; box-shadow:0 20px 30px #0003; }.menu-open .site-navigation { display:flex; }
 .surf-hero { min-height:730px; padding:170px 6% 64px; align-items:flex-end; }.surf-hero h1,.surf-hero h2 { font-size:clamp(46px,9vw,76px); max-width:680px; }.surf-hero-compact { min-height:570px; }
 .surf-footer-columns { grid-template-columns:1.5fr 1fr; padding:48px 6%; }.surf-gallery { gap:5px; }.site-footer { padding-top:70px; }.surf-community h2 { margin-bottom:40px; }
 .builder-link-row { grid-template-columns:1fr 1fr; }.builder-remove { justify-self:start; }
}
@media (max-width:540px) {
 .site-header-inner { padding:20px 6%; }.surf-hero { min-height:720px; padding-top:150px; }.surf-hero-compact { min-height:580px; }.surf-hero-image { object-position:68% center; opacity:.7; }.surf-hero h1,.surf-hero h2 { font-size:49px; }.surf-eyebrow { font-size:10px; }.surf-hero-description { font-size:15px; }.surf-cta { margin-top:30px; padding:18px 22px; }.surf-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }.surf-gallery-item:last-child:nth-child(odd) { grid-column:1/-1; aspect-ratio:2; }.surf-footer-columns { grid-template-columns:1fr 1fr; gap:36px 20px; }.surf-contact,.surf-newsletter { grid-column:1/-1; }.surf-footer-bottom { gap:26px; }.surf-footer-bottom small { flex-basis:calc(100% - 200px); }.surf-footer-bottom .surf-languages { margin-left:auto; }.preview-banner { font-size:10px; }.builder-link-row { grid-template-columns:1fr; }.builder-component summary { padding:18px; }.builder-component-body { padding:0 18px 18px; }
}
@media (prefers-reduced-motion:reduce) { .surf-site * { transition:none!important; } }

.surf-footer-links a { overflow-wrap:anywhere; }.builder-preview-language { max-width:260px; }

/* Global component administration */
.sidebar-settings summary { cursor:pointer; font-size:14px; font-weight:600; padding:12px 14px; border-radius:8px; }
.sidebar-submenu { margin:4px 0 8px 14px; border-left:1px solid var(--line); padding-left:8px; }
.settings-tabs { display:flex; gap:8px; margin:20px 0 28px; border-bottom:1px solid var(--line); }
.settings-tabs a { padding:12px 20px; color:var(--muted); text-decoration:none; }.settings-tabs a.active { color:var(--ink); border-bottom:2px solid var(--sea); font-weight:700; }
.cms-form>.builder-component>.builder-component-body { padding-top:24px; }.builder-global-hint { margin:20px 0 0; font-size:13px; line-height:1.7; color:var(--muted); }.builder-global-hint a { font-weight:600; }
.navigation-overview { margin-top:32px; }.navigation-overview>p { color:var(--muted); font-size:13px; line-height:1.7; }.navigation-overview ul { padding:0; list-style:none; }.navigation-overview li { display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--line); padding:16px 0; }.navigation-overview small { display:block; font-size:12px; margin-top:6px; color:var(--muted); }

.site-navigation>a { max-width:24ch; overflow-wrap:anywhere; }

.section-add-buttons,.section-toolbar { display:flex; gap:10px; flex-wrap:wrap; }.section-add-buttons { margin:24px 0; }.section-toolbar { padding:0 24px 20px; }.section-toolbar button { font-size:12px; }.section-toolbar button:disabled { opacity:.4; cursor:default; }.page-section-card>.errors { margin:0 24px 20px; }.page-section-card .builder-component-body { border-top:1px solid var(--line); padding-top:24px; }.page-sections-editor [hidden] { display:none!important; }

.header-navigation-row { display: flex; align-items: center; gap: 1rem; padding: 1rem; margin-bottom: 0.75rem; border: 1px solid var(--border, #d9e2e5); border-radius: 12px; background: var(--surface, #fff); }
.navigation-row-content { flex: 1; min-width: 0; }
.navigation-row-content > strong, .navigation-row-content > small { display: block; overflow-wrap: anywhere; }
.navigation-row-content > small { margin: .4rem 0; }
.navigation-row-actions { display: flex; flex-direction: column; gap: .5rem; flex-shrink: 0; }
.navigation-row-actions button:disabled { opacity: .4; cursor: default; }
@media (max-width: 640px) { .header-navigation-row { flex-direction: column; align-items: stretch; } .navigation-row-actions { flex-direction: row; flex-wrap: wrap; } }

/* Visual page studio: isolated from the published site and other CMS screens. */
.visual-editor-page { overflow: hidden; }
.visual-editor-page > .topbar, .visual-editor-page .sidebar, .visual-editor-page .page-heading { display: none; }
.visual-editor-page .shell { display: block; min-height: 100dvh; }
.visual-editor-page .main-content { padding: 0; max-width: none; height: 100dvh; }
.visual-editor-page .main-content > .flash { margin: 0; }
.visual-editor { height: 100dvh; display: flex; flex-direction: column; background: #edf0eb; }
.editor-toolbar { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 22px; background: #fcfdf9; border-bottom: 1px solid #d9e1d8; }
.editor-heading { display: flex; align-items: center; gap: 20px; min-width: 0; }
.editor-wordmark { font-family: var(--serif); font-size: 34px; font-weight: 700; letter-spacing: -2px; color: var(--sea); text-decoration: none; }
.editor-heading .overline { display: block; margin-bottom: 4px; font-size: 9px; color: var(--muted); }
.editor-heading strong { display: block; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.editor-display-controls, .editor-save-controls { display: flex; align-items: center; gap: 12px; }
.editor-devices { display: flex; padding: 3px; background: #eaf0e8; border-radius: 6px; }
.editor-devices button { border: 0; border-radius: 4px; padding: 8px 12px; font: inherit; font-size: 11px; background: transparent; color: #67776a; cursor: pointer; }
.editor-devices button[aria-pressed=true] { color: #123c36; background: #fff; box-shadow: 0 1px 3px #122d211a; }
.editor-locale { display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--muted); }
.editor-locale select { width: auto; min-width: 62px; padding: 8px; font-size: 12px; }
.editor-toolbar .button { min-height: 36px; padding: 8px 12px; font-size: 11px; white-space: nowrap; }
.editor-publish { background: #183833; border-color: #183833; }
.editor-dirty { font-size: 10px; color: var(--muted); }
.editor-workspace { display: grid; grid-template-columns: 340px minmax(0, 1fr); flex: 1; min-height: 0; }
.editor-inspector { background: #fcfdf9; border-right: 1px solid #d9e1d8; padding: 18px; overflow-y: auto; overscroll-behavior: contain; }
.editor-inspector .field { margin-bottom: 15px; }
.editor-inspector .field label { font-size: 11px; margin-bottom: 7px; }
.editor-inspector input, .editor-inspector textarea, .editor-inspector select { font-size: 12px; padding: 10px; }
.editor-inspector input[type=checkbox] { width: auto; }
.editor-inspector .form-grid { grid-template-columns: 1fr; gap: 0; }
.editor-inspector .field small, .editor-save-hint { font-size: 10px; line-height: 1.65; color: var(--muted); }
.editor-page-settings { border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.editor-page-settings > summary { cursor: pointer; list-style: none; font-size: 12px; font-weight: 700; display: flex; justify-content: space-between; }
.editor-page-settings-body { padding-top: 20px; }
.editor-global-components { display: flex; align-items: center; gap: 12px; padding: 16px 0; font-size: 10px; border-bottom: 1px solid var(--line); }
.editor-global-components span { margin-right: auto; color: var(--muted); }
.editor-inspector .builder-intro { padding: 20px 0 8px; }
.editor-inspector .builder-intro .overline { display: none; }
.editor-inspector .builder-intro h2 { font: 700 15px var(--sans, sans-serif); margin: 0 0 6px; }
.editor-inspector .builder-intro p { color: var(--muted); font-size: 10px; line-height: 1.6; }
.editor-inspector .section-add-buttons { margin: 10px 0 20px; display: grid; grid-template-columns: 1fr 1fr; }
.editor-inspector .section-add-buttons .button { border: 1px dashed #aac0af; min-height: 54px; padding: 8px; font-size: 11px; cursor: grab; }
.editor-inspector .page-section-card { border-radius: 6px; margin-bottom: 10px; }
.editor-inspector .page-section-card.is-selected { border-color: #2c8776; box-shadow: 0 0 0 1px #2c8776; }
.editor-inspector .page-section-card > summary { padding: 12px; gap: 10px; font-size: 12px; }
.editor-inspector .builder-component-number { font-size: 10px; }
.editor-inspector .builder-expand { font-size: 18px; }
.section-drag-handle { cursor: grab; color: #698674; font-size: 20px; user-select: none; }
.editor-inspector .section-toolbar { padding: 0 12px 12px; gap: 5px; }
.editor-inspector .section-toolbar .button { padding: 6px 8px; min-height: 30px; font-size: 9px; }
.editor-inspector .builder-component-body { padding: 14px 12px 6px; }
.editor-inspector .builder-images { margin-top: 8px; padding-top: 14px; }
.editor-inspector .builder-images h3 { font-size: 12px; margin-bottom: 8px; }
.editor-inspector .builder-images p { font-size: 10px; line-height: 1.5; }
.editor-inspector .errors { font-size: 11px; }
.editor-external-preview { width: 100%; margin-top: 8px; font-size: 11px; }
.editor-canvas-area { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.editor-canvas-bar { display: flex; align-items: center; gap: 14px; min-height: 42px; padding: 10px 22px; border-bottom: 1px solid #dae1d8; color: #526c5b; font-size: 10px; }
.editor-canvas-bar > span:last-child { margin-left: auto; text-align: right; }
.editor-live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #328673; margin-right: 7px; }
.editor-canvas-stage { flex: 1; min-height: 0; display: flex; justify-content: center; padding: 20px; overflow: hidden; background: #e6ebe4; background-image: radial-gradient(#a7b9ab55 .8px, transparent .8px); background-size: 14px 14px; }
.editor-canvas-device { width: 1280px; flex-shrink: 0; transform-origin: top center; box-shadow: 0 10px 45px #203b2524; background: #fff; }
.editor-canvas-device iframe { border: 0; display: block; width: 100%; height: 100%; background: #fff; }
.editor-canvas-help { display: flex; justify-content: space-between; gap: 10px; padding: 11px 20px; font-size: 10px; color: #68796b; background: #f3f6ef; border-top: 1px solid #dae1d8; }
.visual-editor.is-dragging .editor-canvas-stage { background-color: #d7e6d7; }
.editor-canvas .canvas-section { position: relative; cursor: pointer; outline-offset: -3px; }
.editor-canvas .canvas-section:hover { outline: 2px solid #65dce7; }
.editor-canvas .canvas-section.is-selected, .editor-canvas .canvas-section:focus-visible { outline: 3px solid #65dce7; }
.editor-canvas .canvas-section.is-selected::after { content: attr(aria-label); position: absolute; top: 0; left: 0; z-index: 9; padding: 8px 14px; background: #65dce7; color: #12333f; font: 700 12px 'Trebuchet MS', sans-serif; }
.canvas-empty { min-height: 440px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; padding: 50px 24px; text-align: center; color: #183833; background: #fafbf5; border: 2px dashed #b6cabe; }
.canvas-empty > span { font-size: 45px; font-weight: 400; color: #2c8776; }
.surf-site .canvas-empty h1 { max-width: 550px; font-size: clamp(32px, 4vw, 54px); text-transform: none; }
.canvas-empty p { font-size: 14px; max-width: 400px; line-height: 1.7; color: #68796b; }
@media (max-width: 1100px) { .editor-toolbar { gap: 12px; padding: 12px; } .editor-heading strong { max-width: 150px; } .editor-workspace { grid-template-columns: 300px minmax(0,1fr); } .editor-dirty, .editor-locale label { display: none; } .editor-heading { gap: 12px; } .editor-devices button { padding: 8px; } }
@media (max-width: 760px) { .editor-toolbar { flex-wrap: wrap; min-height: 110px; } .editor-heading { flex: 1; } .editor-display-controls { order: 3; flex-basis: 100%; justify-content: center; } .editor-wordmark { font-size: 28px; } .editor-save-controls { gap: 5px; } .editor-save-controls a { display: none; } .editor-workspace { grid-template-columns: 1fr; grid-template-rows: minmax(160px, 40%) minmax(0,1fr); } .editor-inspector { border-right: 0; border-bottom: 1px solid #d9e1d8; } .editor-canvas-bar { padding: 8px 12px; } .editor-canvas-help { font-size: 9px; padding: 8px 12px; } .editor-canvas-help > span:last-child { display: none; } }

.editor-inspector .page-section-card.is-drop-before { border-top: 4px solid #2c8776; }
.editor-inspector .page-section-card.is-drop-after { border-bottom: 4px solid #2c8776; }
.editor-canvas .canvas-section.is-drop-before { border-top: 4px solid #65dce7; }
.editor-canvas .canvas-section.is-drop-after { border-bottom: 4px solid #65dce7; }
