/* Silver Lining Cloud Solutions: shared stylesheet.
   Layout: left-aligned editorial column; navy panels carry a silver top edge (the "silver lining"); quiet cards. */
:root{
  /* Brand palette carried over from the current site */
  --bg:#f1f2f1; --surface:#ffffff; --ink:#041e42; --muted:#66677d; --line:#dcdfe4;
  --accent:#1d7df6; --accent-hover:#096ce9; --accent-ink:#ffffff; --accent-soft:#e7f0fe;
  --panel:#041e42; --panel-ink:#ffffff; --panel-muted:#b4bfd3; --green:#31f48e; --sky:#2fb8f4;
  --header-bg:#1d7df6; --header-ink:#ffffff;
  --display:"canada-type-gibson","Figtree","Helvetica Neue",Arial,sans-serif;
  --body:"canada-type-gibson","Figtree","Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#07142a; --surface:#0d1f3d; --ink:#eaf0f8; --muted:#a3adc2; --line:#1e3357;
  --accent:#4d9bff; --accent-hover:#78b3ff; --accent-ink:#041e42; --accent-soft:#12305c;
  --panel:#041e42; --panel-ink:#ffffff; --panel-muted:#b4bfd3; --green:#31f48e; --sky:#2fb8f4;
  --header-bg:#0b5fd0; --header-ink:#ffffff; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#07142a; --surface:#0d1f3d; --ink:#eaf0f8; --muted:#a3adc2; --line:#1e3357;
  --accent:#4d9bff; --accent-hover:#78b3ff; --accent-ink:#041e42; --accent-soft:#12305c;
  --panel:#041e42; --panel-ink:#ffffff; --panel-muted:#b4bfd3; --green:#31f48e; --sky:#2fb8f4;
  --header-bg:#0b5fd0; --header-ink:#ffffff; color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6}
img{max-width:100%}
a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--surface);padding:8px 12px;border-radius:6px;z-index:50}
.skip:focus{left:16px}
.wrap{max-width:1160px;margin-inline:auto;padding-inline:24px}
@media (max-width:480px){.wrap{padding-inline:16px}}
h1,h2,h3,h4{font-family:var(--display);text-wrap:balance;margin:0;letter-spacing:-0.01em}
p{margin:0}
.eyebrow{font-family:var(--body);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:600;margin:0}
.muted{color:var(--muted)}
.prose a,.lede a,.why-list a{color:var(--accent);text-underline-offset:3px}

