:root { --try-navy: #06284a; --try-yellow: #ffc400; --try-ink: #13263d; --try-muted: #627084; --try-line: #d9e0e7; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
.try-page { margin: 0; color: var(--try-ink); background: #e8edf1; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.try-topbar { position: sticky; z-index: 100; top: 0; min-height: 66px; display: grid; grid-template-columns: 230px 1fr auto; align-items: center; gap: 24px; padding: 10px 20px; color: #fff; background: #071c31; border-bottom: 4px solid var(--try-yellow); box-shadow: 0 8px 30px rgba(0,0,0,.18); }
.try-topbar > a { color: var(--try-yellow); font-weight: 900; text-decoration: none; }
.try-topbar > div { display: grid; justify-items: center; line-height: 1.2; }
.try-topbar strong { font-size: .86rem; text-transform: uppercase; letter-spacing: .1em; }
.try-topbar span { margin-top: 4px; color: rgba(255,255,255,.65); font-size: .74rem; }
.try-topbar button { padding: 8px 13px; color: #071c31; background: var(--try-yellow); border: 0; border-radius: 5px; font-weight: 900; cursor: pointer; }
.try-shell { display: grid; grid-template-columns: 410px minmax(0, 1fr); min-height: calc(100vh - 66px); }
.try-shell.editor-hidden { grid-template-columns: 0 minmax(0, 1fr); }
.try-shell.editor-hidden .try-editor { visibility: hidden; overflow: hidden; padding-inline: 0; }
.try-editor { position: sticky; top: 66px; height: calc(100vh - 66px); overflow-y: auto; padding: 27px 24px 60px; background: #fff; border-right: 1px solid var(--try-line); transition: padding .2s ease; }
.editor-intro { padding: 0 2px 22px; border-bottom: 1px solid var(--try-line); }
.editor-intro > p { margin: 0; color: #9b7600; font-size: .7rem; font-weight: 950; letter-spacing: .14em; text-transform: uppercase; }
.editor-intro h1 { margin: 5px 0 8px; color: var(--try-navy); font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: 2.65rem; font-weight: 400; line-height: 1; text-transform: uppercase; }
.editor-intro span { color: var(--try-muted); font-size: .85rem; }
.try-editor form { display: grid; gap: 17px; margin-top: 20px; }
.try-editor fieldset { display: grid; gap: 12px; margin: 0; padding: 17px; border: 1px solid var(--try-line); border-radius: 10px; }
.try-editor legend { padding: 0 7px; color: var(--try-navy); font-size: .72rem; font-weight: 950; letter-spacing: .11em; text-transform: uppercase; }
.try-editor label { display: grid; gap: 5px; color: var(--try-navy); font-size: .76rem; font-weight: 850; }
.try-editor input, .try-editor select, .try-editor textarea { width: 100%; padding: 9px 10px; color: var(--try-ink); background: #fbfcfd; border: 1px solid #cbd5df; border-radius: 5px; font: inherit; font-weight: 500; }
.try-editor textarea { resize: vertical; line-height: 1.4; }
.try-editor input:focus, .try-editor select:focus, .try-editor textarea:focus { outline: 3px solid rgba(255,196,0,.34); border-color: var(--try-navy); }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.colours input { min-height: 42px; padding: 4px; }
.file-field input { padding: 7px; font-size: .71rem; }
.field-help { margin: 0; color: var(--try-muted); font-size: .72rem; line-height: 1.45; }
.image-message { min-height: 1.2em; color: #296440; font-size: .72rem; font-weight: 800; }
.editor-actions { position: sticky; bottom: -1px; z-index: 3; display: grid; gap: 9px; margin: 0 -8px; padding: 16px 8px 8px; background: linear-gradient(transparent, #fff 18%); }
.editor-actions button { min-height: 45px; padding: 10px 13px; border-radius: 5px; font: inherit; font-weight: 950; cursor: pointer; }
.try-primary { color: var(--try-navy); background: var(--try-yellow); border: 2px solid var(--try-navy); box-shadow: 3px 3px 0 var(--try-navy); }
.try-secondary { color: var(--try-navy); background: #fff; border: 1px solid #bdc8d2; }
.editor-actions small { color: var(--try-muted); text-align: center; }
.try-preview { min-width: 0; padding: 22px; }
.preview-label { display: flex; justify-content: space-between; gap: 20px; max-width: 1180px; margin: 0 auto 10px; color: var(--try-muted); font-size: .72rem; }
.preview-label span { color: var(--try-navy); font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.site-canvas { --site-primary: #173b62; --site-accent: #f4b942; max-width: 1180px; margin-inline: auto; overflow: hidden; background: var(--site-paper); border-radius: 12px; box-shadow: 0 20px 65px rgba(3,26,50,.18); }
.site-canvas .sample-wrap { width: min(calc(100% - 40px), 1080px); }
.site-canvas .sample-header { position: relative; }
.site-canvas .header-inner { min-height: 78px; }
.site-canvas .sample-brand strong { font-size: 1.18rem; }
.site-canvas .sample-nav { gap: 15px; }
.site-canvas .sample-nav a { font-size: .8rem; }
.site-canvas .hero-inner { min-height: 560px; }
.site-canvas .sample-hero h1 { font-size: clamp(3rem, 5.4vw, 5.25rem); }
.site-canvas .sample-hero::before { background-image: linear-gradient(90deg,var(--hero-overlay),var(--hero-overlay-soft)),var(--try-hero-image, none); }
.site-canvas .sample-hero.has-image::before { background-size: cover; background-position: center; }
.site-canvas .sample-section { padding: 78px 0; }
.site-canvas .service-grid article { min-height: 275px; }
.site-canvas .sample-heading h2, .site-canvas .about-grid h2, .site-canvas .inner-page h2 { font-size: clamp(2.4rem, 4.5vw, 4rem); }
.try-contact { background: #fff; }
.try-contact .contact-grid { align-items: start; }
.try-contact .sample-form { pointer-events: auto; }
.try-legal { padding-block: 52px !important; background: #eef1f3; }
.legal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.legal-grid article { padding: 22px; background: #fff; border: 1px solid var(--site-line); border-radius: var(--site-radius); }
.legal-grid p { margin: 0 0 8px; color: var(--site-primary); font-weight: 900; }
.legal-grid span { color: var(--site-muted); font-size: .82rem; }
.project-image.has-photo span { display: none; }
.project-image:not(.has-photo) img { display: none; }

@media (max-width: 1050px) {
    .try-shell { grid-template-columns: 350px minmax(0, 1fr); }
    .site-canvas .try-nav { display: none; }
    .site-canvas .hero-inner { grid-template-columns: 1fr; }
    .site-canvas .hero-art { display: none; }
    .site-canvas .service-grid { grid-template-columns: 1fr 1fr; }
    .site-canvas .project-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .try-topbar { position: relative; grid-template-columns: 1fr auto; min-height: 72px; }
    .try-topbar > div { display: none; }
    .try-shell, .try-shell.editor-hidden { display: block; }
    .try-editor { position: relative; top: 0; height: auto; max-height: none; border-right: 0; border-bottom: 4px solid var(--try-yellow); }
    .try-shell.editor-hidden .try-editor { display: none; }
    .try-preview { padding: 12px 8px; }
    .preview-label { padding-inline: 6px; }
    .preview-label strong { display: none; }
    .site-canvas { border-radius: 5px; }
    .site-canvas .sample-wrap { width: min(calc(100% - 28px), 1080px); }
    .site-canvas .sample-brand strong { font-size: 1rem; }
    .site-canvas .sample-hero h1 { font-size: clamp(2.7rem, 13vw, 4.2rem); }
    .site-canvas .hero-inner { min-height: 620px; }
    .site-canvas .service-grid, .site-canvas .project-grid, .site-canvas .about-grid, .site-canvas .contact-grid, .legal-grid { grid-template-columns: 1fr; }
    .site-canvas .about-grid, .site-canvas .contact-grid { gap: 35px; }
}

@media (max-width: 430px) {
    .try-topbar { padding-inline: 12px; }
    .try-topbar button { font-size: .75rem; }
    .try-editor { padding-inline: 16px; }
    .field-pair { grid-template-columns: 1fr; }
}