:root{--navy:#00015E;--blue:#00015E;--orange:#FFA800;--ink:#17213A;--muted:#62677D;--pale:#D9D9F2;--line:#e0e8ed;--white:#fff;--radius:16px;--container:1180px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:16px/1.7 Arial,Helvetica,sans-serif;color:var(--ink);background:#fff}img{max-width:100%;height:auto}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}.container{width:min(var(--container),calc(100% - 48px));margin-inline:auto}.site-header{position:relative;z-index:20;height:80px;background:#fff;border-bottom:1px solid var(--line)}.nav-wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:28px}.brand{display:flex;align-items:center;gap:11px;flex-shrink:0;color:var(--navy)}.brand-symbol{display:grid;place-items:center;width:43px;height:43px;border-radius:10px;background:var(--navy);color:#fff;font-size:27px;font-weight:800;line-height:1}.brand-symbol span{color:var(--orange)}.brand-name{display:block;font-size:14px;line-height:1.3;font-weight:800;letter-spacing:1px}.brand-name small{display:block;margin-top:3px;font-size:8px;font-weight:700;letter-spacing:1.2px}.main-nav{display:flex;align-items:center;gap:26px;font-size:13px;font-weight:700}.main-nav>a:not(.nav-contact){padding:10px 0;border-bottom:2px solid transparent}.main-nav>a.active,.main-nav>a:not(.nav-contact):hover{border-color:var(--orange)}.main-nav .nav-contact{padding:11px 16px;background:var(--navy);color:#fff;border-radius:7px}.main-nav .nav-contact:hover{background:var(--blue)}.menu-toggle{display:none;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--navy);padding:9px 12px;font:inherit;font-size:13px;font-weight:700}.hero{padding:76px 0 82px;background:linear-gradient(120deg,#D9D9F2,#D9D9F2)}.hero-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(270px,.7fr);gap:68px;align-items:center}.eyebrow{margin:0 0 20px;color:var(--blue);font-size:11px;font-weight:800;letter-spacing:2.2px}.hero h1{max-width:800px;margin:0 0 22px;color:var(--navy);font-size:clamp(40px,5.1vw,68px);line-height:1.08;letter-spacing:-2.5px;font-weight:800}.hero h1 span,.section h2 span,.cta-section h2 span{color:var(--blue)}.hero-lead{max-width:700px;margin:0;color:#435d6d;font-size:17px;line-height:1.85}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 18px;border:1px solid transparent;border-radius:8px;font-size:13px;font-weight:800;transition:transform .15s ease,background .15s ease}.button:hover{transform:translateY(-1px)}.button-primary{background:var(--orange);color:var(--navy)}.button-primary:hover{background:#FFB933}.button-ghost{border-color:#c9d7df;color:var(--navy);background:rgba(255,255,255,.55)}.button-ghost:hover{background:#fff}.hero-panel{padding:32px;background:var(--navy);color:#fff;border-radius:18px;box-shadow:0 18px 45px #00015E17}.panel-mark{font-size:68px;font-weight:800;line-height:1;color:#fff}.panel-mark span{color:var(--orange)}.panel-kicker{margin:18px 0 14px;font-size:12px;font-weight:700;letter-spacing:1px}.panel-line{height:2px;margin-bottom:12px;background:linear-gradient(90deg,var(--orange),transparent)}.panel-item{display:flex;gap:15px;align-items:center;padding:11px 0;border-bottom:1px solid #ffffff25;font-size:14px}.panel-item:last-child{border-bottom:0}.panel-item b{color:var(--orange);font-size:13px}.section{padding:78px 0}.intro-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:center}.section h2,.cta-section h2{margin:0;color:var(--navy);font-size:clamp(32px,3.5vw,47px);line-height:1.16;letter-spacing:-1.2px}.section-copy{margin:0 0 18px;color:var(--muted);line-height:1.9}.text-link{display:inline-flex;align-items:center;gap:7px;color:var(--navy);font-size:13px;font-weight:800}.text-link span{color:var(--orange)}.services-section{background:var(--pale)}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:30px}.section-heading .eyebrow{margin-bottom:15px}.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.service-card{min-height:285px;padding:27px;background:#fff;border:1px solid var(--line);border-radius:14px}.service-card-featured{background:var(--navy);color:#fff;border-color:var(--navy)}.service-number{color:var(--blue);font-size:12px;font-weight:800;letter-spacing:1px}.service-card-featured .service-number{color:var(--orange)}.service-icon{margin:19px 0 12px;color:var(--orange);font-size:27px}.service-card h3{margin:0 0 10px;color:var(--navy);font-size:21px;line-height:1.3}.service-card-featured h3{color:#fff}.service-card p{margin:0 0 19px;color:var(--muted);font-size:14px;line-height:1.8}.service-card-featured p{color:#D9D9F2}.service-card>a{font-size:12px;font-weight:800;color:var(--navy)}.service-card-featured>a{color:var(--orange)}.cta-section{padding:58px 0;background:var(--navy);color:#fff}.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}.cta-section .eyebrow{color:#D9D9F2}.cta-section h2{color:#fff}.button-light{background:#fff;color:var(--navy)}.button-light:hover{background:#f2f6f8}.site-footer{padding:42px 0 18px;background:#061f31;color:#c4d3dc}.footer-top{display:grid;grid-template-columns:1.3fr .7fr 1fr;gap:50px;padding-bottom:34px}.brand-footer{color:#fff}.footer-summary{max-width:330px;color:#9fb4c0;font-size:13px;line-height:1.8}.footer-label{margin:0 0 13px;color:var(--orange);font-size:10px;font-weight:800;letter-spacing:1.8px}.footer-top>div:not(:first-child)>a{display:block;margin:8px 0;font-size:12px}.footer-note,.footer-bottom{color:#9fb4c0;font-size:11px}.footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:16px;border-top:1px solid #ffffff1a}.menu-toggle span{margin-left:6px}@media(max-width:850px){.container{width:min(var(--container),calc(100% - 36px))}.hero-grid{grid-template-columns:minmax(0,1.2fr) minmax(230px,.8fr);gap:30px}.hero h1{font-size:clamp(38px,6vw,54px)}.main-nav{gap:15px}.intro-grid{gap:35px}.service-card{padding:22px}.footer-top{gap:25px}}@media(max-width:680px){.site-header{height:72px}.brand-symbol{width:39px;height:39px;font-size:24px}.brand-name{font-size:12px}.brand-name small{font-size:7px}.menu-toggle{display:block}.main-nav{display:none;position:absolute;top:71px;left:0;right:0;padding:15px 20px 20px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 15px 25px #00015E12;align-items:stretch;gap:0}.main-nav.is-open{display:flex;flex-direction:column}.main-nav>a:not(.nav-contact){padding:12px 4px;border-bottom:1px solid var(--line)}.main-nav .nav-contact{margin-top:12px;text-align:center}.hero{padding:54px 0}.hero-grid,.intro-grid{grid-template-columns:1fr;gap:35px}.hero h1{font-size:clamp(38px,10vw,54px);letter-spacing:-1.5px}.hero-lead{font-size:16px}.hero-panel{padding:26px}.section{padding:58px 0}.section-heading{align-items:flex-start;flex-direction:column;gap:15px}.service-grid{grid-template-columns:1fr}.service-card{min-height:0}.cta-inner{align-items:flex-start;flex-direction:column}.footer-top{grid-template-columns:1fr 1fr;gap:28px}.footer-top>div:first-child{grid-column:1/-1}}@media(max-width:420px){.container{width:calc(100% - 30px)}.hero-actions{flex-direction:column;align-items:stretch}.button{width:100%}.footer-top{grid-template-columns:1fr}.footer-top>div:first-child{grid-column:auto}.footer-bottom{flex-direction:column;gap:5px}}


/* Shared utility bar and full-width page title hero */
.utility-bar{position:relative;z-index:21;background:var(--navy);color:#d4e2e9;font-size:11px;line-height:1.4}
.utility-inner{min-height:34px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:7px}
.utility-links{display:flex;align-items:center;gap:10px;color:#d4e2e9}
.utility-links a{color:#fff}.utility-links a:hover{color:var(--orange)}
.site-header{height:80px;position:relative;z-index:20}
.page-hero{width:100%;padding:52px 0 56px;background:#D9D9F2;border-bottom:1px solid var(--line)}
.page-hero-inner{max-width:var(--container)}
.page-hero .eyebrow{margin-bottom:12px}
.page-hero h1{max-width:900px;margin:0;color:var(--navy);font-size:clamp(34px,4.4vw,56px);line-height:1.12;letter-spacing:-1.8px;font-weight:800}
.page-hero h1 span{color:var(--blue)}
.page-hero-lead{max-width:820px;margin:16px 0 0;color:#435d6d;font-size:16px;line-height:1.8}
.page-hero-breadcrumb{margin:15px 0 0;color:var(--muted);font-size:12px}
.page-hero-breadcrumb a{color:var(--navy);font-weight:700}
/* Inner content starts below the shared banner */
.inner-page>.inner-hero{display:none}
@media(max-width:680px){.utility-inner{align-items:flex-start;flex-direction:column;gap:4px;padding-block:8px}.utility-links{flex-wrap:wrap;gap:6px 9px}.site-header{height:72px}.page-hero{padding:38px 0 42px}.page-hero h1{font-size:clamp(32px,9vw,44px);letter-spacing:-1px}.page-hero-lead{font-size:15px}}


/* Dothouse palette consistency override — 18 October 2026 */
:root{--navy:#00015E;--blue:#00015E;--orange:#FFA800;--pale:#D9D9F2}
.hero,.page-hero,.hero-showcase{background:#D9D9F2 !important}
.hero-orb-two{background:#00015E12 !important}
.hero-showcase .hero h1 span,.hero h1 span,.section h2 span,.cta-section h2 span,.eyebrow{color:#00015E}
.main-nav .nav-contact,.button-primary{background:#00015E;color:#fff}
.main-nav .nav-contact:hover{background:#16167A}
.button-primary:hover{background:#FFB933;color:#00015E}
.service-card-featured{background:#00015E;color:#fff}
.process-track article{background:#D9D9F2}


/* Dothouse brand harmony patch — 18 October 2026
   Append-only overrides: preserve existing layout, motion and responsive rules. */
:root {
  --navy: #00015E; --blue: #00015E; --orange: #FFA800; --pale: #D9D9F2;
  --ink: #00015E; --muted: #62677D; --line: #e0e0f0; --white: #ffffff;
  --dothouse-orange-light: #FFB52E; --dothouse-deep-navy: #000044;
}
.hero, .hero-showcase, .page-hero { background: #D9D9F2 !important; }
.hero-orb-one, .hero-orb-two, .hero-orb, .hero-showcase::before, .hero-showcase::after { background-color: rgba(0, 1, 94, .06); }
.hero-showcase h1, .hero h1 { color: var(--navy); }
.hero-showcase h1 span, .hero h1 span { color: var(--dothouse-orange-light) !important; }
.section h2 span { color: var(--dothouse-orange-light); }
.eyebrow, .page-hero .eyebrow { color: var(--navy); }
/* Animated hero visual: navy, pale lavender-blue, orange and white only. */
.hero-visual, .visual-window, .window-top, .window-canvas, .canvas-copy, .float-card { border-color: rgba(0, 1, 94, .12); }
.hero-visual .visual-window, .visual-window { background: #ffffff; box-shadow: 0 18px 45px rgba(0, 1, 94, .10); }
.window-top { background: #ffffff; }
.window-top span { background: #D9D9F2; }
.window-canvas { background: linear-gradient(135deg, #ffffff 0%, #D9D9F2 100%); }
.canvas-copy, .canvas-copy strong, .canvas-copy em { color: var(--navy); }
.canvas-copy em { font-style: normal; color: var(--dothouse-orange-light); }
.canvas-tag, .canvas-copy small { color: var(--navy); }
.canvas-line { background: linear-gradient(90deg, var(--orange), var(--dothouse-orange-light)); }
.canvas-shape.shape-large { background: var(--navy); }
.canvas-shape.shape-small { background: var(--orange); }
.canvas-ring { border-color: #ffffff; }
.float-card { background: #ffffff; color: var(--navy); }
.float-icon { background: #fff1d8; color: var(--navy); }
.float-check { background: #D9D9F2; color: var(--navy); }
.visual-caption { color: #62677D; }
/* Harmonise lower homepage sections and remove teal-toned footer. */
.process-section { background: #ffffff; }
.process-track article { background: #D9D9F2; border-color: rgba(0, 1, 94, .10); }
.process-track article > span, .process-track article span:first-child { color: var(--orange); }
.cta-section { background: var(--navy); color: #ffffff; }
.cta-section .eyebrow, .cta-section .eyebrow-light { color: #D9D9F2; }
.cta-section h2 { color: #ffffff; }
.cta-section h2 span { color: var(--dothouse-orange-light); }
.site-footer { background: var(--dothouse-deep-navy) !important; color: #D9D9F2; }
.footer-summary, .footer-note, .footer-bottom { color: #D9D9F2; }
.footer-label { color: var(--orange); }
.button-primary { background: var(--orange); color: var(--navy); }
.button-primary:hover { background: var(--dothouse-orange-light); color: var(--navy); }
.main-nav .nav-contact { background: var(--navy); color: #ffffff; }
.service-card-featured { background: var(--navy); border-color: var(--navy); }
.service-card-featured .service-number, .service-card-featured .service-icon, .service-card-featured > a { color: var(--orange); }
@media (prefers-reduced-motion: reduce) { .hero-visual *, .visual-window *, .float-card { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* Targeted fix: hide visible sequence labels in homepage cards */
.service-card .service-number,
.service-card-featured .service-number,
.process-track article > span:first-child,
.process-track article span:first-child,
.process-track article > .step-number,
.process-track article > .process-number,
.process-track article .number,
.process-section .process-track article > span:first-child,
.how-we-work .process-track article > span:first-child {
  display: none !important;
  visibility: hidden !important;
}

/* Keep the understated orange accent; don't generate a replacement number. */
.process-track article::before,
.service-card::before {
  content: none !important;
}


/* Dothouse How We Work refresh v3 — white canvas, navy/orange accents only */
:root {
  --dothouse-navy: #00015E;
  --dothouse-orange: #FFA800;
  --dothouse-pale: #D9D9F2;
}

/* The entire process roll is white: remove inherited teal/pale-blue fills. */
.process-section,
.how-we-work,
.how-we-work-section,
section.process-section,
.process-section .container,
.process-section .section-inner {
  background: #FFFFFF !important;
  background-image: none !important;
}

/* Four cards: clean, bright, tactile; numbering stays hidden. */
.process-track {
  display: grid;
  gap: 20px;
  align-items: stretch;
}
.process-track article,
.process-section .process-track article,
.how-we-work .process-track article {
  position: relative;
  overflow: hidden;
  min-height: 205px;
  padding: 30px 26px 26px !important;
  background: #FFFFFF !important;
  color: var(--dothouse-navy) !important;
  border: 1px solid rgba(0, 1, 94, .12) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 24px rgba(0, 1, 94, .045) !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.process-track article:hover,
.process-section .process-track article:hover,
.how-we-work .process-track article:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 168, 0, .65) !important;
  box-shadow: 0 18px 34px rgba(0, 1, 94, .10) !important;
}

/* Graphic motif replaces the sequence numbers: a short orange stroke and a soft corner orb. */
.process-track article::before {
  content: "" !important;
  display: block !important;
  width: 42px;
  height: 4px;
  margin: 0 0 24px;
  border-radius: 8px;
  background: var(--dothouse-orange) !important;
  visibility: visible !important;
}
.process-track article::after {
  content: "";
  position: absolute;
  width: 86px;
  height: 86px;
  top: -43px;
  right: -38px;
  border: 1px solid rgba(0, 1, 94, .10);
  border-radius: 50%;
  background: rgba(217, 217, 242, .35);
  pointer-events: none;
}
.process-track article > span:first-child,
.process-track article .step-number,
.process-track article .process-number,
.process-track article .number {
  display: none !important;
  visibility: hidden !important;
}
.process-track article h3,
.process-track article h4 {
  color: var(--dothouse-navy) !important;
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 22px;
  line-height: 1.25;
}
.process-track article p {
  color: #62677D !important;
  margin-bottom: 0;
  line-height: 1.8;
}

/* Remove any teal-like backgrounds from this area and keep section spacing intentional. */
.process-section .process-track,
.process-section .process-track article * {
  background-image: none;
}
.process-section {
  padding-top: 78px !important;
  padding-bottom: 78px !important;
}
@media (max-width: 680px) {
  .process-section { padding-top: 56px !important; padding-bottom: 56px !important; }
  .process-track article { min-height: 0; padding: 25px 22px 23px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .process-track article { transition: none !important; }
  .process-track article:hover { transform: none !important; }
}