/* preview note (preview build only) */
.note{background:var(--green);color:#041e42;color:var(--ink);font-size:14px;padding-block:8px}
.note .wrap{display:flex;gap:12px;flex-wrap:wrap;justify-content:space-between}

/* header */
header.site{background:var(--header-bg);color:var(--header-ink);position:sticky;top:env(safe-area-inset-top,0px);z-index:10}
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:68px}
.brand{display:flex;flex-direction:column;gap:6px;text-decoration:none;line-height:1.1;color:var(--header-ink)}
.brand svg{width:190px;height:auto;display:block}
@media (max-width:480px){.brand svg{width:160px}}
.brand b{font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.brand small{font-family:var(--body);font-size:11px;color:rgba(255,255,255,.78);letter-spacing:.12em;text-transform:uppercase}
nav.main{display:flex;gap:4px;align-items:center}
nav.main > a,.dd > button{font:600 15px/1 var(--body);color:var(--header-ink);background:none;border:0;padding:10px 12px;border-radius:6px;cursor:pointer;text-decoration:none}
nav.main > a:hover,.dd > button:hover,nav.main > a[aria-current="page"]{background:rgba(255,255,255,.16)}
.dd{position:relative}
.dd > button::after{content:"";display:inline-block;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);margin-left:8px}
.menu{position:absolute;top:100%;left:0;min-width:320px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:8px;display:none;box-shadow:0 12px 32px rgba(8,20,40,.12)}
.dd:hover .menu,.dd:focus-within .menu{display:grid}
.menu a{padding:8px 12px;border-radius:6px;text-decoration:none;font-size:15px}
.menu a:hover,.menu a[aria-current="page"]{background:var(--accent-soft)}
.menu .all{border-top:1px solid var(--line);margin-top:4px;padding-top:10px;color:var(--accent);font-weight:600}
nav.main .cta{background:#ffffff;color:#041e42;margin-left:8px}
nav.main .cta:hover,nav.main .cta[aria-current="page"]{background:var(--green);color:#041e42}
details.mobile{display:none}
@media (max-width:1020px){
  nav.main{display:none}
  details.mobile{display:block}
  details.mobile summary{list-style:none;font:600 15px var(--body);padding:10px 14px;border:1px solid rgba(255,255,255,.6);color:var(--header-ink);border-radius:6px;cursor:pointer}
  details.mobile summary::-webkit-details-marker{display:none}
  details.mobile[open] .sheet{display:grid}
  .sheet{display:none;position:absolute;left:0;right:0;top:100%;background:var(--surface);color:var(--ink);border-bottom:1px solid var(--line);padding:12px 16px 20px;gap:2px;max-height:75vh;overflow:auto}
  .sheet h4{font-family:var(--body);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:14px 0 4px;font-weight:500}
  .sheet a{text-decoration:none;padding:6px 0}
}

/* buttons */
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.btn{display:inline-flex;align-items:center;gap:10px;font:600 16px/1.2 var(--body);padding:14px 20px;border-radius:8px;text-decoration:none;border:1px solid transparent;cursor:pointer}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{background:var(--accent-hover)}
.btn.ghost{border-color:var(--line);color:var(--ink);background:var(--surface)}
.btn.ghost:hover{border-color:var(--accent)}

/* home hero: Perth photo with navy card (as on the current site) */
.photo-hero{position:relative;background:var(--panel);overflow:hidden}
.photo-hero picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.photo-hero .wrap{position:relative;padding-block:72px;min-height:clamp(480px,48vw,620px);display:flex;align-items:center}
.hero-card{background:var(--panel);color:var(--panel-ink);max-width:640px;padding:48px 44px;position:relative}
.hero-card .eyebrow{color:var(--green)}
.hero-card h1{font-size:clamp(32px,4.2vw,52px);line-height:1.08;font-weight:600;margin-top:16px}
.hero-card .sub{font-size:18.5px;color:var(--panel-muted);margin-top:20px;max-width:52ch}
.hero-card .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.hero-card .btn.ghost:hover{border-color:var(--green)}
.hero-card .meta{color:var(--panel-muted)}
.hero-card .meta span::before{background:var(--green)}
@media (max-width:760px){
  .photo-hero picture img{position:static;height:auto;aspect-ratio:16/9}
  .photo-hero .wrap{padding:0;min-height:0;display:block}
  .hero-card{max-width:none;padding:32px 16px 40px}
}
/* home hero */
.hero{padding-block:72px 64px}
.hero-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:start}
.hero-grid > div{min-width:0}
.hero h1{font-size:clamp(34px,4.6vw,56px);line-height:1.06;font-weight:600;margin-top:16px}
.hero .sub{font-size:19px;color:var(--muted);max-width:56ch;margin-top:22px}
.meta{display:flex;gap:10px 22px;flex-wrap:wrap;margin-top:36px;font-family:var(--body);font-size:12.5px;color:var(--muted);letter-spacing:.03em}
.meta span{display:inline-flex;gap:8px;align-items:center}
.meta span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}

.lined{position:relative;overflow:hidden}
.lined::before{content:"";position:absolute;top:0;right:0;width:72px;height:8px;background:var(--green)}
.panel{background:var(--panel);color:var(--panel-ink);border-radius:14px;padding:28px 28px 22px}
.panel .eyebrow{color:var(--green)}
.panel h2{font-size:22px;margin-top:10px;font-weight:600}
.work{list-style:none;padding:0;margin:18px 0 0;display:grid}
.work li{border-top:1px solid rgba(255,255,255,.12)}
.work a{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:16px 0;text-decoration:none}
.work a:hover .n{text-decoration:underline;text-underline-offset:3px}
.work .n{font-weight:600}
.work .s{font-family:var(--body);font-size:11.5px;color:var(--panel-muted);letter-spacing:.05em;text-transform:uppercase;align-self:center}
.work .o{grid-column:1 / -1;color:var(--panel-muted);font-size:15px;line-height:1.5}
.panel .all{display:inline-block;margin-top:14px;font-size:15px;color:var(--panel-ink);text-underline-offset:3px}

