:root { --navy:#022451; --gold:#DB9D20; --white:#FFFFFF; --grey:#5B5E5F; --pale:#f4f7fa; --line:#d8e0e8; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--navy); background:linear-gradient(145deg,#edf3f7 0%,#fff9ed 100%); font-family:Arial, Helvetica, sans-serif; line-height:1.5; }
.app-shell { width:min(100% - 32px, 820px); margin:0 auto; padding:48px 0 40px; }
.hero { text-align:center; margin-bottom:28px; }
.eyebrow { margin:0 0 6px; font-weight:800; font-size:.78rem; letter-spacing:.11em; color:var(--gold); }
h1,h2,h3 { line-height:1.15; margin:0; } h1 { font-size:clamp(2rem,6vw,3.25rem); } h2 { font-size:clamp(1.5rem,4vw,2rem); } h3 { font-size:1.2rem; }
.intro { max-width:560px; margin:12px auto 0; color:var(--grey); font-size:1.08rem; }
.library-link { display:inline-block; margin-top:16px; color:var(--navy); font-weight:800; text-decoration-thickness:2px; text-underline-offset:4px; }
.card { background:var(--white); border-radius:18px; padding:clamp(22px,5vw,42px); box-shadow:0 14px 42px rgba(2,36,81,.12); }
.progress-labels { display:flex; justify-content:space-between; gap:12px; font-size:.9rem; font-weight:bold; color:var(--grey); }
.progress-track { height:10px; overflow:hidden; margin:9px 0 32px; border-radius:999px; background:#e5ebf0; }
.progress-fill { height:100%; width:10%; background:var(--gold); transition:width .25s ease; }
.question-number { margin:0 0 8px; color:var(--gold); font-weight:bold; }
label { display:block; margin-bottom:10px; font-size:clamp(1.3rem,3vw,1.7rem); font-weight:800; }
textarea,input[type=text] { width:100%; min-height:132px; padding:15px; resize:vertical; border:2px solid var(--line); border-radius:10px; color:var(--navy); font:inherit; }
textarea:focus,input:focus { outline:3px solid rgba(219,157,32,.28); border-color:var(--gold); }
.example { margin:12px 0 0; color:var(--grey); background:var(--pale); border-radius:10px; padding:12px 14px; }
.radio-options { display:grid; gap:12px; margin-top:14px; }
.radio-option { display:flex; gap:12px; align-items:flex-start; padding:15px; border:2px solid var(--line); border-radius:10px; cursor:pointer; color:var(--grey); }
.radio-option:has(input:checked) { border-color:var(--gold); background:#fffaf0; color:var(--navy); }
.radio-option input { width:20px; height:20px; margin-top:2px; accent-color:var(--gold); }
.suggestion-option { display:flex; align-items:center; gap:9px; margin-top:14px; padding:10px 0; cursor:pointer; color:var(--grey); font-size:.95rem; font-weight:700; }
.suggestion-option input { width:18px; height:18px; accent-color:var(--gold); }
.radio-option strong { display:block; color:var(--navy); }
.actions { display:flex; gap:12px; margin-top:28px; } .wizard-actions { justify-content:space-between; }
.button { cursor:pointer; border:2px solid var(--gold); border-radius:9px; padding:11px 19px; background:var(--gold); color:var(--navy); font:inherit; font-weight:800; }
.button:hover { background:#c88b13; border-color:#c88b13; } .button:focus-visible { outline:3px solid var(--navy); outline-offset:2px; }
.button-secondary { color:var(--navy); background:var(--white); border-color:var(--navy); } .button-secondary:hover { background:#edf3f7; border-color:var(--navy); }
.button-small { padding:8px 13px; font-size:.9rem; } .form-message { min-height:1.5em; color:#b42318; font-weight:bold; }
.hidden { display:none; }.results-heading,.prompt-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }.plan-output { display:grid; gap:14px; margin-top:28px; }.plan-block { padding:17px; border-left:5px solid var(--gold); background:var(--pale); border-radius:0 10px 10px 0; }.plan-block h3 { margin-bottom:5px; font-size:1rem; }.plan-content,.plan-content ul { margin:0; color:var(--grey); }.plan-content ul { padding-left:20px; }.prompt-section { margin-top:30px; }.prompt-heading { margin-bottom:10px; } #codex-prompt { min-height:380px; background:#f8fafc; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.86rem; }.results-actions { justify-content:flex-end; }.privacy-note { margin:18px 10px 0; text-align:center; color:var(--grey); font-size:.9rem; }
.library-intro { margin-bottom:22px; }.library-intro ol { margin:15px 0 0; padding-left:22px; color:var(--grey); }.library-intro li+li { margin-top:8px; }.prompt-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:18px; }.prompt-card { display:flex; flex-direction:column; padding:24px; background:var(--white); border-radius:15px; box-shadow:0 8px 24px rgba(2,36,81,.1); }.prompt-card h2 { font-size:1.35rem; }.prompt-card > p:not(.eyebrow):not(.copy-status) { color:var(--grey); }.platform-picker { margin-top:auto; padding-top:12px; font-size:.9rem; font-weight:800; }.platform-picker select { margin-left:5px; border:2px solid var(--line); border-radius:7px; padding:7px; color:var(--navy); background:var(--white); font:inherit; }.card-actions { display:grid; gap:9px; margin-top:16px; }.card-actions .button { width:100%; text-align:left; }.copy-status { min-height:1.3em; margin:10px 0 0; color:var(--grey); font-size:.85rem; }
.preview-shell { max-width:720px; }.preview-header { text-align:center; padding-bottom:20px; border-bottom:1px solid var(--line); }.preview-header .intro { margin-bottom:0; }.preview-about { margin:24px 0; padding:17px; border-left:5px solid var(--gold); border-radius:0 10px 10px 0; background:var(--pale); }.preview-about h2,.preview-result h2 { font-size:1.15rem; }.preview-about p,.preview-result p { margin-bottom:0; color:var(--grey); }.prototype-form { display:grid; gap:10px; }.prototype-form label { margin:0; font-size:1.3rem; }.form-hint { margin:0; color:var(--grey); }.prototype-form .button { justify-self:start; }.preview-result { margin-top:24px; padding:20px; border:2px solid var(--gold); border-radius:12px; background:#fffaf0; }.preview-note { margin:24px 0 0; color:var(--grey); font-size:.9rem; }
.photo-site { max-width:1000px; padding:0; overflow:hidden; background:#fcfaf5; box-shadow:0 14px 42px rgba(2,36,81,.12); }.photo-nav { display:flex; justify-content:space-between; gap:20px; padding:22px 38px; color:#182222; font-size:.88rem; letter-spacing:.05em; }.photo-hero { min-height:430px; padding:78px 38px; color:#fff; background:linear-gradient(105deg,rgba(10,25,29,.9),rgba(10,25,29,.22)),linear-gradient(135deg,#4d6060,#b4976e); }.photo-hero h1 { max-width:700px; font-family:Georgia,serif; font-size:clamp(3rem,8vw,5.9rem); letter-spacing:-.05em; }.photo-hero > p:not(.eyebrow) { max-width:470px; margin:22px 0 28px; font-size:1.1rem; }.photo-hero .button { display:inline-block; background:#e4b14a; border-color:#e4b14a; color:#1a2828; text-decoration:none; }.gallery-section { padding:68px 38px; }.section-intro { max-width:620px; }.section-intro h2,.photo-services h2,.enquiry-section h2 { margin-top:5px; font-family:Georgia,serif; font-size:clamp(2rem,5vw,3.3rem); }.section-intro p:not(.eyebrow),.photo-services p,.enquiry-section p { color:#53605d; }.photo-grid { display:grid; grid-template-columns:1.2fr .8fr; grid-template-rows:260px 210px; gap:13px; margin-top:35px; }.photo-tile { display:flex; align-items:flex-end; padding:20px; color:#fff; font-family:Georgia,serif; font-size:1.7rem; background:#526b68; }.tile-wild { grid-row:span 2; background:linear-gradient(140deg,rgba(22,37,30,.16),rgba(22,37,30,.65)),linear-gradient(135deg,#9aa87c,#253f35); }.tile-portrait { background:linear-gradient(135deg,#795d54,#d6b49b); }.tile-travel { background:linear-gradient(135deg,#34434e,#899a9a); }.tile-nature { background:linear-gradient(135deg,#c89253,#714430); }.photo-services { padding:72px 38px; text-align:center; background:#e6dfd1; }.photo-services p:last-child { max-width:550px; margin:15px auto 0; }.enquiry-section { display:grid; grid-template-columns:1fr 1fr; gap:38px; padding:68px 38px; }.photo-form { display:grid; gap:12px; }.photo-form textarea { min-height:145px; background:#fff; }.photo-form .button { justify-self:start; }.enquiry-success { padding:14px; border-radius:8px; color:#274037; background:#e6efe5; }.photo-site .preview-note { margin:0; padding:0 38px 34px; }
@media (max-width:620px) { .photo-nav { padding:18px 22px; }.photo-nav span { display:none; }.photo-hero,.gallery-section,.photo-services,.enquiry-section { padding-left:22px; padding-right:22px; }.photo-grid { grid-template-columns:1fr 1fr; grid-template-rows:220px 160px; }.photo-tile { font-size:1.3rem; }.enquiry-section { grid-template-columns:1fr; gap:20px; }.photo-site .preview-note { padding:0 22px 28px; } }
.dashboard-site { display:grid; grid-template-columns:190px 1fr; max-width:1000px; padding:0; overflow:hidden; background:#eef1f8; }.dash-sidebar { display:grid; align-content:start; gap:24px; min-height:680px; padding:32px 22px; color:#cfd7ee; background:#151c3a; }.dash-sidebar strong { margin-bottom:30px; color:#fff; font-size:.95rem; }.dash-sidebar span { font-size:.9rem; }.dash-main { padding:48px; }.dash-main header h1 { margin-top:8px; font-size:clamp(2.5rem,5vw,4.2rem); }.dash-main header>p:not(.eyebrow) { color:#68718a; }.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:30px 0; }.stat-grid article,.dash-panel { border-radius:14px; background:#fff; box-shadow:0 8px 20px rgba(20,30,60,.07); }.stat-grid article { display:grid; gap:8px; padding:18px; }.stat-grid small,.dash-panel small { color:#7b849c; }.stat-grid strong { color:#242c5b; font-size:1.15rem; }.dash-panel { padding:26px; }.dash-panel h2 { font-size:1.35rem; }.dash-panel ul { display:grid; gap:8px; padding:0; list-style:none; }.dash-panel li { display:grid; grid-template-columns:30px 1fr auto; align-items:center; padding:13px; border-radius:9px; background:#f4f6fb; }.dash-panel li button { width:24px; height:24px; border:0; border-radius:50%; color:#fff; background:#5365e8; }.dash-panel form { display:flex; gap:8px; margin-top:18px; }.dash-panel input { min-width:0; flex:1; padding:11px; border:1px solid #dbe0ef; border-radius:8px; font:inherit; }.dash-panel .button { padding:9px 14px; }.inline-feedback { min-height:1.2em; color:#28724b; font-weight:bold; }.landing-site { max-width:1000px; padding:0; overflow:hidden; background:#fdfaf6; }.landing-nav { display:flex; justify-content:space-between; align-items:center; padding:21px 38px; }.landing-nav span { color:#65706d; font-size:.88rem; }.landing-nav button { border:0; padding:10px 15px; border-radius:99px; color:#fff; background:#193b36; font:inherit; }.landing-hero { display:grid; grid-template-columns:1.2fr .8fr; gap:20px; align-items:center; padding:66px 38px; }.landing-hero h1 { margin-top:8px; font-size:clamp(3rem,6vw,5rem); letter-spacing:-.06em; }.landing-hero p:not(.eyebrow) { max-width:500px; color:#586260; font-size:1.1rem; }.landing-hero .button { display:inline-block; color:#fff; border-color:#193b36; background:#193b36; text-decoration:none; }.landing-shape { display:grid; place-items:center; aspect-ratio:1; border-radius:48% 48% 16% 48%; color:#fff; background:linear-gradient(145deg,#f0b75f,#d96d58); }.landing-shape span { font-size:6rem; }.landing-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#dacfc1; }.landing-cards article { padding:30px; background:#fbf5ec; }.landing-cards b { color:#dd8a48; }.landing-cards h2 { font-size:1.15rem; }.landing-cards p { color:#68716f; }.landing-contact { display:grid; grid-template-columns:1fr 1fr; gap:30px; padding:58px 38px; color:#fff; background:#193b36; }.landing-contact h2 { font-size:2rem; }.landing-contact textarea { min-height:120px; background:#fff; }.landing-contact form { display:grid; gap:10px; }.landing-contact .button { justify-self:start; border-color:#f0b75f; background:#f0b75f; }.action-site { max-width:900px; padding:0; overflow:hidden; color:#fff; background:#141629; }.action-hero { padding:72px 46px 165px; background:radial-gradient(circle at 85% 20%,#8b70e8 0 13%,transparent 14%),radial-gradient(circle at 75% 70%,#e56692 0 17%,transparent 18%),#141629; }.action-hero h1 { margin-top:8px; font-size:clamp(3rem,7vw,5.2rem); letter-spacing:-.06em; }.action-hero>p:not(.eyebrow) { max-width:560px; color:#cad0e7; font-size:1.1rem; }.action-board { display:grid; grid-template-columns:1.1fr .9fr; gap:18px; margin:-92px 28px 28px; }.action-tiles { display:grid; gap:12px; }.action-tiles article { display:grid; grid-template-columns:45px 1fr; gap:4px 12px; padding:20px; border-radius:13px; color:#25273b; background:#fff; box-shadow:0 10px 28px rgba(0,0,0,.18); }.action-tiles span { grid-row:span 2; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; color:#fff; background:#836de1; }.action-tiles p { grid-column:2; margin:0; color:#72778d; }.action-form { align-self:start; display:grid; gap:12px; padding:24px; border-radius:13px; color:#25273b; background:#f6c95c; }.action-form h2 { margin:0; }.action-form textarea { min-height:120px; background:#fffef9; }.action-form .button { justify-self:start; border-color:#25273b; color:#fff; background:#25273b; }
@media (max-width:700px) { .dashboard-site { grid-template-columns:1fr; }.dash-sidebar { display:flex; min-height:0; overflow:auto; padding:18px; }.dash-sidebar strong { margin:0 15px 0 0; white-space:nowrap; }.dash-sidebar span { white-space:nowrap; }.dash-main { padding:28px 20px; }.stat-grid,.landing-cards { grid-template-columns:1fr; }.landing-nav,.landing-hero,.landing-contact { padding-left:22px; padding-right:22px; }.landing-nav span { display:none; }.landing-hero,.landing-contact,.action-board { grid-template-columns:1fr; }.landing-shape { max-width:300px; }.action-hero { padding:50px 25px 145px; }.action-board { margin:-85px 16px 16px; } }
@media (max-width:560px) { .app-shell { width:min(100% - 20px,820px); padding-top:28px; }.card { padding:22px; }.results-heading,.prompt-heading { align-items:flex-start; flex-direction:column; }.prompt-heading .button { width:100%; }.button { padding:11px 15px; } }