/* inner page hero */
.page-hero{padding-block:56px 52px;background:var(--panel);color:var(--panel-ink);position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;top:0;right:0;width:120px;height:10px;background:var(--green)}
.page-hero .eyebrow{color:var(--green)}
.page-hero .crumbs{color:var(--panel-muted)}
.page-hero .btn.primary{background:var(--accent);color:#fff}
.crumbs{font-size:14px;color:var(--muted);margin-bottom:22px;display:flex;flex-wrap:wrap;gap:6px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.crumbs span[aria-hidden]{opacity:.6}
.page-hero h1{font-size:clamp(32px,4.2vw,50px);line-height:1.08;font-weight:600;margin-top:14px;max-width:22ch}
.page-hero .sub{font-size:19px;color:var(--panel-muted);max-width:62ch;margin-top:20px}

/* sections */
section{padding-block:72px}
.tight-top{padding-top:0}
.split{display:grid;grid-template-columns:260px 1fr;gap:48px}
.split > div{min-width:0}
.lede p+p{margin-top:18px}
.lede p{max-width:68ch}
.lede p:first-child{font-size:20px;line-height:1.55}
.head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:32px}
.head > div{min-width:0}
.head h2{font-size:clamp(28px,3.2vw,38px);font-weight:600;margin-top:10px}
.head p{color:var(--muted);max-width:52ch}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.card{background:var(--surface);padding:28px 26px 26px;display:flex;flex-direction:column;gap:10px;text-decoration:none;min-width:0}
a.card:hover{background:var(--accent-soft)}
.card h3{font-size:19px;font-weight:600}
.card p{color:var(--muted);font-size:16px}
.card .eyebrow{color:var(--accent);font-size:13px}
.card .go{margin-top:auto;padding-top:8px;font-weight:600;font-size:15px;color:var(--accent)}
.cards.two{grid-template-columns:repeat(2,1fr)}
/* 5 and 7 cards: balanced rows (3+2, 3+2+2) on a 6-column grid */
.cards.n5,.cards.n7{grid-template-columns:repeat(6,1fr)}
.cards.n5 > *,.cards.n7 > *{grid-column:span 2}
.cards.n5 > :nth-child(n+4),.cards.n7 > :nth-child(n+4){grid-column:span 3}
.cards.four{grid-template-columns:repeat(2,1fr)}

.why-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.why-list article{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:26px;min-width:0}
.why-list h3{font-size:18px;font-weight:600}
.why-list p{color:var(--muted);font-size:16px;margin-top:10px}

.why5{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.why5 article{grid-column:span 2;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:26px;min-width:0}
.why5 article:nth-child(4),.why5 article:nth-child(5){grid-column:span 3}
.why5 h3{font-size:18px;font-weight:600}
.why5 p{color:var(--muted);font-size:16px;margin-top:10px}

.clients{border-block:1px solid var(--line);padding-block:28px}
.clients .wrap{display:grid;grid-template-columns:260px 1fr;gap:48px;align-items:center}
.clients ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 36px;font-family:var(--display);font-weight:600;font-size:18px}

.cf-box{background:var(--accent-soft);border-radius:14px;padding:40px;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:start}
.cf-main{min-width:0}
.cf-main h2{font-size:clamp(26px,3vw,34px);font-weight:600;margin-top:10px}
.cf-main p{margin-top:14px;max-width:60ch}
.cf-main p + p{color:var(--muted)}
.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:12px}
.steps li{counter-increment:s;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px 20px 18px 60px;position:relative}
.steps li::before{content:counter(s);position:absolute;left:20px;top:17px;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font:600 13px/26px var(--body);text-align:center}
.steps h3{font-size:17px;font-weight:600}
.steps p{color:var(--muted);font-size:15.5px;margin-top:4px}

.claude-band .box{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:32px;display:grid;grid-template-columns:1fr auto;gap:24px 40px;align-items:center}
.claude-band .box > div{min-width:0}
.claude-band h2{font-size:26px;font-weight:600;margin-top:8px}
.claude-band p{color:var(--muted);max-width:64ch;margin-top:10px}

.band{background:var(--panel);color:var(--panel-ink);padding-block:64px}
.band .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.band h2{font-size:clamp(26px,3vw,34px);font-weight:600;max-width:26ch}
.band .eyebrow{color:var(--green)}
.band .btn.primary{background:#ffffff;color:#041e42}
.band .btn.primary:hover{background:var(--green)}

.note-line{margin-top:24px;color:var(--muted);font-size:15.5px}

/* case study */
.glance{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.glance dl{margin:0;display:grid;grid-template-columns:minmax(120px,200px) 1fr}
.glance dt,.glance dd{margin:0;padding:14px 20px;border-top:1px solid var(--line)}
.glance dt{font-family:var(--body);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-top:17px}
.glance dl > :nth-child(1),.glance dl > :nth-child(2){border-top:0}
.story{display:grid;grid-template-columns:260px 1fr;gap:48px}
.story > div{min-width:0}
.story + .story{margin-top:56px}
.story h2{font-size:24px;font-weight:600}
.prose p{max-width:68ch}
.prose p + p,.prose p + ul,.prose ul + p{margin-top:16px}
.prose ul{margin:16px 0 0;padding-left:20px;display:grid;gap:8px;max-width:68ch}
.prose li::marker{color:var(--accent)}
blockquote{margin:40px 0 0;padding:28px 32px;border-radius:12px;background:var(--accent-soft);font-family:var(--display);font-size:20px;line-height:1.45;max-width:760px}
blockquote footer{font-family:var(--body);font-size:15px;color:var(--muted);margin-top:14px}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:start}
.contact-grid > *{min-width:0}
form.lead{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:32px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
form.lead .full{grid-column:1 / -1}
form.lead label{display:grid;gap:6px;font-weight:600;font-size:15px}
form.lead input,form.lead textarea{font:400 16px var(--body);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:12px 14px;width:100%}
form.lead textarea{min-height:150px;resize:vertical}
form.lead .hp{position:absolute;left:-9999px}
form.lead .fine{font-size:14px;color:var(--muted)}
.details{background:var(--panel);color:var(--panel-ink);border-radius:14px;padding:28px}
.details h2{font-size:20px;font-weight:600}
.details dl{margin:18px 0 0;display:grid;gap:14px}
.details dt{font-family:var(--body);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--green);font-weight:600}
.details dd{margin:4px 0 0;user-select:all}
.next{margin-top:28px}
.next h2{font-size:20px;font-weight:600}
.next ol{margin:14px 0 0;padding-left:22px;display:grid;gap:12px}
.next li::marker{font-family:var(--body);color:var(--accent)}
.next b{display:block}
.next span{color:var(--muted)}

/* footer */
footer.site{padding-block:56px 32px;font-size:15px;background:var(--panel);color:var(--panel-ink)}
.cols{display:grid;grid-template-columns:repeat(4,1fr) 1.2fr;gap:32px}
.cols > div{min-width:0}
.cols h4{font-family:var(--body);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin:0 0 12px;font-weight:500}
.cols ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.cols a{text-decoration:none}
.cols a:hover{color:var(--green)}
.contact p{margin-bottom:6px}
.foot-logo{margin-top:40px;color:var(--sky)}
.foot-logo svg{width:200px;height:auto;display:block}
.legal{margin-top:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--panel-muted);font-size:13.5px}
.legal .geo{font-family:var(--body);letter-spacing:.03em}

@media (max-width:1020px){
  .hero-grid,.split,.clients .wrap,.story,.contact-grid{grid-template-columns:1fr;gap:28px}
  .cards,.cards.n5,.cards.n7{grid-template-columns:repeat(2,1fr)}
  .cards.n5 > *,.cards.n7 > *,.cards.n5 > :nth-child(n+4),.cards.n7 > :nth-child(n+4){grid-column:span 1}
  .cards.n5 > :last-child,.cards.n7 > :last-child{grid-column:span 2}
  .why-list{grid-template-columns:1fr 1fr}
  .why5{grid-template-columns:1fr 1fr}
  .why5 article,.why5 article:nth-child(4){grid-column:span 1}
  .why5 article:nth-child(5){grid-column:span 2}
  .cols{grid-template-columns:repeat(2,1fr)}
  .claude-band .box,.cf-box{grid-template-columns:1fr}
  .cf-box{padding:28px}
}
@media (max-width:640px){
  .hero{padding-block:44px 40px}
  .page-hero{padding-block:40px 36px}
  section{padding-block:52px}
  .cards,.cards.two,.cards.n5,.cards.n7,.why-list,.why5{grid-template-columns:1fr}
  .cards.n5 > :last-child,.cards.n7 > :last-child{grid-column:span 1}
  .why5 article:nth-child(5){grid-column:span 1}
  .cols{grid-template-columns:1fr}
  form.lead{grid-template-columns:1fr;padding:22px}
  .glance dl{grid-template-columns:1fr}
  .glance dd{border-top:0;padding-top:0}
  .cf-box{padding:22px 18px}
  blockquote{padding:22px;font-size:18px}
}
@media (prefers-reduced-motion:no-preference){
  .btn,.card,.menu a{transition:background-color .15s ease,filter .15s ease,border-color .15s ease}
}

/* Brand accents carried from the current site: coloured top edges on content tiles */
.why-list article,.why5 article{border-top:4px solid var(--accent)}
.why5 article:nth-child(even){border-top-color:var(--sky)}
.steps li{border-left:4px solid var(--accent)}
.glance{border-top:4px solid var(--accent)}
form.lead{border-top:4px solid var(--accent)}
blockquote{border-left:4px solid var(--green)}
.card h3{color:var(--ink)}
a.card:hover h3{color:var(--accent)}